/* LK Health page: a scroll story. Each scene is a tall section with a sticky stage; health.js maps the scroll position
   inside the section to the motion. UI pieces are cut from the app's own screens. B3: light from the top left,
   solid shadows to the lower right at 35°, no blur on shadows, no gradients. */

.ui{background-repeat:no-repeat;background-color:transparent}

/* ---------------------------------------------------------------- scene frame */
.hs{position:relative}
.hs-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.ha{height:330vh}.hb{height:280vh}.hc{height:340vh}.hn{height:250vh}.hf{height:340vh}.hg{height:210vh}
.hs-copy{position:absolute;z-index:4;display:grid;gap:14px;align-content:start}
.hs-copy .kicker{opacity:.72}
.sh{font-size:clamp(32px,4.4vw,66px);line-height:1.1;font-weight:900;letter-spacing:-.015em;max-width:11em;text-wrap:balance}
:is([data-lang=ja],[data-lang=zh]) .sh{line-height:1.24;letter-spacing:0;max-width:9.5em}
.hs-p{font-size:clamp(16px,1.25vw,19px);line-height:1.75;max-width:28em;opacity:.8}
[data-lang=en] .hs-p{line-height:1.6}
[data-lang=ja] :is(.sh,.hs-p,.ha-sub,.hg-text,.hf-text){word-break:auto-phrase}

/* ---------------------------------------------------------------- the app's Dock (HomeScreen.kt): blur 22 dp, raised tint, glass tint, hairline */
.hp-dock{position:absolute;z-index:4;left:16px;right:16px;bottom:12px;display:flex;gap:2px;padding:6px;border-radius:34px;font-family:var(--font);
  background:linear-gradient(rgba(248,230,199,.28),rgba(248,230,199,.28)),rgba(255,255,255,.58);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  box-shadow:inset 0 0 0 .6px rgba(234,220,196,.55)}
