/* CrossFit MadCity · motion layer (inspired by xrp.org). Everything here is gated on html.motion,
   which is only set when JS runs AND the visitor hasn't asked for reduced motion. */
:root { --ease-out: cubic-bezier(.22,1,.36,1); --ease-io: cubic-bezier(.65,0,.35,1); }

/* 1 · Headline mask reveal: each line rises out of its own mask, staggered */
.mega .line { position: relative; }
.mega .li { display: inline-block; }
.motion .mega:not(.scramble) .line { clip-path: inset(-.2em -.4em -.14em -.4em); }
.motion .mega:not(.scramble) .li { transform: translateY(135%); transition: transform .95s var(--ease-out); }
.motion .mega:not(.scramble) .line:nth-child(2) .li { transition-delay: .12s; }
.motion .mega.in .li { transform: none; }

/* 2 · Red highlight bar wipes in behind the second line (xrp's signature highlight) */
.motion .mega .hl { background: linear-gradient(var(--red), var(--red)) no-repeat 0 0 / 0% 100%; transition: background-size .7s var(--ease-out) .45s; }
.motion .mega.in .hl { background-size: 100% 100%; }
.motion .sec.light .mega:not(.in) .hl { color: transparent; }
.motion .sec.light .mega .hl { transition: background-size .7s var(--ease-out) .45s, color .2s linear .6s; }

/* 3 · Hero collage entrance: photos fly in from off-centre and settle (then the existing parallax takes over) */
.motion .hero .floater img, .motion .page-hero .floater img { opacity: 0; transform: translate(var(--ex, 0), var(--ey, 40px)) scale(.86); transition: opacity 1s ease, transform 1.3s var(--ease-out); transition-delay: var(--ed, 0s); }
.motion .go .floater img { opacity: .9; transform: none; }
.motion .go .f-center img { opacity: .38; }
.motion .page-hero.go .floater img { opacity: .55; }
.f1 { --ex: -60px; --ey: -30px; --ed: .05s; } .f2 { --ex: 60px; --ey: -40px; --ed: .18s; }
.f3 { --ex: 0px; --ey: 60px; --ed: 0s; } .f4 { --ex: 70px; --ey: 50px; --ed: .26s; }
.f5 { --ex: -40px; --ey: 70px; --ed: .34s; } .f6 { --ex: -70px; --ey: 10px; --ed: .42s; }
.ph1 { --ex: -60px; --ey: 20px; --ed: .1s; } .ph2 { --ex: 60px; --ey: 40px; --ed: .25s; }
.motion .hero-copy > :not(h1), .motion .page-hero .copy > :not(.mega) { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .9s var(--ease-out); }
.motion .go .hero-copy > :nth-child(1) { transition-delay: .2s; }
.motion .go .hero-copy > :nth-child(3), .motion .page-hero.go .copy > :nth-child(1) { transition-delay: .55s; }
.motion .go .hero-copy > :nth-child(4), .motion .page-hero.go .copy > :nth-child(2) { transition-delay: .68s; }
.motion .go .hero-copy > :nth-child(5), .motion .page-hero.go .copy > :nth-child(4) { transition-delay: .8s; }
.motion .go .hero-copy > :nth-child(6), .motion .page-hero.go .copy > :nth-child(5) { transition-delay: .9s; }
.motion .go .hero-copy > *, .motion .page-hero.go .copy > * { opacity: 1; transform: none; }
.hero-copy { will-change: transform, opacity; }

/* 4 · Staggered fade-ups for lists, stats, FAQs and the photo grid */
.motion .stagger > * { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .8s var(--ease-out); transition-delay: calc(var(--i, 0) * 75ms); }
.motion .stagger.in > * { opacity: 1; transform: none; }

