/* Kinetic Ledger — motion layer.
   Hover and focus feedback is always on. Every animation below is gated by html.motion,
   which is only set when the visitor has not asked for reduced motion.
   Text never waits hidden for a scroll: reveals move things into place, they never fade them in. */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- kinetic titles ---------- */
.kt-line { display: block; }
.kt-word { display: inline-block; white-space: nowrap; }
.kt-char { display: inline-block; }

/* ---------- interaction (always on) ---------- */
:focus-visible { outline: 2px solid var(--heat); outline-offset: 3px; }

.btn { position: relative; isolation: isolate; cursor: pointer; transition: color .25s var(--ease-out), border-color .25s var(--ease-out); }
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out); }
.btn--gold::before { background: var(--ink); }
.btn--ink::before { background: var(--bone); }
.btn--line::before { background: var(--gold); }
.btn:focus-visible::before { transform: scaleX(1); }
.btn--gold:focus-visible { color: var(--gold); }
.btn--ink:focus-visible { color: var(--ink); }
.btn--line:focus-visible { color: var(--ink); border-color: var(--gold); }
.btn .icon { transition: transform .3s var(--ease-out); }
.btn { transition: color .25s var(--ease-out), border-color .25s var(--ease-out), transform .12s ease-out; -webkit-tap-highlight-color: transparent; }
.btn:active { transform: scale(.97); }

.nav__link { transition: color .2s; }
.nav__link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.nav__link.is-current::after { transform: scaleX(1); }

.coach__initial { transform-origin: 30% 100%; transition: transform .5s var(--ease-spring), color .3s; }
.studio, .event, .perk, .policy, .slot { transition: transform .45s var(--ease-out), border-color .3s, background-color .3s, color .3s; }
.event__art .art { transition: transform .8s var(--ease-out); }
.choice__pill { transition: background-color .2s, color .2s, border-color .2s; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.policy__num { transition: color .3s; }

/* Hover effects only where there is a real mouse. On a phone a tap would leave them stuck on. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover::before { transform: scaleX(1); }
  .btn--gold:hover { color: var(--gold); }
  .btn--ink:hover { color: var(--ink); }
  .btn--line:hover { color: var(--ink); border-color: var(--gold); }
  .btn:hover .icon { transform: translateX(6px); }
  .nav__link:hover { color: var(--bone); }
  .nav__link:hover::after { transform: scaleX(1); }
  .coach:hover .coach__initial { transform: translateY(-12px) rotate(-6deg); color: var(--bone); }
  .studio:hover, .event:hover, .slot:hover { transform: translateY(-6px); }
  .event:hover { border-color: var(--gold); }
  .event:hover .event__art .art { transform: scale(1.06); }
  .choice__pill:hover:not(:has(input:checked)) { background: var(--gold); }
  .perk:hover, .policy:hover { background: var(--ink-2); }
  .policy:hover .policy__num { color: var(--gold); }
}

/* Phones and tablets: no hover, so the card in the middle of the screen lights up instead
   (interact.js sets .is-lit while scrolling or swiping). */
.event.is-lit { border-color: var(--gold); }
.coach.is-lit .coach__initial { color: var(--bone); }
.perk.is-lit, .policy.is-lit { background: var(--ink-2); }
.policy.is-lit .policy__num { color: var(--gold); }
.motion .event.is-lit .event__art .art { transform: scale(1.06); }
.motion .studio.is-lit { transform: translateY(-6px); }
.motion .coach.is-lit .coach__initial { transform: translateY(-12px) rotate(-6deg); }

.field input { transition: border-color .2s, box-shadow .2s; }
.field input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(253, 210, 1, .6); }
.field:focus-within .field__label { color: var(--ink); }

.rate--lead { position: relative; overflow: hidden; }
.marquee__track { width: max-content; }

/* ---------- keyframes ---------- */
/* ---------- gym gallery ---------- */
.motion .gallery__item { --rise: 32px; animation: rise .9s var(--ease-out) backwards; animation-delay: calc(var(--g) * 60ms); }
.motion .viewer[open] { animation: pop-dim .3s ease-out; }

/* ---------- free-trial pop-up ---------- */
.motion .pop[open] { animation: pop-rise .34s var(--ease-out); }
.motion .pop[open]::backdrop { animation: pop-dim .25s ease-out; }

