/* Home v5: hero stack with scroll effects, zine Free card, Warm-ups, Sharing,
   Tracking and Switching reworks. Loaded by the home page only (head_extra).
   Scroll values come from the [data-prog] driver in assets/motion.js: --p is
   0 to 1, is-on is a threshold. Only transform/opacity change. The default
   (no JS, reduced motion, Motion off, Plain page) is the finished state. */

/* ---- driver defaults ---- */
html.mo:not(.plain):not([data-motion=off]) [data-prog]{--p:0}
html.plain [data-prog],html[data-motion=off] [data-prog]{--p:1!important}
@keyframes hs-tap{0%{opacity:1;scale:1}100%{opacity:0;scale:1.9 2.6}}
@keyframes hs-dip{35%{scale:.86}100%{scale:1}}
@keyframes hs-press{40%{scale:.97}}
@keyframes hs-stamp{0%{opacity:0;scale:1.6;rotate:-14deg}60%{opacity:1;scale:.94}100%{opacity:1;scale:1}}

/* ---- hero: copy stays put while the cutouts scroll past ---- */
.hm-hero{align-items:start}
@media (min-width:901px){.hm-sticky{position:sticky;top:104px;align-self:start}}
.hm-stack{position:relative;display:flex;flex-direction:column;gap:34px;width:min(100%,430px);justify-self:center;padding:6px 0 4px}
.hm-hero .hm-stack{align-self:start}
.hs-item{position:relative;box-shadow:0 1px 2px rgba(60,48,20,.05),0 18px 40px rgba(60,48,20,.10);border-radius:16px;min-width:0}
.hs-item.tilt-l{rotate:-1.2deg}.hs-item.tilt-r{rotate:1.2deg}
.hs-stage{width:90%;align-self:flex-start}
.hs-map{width:94%;align-self:flex-end}
.hs-squat{width:96%;align-self:flex-start}
.hm-stack .hero-cap{align-self:flex-end;margin:0}
.hm-hero .zn-note{display:flex}
@media (min-width:1100px){
  .hs-item .zn-note{position:absolute}
  .n-fill{left:-132px;top:44%}
  .n-sugg{left:auto;right:-128px;top:60%}
  .n-sugg svg{width:66px}
}
@media (max-width:1099px){
  .hs-item .zn-note{position:static;order:9;align-self:flex-end;justify-content:flex-end;margin:10px 2px 0 auto;max-width:none}
  .hs-item.ka-card{display:flex;flex-direction:column}
}
@media (max-width:420px){.hs-stage,.hs-map,.hs-squat{width:100%}.hm-stack{gap:26px}}

/* muscles fill: a flat base map plus two painted layers that fade in */
.hs-maps{position:relative;max-width:300px;margin:0 auto}
.hs-maps .cg-map{max-width:none;width:100%;margin:0}
.hs-layer{position:absolute;inset:0;pointer-events:none}
.hs-layer path:not([data-muscle]){visibility:hidden}
.hs-layer .heat-0{fill-opacity:0!important;stroke-opacity:0}
.hs-a{opacity:clamp(0,calc((var(--p,1) - .05) / .45),1)}
.hs-b{opacity:clamp(0,calc((var(--p,1) - .5) / .45),1)}
.hs-map .ka-blind{margin-top:10px}

