/* Critical Inline Layout Framework according to docs/THEME-STANDARDS.md */
:root {
  --canvas-bg: #f4f7f6;
  --brand-primary: #144d4d;
  --brand-secondary: #2c5e7c;
}

body {
  margin: 0;
  background-color: var(--canvas-bg);
}

/* 3D Kinetic Logo Construction Container */
#axis-static-preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  background-color: var(--canvas-bg);
  transition: opacity 0.4s ease-in-out;
}

.organism-omni-container {
  position: relative;
  width: 120px;
  height: 120px;
  perspective: 600px;
}

/* Abstracting axis unification using pure hardware-accelerated CSS 3D matrix */
.axis-line {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 4px solid transparent;
  border-radius: 50%;
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  animation-iteration-count: infinite;
}

.axis-x {
  border-top-color: var(--brand-primary);
  transform: rotateX(0deg) rotateY(0deg);
  animation: rotateAxisX 2.5s infinite;
}

.axis-y {
  border-right-color: var(--brand-secondary);
  transform: rotateX(0deg) rotateY(0deg);
  animation: rotateAxisY 2.5s infinite;
}

.axis-z {
  border-bottom-color: var(--brand-primary);
  width: 60%;
  height: 60%;
  top: 20%;
  left: 20%;
  animation: rotateAxisZ 1.5s infinite linear;
}

@keyframes rotateAxisX {
  0% { transform: rotateX(0deg) rotateY(0deg) scale(0.8); opacity: 0.5; }
  50% { transform: rotateX(180deg) rotateY(360deg) scale(1.1); opacity: 1; border-color: var(--brand-secondary); }
  100% { transform: rotateX(360deg) rotateY(720deg) scale(0.8); opacity: 0.5; }
}

@keyframes rotateAxisY {
  0% { transform: rotateX(0deg) rotateY(180deg) scale(1.1); opacity: 1; }
  50% { transform: rotateX(360deg) rotateY(0deg) scale(0.8); opacity: 0.4; border-color: var(--brand-primary); }
  100% { transform: rotateX(720deg) rotateY(180deg) scale(1.1); opacity: 1; }
}

@keyframes rotateAxisZ {
  0% { transform: rotateZ(0deg); }
  100% { transform: rotateZ(-360deg); }
}

/* Hidden elements to prevent translation layout flickering during step zero */
.dynamic-progress-feedback {
  margin-top: 32px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--brand-secondary);
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.3s ease-in;
  text-align: center;
  max-width: 320px;
}

.dynamic-progress-feedback.active {
  opacity: 1;
}