/* ==========================================================================
   Motion. Everything in this file is decorative: the page is complete and
   readable without it, and all of it is removed under
   prefers-reduced-motion. Scroll reveals move elements but never hide them.
   Order: keyframes · page load · ambient loops · in-view · interaction.
   ========================================================================== */

@keyframes march-x { to { background-position: 12px 0; } }
@keyframes march-y { to { background-position: 0 12px; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes word-in { from { opacity: 0; transform: translateY(.5em) rotate(3deg); } }
@keyframes stage-in { from { opacity: 0; transform: translateY(44px) scale(.975); } }
@keyframes bob { to { transform: translateY(-9px); } }
@keyframes wire-dot { 0% { transform: none; opacity: 0; } 15%, 80% { opacity: 1; } 100% { transform: translateX(calc(100% - 12px)); opacity: 0; } }
@keyframes wire-dot-y { 0% { transform: none; opacity: 0; } 15%, 80% { opacity: 1; } 100% { transform: translateY(calc(100% - 12px)); opacity: 0; } }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes file-in { 0% { opacity: .3; transform: translateX(-12px); } 14%, 100% { opacity: 1; transform: none; } }
@keyframes bar-loop { 0% { transform: scaleX(.12); } 28%, 100% { transform: none; } }
@keyframes tile-on { 0%, 26%, 100% { background-color: var(--neutral-soft); color: var(--ink); } 6%, 18% { background-color: var(--ai); color: var(--white); } }
@keyframes beam-flow { to { stroke-dashoffset: -12; } }
@keyframes scan { from { transform: none; } to { transform: translateY(calc(100% - 58px)); } }
@keyframes ping { 0% { box-shadow: 0 0 0 3px var(--surface), 0 0 0 3px var(--ai-a); } 70%, 100% { box-shadow: 0 0 0 3px var(--surface), 0 0 0 13px transparent; } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes grow-y { from { transform: scaleY(0); } }
@keyframes row-in { from { opacity: 0; transform: translateX(14px); } }
@keyframes draw { from { stroke-dashoffset: 1; } }
@keyframes pop { from { opacity: 0; transform: scale(0); } }
@keyframes vbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ring { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.75); } }
@keyframes eq { to { transform: scaleY(1); } }
@keyframes chat-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes heart { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 8px), -180px) scale(1.15); } }
@keyframes kg-pulse { 0% { opacity: 0; transform: translate(var(--x1), var(--y1)); } 12%, 82% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x2), var(--y2)); } }
@keyframes kg-ring { 0% { opacity: .5; transform: scale(1); } 100% { opacity: 0; transform: scale(1.28, 1.55); } }
@keyframes eco-pulse { 0% { transform: none; opacity: 0; } 22%, 80% { opacity: 1; } 100% { transform: translate(calc(var(--dx) * 1cqw), calc(var(--dy) * 1cqh)); opacity: 0; } }
@keyframes orbit { to { stroke-dashoffset: -240; } }
@keyframes typing { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes path-step { 0%, 22%, 100% { transform: none; box-shadow: 0 0 0 0 transparent; } 6%, 14% { transform: translateY(-7px) scale(1.06); box-shadow: 0 0 0 7px var(--ai-on-ink-a); } }

@media (prefers-reduced-motion: no-preference) {

  /* ---------- page load: headline, then copy, then the product pipeline assembles left to right ---------- */
  .hero .eyebrow { animation: rise-in .7s cubic-bezier(.2, .8, .2, 1) both; }
  .display .hw { animation: word-in .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 70ms + 80ms); }
  .hero__side > * { animation: rise-in .7s cubic-bezier(.2, .8, .2, 1) both; }
  .hero__side > :nth-child(1) { animation-delay: .5s; }
  .hero__side > :nth-child(2) { animation-delay: .6s; }
  .hero__side > :nth-child(3) { animation-delay: .7s; }
  .hero__note { animation: rise-in .7s .8s cubic-bezier(.2, .8, .2, 1) both; }
  .stage-wrap { animation: stage-in 1s .4s cubic-bezier(.2, .8, .2, 1) both; }
  .stage__grid > *, .stage__foot > * { animation: rise-in .7s cubic-bezier(.2, .8, .2, 1) both; }
  .stage__grid > :nth-child(1) { animation-delay: .8s; }
  .stage__grid > :nth-child(2) { animation-delay: 1s; }
  .stage__grid > :nth-child(3) { animation-delay: 1.15s; }
  .stage__grid > :nth-child(4) { animation-delay: 1.35s; }
  .stage__grid > :nth-child(5) { animation-delay: 1.5s; }
  .stage__foot > :nth-child(1) { animation-delay: 1.7s; }
  .stage__foot > :nth-child(2) { animation-delay: 1.8s; }
  .stage__foot > :nth-child(3) { animation-delay: 1.9s; }
  .stage__foot > :nth-child(4) { animation-delay: 2s; }
  .stage__foot > :nth-child(5) { animation-delay: 2.1s; }
  .float { animation: rise-in .7s 2.2s cubic-bezier(.2, .8, .2, 1) both, bob 4.5s 2.9s ease-in-out infinite alternate; }
  .float--b { animation-delay: 2.5s, 3.2s; animation-duration: .7s, 5.5s; }
  .page-hero__copy > * { animation: rise-in .7s cubic-bezier(.2, .8, .2, 1) both; }
  .page-hero__copy > :nth-child(2) { animation-delay: .08s; }
  .page-hero__copy > :nth-child(3) { animation-delay: .16s; }
  .page-hero__copy > :nth-child(4) { animation-delay: .24s; }
  .page-hero .display .hw { animation: none; }
  .net { animation: fade-in 1.6s .3s both; }

  /* ---------- ambient loops ----------
     animations.js adds .is-paused to any section that is off screen. The
     !important is needed because the animation shorthand resets play-state. */
  .is-paused, .is-paused *, .is-paused *::before, .is-paused *::after { animation-play-state: paused !important; }
  .wire--h { animation: march-x .9s linear infinite; }
  .wire--v { animation: march-y .9s linear infinite; }
  .wire--h::before { animation: wire-dot 2.2s cubic-bezier(.4, 0, .6, 1) infinite; }
  .stage__grid > .wire--h:nth-of-type(2)::before, .stage__foot > .wire--h:nth-of-type(2)::before { animation-delay: 1.1s; }
  .proc li.is-on .proc__tick { animation: spin 1s linear infinite; }
  .vbadge--live i { animation: pulse 1.4s ease-in-out infinite; }
  .ticker__track { animation: ticker 48s linear infinite; }
  .ticker:hover .ticker__track { animation-play-state: paused; }

  .filelist li { animation: file-in 4.8s ease-in-out infinite; }
  .filelist li:nth-child(2) { animation-delay: .35s; }
  .filelist li:nth-child(3) { animation-delay: .7s; }
  .minipass__rows > span i { transform-origin: 0 50%; animation: bar-loop 4.8s cubic-bezier(.2, .8, .2, 1) infinite; }
  .minipass__rows > span:nth-child(2) i { animation-delay: .25s; }
  .minipass__rows > span:nth-child(3) i { animation-delay: .5s; }
  .tilegrid li { animation: tile-on 5.6s ease-in-out infinite; }
  .tilegrid li:nth-child(2) { animation-delay: .35s; } .tilegrid li:nth-child(3) { animation-delay: .7s; } .tilegrid li:nth-child(4) { animation-delay: 1.05s; }
  .tilegrid li:nth-child(5) { animation-delay: 1.4s; } .tilegrid li:nth-child(6) { animation-delay: 1.75s; } .tilegrid li:nth-child(7) { animation-delay: 2.1s; } .tilegrid li:nth-child(8) { animation-delay: 2.45s; }

  .orb__r1 { animation: spin 16s linear infinite; }
  .orb__r2 { animation: spin 10s linear infinite reverse; }
  .beam.is-on { animation: beam-flow .8s linear infinite; }
  .beam__port { animation: pulse 2s ease-in-out infinite; }

  .shot::after { animation: scan 3.4s ease-in-out infinite alternate; }
  .pins li::after { animation: ping 2.6s ease-out infinite; }
  .pins li:nth-child(2)::after { animation-delay: .3s; } .pins li:nth-child(3)::after { animation-delay: .6s; } .pins li:nth-child(4)::after { animation-delay: .9s; }
  .pins li:nth-child(5)::after { animation-delay: 1.2s; } .pins li:nth-child(6)::after { animation-delay: 1.5s; } .pins li:nth-child(7)::after { animation-delay: 1.8s; }

  .vcard__bar i { animation: vbar 9s linear infinite; }
  .vcard:nth-child(3n) .vcard__bar i { animation-duration: 12s; animation-delay: -4s; }
  .vcard:nth-child(3n + 1) .vcard__bar i { animation-duration: 7s; animation-delay: -2s; }
  .vcard__play::after { animation: ring 2.4s ease-out infinite; }
  .vcard:nth-child(even) .vcard__play::after { animation-delay: 1.2s; }
  .vcard:hover img { transform: scale(1.06); }

  .eq i { animation: eq .5s ease-in-out infinite alternate; }
  .eq i:nth-child(2) { animation-duration: .38s; } .eq i:nth-child(3) { animation-duration: .62s; } .eq i:nth-child(4) { animation-duration: .44s; }
  .live__chat li.is-new { animation: chat-in .35s cubic-bezier(.2, .8, .2, 1) both; }
  .live__hearts .ico { animation: heart 3.4s ease-in infinite; }
  .live__hearts .ico:nth-child(2) { --dx: -6px; animation-delay: .7s; } .live__hearts .ico:nth-child(3) { --dx: 10px; animation-delay: 1.5s; }
  .live__hearts .ico:nth-child(4) { --dx: -3px; animation-delay: 2.1s; } .live__hearts .ico:nth-child(5) { --dx: 6px; animation-delay: 2.8s; }

  .kg__pulse { animation: kg-pulse 3.2s linear infinite; animation-delay: var(--d); }
  .kg__ring { animation: kg-ring 2.8s ease-out infinite; }
  .eco__orbit { animation: orbit 36s linear infinite; }
  .eco__pulses i { animation: eco-pulse 4.2s linear infinite; animation-delay: var(--d); }
  .typing i { animation: typing 1s ease-in-out infinite; }
  .typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
  .cta__path li > :first-child { animation: path-step 5.5s ease-in-out infinite; }
  .cta__path li:nth-child(2) > :first-child { animation-delay: .8s; } .cta__path li:nth-child(3) > :first-child { animation-delay: 1.6s; }
  .cta__path li:nth-child(4) > :first-child { animation-delay: 2.4s; } .cta__path li:nth-child(5) > :first-child { animation-delay: 3.2s; }

  /* ---------- scroll reveals (transform only) ---------- */
  .js .reveal { transform: translateY(24px) scale(.985); transition: transform .9s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; }
  .js .reveal.is-in { transform: none; }
  .js .stages3 .reveal:nth-child(2), .js .how .reveal:nth-child(2), .js .plans .reveal:nth-child(2) { transition-delay: .08s; }
  .js .stages3 .reveal:nth-child(3), .js .how .reveal:nth-child(3), .js .plans .reveal:nth-child(3) { transition-delay: .16s; }
  .js .how .reveal:nth-child(4) { transition-delay: .24s; }
  .js .how .reveal:nth-child(5) { transition-delay: .32s; }

  /* ---------- in view: things that fill, draw or count once ---------- */
  .gauge__val { transition: stroke-dasharray 1.4s cubic-bezier(.2, .8, .2, 1); }
  .is-in .rbar__fill, .is-in .meter i, .is-in .hbar i, .how__step.is-in::before { transform-origin: 0 50%; animation: grow-x 1.1s cubic-bezier(.2, .8, .2, 1) both; }
  .is-in .rbar:nth-child(2) .rbar__fill { animation-delay: .06s; } .is-in .rbar:nth-child(3) .rbar__fill { animation-delay: .12s; } .is-in .rbar:nth-child(4) .rbar__fill { animation-delay: .18s; }
  .is-in .rbar:nth-child(5) .rbar__fill { animation-delay: .24s; } .is-in .rbar:nth-child(6) .rbar__fill { animation-delay: .3s; } .is-in .rbar:nth-child(7) .rbar__fill { animation-delay: .36s; }
  .is-in .rbar:nth-child(8) .rbar__fill { animation-delay: .42s; } .is-in .rbar:nth-child(9) .rbar__fill { animation-delay: .48s; } .is-in .rbar:nth-child(10) .rbar__fill { animation-delay: .54s; }
  .is-in .hbars li:nth-child(2) .hbar i { animation-delay: .1s; } .is-in .hbars li:nth-child(3) .hbar i { animation-delay: .2s; } .is-in .hbars li:nth-child(4) .hbar i { animation-delay: .3s; }
  .how__step.is-in:nth-child(2)::before { animation-delay: .25s; } .how__step.is-in:nth-child(3)::before { animation-delay: .5s; }
  .how__step.is-in:nth-child(4)::before { animation-delay: .75s; } .how__step.is-in:nth-child(5)::before { animation-delay: 1s; }
  .is-in .spark i { transform-origin: 50% 100%; animation: grow-y .7s cubic-bezier(.2, .8, .2, 1) both; }
  .is-in .spark i:nth-child(2) { animation-delay: .05s; } .is-in .spark i:nth-child(3) { animation-delay: .1s; } .is-in .spark i:nth-child(4) { animation-delay: .15s; } .is-in .spark i:nth-child(5) { animation-delay: .2s; }
  .is-in .spark i:nth-child(6) { animation-delay: .25s; } .is-in .spark i:nth-child(7) { animation-delay: .3s; } .is-in .spark i:nth-child(8) { animation-delay: .35s; } .is-in .spark i:nth-child(9) { animation-delay: .4s; } .is-in .spark i:nth-child(10) { animation-delay: .45s; }
  .is-in .chart__line { stroke-dasharray: 1; animation: draw 1.8s .2s cubic-bezier(.4, 0, .2, 1) both; }
  .is-in .chart__area { animation: fade-in 1s 1.4s both; }
  .is-in .chart__pts circle { transform-box: fill-box; transform-origin: center; animation: pop .4s cubic-bezier(.2, 1.4, .4, 1) both; }
  .is-in .chart__pts circle:nth-child(1) { animation-delay: .3s; } .is-in .chart__pts circle:nth-child(2) { animation-delay: .5s; } .is-in .chart__pts circle:nth-child(3) { animation-delay: .7s; } .is-in .chart__pts circle:nth-child(4) { animation-delay: .9s; }
  .is-in .chart__pts circle:nth-child(5) { animation-delay: 1.1s; } .is-in .chart__pts circle:nth-child(6) { animation-delay: 1.3s; } .is-in .chart__pts circle:nth-child(7) { animation-delay: 1.5s; } .is-in .chart__pts circle:nth-child(8) { animation-delay: 1.7s; }
  .pp.is-in .pp__table tbody tr { animation: row-in .5s cubic-bezier(.2, .8, .2, 1) both; }
  .pp.is-in tbody tr:nth-child(1) { animation-delay: .2s; } .pp.is-in tbody tr:nth-child(2) { animation-delay: .27s; } .pp.is-in tbody tr:nth-child(3) { animation-delay: .34s; } .pp.is-in tbody tr:nth-child(4) { animation-delay: .41s; } .pp.is-in tbody tr:nth-child(5) { animation-delay: .48s; }
  .pp.is-in tbody tr:nth-child(6) { animation-delay: .55s; } .pp.is-in tbody tr:nth-child(7) { animation-delay: .62s; } .pp.is-in tbody tr:nth-child(8) { animation-delay: .69s; } .pp.is-in tbody tr:nth-child(9) { animation-delay: .76s; } .pp.is-in tbody tr:nth-child(10) { animation-delay: .83s; }

  /* ---------- interaction ---------- */
  .btn--primary:hover::after { transform: translateX(120%); transition: transform .7s ease; }
  .mega:not([hidden]), .mnav:not([hidden]) { animation: drop-in .18s ease-out; }
  .dpanel:not([hidden]), .rec:not([hidden]), .formpanel:not([hidden]), .gov__panel:not([hidden]), .code__panel:not([hidden]) { animation: rise-in .3s ease-out; }
  .cmdk[open] { animation: rise-in .2s ease-out; }
  .cmdk[open]::backdrop { animation: fade-in .2s ease-out; }
  .arch.is-in .arch__lane { animation: rise-in .6s cubic-bezier(.2, .8, .2, 1) both; }
  .arch.is-in .arch__lane:nth-of-type(2) { animation-delay: .12s; } .arch.is-in .arch__lane:nth-of-type(3) { animation-delay: .24s; } .arch.is-in .arch__lane:nth-of-type(4) { animation-delay: .36s; } .arch.is-in .arch__lane:nth-of-type(5) { animation-delay: .48s; }
  .faq__item[open] .faq__body { animation: drop-in .22s ease-out; }
  .icard, .card, .w, .stagecard__viz, .shelf__item img { transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, border-color .25s; }
  .icard:hover, .card:hover, .stagecard:hover .stagecard__viz { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--sh-2); }
  .js .plan.reveal.is-in:hover, .js .how__step.reveal.is-in:hover { transform: translateY(-5px); box-shadow: var(--sh-2); transition-delay: 0s; transition-duration: .3s; }
  .eco__node { transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; }
  .eco__node:hover { transform: translate(-50%, -50%) scale(1.06); box-shadow: var(--sh-2); z-index: 1; }
  .tile-ico { transition: transform .25s cubic-bezier(.2, 1.4, .4, 1); }
  .mega__item:hover .tile-ico, .icard:hover .tile-ico, .card:hover .tile-ico { transform: scale(1.1) rotate(-4deg); }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 860px) {
  .eco__node:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .wire--h::before, .vcard__play::after { display: none; }
}