/* squat card: the suggestion gets tapped and turns to Applied */
.hs-sugg{position:relative;display:block;cursor:default}
.hs-chip{display:inline-grid;position:relative}
.hs-chip i{grid-area:1/1;font-style:normal;text-align:center;white-space:nowrap;transition:opacity .25s ease}
.hs-sugg .ka-sugg-basis{display:block}
/* finished state is the default; the gate below rewinds it only while motion is on and the card has not been tapped yet */
.hs-chip .c-a{opacity:0}
.hs-chip .c-b{opacity:1}
.hs-sugg{border-color:var(--a-accent);background:var(--a-soft)}
.hs-squat.is-on .hs-sugg{animation:hs-press .35s ease}
html.mo:not(.plain):not([data-motion=off]) .hs-squat:not(.is-on) .hs-chip .c-a{opacity:1}
html.mo:not(.plain):not([data-motion=off]) .hs-squat:not(.is-on) .hs-chip .c-b{opacity:0}
html.mo:not(.plain):not([data-motion=off]) .hs-squat:not(.is-on) .hs-sugg{border-color:var(--a-line);background:var(--a-raised)}
.hs-ring{position:absolute;inset:-3px;border:2px solid var(--a-accent);border-radius:999px;opacity:0;pointer-events:none}
.hs-squat.is-on .hs-ring{animation:hs-tap .7s ease-out}
.hs-squat.is-on .hs-chip{animation:hs-dip .45s ease}
.hs-squat.is-on .hs-chip .c-b{transition-delay:.18s}
html.plain .hs-ring,html[data-motion=off] .hs-ring,html.plain .hs-chip,html[data-motion=off] .hs-chip{animation:none!important}
html.plain .hs-sugg,html[data-motion=off] .hs-sugg{animation:none!important}
html.plain .hs-chip i,html[data-motion=off] .hs-chip i{transition:none}
/* the card keeps its height: the chip stack is one grid cell, so there is no empty band under "Last time" */
.hs-squat .ka-ex-head{padding-bottom:12px}

/* ---- P.01 Free: a zine card ---- */
.free-card{position:relative;rotate:-.5deg;margin-top:6px;padding:clamp(34px,5vw,56px) clamp(22px,5vw,60px) clamp(30px,4vw,48px);background:var(--paper-card);border:2px solid var(--ink);border-radius:6px;box-shadow:6px 6px 0 var(--ink)}
.free-tape{position:absolute;top:-15px;left:11%;width:112px;height:30px;rotate:-5deg;background:color-mix(in srgb,var(--sticker) 82%,transparent);border:1px solid var(--sticker-edge);box-shadow:0 1px 0 rgba(0,0,0,.08)}
.free-tape::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(255,255,255,.35) 6px 8px)}
.free-card .free-cap{margin:0 0 6px}
.free-card h2{margin:0 0 14px;font-size:clamp(72px,15vw,168px);line-height:1.02;letter-spacing:-.07em;font-weight:900}
.free-card h2 .hl{display:inline;padding:0 .08em .04em;margin-left:-.06em;border-radius:.06em;box-shadow:.04em .04em 0 var(--hl-edge)}
.free-lead{max-width:30em;margin:0;font-size:clamp(17px,2vw,20px);line-height:1.55;color:var(--ink)}
.free-lead a{color:var(--green-deep);font-weight:800}
.free-stamp{display:flex;flex-direction:column;gap:2px;margin:22px 0 0;width:max-content;padding:10px 16px 9px;border:3px double var(--green-deep);border-radius:8px;color:var(--green-deep);font:800 12.5px/1.35 var(--mono);letter-spacing:.14em;text-transform:uppercase;rotate:-5deg;background:transparent}
@media (min-width:760px){.free-stamp{position:absolute;right:clamp(28px,6vw,90px);top:clamp(70px,9vw,120px);margin:0;rotate:7deg;font-size:15px;padding:14px 22px 12px}}
html.mo:not(.plain):not([data-motion=off]) .free-card:not(.is-on) .free-stamp{opacity:0;scale:1.6}
html.mo:not(.plain):not([data-motion=off]) .free-card.is-on .free-stamp{animation:hs-stamp .5s cubic-bezier(.3,1.3,.5,1) .15s backwards}
.n-free{position:static;display:flex;margin:18px 0 0 auto;max-width:none;justify-content:flex-end;width:max-content}
.free-card .n-free{position:relative}
@media (min-width:760px){.free-card .n-free{position:absolute;right:clamp(40px,7vw,120px);bottom:clamp(18px,3vw,30px);margin:0}}
html.plain .free-card{rotate:none;box-shadow:none}
html.plain .free-stamp,html.plain .free-tape{rotate:none}