@keyframes pop-rise { from { transform: translateY(36px); } }
@keyframes pop-dim { from { background: rgba(15, 14, 12, 0); } }
@keyframes kt-slide { from { transform: translateX(-.4em) skewX(-14deg); } }
@keyframes kt-lift { 0% { transform: scaleY(.12); } 55% { transform: scaleY(1.14); } 78% { transform: scaleY(.95); } 100% { transform: none; } }
@keyframes head-in { from { transform: translateX(-40px) skewX(-8deg); } }
@keyframes rise { from { transform: translateY(var(--rise, 28px)); } }
@keyframes slide-in { from { transform: translateX(-28px); } }
@keyframes pop { from { transform: scale(.82); } }
@keyframes rule-grow { from { transform: scaleX(0); } }
@keyframes nav-in { from { transform: translateY(-100%); } }
@keyframes live { from { box-shadow: 0 0 0 0 rgba(255, 90, 44, .6); } to { box-shadow: 0 0 0 12px rgba(255, 90, 44, 0); } }
@keyframes marquee { to { transform: translateX(-33.3333%); } }
@keyframes dot-on { from { fill: transparent; } }
@keyframes you-ring { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
@keyframes you-dot { 50% { transform: scale(1.4); } }
@keyframes tick-run { 0% { opacity: 1; } 14%, 100% { opacity: .28; } }
@keyframes spring-coil { 50% { transform: scaleX(.78); } }
@keyframes spring-end { 50% { transform: translateX(-48.4px); } }
@keyframes step-climb { from { transform: translateY(var(--climb, 0px)); } }
@keyframes num-flash { 0%, 100% { color: transparent; } 35%, 60% { color: var(--gold); } }
@keyframes num-fill { from { color: transparent; } }
@keyframes initial-pop { from { transform: scale(.55); } }
@keyframes badge-in { from { transform: translateY(28px) scale(.72); } }
@keyframes rail-x { from { transform: scaleX(0); } }
@keyframes rail-y { from { transform: scaleY(0); } }
@keyframes shine { 0% { transform: translateX(-120%) skewX(-14deg); } 45%, 100% { transform: translateX(320%) skewX(-14deg); } }
@keyframes ripple { 0%, 100% { opacity: .2; } 50% { opacity: .8; } }
@keyframes summit { 50% { transform: scale(2); } }
@keyframes draw { from { stroke-dashoffset: 1; } }
@keyframes blink { 50% { opacity: .15; } }
@keyframes float { 50% { transform: translateY(-14px); } }
@keyframes bar-fill { from { transform: scaleX(0); } }
@keyframes join-pulse { from { box-shadow: 0 0 0 0 rgba(253, 210, 1, .75); } to { box-shadow: 0 0 0 12px rgba(253, 210, 1, 0); } }
@keyframes shot {
  0% { transform: translate(-130px, 150px); opacity: 0; }
  3% { opacity: 1; }
  7% { transform: translate(-113.75px, 78px); }
  14% { transform: translate(-97.5px, 21.2px); }
  21% { transform: translate(-81.25px, -20.4px); }
  28% { transform: translate(-65px, -46.75px); }
  35% { transform: translate(-48.75px, -57.9px); }
  42% { transform: translate(-32.5px, -53.8px); }
  49% { transform: translate(-16.25px, -34.5px); }
  56% { transform: translate(0, 0); }
  66% { transform: translate(0, 46px); opacity: 1; }
  72%, 100% { transform: translate(0, 72px); opacity: 0; }
}

/* ---------- reveal gate: anything inside an unrevealed block waits at its start pose ---------- */
.motion [data-reveal]:not(.is-in),
.motion [data-reveal]:not(.is-in) *,
.motion [data-reveal]:not(.is-in)::before,
.motion [data-reveal]:not(.is-in) *::before,
.motion [data-reveal]:not(.is-in) *::after { animation-play-state: paused !important; }

/* ---------- page load ---------- */
.motion .nav { animation: nav-in .7s var(--ease-out) backwards; }
.motion .kt-line--lead .kt-char { animation: kt-slide .7s var(--ease-out) backwards; animation-delay: calc(var(--i) * 30ms + .1s); }
.motion .kt-line--gold .kt-char { transform-origin: 50% 100%; animation: kt-lift .9s cubic-bezier(.2, .7, .3, 1) backwards; animation-delay: calc(var(--i) * 60ms + .35s); }
.motion .hero__lede, .motion .page-hero .hero__lede { --rise: 22px; animation: rise .9s var(--ease-out) .55s backwards; }
.motion .hero .cta-row { --rise: 22px; animation: rise .9s var(--ease-out) .7s backwards; }
.motion .hero .facts__cell { --rise: 18px; animation: rise .8s var(--ease-out) .85s backwards; }
.motion .hero .facts__cell:nth-child(2) { animation-delay: .95s; }
.motion .hero .facts__cell:nth-child(3) { animation-delay: 1.05s; }
.motion .marker__rule { transform-origin: left; animation: rule-grow .8s var(--ease-out) .15s backwards; }
.motion .live-dot, .motion .places--low::before { animation: live 1.6s ease-out infinite; }

/* ---------- ambient ---------- */
.motion .marquee__track { animation: marquee 34s linear infinite; }

.motion .dot--lit, .motion .dot--edge { animation: dot-on .45s ease-out backwards; animation-delay: calc(var(--o) * var(--dot-step, 2ms) + .3s); }
.motion .dot--ring { transform-box: fill-box; transform-origin: center; animation: you-ring 1.8s ease-out infinite; }
.motion .dot--you { transform-box: fill-box; transform-origin: center; animation: you-dot 1.8s ease-in-out infinite; }

.motion .clock__tick { animation: tick-run 4.8s linear infinite; animation-delay: calc(var(--k) * 50ms - 4.8s); }
.motion .spring__coil { transform-box: view-box; transform-origin: 20px 50%; animation: spring-coil 2.6s ease-in-out infinite; }
.motion .spring__end { transform-box: view-box; animation: spring-end 2.6s ease-in-out infinite; }

/* ---------- on scroll ---------- */
.motion .section-head .display, .motion .coach-ranks__head .display { animation: head-in 1s var(--ease-out) backwards; }
.motion .section-head .lede, .motion .coach-ranks__head .lede { --rise: 20px; animation: rise 1s var(--ease-out) .15s backwards; }

.motion .studio { --rise: 56px; animation: rise 1s var(--ease-out) backwards; }
.motion .studio:nth-child(2) { animation-delay: .12s; }

.steps { --climb-unit: 44px; }
.motion .step { --climb: calc(var(--step) * var(--climb-unit)); animation: step-climb 1.1s var(--ease-out) backwards; animation-delay: calc(var(--step) * .12s); }
.motion .step__num { animation: num-flash 1.3s ease-in-out backwards; animation-delay: calc(var(--step) * .28s + .6s); }
.motion .step:last-child .step__num { animation-name: num-fill; animation-duration: .6s; }

.motion .coach { --rise: 48px; animation: rise .9s var(--ease-out) backwards; animation-delay: calc(var(--c) * 70ms); }
.motion .coach__initial { animation: initial-pop 1s var(--ease-spring) backwards; animation-delay: calc(var(--c) * 70ms + .25s); }
@keyframes photo-settle { from { transform: scale(1.16); filter: saturate(.4); } }
.motion .coach__media img { animation: photo-settle 1.4s var(--ease-out) backwards; animation-delay: calc(var(--c) * 90ms); }
.motion .coach__caption { animation: slide-in .8s var(--ease-out) backwards; animation-delay: calc(var(--c) * 90ms + .35s); }
.motion .promise__cell { --rise: 24px; animation: rise .8s var(--ease-out) backwards; }
.motion .promise__cell:nth-child(3) { animation-delay: .08s; }
.motion .promise__cell:nth-child(4) { animation-delay: .16s; }
.motion .promise__cell:nth-child(5) { animation-delay: .24s; }

.motion .track__badge { animation: badge-in .8s var(--ease-spring) backwards; animation-delay: calc(var(--rung) * .12s + .1s); }
.motion .track__rank::before { transform-origin: left; animation: rail-x .5s var(--ease-out) backwards; animation-delay: calc(var(--rung) * .12s + .3s); }
.motion .track__node { animation: pop .5s var(--ease-spring) backwards; animation-delay: calc(var(--rung) * .12s + .45s); }
@media (max-width: 760px) {
  .motion .track__rank::before { transform-origin: top; animation-name: rail-y; }
}
.motion .rewards li { animation: pop .5s var(--ease-spring) backwards; animation-delay: .9s; }
.motion .rewards li:nth-child(2) { animation-delay: .98s; }
.motion .rewards li:nth-child(3) { animation-delay: 1.06s; }
.motion .rewards li:nth-child(4) { animation-delay: 1.14s; }

.motion .event { --rise: 48px; animation: rise 1s var(--ease-out) backwards; }
.motion .event:nth-child(2) { animation-delay: .12s; }
.motion .event:nth-child(3) { animation-delay: .24s; }
.motion .event:nth-child(4) { animation-delay: .36s; }
@keyframes route-run { 0% { stroke-dashoffset: 1; } 70%, 100% { stroke-dashoffset: 0; } }
@keyframes checkpoint { 0% { transform: scale(2.1); fill: var(--gold); } 18%, 100% { transform: none; } }
.motion .route__run { stroke-dasharray: 1; animation: route-run 4.8s linear infinite; }
.motion .route__mark { transform-box: fill-box; transform-origin: center; animation: checkpoint 4.8s ease-out infinite; animation-delay: calc((var(--m) + 1) * .672s); }
.motion .art--contour .art__line { animation: ripple 3.2s ease-in-out infinite; animation-delay: calc(var(--r) * .16s); }
.motion .art__summit { transform-box: fill-box; transform-origin: center; animation: summit 1.6s ease-in-out infinite; }
.art__ball { fill: var(--heat); }
.motion .court__ball { animation: shot 3s linear infinite .6s; }
.motion .art--tally path { stroke-dasharray: 1; animation: draw .35s ease-out backwards; animation-delay: calc(var(--t) * 70ms + .4s); }
.motion .art--tally .art__peak { animation: blink 1.2s steps(1) 3.6s infinite; }

.motion .feature { animation: slide-in .7s var(--ease-out) backwards; }
.motion .feature:nth-child(2) { animation-delay: .07s; }
.motion .feature:nth-child(3) { animation-delay: .14s; }
.motion .feature:nth-child(4) { animation-delay: .21s; }
.motion .feature:nth-child(5) { animation-delay: .28s; }
.motion .phone { animation: float 6s ease-in-out infinite; }
.motion .bar__fill { display: block; transform-origin: left; animation: bar-fill 1.4s var(--ease-out) .5s backwards; }
.motion .phone__join { animation: join-pulse 1.8s ease-out infinite; }

.motion .rate { --rise: 32px; animation: rise .8s var(--ease-out) backwards; }
.motion .rate:nth-child(2) { animation-delay: .08s; }
.motion .rate:nth-child(3) { animation-delay: .16s; }
.motion .rate:nth-child(4) { animation-delay: .24s; }
.motion .rate--lead::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 45%; background: linear-gradient(100deg, transparent, rgba(253, 210, 1, .3), transparent); pointer-events: none; animation: shine 3.6s ease-in-out 1s infinite; }