/* 5 · Marquee band */
.marquee { position: relative; overflow: hidden; background: var(--red); color: #fff; padding: 1.05rem 0; border-block: 1px solid rgba(0,0,0,.18); contain: content; }
.marquee + .marquee { background: var(--ink); color: var(--paper); border-block-color: var(--line-d); }
.marquee-track { display: flex; width: max-content; }
.marquee-group { display: flex; align-items: center; flex-shrink: 0; }
.marquee-item { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(1.6rem, 3.6vw, 3rem); line-height: 1; letter-spacing: .01em; white-space: nowrap; padding: 0 .55em; }
.marquee + .marquee .marquee-item { font-size: clamp(1.1rem, 2.2vw, 1.8rem); color: transparent; -webkit-text-stroke: 1px var(--paper); }
.marquee-star { width: .7em; height: .7em; flex-shrink: 0; font-size: clamp(1.1rem, 2.4vw, 2rem); background: currentColor; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.motion .marquee-track { animation: marq var(--marq-dur, 38s) linear infinite; }
.motion .marquee.rev .marquee-track { animation-direction: reverse; --marq-dur: 52s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marq { to { transform: translate3d(-50%, 0, 0); } }

/* 6 · Animated counters: tabular digits so the width never jumps */
.stat .big { font-variant-numeric: tabular-nums; }
.stat .yrs { display: block; margin-top: .35rem; color: var(--red); }

/* 7 · Photo bands grow from inset cards to full-bleed as you scroll (xrp's expanding video) */
.motion .band { clip-path: inset(var(--bi, 0px) var(--bi, 0px) round var(--br, 0px)); }

/* 8 · Magnetic + lift buttons (fine pointers only; uses the individual translate property so hover lift still works) */
.pill { translate: var(--mx, 0) var(--my, 0); transition: transform .2s ease, background .2s ease, translate .35s var(--ease-out), box-shadow .3s ease; }
.motion .pill:hover { box-shadow: 0 10px 28px -10px rgba(237,28,36,.65); }
.motion .pill-ghost:hover { box-shadow: none; }

/* 9 · Hover tilt + zoom on photo cards, plus gentle parallax inside each frame */
.community-pics img { translate: 0 var(--py, 0); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--sc, 1.06)); transition: transform .5s var(--ease-out); will-change: transform; }
.community-pics figure:hover img { --sc: 1.1; }
.motion .row-link .go { transition: background .3s, color .3s, border-color .3s, transform .4s var(--ease-out); }
.motion .row-link:hover .go { transform: rotate(-45deg) scale(1.08); }

/* 10 · Slow red glow breathing behind the phoenix */
.cta-close { isolation: isolate; }
.phx-clip { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
.phx { position: absolute; left: 50%; top: 50%; width: min(70vw, 620px); aspect-ratio: 600/726; transform: translate(-50%, -50%); }
.phx::before { content: ""; position: absolute; inset: -25%; border-radius: 50%; background: radial-gradient(closest-side, rgba(237,28,36,.42), rgba(237,28,36,.12) 55%, transparent 72%); filter: blur(10px); }
.phx img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .07; }
.sec.dark .phx img { opacity: .1; filter: brightness(0) invert(1); }
.sec.light .phx::before { background: radial-gradient(closest-side, rgba(237,28,36,.22), rgba(237,28,36,.06) 55%, transparent 72%); }
.motion .phx::before { animation: glow 9s ease-in-out infinite alternate; }
.motion .phx img { animation: phxFloat 12s ease-in-out infinite alternate; }
@keyframes glow { 0% { transform: scale(.85) translate(-4%, 2%); opacity: .55; } 50% { opacity: 1; } 100% { transform: scale(1.12) translate(4%, -3%); opacity: .75; } }
@keyframes phxFloat { to { transform: translateY(-3%) scale(1.03); } }
.cta-close .wrap { position: relative; z-index: 1; }

/* 11 · Nav hides while scrolling down, returns on scroll up (like xrp's header) */
.nav { transition: background .35s ease, border-color .35s ease, transform .35s var(--ease-io); }
.motion .nav.nav-hide { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none !important; }
  .phx::before, .phx img { animation: none !important; }
}
.hero-copy { width: 100%; }  /* stable box while web fonts swap in (no layout shift) */

