/* ===================================================================
   HOME PAGE "WOW" LAYER (index.html only). Loaded after style.css.
   Motion is progressive: everything below is visible and static without JS,
   and all movement is switched off for prefers-reduced-motion.
   =================================================================== */
html{scroll-behavior:smooth}

/* ---------- Hero ---------- */
.hero-wow{padding:76px 0 176px;min-height:660px}
.hero-wow .hero-grid{position:static}
.hero-wow .hero-copy{position:relative;z-index:3}
.hero-wow .hero-copy{max-width:600px}
.hero-wow .hw{display:inline-block}
.hero-wow .hw1{color:#fff}
.hero-wow .hw2{color:var(--lblue)}
.hero-wow .hw3{color:#fff}
/* v16: the diagonal blue stripes are back on desktop; the phone hero (<=900px) is unchanged and keeps them hidden */
@media (max-width:900px){.hero-wow .hero-bg{display:none}}
.hero-link{margin-top:20px;font-family:"Fredoka",sans-serif;font-weight:500;font-size:17px}
.hero-link a{color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--blue)}
.hero-link a:hover{color:var(--lblue)}
.hero-wow .hero-visual{position:relative;min-height:560px;display:flex;flex-direction:column;justify-content:center;align-items:center}
/* the video "window": portrait frame that crops the close follow-cam clip down to the athlete */
.hf{position:relative;width:min(430px,100%);rotate:2.5deg;margin-top:-10px}
.hf-plate{position:absolute;inset:-4px;border-radius:34px;background:linear-gradient(145deg,var(--blue),#0073b8);transform:rotate(-6deg) translate(-16px,10px);box-shadow:0 0 70px rgba(0,162,255,.55)}
.hf::before{content:"";position:absolute;inset:-30px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,162,255,.45),transparent);z-index:-1;filter:blur(12px)}
.hero-media{position:relative;z-index:1;aspect-ratio:4/5;overflow:hidden;border-radius:30px;background:#3a0a31;border:7px solid var(--purple);box-shadow:0 0 0 4px #fff,0 0 0 8px var(--blue),0 0 44px 8px rgba(0,162,255,.55),0 30px 60px rgba(20,0,20,.55)}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(58,10,49,0) 55%,rgba(58,10,49,.55) 100%);pointer-events:none}
.hm-inner{position:absolute;inset:0;will-change:transform}
.hm-poster,.hm-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hm-video{opacity:0;transition:opacity .5s ease}
.hm-video.on{opacity:1}

/* word animations: transform only, so the headline is always visible and the LCP is the poster */
@media (prefers-reduced-motion:no-preference){
  .hero-wow .hw1{animation:hw-drop 1.1s cubic-bezier(.3,1.5,.5,1) .1s both}
  .hero-wow .hw2{animation:hw-spin 1.2s cubic-bezier(.3,1.4,.5,1) .35s both}
  .hero-wow .hw3{animation:hw-soar 1.2s cubic-bezier(.2,1.3,.4,1) .6s both}
  .hero-wow .lead,.hero-wow .btn-row,.hero-wow .hero-link{animation:hw-up .9s ease .9s both}
}
@keyframes hw-drop{0%{transform:translateY(-70px)}100%{transform:none}}
@keyframes hw-spin{0%{transform:rotate(-14deg) scale(.7) translateX(-30px)}100%{transform:none}}
@keyframes hw-soar{0%{transform:translateY(80px) scale(.9)}100%{transform:none}}
@keyframes hw-up{0%{transform:translateY(24px)}100%{transform:none}}
@keyframes st-pop{0%{transform:rotate(-7deg) scale(.4)}100%{transform:rotate(-7deg) scale(1)}}

/* ---------- Bouncing mascot (jumper and trampoline are the same artwork, split at the gap) ---------- */
.jm{position:relative;aspect-ratio:var(--ar);height:260px;margin-inline:auto}
.jm img{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.jm-up{clip-path:inset(0 0 calc(100% - var(--cut)) 0)}
.jm-tr{clip-path:inset(var(--cut) 0 0 0);transform-origin:50% 100%}
@media (prefers-reduced-motion:no-preference){
  .jm.on .jm-up{animation:jm-up 1.9s infinite}
  .jm.on .jm-tr{animation:jm-tr 1.9s infinite}
}
@keyframes jm-up{
  0%{transform:translateY(0);animation-timing-function:cubic-bezier(.15,.75,.4,1)}
  46%{transform:translateY(var(--jump));animation-timing-function:cubic-bezier(.6,0,.85,.35)}
  88%,100%{transform:translateY(0)}
}
@keyframes jm-tr{
  0%{transform:scaleY(1)}
  86%{transform:scaleY(1);animation-timing-function:ease-out}
  92%{transform:scaleY(.93)}
  100%{transform:scaleY(1)}
}
.fly,[data-fly-v]{will-change:translate,rotate}

/* ---------- Flight path band ---------- */
.flight{background:linear-gradient(180deg,#fff 0,var(--lav) 100%);padding:116px 0 70px;position:relative;overflow:hidden}
.flight h2{font-size:clamp(36px,5vw,64px);color:var(--purple-d);margin-bottom:12px}
.flight h2 em{font-style:normal;color:var(--blue)}
.center{text-align:center}
.flight-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:150px;align-items:end}
.fl-col{text-align:center}
.fl-col .jm{height:230px}
.fl-col h3{font-family:"Anton",sans-serif;text-transform:uppercase;font-weight:400;font-size:34px;letter-spacing:.02em;color:var(--purple);margin:16px 0 4px}
.fl-col p{max-width:17em;margin:0 auto;font-weight:500;color:#43344a}

/* ---------- Counters ---------- */
.counts{background:var(--deep);color:#fff;padding:54px 0;clip-path:polygon(0 0,100% 28px,100% 100%,0 100%);margin-top:-28px}
.counts-grid{display:grid;grid-template-columns:1.7fr 1fr 1.25fr;gap:28px 40px;padding-top:12px;align-items:center}
.counts-grid.has-medals{grid-template-columns:1.7fr 1fr 1.25fr 1fr}
.ct{text-align:center}
.ct b{display:block;font-family:"Anton",sans-serif;font-weight:400;font-size:clamp(46px,6vw,80px);line-height:1;color:var(--blue);letter-spacing:.01em;text-shadow:4px 5px 0 rgba(0,0,0,.3)}
.ct-lead-tx{text-align:left}
.ct>span,.ct-lead-tx>span{display:block;margin-top:8px;font-family:"Fredoka",sans-serif;font-weight:500;font-size:16px;line-height:1.35;color:#e8d9ee;max-width:15em;margin-inline:auto}

/* ---------- Scroll reveal (only when JS has switched it on) ---------- */
.hv-on .hv{opacity:0;translate:0 34px;scale:.97;transition:opacity .75s ease,translate .8s cubic-bezier(.2,.8,.2,1),scale .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.hv-on .hv.in{opacity:1;translate:0 0;scale:1}

/* ---------- 3D tilt + glow on class cards ---------- */
.hv-on .card{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .25s,opacity .75s ease,translate .8s cubic-bezier(.2,.8,.2,1),scale .8s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.hv-on .card.tilting{transition:transform .08s linear,box-shadow .25s,opacity .75s ease,translate .8s,scale .8s;--ty:-6px;box-shadow:0 22px 44px rgba(113,31,97,.28),0 0 0 3px rgba(0,162,255,.35)}
.card .glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(143,211,255,.5),transparent 62%);mix-blend-mode:soft-light;z-index:3}
.card.dark .glow,.card.tot .glow{background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(143,211,255,.35),transparent 62%);mix-blend-mode:screen}
.card.tilting .glow{opacity:1}


.ct-lead{display:flex;align-items:center;gap:22px;text-align:left}
.ct-lead-tx>span{margin-inline:0}
.ct .ct-claim,.ct .ct-sm{font-size:clamp(28px,3.1vw,44px);line-height:1.05;text-shadow:3px 4px 0 rgba(0,0,0,.3)}
.ct-lead .ct-claim{color:#ffd23f;text-shadow:3px 4px 0 rgba(0,0,0,.35)}
.ct .ct-sm{text-transform:uppercase}
.gold-medal{flex:0 0 auto;width:100px;min-width:100px;height:125px;overflow:visible;filter:drop-shadow(0 10px 16px rgba(0,0,0,.4)) drop-shadow(0 0 18px rgba(255,210,63,.35))}
.gm-shine{transform-box:fill-box}
@media (prefers-reduced-motion:no-preference){
  .gm-shine{animation:gm-shine 4.2s ease-in-out 1s infinite}
  .gold-medal{animation:gm-sway 5s ease-in-out infinite;transform-origin:50% 0}
}
@keyframes gm-shine{0%,55%{translate:0 0}100%{translate:190px 0}}
@keyframes gm-sway{0%,100%{rotate:-2deg}50%{rotate:2deg}}
/* play affordance on the hero frame */
.hero-media[data-video]{cursor:pointer}
.hero-media[data-video]:focus-visible{outline:4px solid #fff;outline-offset:6px}
.play-badge{position:absolute;z-index:3;right:14px;bottom:14px;width:46px;height:46px;border-radius:50%;background:rgba(6,18,31,.62);border:2px solid rgba(255,255,255,.85);display:grid;place-items:center;transition:transform .2s,background .2s}
.play-badge svg{width:22px;height:22px;fill:#fff;margin-left:2px}
.hero-media[data-video]:hover .play-badge,.hero-media[data-video]:focus-visible .play-badge{transform:scale(1.1);background:var(--blue)}
/* phones: keep the floating buttons off the video frame while it is on screen */
@media (max-width:900px){
  html.vid-in .m-book,html.vid-in .remi-fab{visibility:hidden;opacity:0!important;pointer-events:none!important}
}

/* ---------- Sticky mobile book button ---------- */
.m-book{display:none}
@media (max-width:760px){
  .m-book{display:flex;position:fixed;left:12px;right:163px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:80;box-sizing:border-box;height:56px;min-height:56px;padding:0 10px;align-items:center;justify-content:center;text-align:center;background:var(--blue);color:var(--navy);font-family:"Anton",sans-serif;text-transform:uppercase;letter-spacing:.03em;font-size:19px;line-height:1.05;border-radius:999px;box-shadow:0 5px 0 #0073b8,0 10px 26px rgba(0,162,255,.4);text-decoration:none;transform:translateY(130%);opacity:0;pointer-events:none;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s}
  .m-book.show{transform:none;opacity:1;pointer-events:auto}
  .site-footer .legal{padding-bottom:84px}
}

/* ---------- Video modal ---------- */
.vm{position:fixed;inset:0;z-index:120;display:grid;place-items:center;background:rgba(20,9,26,.88);padding:18px;animation:vm-in .25s ease}
.vm[hidden]{display:none}
.vm-panel{position:relative;width:min(1080px,100%);background:#000;border-radius:18px;overflow:hidden;box-shadow:0 0 0 4px var(--blue),0 30px 80px rgba(0,0,0,.6)}
.vm-panel video{display:block;width:100%;max-height:78vh;background:#000}
.vm-cap{margin:0;padding:10px 18px;background:var(--deep);color:#e8d9ee;font-family:"Fredoka",sans-serif;font-size:15px}
.vm-x{position:absolute;top:10px;right:10px;z-index:2;width:46px;height:46px;border-radius:50%;border:0;background:rgba(20,9,26,.75);cursor:pointer;display:grid;place-items:center}
.vm-x svg{width:22px;height:22px;stroke:#fff;stroke-width:2.6;fill:none;stroke-linecap:round}
.vm-x:hover{background:var(--purple)}
@keyframes vm-in{from{opacity:0}to{opacity:1}}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .hf{width:min(380px,100%)}
  .counts-grid,.counts-grid.has-medals{grid-template-columns:repeat(2,1fr)}
  .ct-lead{grid-column:1/-1;justify-content:center}
  .ct .ct-claim,.ct .ct-sm{font-size:clamp(26px,5vw,38px)}
}
@media (max-width:900px){
  .hero-wow{padding:40px 0 140px;min-height:0}
  .hero-wow .hero-visual{min-height:0;margin-top:34px;padding:0 0 30px}
  .hf{width:min(300px,74%);margin-top:0;rotate:2deg}
  .hf-plate{rotate:-5deg;translate:-10px 8px}
  .hero-media{border-width:5px;border-radius:24px}
    .hero-wow .s2{display:none}
    .flight{padding:84px 0 50px}
  .flight-row{gap:8px;margin-top:110px}
  .fl-col .jm{height:150px}
  .fl-col h3{font-size:22px}
  .fl-col p{font-size:13px}
}
@media (max-width:560px){
  .flight-row{grid-template-columns:1fr;gap:70px;margin-top:80px}
  .fl-col .jm{height:210px}
  .fl-col h3{font-size:30px}
  .fl-col p{font-size:16px}
  .counts-grid{gap:30px 14px}
  .ct-lead{flex-direction:column;text-align:center;gap:14px}
  .ct-lead-tx{text-align:center}
  .ct-lead-tx>span{margin-inline:auto}
  .gold-medal{width:84px;min-width:84px;height:105px}
  .ct .ct-sm{font-size:24px}
  .hero-wow .btn-row .watch-btn{justify-content:center}
}

/* ---------- Reduced motion / save-data: nothing moves, no video ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hm-video{display:none}
  .hm-inner,.card{transform:none!important}
  .fly,[data-fly-v]{translate:none!important;rotate:none!important}
  .vm{animation:none}
}

.fl-more{text-align:center;margin:44px 0 0}

/* ---------- v16/v18: desktop hero = calm wide 16:9 window (phones keep the portrait frame above) ----------
   v18 alignment: both columns share one vertical centre; the frame's visible outer edge (ring included) sits on the
   container's right edge = the header's Book button; the text's left edge = the logo's left edge. No bleed, no tilt. */
.hm-cap{display:none}
@media (min-width:901px){
  .hero-wow{min-height:0;padding:56px 0 150px}
  .hero-wow .hero-grid{grid-template-columns:minmax(0,500px) minmax(0,1fr);gap:56px;align-items:center}
  .hero-wow .hero-copy{max-width:500px}
  .hero-wow h1{font-size:clamp(52px,7vw,92px)}
  .hero-wow .hero-visual{min-height:0;align-items:stretch;align-self:center;margin:0}
  .hf{width:calc(100% - 16px);max-width:560px;margin:0 8px 0 auto;rotate:0deg}
  .hf-plate{inset:-2px;border-radius:30px;transform:rotate(2.2deg) translate(8px,10px)}
  .hero-media{aspect-ratio:1/1;border-radius:24px;border-width:6px}
  .hero-media::after{background:linear-gradient(180deg,rgba(58,10,49,0) 62%,rgba(58,10,49,.5) 100%)}
  .hm-poster,.hm-video{object-position:50% 50%}
  .hm-cap{display:block;position:absolute;z-index:3;left:16px;bottom:14px;font-family:"Fredoka",sans-serif;font-weight:500;font-size:14px;letter-spacing:.04em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6)}
  .play-badge{width:52px;height:52px;right:16px;bottom:14px}
  .hf::before{inset:-40px}
}
@media (min-width:901px) and (max-width:1100px){
  .hero-wow .hero-grid{grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:40px}
  .hero-wow .hero-copy{max-width:430px}
  .hero-wow .btn-row{gap:14px}
  .hero-wow .btn-row .btn-lg{font-size:18px;padding-inline:26px;min-height:58px}
}

/* v17/v18: short desktop viewports (e.g. 1280x720): tighter hero rhythm so "Book a free trial" sits above the fold */
@media (min-width:901px) and (max-height:820px){
  .hero-wow{padding-top:34px}
  .hero-wow .lead{font-size:18px;margin:16px 0 24px}
}

/* v18 balance: counters on three equal columns, each block centred on its column */
@media (min-width:901px){
  .counts{padding:64px 0}
  .counts-grid{grid-template-columns:1.6fr .9fr 1.1fr;gap:32px 40px;padding-top:12px}
  .counts-grid.has-medals{grid-template-columns:repeat(4,1fr)}
  .ct-lead{justify-content:center}
  .ct-lead .ct-claim{font-size:clamp(28px,2.8vw,40px)}
}
.flight h2{margin-bottom:16px}