/* ---------- motion ---------- */
.glow { animation: drift 18s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(-3%, 4%) scale(1.08); } }

/* headline rises out of a mask, line by line */
h1.hero .ln { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
h1.hero .ln > span { display: inline-block; animation: up 1s cubic-bezier(.16,1,.3,1) both; }
h1.hero .ln:nth-child(2) > span { animation-delay: .14s; }
@keyframes up { from { translate: 0 115%; } }
.heroGrid .pill, .heroGrid .lede, .heroGrid .btns { animation: fadeUp .9s cubic-bezier(.16,1,.3,1) both; }
.heroGrid .lede { animation-delay: .3s; }
.heroGrid .btns { animation-delay: .42s; }
@keyframes fadeUp { from { opacity: 0; translate: 0 22px; } }

/* the hero story: the price falls and the floor catches it */
.stage { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.stage .price { stroke: var(--bone); }
.stage .floorline { stroke: var(--floor); }
.stage .under { fill: var(--floor); }
.stage .dot { fill: var(--bone); }
.stage .halo { fill: var(--floor); }
.w { animation: pop .8s cubic-bezier(.16,1,.3,1) both, bob 6s ease-in-out infinite; }
.w.a { animation-delay: .5s, 0s; }
.w.b { animation-delay: .65s, -2s; }
.w.c { animation-delay: .8s, -4s; }
.w.d { animation-delay: .95s, -1s; }
@keyframes pop { from { opacity: 0; scale: .7; } }

/* sections rise in as they scroll into view (only when the script is running) */
.js .rise { opacity: 0; translate: 0 30px; transition: opacity .8s ease, translate .8s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * 90ms); }
.js .rise.in { opacity: 1; translate: 0 0; }
.js .hair.rise { opacity: 1; translate: none; scale: 0 1; transform-origin: left; transition: scale 1.2s cubic-bezier(.16,1,.3,1); }
.js .hair.rise.in { scale: 1 1; }
.js .steps > div.rise { border-top-color: transparent; position: relative; }
.js .steps > div.rise::after { content: ""; position: absolute; left: 0; top: -3px; height: 3px; width: 100%; background: var(--floor); scale: 0 1; transform-origin: left; transition: scale .9s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * 90ms + .2s); }
.js .steps > div.rise.in::after { scale: 1 1; }

/* a slow band of what it is built on */
.marq { overflow: hidden; margin: 64px -20vw 0; padding: 22px 0; border-block: 1px solid var(--line); position: relative; z-index: 1; }
.marq .track { display: flex; gap: 56px; width: max-content; animation: slide 40s linear infinite; font: 700 clamp(26px, 3.4vw, 40px)/1 var(--display); letter-spacing: -0.02em; white-space: nowrap; }
.marq .track span { display: inline-flex; align-items: center; gap: 56px; }
.marq .track span::after { content: ""; width: 34px; height: 5px; border-radius: 3px; background: var(--floor); }
.marq .track span:nth-child(even) { color: var(--mute); }
@keyframes slide { to { translate: -50% 0; } }

.btn, .chip, nav.top .cta { transition: translate .2s ease, box-shadow .2s ease, background .15s, color .15s, border-color .15s; }
.btn:hover, nav.top .cta:hover { translate: 0 -3px; box-shadow: 0 14px 30px color-mix(in srgb, var(--bone) 22%, transparent); }
.row { transition: padding-left .2s ease; }
.row:hover { padding-left: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rise, .js .hair.rise { opacity: 1; translate: none; scale: none; }
  .stage { display: none; }
}