/* ───── Coach-first hero + Coach Keysha credentials & results ───── */
.hero-eyebrow { display: block; color: var(--muted-d); margin-bottom: 1.5rem; font-size: clamp(.62rem, 1.4vw, .74rem); }
.hero .mega { font-size: clamp(3.1rem, 11.5vw, 10.5rem); }
.hero-sub { max-width: 36rem; }
.hero-sub b { color: #fff; }
.hero-tag { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--paper); margin: -.75rem 0 2rem; display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.hero-tag .dot { color: var(--red); }
.anchor-alias { position: absolute; top: 0; }
#coach, #about { scroll-margin-top: var(--nav-h); }
.coach-hero { display: grid; grid-template-columns: minmax(0, 400px) 1fr; gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.coach-photo { margin: 0; position: relative; overflow: hidden; background: var(--ink); }
.coach-photo img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 20%; }
.coach-photo figcaption { position: absolute; left: .75rem; bottom: .75rem; color: #fff; background: rgba(14,14,14,.72); padding: .35rem .6rem; font-size: .66rem; }
.mega-coach { font-size: clamp(2.6rem, 6.6vw, 6.2rem); }
.results-cap { display: block; margin-top: clamp(3.5rem, 8vw, 6rem); color: var(--red); }
.stat-row.results { margin-top: 1.25rem; }
.results .big { font-size: clamp(2.6rem, 6vw, 5.2rem); }
.results .big.word { font-size: clamp(2rem, 4.6vw, 4.2rem); line-height: 1.12; }
@media (max-width: 900px) { .coach-hero { grid-template-columns: 1fr; } .coach-photo { max-width: 380px; } }
/* placeholder-ready styles (only used once real items are added) */
.results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.result-card { border-top: 3px solid var(--red); padding: 1.25rem 0 0; }
.result-card h3 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1; margin: .5rem 0; }
.logo-strip { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; justify-content: center; margin-top: clamp(2.5rem, 6vw, 4rem); }
.logo-strip img { height: 44px; width: auto; filter: grayscale(1); opacity: .7; transition: filter .3s, opacity .3s; }
.logo-strip img:hover { filter: none; opacity: 1; }
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: clamp(2.5rem, 6vw, 4rem); }
.quote { margin: 0; padding: 1.5rem; border-left: 3px solid var(--red); background: rgba(0,0,0,.03); }
.quote cite { display: block; margin-top: .75rem; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-style: normal; }
/* keep the coach-first hero inside one screen so font swap never changes its height (no layout shift) */
.hero { padding-bottom: 3.5rem; }
.hero .mega { font-size: clamp(3rem, min(10.5vw, 14vh), 9.5rem); }
.hero-eyebrow { margin-bottom: clamp(.75rem, 2vh, 1.5rem); }
.hero-sub { margin: clamp(1rem, 2.4vh, 1.75rem) auto clamp(1rem, 2.4vh, 1.75rem); }
.hero-tag { margin: 0 0 clamp(1rem, 2.6vh, 2rem); }
.hero-mailing { margin-top: clamp(1rem, 3vh, 2.25rem); }
@media (max-height: 760px) and (min-width: 761px) { .hero-sub { font-size: .98rem; } }
.results .big.word { text-transform: uppercase; }
.coach-photo img { height: auto !important; aspect-ratio: 4 / 5 !important; }
.coach-hero { align-items: end; }
/* results row: 6 stats (3 x 2), 520 leads in red; Division I schools strip */
.stat-row.results { grid-template-columns: repeat(3, 1fr); }
.results .stat { padding-bottom: 1.5rem; }
.results .stat:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.results .stat:nth-child(n+4) { border-top: 1px solid var(--line-l); padding-top: 1.5rem; }
.results .stat.lead .big { color: var(--red); }
.schools { margin-top: clamp(2.5rem, 6vw, 4rem); border-top: 3px solid var(--red); padding-top: 1.25rem; }
.schools-cap { display: block; color: var(--muted-l); margin-bottom: 1rem; }
.school-list { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 0; }
.school-list li { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(1.5rem, 3.4vw, 3rem); line-height: 1.05; }
.school-list li + li::before { content: "/"; color: var(--red); margin: 0 .45em; }
@media (max-width: 760px) {
  .stat-row.results { grid-template-columns: 1fr 1fr; }
  .results .stat:nth-child(3n+1) { padding-left: 1.25rem; border-left: 1px solid var(--line-l); }
  .results .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .results .stat:nth-child(n+3) { border-top: 1px solid var(--line-l); padding-top: 1.5rem; margin-top: 0; }
  .results .stat.lead { grid-column: 1 / -1; }
  .results .stat.lead + .stat { padding-left: 0; border-left: 0; }
  .results .stat.lead + .stat + .stat { padding-left: 1.25rem; border-left: 1px solid var(--line-l); }
  .results .stat:nth-child(4) { padding-left: 0; border-left: 0; }
  .results .stat:nth-child(5) { padding-left: 1.25rem; border-left: 1px solid var(--line-l); }
  .results .stat:nth-child(6) { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
}
.school-list li { font-size: clamp(1.4rem, 2.6vw, 2.45rem); }
@media (max-width: 760px) { .results .stat:nth-child(2), .results .stat:nth-child(3) { border-top: 1px solid var(--line-l); padding-top: 1.5rem; } }