.motion .cta__title { animation: head-in 1.1s var(--ease-out) backwards; }

/* inner pages */
.motion .rate-row { animation: slide-in .7s var(--ease-out) backwards; }
.motion .rate-row:nth-child(2) { animation-delay: .08s; }
.motion .rate-row:nth-child(3) { animation-delay: .16s; }
.motion .rate-row:nth-child(4) { animation-delay: .24s; }
.motion .policy { --rise: 32px; animation: rise .8s var(--ease-out) backwards; }
.motion .policy__num { animation: num-flash 1.2s ease-in-out backwards; }
.motion .policy:nth-child(2), .motion .policy:nth-child(2) .policy__num { animation-delay: .1s; }
.motion .policy:nth-child(3), .motion .policy:nth-child(3) .policy__num { animation-delay: .2s; }
.motion .policy:nth-child(4), .motion .policy:nth-child(4) .policy__num { animation-delay: .3s; }
.motion .policy:nth-child(5), .motion .policy:nth-child(5) .policy__num { animation-delay: .4s; }
.motion .policy:nth-child(6), .motion .policy:nth-child(6) .policy__num { animation-delay: .5s; }
.motion .ambassador h2 { animation: head-in 1s var(--ease-out) backwards; }
.motion .ambassador .rowlist__row { animation: slide-in .7s var(--ease-out) .2s backwards; }
.motion .slot { --rise: 14px; animation: pop .55s var(--ease-spring) backwards; animation-delay: calc(var(--d) * 80ms + .1s); }
.motion .perk { --rise: 32px; animation: rise .8s var(--ease-out) backwards; }
.motion .perk:nth-child(2) { animation-delay: .08s; }
.motion .perk:nth-child(3) { animation-delay: .16s; }
.motion .perk:nth-child(4) { animation-delay: .24s; }
.motion .next li { animation: slide-in .7s var(--ease-out) backwards; }
.motion .next li:nth-child(1) { animation-delay: .5s; }
.motion .next li:nth-child(2) { animation-delay: .6s; }
.motion .next li:nth-child(3) { animation-delay: .7s; }

