/* AHD polish layer — motion, micro-interactions and small fixes on top of the existing
   design. Nothing here changes layout, colors or fonts. Motion only runs when the visitor's
   device allows it (html.ahd-motion is set by ahd-polish.js). */

/* ---- No sideways wiggle on phones (clip does not break sticky headers) ---- */
html,body{overflow-x:clip}

/* ---- Scroll reveal ---- */
html.ahd-motion .rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rv-d,0s)}
html.ahd-motion .rv.in{opacity:1;transform:none}
html.ahd-motion .rv-l{transform:translateX(-26px)}
html.ahd-motion .rv-l.in{transform:none}

/* ---- Hero entrance ---- */
html.ahd-motion .hero-in>*{animation:ahdUp .8s cubic-bezier(.2,.7,.2,1) both}
html.ahd-motion .hero-in>*:nth-child(2){animation-delay:.08s}
html.ahd-motion .hero-in>*:nth-child(3){animation-delay:.16s}
html.ahd-motion .hero-in>*:nth-child(4){animation-delay:.24s}
html.ahd-motion .hero-in>*:nth-child(5){animation-delay:.32s}
html.ahd-motion .hero-in>*:nth-child(n+6){animation-delay:.4s}
@keyframes ahdUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---- Buttons & cards feel physical ---- */
.btn,a.btn,button.btn,.complete,.v4-path-card,.ahd-start-step,.lesson{transition:transform .14s ease,box-shadow .2s ease,filter .2s ease}
.btn:active,a.btn:active,button.btn:active,.complete:active{transform:translateY(1px) scale(.975)}
@media (hover:hover){
  .btn:hover,a.btn:hover{filter:brightness(1.06)}
  .v4-path-card:hover,.ahd-start-step:hover,.lesson:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(20,14,8,.14)}
}
html.ahd-motion .btn.primary.pulse{animation:ahdPulse 2.4s ease-in-out 1.2s 2}
@keyframes ahdPulse{0%,100%{box-shadow:0 0 0 0 rgba(168,25,34,.0)}50%{box-shadow:0 0 0 10px rgba(168,25,34,.16)}}