/* ---- P.04 Warm-ups ---- */
.warm-visual{position:relative;min-width:0}
.warm-visual .ka-exercise{max-width:520px}
.hs-warm{rotate:1deg}
.hs-warm .ka-ex-head{align-items:center}
.hs-wbtn{transition:scale .2s ease}
.hs-wbtn{background:var(--a-accent);border:1px solid var(--a-accent);color:#fff;scale:.96}
html.mo:not(.plain):not([data-motion=off]) .hs-warm:not(.is-on) .hs-wbtn{background:transparent;border:1px dashed var(--a-line-strong);color:var(--a-ink);scale:1}
.hs-wrow{opacity:var(--p,1);translate:0 calc((1 - var(--p,1)) * -12px)}
.warm-visual .zn-note{position:static;margin:12px 4px 0 auto;justify-content:flex-end;max-width:none;width:max-content}
@media (min-width:901px){.warm-visual .zn-note{position:absolute;left:-150px;top:46%;margin:0}}

/* ---- P.05 Sharing: the shared page slides out from behind the link ---- */
.share-duo{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:center}
.share-text .share-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin:16px 0 0}
.share-stage{position:relative;min-width:0}
.share-pair{position:relative;display:flex;flex-direction:column;max-width:440px;margin-inline:auto}
.share-pair .sd-a{position:relative;z-index:2;width:84%;align-self:flex-start;rotate:-1.6deg}
.share-pair .sd-b{position:relative;z-index:1;width:94%;align-self:flex-end;margin-top:-34px;padding-top:50px;--q:calc(1 - var(--p,1));translate:calc(var(--q) * -22px) calc(var(--q) * -90px);rotate:calc(1.2deg - var(--q) * 3deg);opacity:calc(.25 + var(--p,1) * .75);will-change:transform}
.share-stage .zn-note{position:static;margin:12px 4px 0 auto;justify-content:flex-end;max-width:none;width:max-content}
@media (min-width:901px){.share-stage .zn-note{position:absolute;right:-6px;bottom:-34px;margin:0}}
.share-stage .zn-legend{margin-bottom:22px}
.share-page .ka-share-actions{margin-bottom:6px}
@media (max-width:900px){.share-duo{grid-template-columns:minmax(0,1fr)}}
html.plain .sd-a{rotate:none}

/* ---- P.06 Tracking ---- */
.track-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--grid-gap,20px);align-items:start;margin-top:6px}
.track-grid .fcard{height:auto}
.track-grid .c-prs{position:relative}
@media (min-width:901px){.track-grid .c-prs{rotate:.6deg;margin-top:34px}.track-grid .chart-card{rotate:-.4deg}}
@media (max-width:900px){.track-grid{grid-template-columns:minmax(0,1fr)}}
.c-prs .zn-note{right:auto;left:auto;top:-26px;right:16px;max-width:190px}
.c-prs .pr-list li{--t:clamp(0,calc((var(--p,1) - .1 - var(--r,0) * .2) / .2),1);opacity:var(--t);scale:calc(1.06 - var(--t) * .06);transform-origin:50% 50%}
.also-line{margin:26px 0 0;padding-top:18px;border-top:1.5px dashed var(--line-strong);color:var(--muted);font-size:15.5px;display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline}
.home-head .home-lede{margin:8px 0 0}

/* ---- P.07 Switching and Coach ---- */
.hm-pair-card{border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.hm-pair-card#import{rotate:-.4deg}
.hm-pair-card#coach{rotate:.5deg}
@media (max-width:900px){.hm-pair-card#coach{margin-top:12px}}
.import-steps .step-num{font-family:var(--mono)}
.hm-coach{position:relative}
.hm-coach .zn-note{top:auto;right:20px;bottom:-34px;left:auto;max-width:200px}
@media (max-width:900px){.hm-coach .zn-note{position:static;margin:6px 0 0 auto}}
html.plain .hm-pair-card,html.plain .hs-item,html.plain .hs-warm,html.plain .track-grid .fcard{rotate:none;box-shadow:none}
html.plain .share-pair .sd-b{rotate:none}
.hm-stack::before{content:none}
.free-card h2 .hl{background:var(--hl);color:var(--ink)}
.free-card .free-cap{margin-bottom:22px}
.free-card h2{line-height:1.2;margin-bottom:22px}
.free-card h2 .hl{padding:0 .1em;line-height:1.1;display:inline-block}