/* Claude-inspired motion: enter once, then keep a small amount of ambient life. */
.hero::before {
  translate: var(--hero-bg-shift, 0px) 0;
}

.hero-copy {
  translate: 0 var(--hero-copy-shift, 0px);
}

.hero-stage {
  translate: 0 var(--hero-stage-shift, 0px);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * {
    animation: hero-rise 820ms cubic-bezier(.22, 1, .36, 1) both;
  }

  .hero-copy > :nth-child(1) { animation-delay: 60ms; }
  .hero-copy > :nth-child(2) { animation-delay: 120ms; }
  .hero-copy > :nth-child(3) { animation-delay: 200ms; }
  .hero-copy > :nth-child(4) { animation-delay: 260ms; }
  .hero-copy > :nth-child(5) { animation-delay: 320ms; }
  .hero-copy > :nth-child(6) { animation-delay: 380ms; }

  .hero-stage {
    animation: hero-stage-in 1050ms cubic-bezier(.22, 1, .36, 1) 260ms both;
  }

  .stage-card {
    transform: translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0);
    transition: transform 420ms cubic-bezier(.22, 1, .36, 1), box-shadow 420ms ease;
    animation: stage-float 7.2s ease-in-out infinite;
  }

  .stage-field { animation-delay: -1.8s; }
  .stage-files { animation-delay: -4.2s; }
  .stage-api { animation-delay: -3.1s; }
  .stage-loop { animation-delay: -5.4s; }

  .stage-core {
    --core-x: -50%;
    transform: translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0) translateX(var(--core-x));
    transition: transform 420ms cubic-bezier(.22, 1, .36, 1), box-shadow 420ms ease;
    animation: core-breathe 6.8s ease-in-out infinite;
  }

  .stage-dot,
  .status i,
  .scene-status i {
    animation: status-pulse 2400ms ease-in-out infinite;
  }

  .stage-lines i {
    transform-origin: left center;
    animation: line-scan 4.8s ease-in-out infinite;
  }

  .stage-lines i:nth-child(2) { animation-delay: -1.6s; }
  .stage-lines i:nth-child(3) { animation-delay: -3.2s; }

  .stage-stack i {
    animation: stack-shift 5.8s ease-in-out infinite;
  }

  .stage-stack i:nth-child(2) { animation-delay: -1.9s; }
  .stage-stack i:nth-child(3) { animation-delay: -3.8s; }

  .stage-api-lines span {
    animation: api-highlight 5.4s ease-in-out infinite;
  }

  .stage-api-lines span:nth-child(2) { animation-delay: -1.8s; }
  .stage-api-lines span:nth-child(3) { animation-delay: -3.6s; }

  .stage-loop-track i {
    transform-origin: left center;
    animation: loop-progress 4.6s ease-in-out infinite;
  }

  .stage-loop-track i:nth-child(2) { animation-delay: -1.1s; }
  .stage-loop-track i:nth-child(3) { animation-delay: -2.2s; }
  .stage-loop-track i:nth-child(4) { animation-delay: -3.3s; }

  .core-chain span {
    animation: chain-pulse 3.2s ease-in-out infinite;
  }

  .core-chain span:nth-child(2) { animation-delay: -1.1s; }
  .core-chain span:nth-child(3) { animation-delay: -2.2s; }
  .core-chain span:nth-child(4) { animation-delay: -3.3s; }
  .core-chain span:nth-child(5) { animation-delay: -4.4s; }

  .reveal {
    transform: translateY(26px);
    transition-duration: 820ms;
    transition-timing-function: cubic-bezier(.22, 1, .36, 1);
  }

  .service-item.is-visible .stream-card {
    animation: stream-enter 720ms cubic-bezier(.22, 1, .36, 1) both;
  }

  .service-item.is-visible .stream-card:nth-child(2) { animation-delay: 110ms; }
  .service-item.is-visible .stream-card:nth-child(3) { animation-delay: 220ms; }

  .service-item.is-visible .scene-fde-core {
    animation: card-settle 900ms cubic-bezier(.22, 1, .36, 1) 180ms both;
  }

  .service-item.is-visible .core-meter i {
    transform-origin: left center;
    animation: meter-charge 1300ms cubic-bezier(.22, 1, .36, 1) 360ms both;
  }

  .service-item.is-visible .browser-nav i {
    transform-origin: left center;
    animation: nav-draw 820ms cubic-bezier(.22, 1, .36, 1) both;
  }

  .service-item.is-visible .browser-nav i:nth-child(2) { animation-delay: 80ms; }
  .service-item.is-visible .browser-nav i:nth-child(3) { animation-delay: 160ms; }
  .service-item.is-visible .browser-nav i:nth-child(4) { animation-delay: 240ms; }
  .service-item.is-visible .browser-nav i:nth-child(5) { animation-delay: 320ms; }

  .service-item.is-visible .module-grid span,
  .service-item.is-visible .product-stack span {
    animation: module-enter 680ms cubic-bezier(.22, 1, .36, 1) both;
  }

  .service-item.is-visible .module-grid span:nth-child(2),
  .service-item.is-visible .product-stack span:nth-child(2) { animation-delay: 90ms; }
  .service-item.is-visible .module-grid span:nth-child(3),
  .service-item.is-visible .product-stack span:nth-child(3) { animation-delay: 180ms; }

  .service-item.is-visible .line-card {
    animation: line-card-enter 760ms cubic-bezier(.22, 1, .36, 1) both;
  }

  .service-item.is-visible .line-card:nth-child(2) { animation-delay: 80ms; }
  .service-item.is-visible .line-card:nth-child(3) { animation-delay: 160ms; }
  .service-item.is-visible .line-card:nth-child(4) { animation-delay: 240ms; }
  .service-item.is-visible .line-card:nth-child(5) { animation-delay: 320ms; }

  .service-item.is-visible .editor-lines i {
    transform-origin: left center;
    animation: code-type 760ms cubic-bezier(.22, 1, .36, 1) both;
  }

  .service-item.is-visible .editor-lines i:nth-child(2) { animation-delay: 90ms; }
  .service-item.is-visible .editor-lines i:nth-child(3) { animation-delay: 180ms; }
  .service-item.is-visible .editor-lines i:nth-child(4) { animation-delay: 270ms; }
  .service-item.is-visible .editor-lines i:nth-child(5) { animation-delay: 360ms; }
  .service-item.is-visible .editor-lines i:nth-child(6) { animation-delay: 450ms; }
  .service-item.is-visible .editor-lines i:nth-child(7) { animation-delay: 540ms; }
  .service-item.is-visible .editor-lines i:nth-child(8) { animation-delay: 630ms; }

  .product-line.is-visible .product-line-head {
    animation: product-head-in 700ms cubic-bezier(.22, 1, .36, 1) both;
  }

  .product-line.is-visible .product-scene {
    animation: product-scene-in 840ms cubic-bezier(.22, 1, .36, 1) 90ms both;
  }

  .product-count span {
    animation: count-lift 760ms cubic-bezier(.22, 1, .36, 1) both;
  }
}