/* ---------- more motion: pointer, tilt, ribbons, schedule, page changes ---------- */
@keyframes nudge { 50% { transform: translateX(5px); } }
@keyframes vt-out { to { transform: translateY(-24px); opacity: 0; } }
@keyframes vt-in { from { transform: translateY(40px); opacity: 0; } }

.dot { transform-box: fill-box; transform-origin: center; }

.motion .hero {
  background-image:
    radial-gradient(520px circle at var(--mx, 78%) var(--my, 40%), rgba(253, 210, 1, .11), transparent 65%),
    repeating-linear-gradient(90deg, rgba(244, 241, 233, 0.035) 0 1px, transparent 1px 120px);
}

.tilt { position: relative; }
.motion .tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .18s ease-out, border-color .3s, background-color .3s, color .3s; }
.motion .tilt:hover { z-index: 2; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); }
.motion .tilt::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(253, 210, 1, .24), transparent 55%); opacity: 0; transition: opacity .3s; }
.motion .tilt:hover::after { opacity: 1; }

.marquee-wrap--reverse .marquee { transform: rotate(1.8deg); background: var(--bone); color: var(--ink); }
.motion .marquee-wrap--reverse .marquee__track { animation-direction: reverse; animation-duration: 40s; }

.motion .next-class--link .icon { animation: nudge 1.6s ease-in-out infinite; }
.motion .hero .next-class { --rise: 18px; animation: rise .8s var(--ease-out) .8s backwards; }
.motion .week__day .slot:nth-of-type(2) { animation-delay: calc(var(--d) * 80ms + .2s); }
.motion .week__day .slot:nth-of-type(3) { animation-delay: calc(var(--d) * 80ms + .3s); }
.motion .board__bar { --rise: 16px; animation: rise .8s var(--ease-out) backwards; }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out .3s cubic-bezier(.4, 0, 1, 1) both; }
  ::view-transition-new(root) { animation: vt-in .55s var(--ease-out) both; }
}

