/* Motion layer. Every animation runs once when its section comes into view — nothing loops. */

/* ---------- Hero title: words rise in sequence ---------- */
.word { display: inline-block; }

.js .hero__title .word { opacity: 0; transform: translateY(0.4em); filter: blur(6px); }

.js .hero__title.is-in .word {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 900ms var(--ease-out), transform 1000ms var(--ease-out), filter 900ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms + 80ms);
}

/* ---------- Hero stage: frame opens, photo settles, card and stats rise ---------- */
.js .hero__stage.reveal { opacity: 1; transform: none; }
.js .hero__stage { clip-path: inset(6% 4% 0 4% round var(--radius-lg)); }
.js .hero__stage.is-in { clip-path: inset(0 0 0 0 round var(--radius-lg)); transition: clip-path 1400ms var(--ease-out) 250ms; }

.js .hero__stage picture img { transform: scale(1.1); }
.js .hero__stage.is-in picture img { transform: none; transition: transform 1800ms var(--ease-out) 250ms; }

.js .hero__stage .hero__card,
.js .hero__stage .stage-chip,
.js .hero__stage .hero__stats { opacity: 0; transform: translateY(24px); }

.js .hero__stage.is-in .hero__card,
.js .hero__stage.is-in .stage-chip,
.js .hero__stage.is-in .hero__stats {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--ease-out), transform 900ms cubic-bezier(0.2, 1.2, 0.35, 1);
}

.js .hero__stage.is-in .hero__stats { transition-delay: 800ms; }
.js .hero__stage.is-in .hero__card { transition-delay: 1000ms; }
.js .hero__stage.is-in .stage-chip { transition-delay: 1150ms; }

.stage-chip {
  position: absolute;
  top: 28px;
  left: 32px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(6, 33, 63, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
}

.stage-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.25); }
.stage-chip__sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); }

/* Gentle depth while scrolling past the hero (scroll-linked, never automatic) */
@supports (animation-timeline: view()) {
  @media (min-width: 641px) and (prefers-reduced-motion: no-preference) {
    .hero__stage picture { inset: -5% 0; animation: hero-drift linear both; animation-timeline: view(); animation-range: cover 30% cover 100%; }
  }
}

@keyframes hero-drift { from { transform: translateY(0); } to { transform: translateY(5%); } }

/* ---------- Product render rises with a slight tilt that settles ---------- */
.js .product.reveal .app { transform: perspective(1600px) rotateX(10deg) translateY(30px); transform-origin: 50% 0; opacity: 0.6; }
.js .product.reveal.is-in .app { transform: none; opacity: 1; transition: transform 1400ms var(--ease-out) 150ms, opacity 900ms ease 150ms; }

/* ---------- Operations map: arcs draw from Houston, nodes land, HQ ring opens once ---------- */
.js .ops__arcs .arcs path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .ops__map.is-in .arcs path { stroke-dashoffset: 0; transition: stroke-dashoffset 1400ms var(--ease-out); }
.js .ops__map.is-in .arcs path:nth-child(1) { transition-delay: 200ms; }
.js .ops__map.is-in .arcs path:nth-child(2) { transition-delay: 320ms; }
.js .ops__map.is-in .arcs path:nth-child(3) { transition-delay: 440ms; }
.js .ops__map.is-in .arcs path:nth-child(4) { transition-delay: 560ms; }
.js .ops__map.is-in .arcs path:nth-child(5) { transition-delay: 680ms; }
.js .ops__map.is-in .arcs path:nth-child(6) { transition-delay: 800ms; }
.js .ops__map.is-in .arcs path:nth-child(7) { transition-delay: 920ms; }

.ops__arcs .nodes circle,
.hq__ring { transform-box: fill-box; transform-origin: center; }
.js .ops__arcs .nodes circle { opacity: 0; transform: scale(0); }
.js .ops__map.is-in .nodes circle { opacity: 1; transform: none; transition: opacity 300ms ease, transform 500ms cubic-bezier(0.2, 1.6, 0.4, 1); transition-delay: calc(1300ms + var(--n, 0) * 120ms); }
.ops__arcs .nodes circle:nth-child(2) { --n: 1; } .ops__arcs .nodes circle:nth-child(3) { --n: 2; }
.ops__arcs .nodes circle:nth-child(4) { --n: 3; } .ops__arcs .nodes circle:nth-child(5) { --n: 4; }
.ops__arcs .nodes circle:nth-child(6) { --n: 5; } .ops__arcs .nodes circle:nth-child(7) { --n: 6; }
.js .ops__map.is-in .hq__ring { animation: hq-open 1600ms var(--ease-out) 150ms 1 both; }

@keyframes hq-open {
  0% { transform: scale(0.4); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: scale(1); opacity: 0.85; }
}

/* ---------- Developer flow: a light runs through the three steps once ---------- */
.js .flow.is-in .flow__step { animation: step-lit 1400ms ease both; }
.js .flow.is-in .flow__step:nth-child(1) { animation-delay: 200ms; }
.js .flow.is-in .flow__step:nth-child(2) { animation-delay: 900ms; }
.js .flow.is-in .flow__step:nth-child(3) { animation-delay: 1600ms; }
.js .flow.is-in .flow__step:nth-child(1)::after { transition-delay: 600ms; }
.js .flow.is-in .flow__step:nth-child(2)::after { transition-delay: 1300ms; }

@keyframes step-lit {
  0% { border-color: var(--line-dark); background-color: rgba(255, 255, 255, 0.03); }
  35% { border-color: rgba(124, 200, 255, 0.85); background-color: rgba(0, 148, 249, 0.12); }
  100% { border-color: rgba(124, 200, 255, 0.32); background-color: rgba(255, 255, 255, 0.04); }
}

@media (prefers-reduced-motion: reduce) {
  .js .hero__title .word,
  .js .hero__stage,
  .js .hero__stage picture img,
  .js .hero__stage .hero__card,
  .js .hero__stage .stage-chip,
  .js .hero__stage .hero__stats,
  .js .product.reveal .app { opacity: 1; transform: none; filter: none; clip-path: none; }
  .js .ops__arcs .arcs path { stroke-dashoffset: 0; }
  .js .ops__arcs .nodes circle { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  .js .hero__stage { clip-path: none; }
  .stage-chip { display: none; }
}