@media (max-width: 720px) {
  .stage-card {
    animation: none;
    transform: none;
  }

  .stage-core {
    --core-x: 0%;
    animation: none;
    transform: none;
  }
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-stage-in {
  from {
    opacity: 0;
    transform: translateY(26px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes stage-float {
  0%,
  100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

@keyframes core-breathe {
  0%,
  100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

@keyframes status-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(255, 107, 64, .12);
  }
  50% {
    box-shadow: 0 0 0 9px rgba(255, 107, 64, 0);
  }
}

@keyframes line-scan {
  0%,
  100% {
    opacity: .45;
    transform: scaleX(.62);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes stack-shift {
  0%,
  100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

@keyframes api-highlight {
  0%,
  100% {
    color: var(--muted);
    background: var(--ivory);
  }
  45% {
    color: #fff;
    background: var(--ink);
  }
}

@keyframes loop-progress {
  0%,
  100% {
    opacity: .42;
    transform: scaleX(.64);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes chain-pulse {
  0%,
  100% {
    background: rgba(255, 255, 255, .16);
  }
  45% {
    background: var(--accent);
  }
}

@keyframes stream-enter {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes card-settle {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes meter-charge {
  from {
    transform: scaleX(.08);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes nav-draw {
  from {
    opacity: 0;
    transform: scaleX(.08);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes module-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes line-card-enter {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes code-type {
  from {
    opacity: .12;
    transform: scaleX(.08);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes product-head-in {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes product-scene-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes count-lift {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}