/* --- THE STACK ENGINE --- */
.hero-animation-wrapper {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: -80px;
  left: 0;
  overflow: clip;
  z-index: 0;
  pointer-events: none;
  perspective: 10000px;
}

.server-stack-core {
  position: absolute;
  top: -80px;
  right: 0%;
  width: 1200px;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(55deg) rotateZ(333deg);
}

@media (max-width: 900px) {
  .server-stack-core {
    top: 0;
    right: -50%;
    transform: rotateX(55deg) rotateZ(333deg) scale(0.7);
  }
}

/* --- BASE LAYER STYLE --- */
.stack-layer {
  position: absolute;
  width: 100%;
  height: auto;
  transform-origin: center center;
  backface-visibility: hidden;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.5));

  /* Attaches the scroll-driven timeline link to the layout */
  animation-timeline: scroll(), auto;
  animation-timing-function: linear, ease-in-out;
  animation-fill-mode: both, none;
  animation-duration: auto, 12s;
  animation-iteration-count: 1, infinite;
  animation-direction: normal, alternate;
}

/* --- SVG INTERNAL ANIMATION CONFIGURATION --- */
.stack-layer svg path {
  /* Establish the circuit tracing baseline line definitions */
  stroke: rgba(0, 121, 250, 0.2);
  stroke-width: 0.5px;
  stroke-linecap: round;
  stroke-dasharray: 800;
  /* Approximate path trace boundary perimeter */
  animation: circuitTraceLoop 6s linear infinite;
}

/* --- INDIVIDUAL LAYER PARALLAX & CONTINUOUS TRACE TIMINGS --- */

/* Layer 1 (Bottom / Foundation) */
.layer-1 {
  z-index: 1;
  transform: translateY(450px) translateZ(-60px) scale(0.85);
  fill: #0079fa;
  opacity: 0.03;
  animation-name: scrollParallaxLayer1, breatheLayer1;
}

.layer-1 svg path {
  stroke: rgba(0, 121, 250, 0.1);
  animation-duration: 7s;
}

/* Layer 2 */
.layer-2 {
  z-index: 2;
  transform: translateY(300px) translateZ(-30px) scale(0.9);
  fill: #0079fa;
  opacity: 0.05;
  animation-name: scrollParallaxLayer2, breatheLayer2;
}

.layer-2 svg path {
  animation-duration: 5.5s;
  animation-delay: -1.5s;
  /* Staggers code execution cycles */
}

/* Layer 3 */
.layer-3 {
  z-index: 3;
  transform: translateY(150px) translateZ(0px) scale(0.95);
  fill: #0079fa;
  opacity: 0.07;
  animation-name: scrollParallaxLayer3, breatheLayer3;
}

.layer-3 svg path {
  animation-duration: 4.5s;
  animation-delay: -3s;
}

/* Layer 4 (Top / Production Active) */
.layer-4 {
  z-index: 4;
  transform: translateY(0px) translateZ(30px) scale(1);
  fill: #0079fa;
  opacity: 0.09;
  mix-blend-mode: normal;
  filter: drop-shadow(0 0 15px rgba(0, 121, 250, 0.1));
  animation-name: scrollParallaxLayer4, breatheLayer4;
}

.layer-4 svg path {
  stroke: rgb(0 121 250);
  /* Bright core execution path flare */
  animation-duration: 3.2s;
  animation-delay: -0.5s;
}

.stack-layer svg {
  width: 100%;
  height: auto;
  display: block;
}

/* --- SCROLL TIMELINE INTERPOLATIONS (Parallax Breakaway) --- */
@keyframes scrollParallaxLayer1 {
  to {
    transform: translateY(500px) translateZ(-100px) scale(0.82) rotateY(-5deg) rotateX(5deg);
    opacity: 0.01;
  }
}

@keyframes scrollParallaxLayer2 {
  to {
    transform: translateY(350px) translateZ(-40px) scale(0.88) rotateY(-2deg) rotateX(2deg);
    opacity: 0.02;
  }
}

@keyframes scrollParallaxLayer3 {
  to {
    transform: translateY(100px) translateZ(20px) scale(0.96) rotateY(2deg) rotateX(-2deg);
    opacity: 0.04;
  }
}

@keyframes scrollParallaxLayer4 {
  to {
    transform: translateY(-50px) translateZ(50px) scale(1.04) rotateY(5deg) rotateX(-5deg);
    opacity: 0.12;
  }
}

/* --- CONTINUOUS WIREFRAME TRACE ENGINE --- */
@keyframes circuitTraceLoop {
  0% {
    stroke-dashoffset: 800;
  }

  50% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: -800;
  }
}

/* --- AMBIENT BREATHING (TRANSLATE) --- */
@keyframes breatheLayer1 {
  0% {
    translate: 0 0;
  }

  100% {
    translate: 0 100px;
  }
}

@keyframes breatheLayer2 {
  0% {
    translate: 0 0;
  }

  100% {
    translate: 0 45px;
  }
}

@keyframes breatheLayer3 {
  0% {
    translate: 0 0;
  }

  100% {
    translate: 0 -15px;
  }
}

@keyframes breatheLayer4 {
  0% {
    translate: 0 0;
  }

  100% {
    translate: 0 -40px;
  }
}