.hp-dk{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;border:0;border-radius:20px;background:transparent;color:#6e5571;font:inherit;transform:scale(.96)}
.hp-dk svg,.hc-it svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hp-dk span{font-size:11px;line-height:15px;letter-spacing:.04em;white-space:nowrap}
.hp-dk.on{background:#ffcc66;color:#3a1c40;border-radius:26px;transform:scale(1)}
.hp-dk.on span{font-weight:700}

/* a screen without a phone around it: the page, rounded, with a long shadow */
.scr{--bs:0px;position:absolute;left:0;top:0;overflow:hidden;background:#fff4e2;border-radius:var(--r,36px);
  box-shadow:calc(var(--bs)*.819) calc(var(--bs)*.574) 0 var(--cast),calc(var(--bs)*1.638) calc(var(--bs)*1.147) 0 var(--cast),calc(var(--bs)*2.457) calc(var(--bs)*1.721) 0 var(--cast),calc(var(--bs)*3.277) calc(var(--bs)*2.294) 0 var(--cast),calc(var(--bs)*4.096) calc(var(--bs)*2.868) 0 var(--cast),calc(var(--bs)*4.915) calc(var(--bs)*3.441) 0 var(--cast),calc(var(--bs)*5.734) calc(var(--bs)*4.015) 0 var(--cast),calc(var(--bs)*6.553) calc(var(--bs)*4.589) 0 var(--cast),calc(var(--bs)*7.373) calc(var(--bs)*5.162) 0 var(--cast),calc(var(--bs)*8.192) calc(var(--bs)*5.736) 0 var(--cast),calc(var(--bs)*9.011) calc(var(--bs)*6.309) 0 var(--cast),calc(var(--bs)*9.830) calc(var(--bs)*6.883) 0 var(--cast),calc(var(--bs)*10.65) calc(var(--bs)*7.457) 0 var(--cast),calc(var(--bs)*11.47) calc(var(--bs)*8.03) 0 var(--cast),calc(var(--bs)*12.29) calc(var(--bs)*8.604) 0 var(--cast),calc(var(--bs)*13.11) calc(var(--bs)*9.178) 0 var(--cast)}
.scr-cv{position:absolute;left:0;top:0;width:400px;height:880px;transform-origin:0 0}
.scr-base{position:absolute;left:0;top:0;width:400px;height:880px}

/* floating cards keep the B3 shadow; it shortens to nothing as they land */
.lift{--bs:1.4px;box-shadow:calc(var(--bs)*.819) calc(var(--bs)*.574) 0 var(--cast),calc(var(--bs)*1.638) calc(var(--bs)*1.147) 0 var(--cast),calc(var(--bs)*2.457) calc(var(--bs)*1.721) 0 var(--cast),calc(var(--bs)*3.277) calc(var(--bs)*2.294) 0 var(--cast),calc(var(--bs)*4.096) calc(var(--bs)*2.868) 0 var(--cast),calc(var(--bs)*4.915) calc(var(--bs)*3.441) 0 var(--cast),calc(var(--bs)*5.734) calc(var(--bs)*4.015) 0 var(--cast),calc(var(--bs)*6.553) calc(var(--bs)*4.589) 0 var(--cast),calc(var(--bs)*7.373) calc(var(--bs)*5.162) 0 var(--cast),calc(var(--bs)*8.192) calc(var(--bs)*5.736) 0 var(--cast),calc(var(--bs)*9.011) calc(var(--bs)*6.309) 0 var(--cast),calc(var(--bs)*9.830) calc(var(--bs)*6.883) 0 var(--cast),calc(var(--bs)*10.65) calc(var(--bs)*7.457) 0 var(--cast),calc(var(--bs)*11.47) calc(var(--bs)*8.03) 0 var(--cast),calc(var(--bs)*12.29) calc(var(--bs)*8.604) 0 var(--cast),calc(var(--bs)*13.11) calc(var(--bs)*9.178) 0 var(--cast),calc(var(--bs)*13.93) calc(var(--bs)*9.751) 0 var(--cast),calc(var(--bs)*14.75) calc(var(--bs)*10.33) 0 var(--cast),calc(var(--bs)*15.57) calc(var(--bs)*10.9) 0 var(--cast),calc(var(--bs)*16.38) calc(var(--bs)*11.47) 0 var(--cast)}

/* ---------------------------------------------------------------- A: title, then the Today screen assembles */
.ha .hs-stage{background:var(--ha-bg,#d3875d);color:#3a1c40;--cast:#3a1c40}
.ha-hero{position:absolute;z-index:3;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;gap:14px;padding:72px var(--gutter) 40px;will-change:opacity,transform}
.ha-hero .kicker .appicon{border-radius:11px}
.ha-name{font-size:clamp(64px,12.5vw,208px);line-height:.92;font-weight:900;letter-spacing:-.025em;color:#fff4e2;white-space:nowrap}
.ha-sub{font-size:clamp(17px,1.5vw,21px);line-height:1.7;max-width:26em;text-wrap:balance;margin-top:clamp(18px,2.4vw,34px)}
.ha-meta{font-size:13px;font-weight:700;letter-spacing:.03em;opacity:.75}
.ha-cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700}
.ha-cue svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;animation:cue 2.4s var(--ease) infinite}
.ha-cards{position:absolute;z-index:2;inset:0;pointer-events:none}
.ha-card{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform,opacity}
.ha-in{border-radius:24px;animation:ha-float 6s ease-in-out infinite;animation-delay:var(--fd,0s)}
.ha-card.landed .ha-in{animation:none}
@keyframes ha-float{0%,100%{translate:0 0}50%{translate:0 -7px}}
.ha-screen{z-index:1;opacity:0}
.ha-copy{left:var(--gutter);top:50%;max-width:min(36vw,560px);transform:translateY(-50%);opacity:0}
.no-js .ha-cards,.no-js .ha-screen{display:none}

/* ---------------------------------------------------------------- B: a card opens into its page */
.hb .hs-stage{background:#fff4e2;color:#3a1c40}
.hb-copy{left:var(--gutter);top:50%;max-width:min(36vw,560px);transform:translateY(-50%)}
.hb-ms{font-size:14px;font-weight:700;color:#6e5571;font-variant-numeric:tabular-nums;margin-top:6px}
.hb-ms b{display:inline-block;min-width:3ch;text-align:right;color:#3a1c40}
.hb-cam{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.hb-screen{--bs:2px}
.hb-patch{position:absolute;border-radius:24px;background:#fff4e2;opacity:0}
.hb-frame{position:absolute;z-index:3;overflow:hidden;border-radius:24px;will-change:left,top,width,height}
.hb-frame>.ui{position:absolute;left:0;top:0;transform-origin:0 0}
.hb-p{width:400px;height:880px;background-color:#fff4e2}

/* ---------------------------------------------------------------- C: the Dock, large, with the tabs behind it */
.hc .hs-stage{background:#fff4e2;color:#3a1c40}
.hc-copy{left:var(--gutter);top:clamp(88px,13vh,140px)}
.hc-row{position:absolute;left:0;top:0;will-change:transform}
.hc-pg{position:absolute;top:0;border-radius:28px;background-color:#fff4e2;box-shadow:0 0 0 1px #eadcc4}
.hc-dockwrap{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.hc-dock{position:relative;display:flex;gap:2px;width:368px;padding:6px;border-radius:34px;font-family:var(--font);
  background:linear-gradient(rgba(248,230,199,.28),rgba(248,230,199,.28)),rgba(255,255,255,.58);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  box-shadow:inset 0 0 0 .6px rgba(234,220,196,.55)}
.hc-pill{position:absolute;z-index:0;left:6px;top:6px;bottom:6px;width:calc((100% - 20px) / 5);border-radius:26px;background:#ffcc66;will-change:transform}
.hc-it{position:relative;z-index:1;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;color:#6e5571;transition:color 200ms var(--ease)}
.hc-it b{font-size:11px;line-height:15px;letter-spacing:.04em;font-weight:400;white-space:nowrap}
.hc-it.on{color:#3a1c40}
.hc-it.on b{font-weight:700}

/* ---------------------------------------------------------------- D: day turns into night */
.hn .hs-stage{background:#fff4e2}
.hn-l{position:absolute;inset:0;overflow:hidden;isolation:isolate}
.hn-day{z-index:0}.hn-night{z-index:1}
.hdr.hp-night{--hdr-ink:#fff4e2;--hdr-bg:#141a36;--glass:rgba(20,26,54,.62)}
.hn-day{background:#fff4e2;color:#3a1c40;--cast:#3a1c40}
.hn-night{background:#141a36;color:#fff4e2;--cast:#0b1030;clip-path:circle(var(--cr,0px) at var(--cx,86%) var(--cy,20%))}
.hn-night .kicker{color:#ffcc66}
.hn-copy{left:var(--gutter);top:50%;max-width:min(38vw,560px);transform:translateY(-50%)}
.hn-orb{position:absolute;z-index:0;left:0;top:0;width:var(--sz,180px);height:var(--sz,180px);border-radius:50%;will-change:transform;overflow:hidden}
.hn-day .hn-orb{background:#ffcc66}
.hn-night .hn-orb{background:#fff4e2}
.hn-night .hn-orb::after{content:"";position:absolute;width:100%;height:100%;border-radius:50%;background:#141a36;left:var(--mo,34%);top:-18%}
.hn-cards{position:absolute;z-index:2;inset:0;pointer-events:none}
.hn-card{position:absolute;left:0;top:0;border-radius:24px}
.hn-card .ui{position:absolute;inset:0;border-radius:inherit}

/* ---------------------------------------------------------------- E: workouts */
.he{position:relative;overflow:hidden;background:#ffcc66;color:#3a1c40;--cast:#3a1c40;--ink:#3a1c40;padding-block:clamp(110px,14vw,200px) clamp(40px,6vw,90px)}
.he-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,80px);align-items:center}
.he-copy{position:relative;z-index:2}
.he-vis{position:relative;min-height:clamp(380px,46vw,640px)}
.he-skel{position:absolute;left:-6%;top:-18%;width:135%;aspect-ratio:400/360}
.he-tile{position:absolute;z-index:2;left:2%;bottom:-6%;will-change:transform}
.he-tile .ui{border-radius:24px}
@media (max-width:860px){.he-grid{grid-template-columns:1fr}.he-vis{min-height:96vw}.he-skel{left:-10%;top:-4%;width:150%}}

/* ---------------------------------------------------------------- F: four more things, sideways */
.hf .hs-stage{display:flex;align-items:center;background:#fff4e2}
.hf-track{display:flex;gap:5vw;padding-inline:var(--gutter);will-change:transform}
.hf-panel{position:relative;flex:none;width:min(84vw,1020px);height:min(70vh,620px);border-radius:44px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:end;
  padding:clamp(28px,4vw,56px);background:var(--pb);color:var(--pf);--cast:var(--pc)}
.hf-diet{--pb:#ffcc66;--pf:#3a1c40;--pc:#3a1c40}
.hf-plan{--pb:#2e3f7a;--pf:#fff4e2;--pc:#0b1030}
.hf-sleep{--pb:#d3875d;--pf:#3a1c40;--pc:#3a1c40}
.hf-route{--pb:#3a1c40;--pf:#fff4e2;--pc:#140918}
.hf-text{position:relative;z-index:2;display:grid;gap:12px;align-content:end}
.hf-n{font-size:13px;font-weight:700;letter-spacing:.06em;opacity:.7}
.hf-text h3{font-size:clamp(34px,4.6vw,72px);line-height:1.04;font-weight:900;letter-spacing:-.015em}
.hf-text p{font-size:clamp(15px,1.25vw,18px);line-height:1.7;max-width:22em;opacity:.88}
.hf-ui{position:absolute;z-index:1;left:0;top:0;will-change:transform}
.hf-ui .ui{border-radius:24px}
@media (max-width:760px){.hf-panel{grid-template-columns:1fr;height:min(78vh,640px);border-radius:32px}}

/* ---------------------------------------------------------------- G: one sentence */
.hg .hs-stage{display:grid;align-items:center;background:#fff4e2;color:#3a1c40}
.hg-in{display:grid;gap:clamp(28px,4vw,48px)}
.hg-text{font-size:clamp(30px,4.6vw,72px);line-height:1.22;font-weight:900;letter-spacing:-.01em;max-width:16em}
:is([data-lang=ja],[data-lang=zh]) .hg-text{line-height:1.38;letter-spacing:0}
.hg-text .w{opacity:var(--o,.14)}
.hg-facts{display:flex;flex-wrap:wrap;gap:10px 12px;opacity:var(--fo,0)}
.hg-facts li{font-size:14px;font-weight:700;padding:10px 16px;border-radius:99px;box-shadow:inset 0 0 0 1.5px #9c8770}

/* ---------------------------------------------------------------- small screens */
@media (max-width:760px){
  .ha-copy,.hb-copy,.hn-copy{top:84px;transform:none;max-width:none;right:var(--gutter)}
  .hc-copy{top:84px;right:var(--gutter)}
  .sh{font-size:clamp(27px,7.4vw,40px)}
  .ha-cue{bottom:20px}
}

/* reduced motion: no pinned scenes; each scene shows its last frame (health.js) */
@media (prefers-reduced-motion:reduce){
  .hs{height:auto!important}
  .hs-stage{position:relative}
  .ha-in{animation:none}
}