@media (max-width: 760px) {
  .steps { --climb-unit: 0px; }
}

/* ---------- calm: the phone or computer asks for reduced motion ----------
   html.calm instead of html.motion. Nothing slides, rises, zooms or travels across the screen;
   small in-place light changes stay, so the event cards and live dots still feel alive. */
.calm .art--contour .art__line { animation: ripple 3.2s ease-in-out infinite; animation-delay: calc(var(--r) * .16s); }
.calm .art__summit, .calm .court__ball { animation: blink 1.6s ease-in-out infinite; }
.calm .route__run { stroke-dasharray: 1; animation: route-run 4.8s linear infinite; }
.calm .art--tally .art__peak { animation: blink 1.2s steps(1) infinite; }
.calm .live-dot, .calm .places--low::before { animation: live 1.6s ease-out infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- price table ---------- */
.motion .pp__table tbody tr { --rise: 18px; animation: rise .7s var(--ease-out) backwards; }
.motion .pp__table tbody tr:nth-child(2) { animation-delay: .08s; }
.motion .pp__table tbody tr:nth-child(3) { animation-delay: .16s; }
.motion .pp__table tbody tr:nth-child(4) { animation-delay: .24s; }
.motion .plan-includes__list li { animation: pop .5s var(--ease-spring) backwards; }