/* ---- Wide comparison table: show that it scrolls ---- */
.v4-table-wrap{position:relative;scroll-snap-type:x proximity}
.swipe-hint{display:none;align-items:center;justify-content:flex-end;gap:6px;margin:10px 4px -14px;font:900 10px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#9e1b32}
.swipe-hint i{font-style:normal;display:inline-block}
html.ahd-motion .swipe-hint i{animation:ahdNudge 1.4s ease-in-out infinite}
@keyframes ahdNudge{0%,100%{transform:none}50%{transform:translateX(5px)}}
@media (max-width:760px){.swipe-hint{display:flex}.v4-table-wrap{box-shadow:inset -18px 0 16px -14px rgba(0,0,0,.28)}}

/* ---- Home header: keep the menu button on screen on small phones ---- */
@media (max-width:430px){.topbar{gap:8px!important}.topbar .brand{flex:1 1 auto!important;min-width:0!important;overflow:hidden}.topbar .brand strong,.topbar .brand span{white-space:nowrap}.top-signin{flex:0 0 auto;padding:7px 8px!important;font-size:11px!important;min-height:36px!important}.topbar #menuBtn{flex:0 0 auto}}
@media (max-width:374px){.top-signin{display:none!important}}

/* ---- Course hero: headline readable over the photo on phones ---- */
@media (max-width:899px){.nike-hero{box-shadow:inset 0 -95vw 70vw -40vw rgba(8,8,8,.96)}.nike-hero .nike-title{text-shadow:0 3px 18px rgba(0,0,0,.65)}}

/* ---- Ball icons (hits) ---- */
.ahd-ball{display:inline-block;width:1em;height:1em;vertical-align:-.12em}
.ahd-balls{display:inline-flex;gap:1px;align-items:center}

/* ---- Celebration overlay ---- */
.ahd-cele{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;pointer-events:none}
.ahd-cele .card{pointer-events:auto;min-width:min(86vw,360px);max-width:420px;padding:24px 22px 20px;border-radius:20px;background:linear-gradient(160deg,#141210,#2b1016);color:#fff;text-align:center;border:1px solid rgba(201,174,126,.5);box-shadow:0 30px 80px rgba(0,0,0,.45);transform:scale(.6);opacity:0;animation:ahdPop .5s cubic-bezier(.2,1.4,.3,1) forwards}
.ahd-cele .kick{display:block;color:#d8c19a;font:900 11px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.18em;text-transform:uppercase}
.ahd-cele h3{margin:10px 0 6px;font-family:Anton,Impact,"Arial Narrow",sans-serif;font-size:46px;line-height:.95;letter-spacing:.01em;text-transform:uppercase}
.ahd-cele h3.hr{color:#ff5a6a;text-shadow:0 0 24px rgba(255,90,106,.45)}
.ahd-cele p{margin:0;color:#e8dfd0;font-size:15px;line-height:1.4}
.ahd-cele .bb{display:flex;justify-content:center;gap:6px;margin:12px 0 4px;font-size:28px}
.ahd-cele .bb .ahd-ball{width:30px;height:30px;opacity:0;animation:ahdPop .35s cubic-bezier(.2,1.4,.3,1) forwards}
.ahd-cele.out .card{animation:ahdOut .35s ease forwards}
@keyframes ahdPop{to{transform:scale(1);opacity:1}}
@keyframes ahdOut{to{transform:scale(.9);opacity:0}}
.ahd-fly{position:fixed;z-index:9998;left:50%;top:55%;width:22px;height:22px;pointer-events:none;animation:ahdFly 1.1s cubic-bezier(.15,.8,.3,1) forwards}
@keyframes ahdFly{from{transform:translate(-50%,-50%) scale(.4) rotate(0);opacity:1}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1) rotate(var(--rot));opacity:0}}

@media (prefers-reduced-motion:reduce){.ahd-cele .card,.ahd-cele .bb .ahd-ball{animation:none;opacity:1;transform:none}.ahd-fly{display:none}}

/* ---- Premium lesson player (course-app.js renders .lp) ---- */
.lp .lp-top{position:sticky;top:-22px;z-index:3;margin:-22px -18px 10px;padding:16px 18px 10px;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid #eee4d3}
.lp .lp-top .kicker{margin:0 0 8px}
.lp-prog{height:6px;border-radius:99px;background:#efe7d8;overflow:hidden}
.lp-prog i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#9e1b32,#c43650);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.lp-meta{display:block;margin-top:6px;color:#6e6456;font-size:11.5px;font-weight:700;letter-spacing:.02em}
.lp-meta b{color:#3f8b68}
.lp h2#lessonTitle{margin-top:8px}
.lp .lp-step{position:relative;border:1px solid #eadfcb;background:#fffdf9;padding:14px 15px 15px}
.lp .lp-step.cue{background:#17140f;color:#f1e8d8;border-color:#17140f}
.lp-step-h{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.lp-step-h b{font-size:11px;font-weight:950;letter-spacing:.14em;color:#9e1b32}
.lp .cue .lp-step-h b{color:#d8c19a}
.lp-n{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#9e1b32;color:#fff;font-size:12px;font-weight:950}
.lp .cue .lp-n{background:#c9ae7e;color:#17140f}
.lp-step-h svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.lp .lp-step-b{font-size:16px;line-height:1.62}
.lp .cue .lp-step-b{font-size:18px;font-weight:800;line-height:1.4}
.lp-bar{position:sticky;bottom:calc(-32px - env(safe-area-inset-bottom));z-index:3;display:grid;grid-template-columns:52px 1fr 52px;gap:8px;align-items:center;margin:16px -18px 0;padding:12px 18px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid #eee4d3}
.lp-bar .complete{margin:0;min-height:52px}
.lp-bar .complete.is-done{background:#3f8b68;box-shadow:0 3px 0 #2c6649}
.lp-bar .lp-prev,.lp-bar .lp-next{min-height:52px;width:52px;padding:0;font-size:26px;line-height:1;border-radius:12px;display:grid;place-items:center}
.lp-swipe{margin:8px 0 0;text-align:center;color:#9a8f80;font-size:11px;font-weight:700}
@media (hover:hover) and (pointer:fine){.lp-swipe{display:none}}
.lp .lesson-browse{display:block;margin-top:12px}
html.ahd-motion .lp .lp-step{animation:ahdUp .45s cubic-bezier(.2,.7,.2,1) both}
html.ahd-motion .lp .lp-step:nth-of-type(2){animation-delay:.04s}
html.ahd-motion .lp .lp-step:nth-of-type(3){animation-delay:.08s}
html.ahd-motion .lp .lp-step:nth-of-type(4){animation-delay:.12s}
html.ahd-motion .lp .lp-step:nth-of-type(5){animation-delay:.16s}
.lp .lp-top{padding-right:62px}
#modalClose{z-index:6}
.lp-step-h svg{display:none}
.ch-tiers .ahd-balls{display:flex;justify-content:center;margin-bottom:3px}
.ch-tiers .ahd-ball{width:11px;height:11px}
@media (max-width:430px){.topbar .brand{overflow:visible}.topbar .brand strong{font-size:11.5px!important;letter-spacing:.06em!important}.topbar .brand div span{font-size:9.5px!important;letter-spacing:.14em!important}.topbar .brand img{width:62px!important;height:auto!important}}