:root{
  --fig-h: 240px;          /* rendered height of the stick figure (240 svg units) */
  --ground: 18vh;          /* distance of the ground line from the bottom */
  --ink: #111;
  --paper: #fff;
  --accent: #e63946;
  --muted: #8a8a8a;
  --font-latin: 'Nunito', system-ui, -apple-system, sans-serif;
  --font-hand: 'Caveat', 'Comic Sans MS', cursive;
  --font-fa: 'Vazirmatn', 'Nunito', sans-serif;
}
*{ box-sizing: border-box; }
html, body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-latin); -webkit-font-smoothing:antialiased; }
html[lang="fa"] body{ font-family:var(--font-fa); }

#scroller{ position:relative; width:100%; }

#stage{ position:fixed; inset:0; overflow:hidden; }
#sky{ position:absolute; top:0; left:0; height:100%; width:0; z-index:0; pointer-events:none; will-change:transform; }
.cloud{ position:absolute; opacity:.75; }
.cloud svg{ display:block; }
#topbar, #narrator, #scene, #hint{ z-index:1; }
#night{ position:absolute; inset:0; background:#0b1020; opacity:0; pointer-events:none; z-index:0; transition:background .08s; }
#night .dclouds{ position:absolute; inset:0; opacity:0; }
#night .dclouds svg{ position:absolute; height:auto; }
#night .dclouds path{ fill:#1c2140; stroke:#2e3560; stroke-width:3; stroke-linejoin:round; transition:fill .08s; }
#night.flash{ background:#4a5285; }
#night.flash .dclouds path{ fill:#5a62a0; }
#night .bolt{ position:absolute; top:11%; left:63%; width:70px; height:190px; opacity:0; }
body.night{ --ink:#f3f3f3; --muted:#9fa8c0; }
body.night .card p{ color:#d9dde8; }
body.night #ground, body.night #figure, body.night .prop, body.night .tuft{ filter:invert(1) hue-rotate(180deg); }
body.night #ground::after{ filter:none; }
body.night #worldFront .prop{ filter:none; }
body.night .cloud{ opacity:0; }
body.night #ticker{ color:#2a2f4a; }
body.night #langs button.active{ border-color:#f3f3f3; color:#f3f3f3; }
#stage, #ground, .card, .cloud{ transition:filter .35s, color .35s, opacity .35s; }
.tuft{ position:absolute; bottom:-2px; }
.tuft svg{ display:block; }

/* ---------- top bar ---------- */
#topbar{ position:absolute; top:0; left:0; right:0; height:52px; display:flex; align-items:center; justify-content:flex-end; padding:0 14px; z-index:5; }
#progress{ position:absolute; top:0; left:0; height:3px; width:0; background:var(--ink); transition:width .08s linear; }
#langs{ display:flex; gap:4px; }
#langs button{ background:none; border:1.5px solid transparent; border-radius:999px; padding:4px 11px; font:600 13px/1 var(--font-latin); color:var(--muted); cursor:pointer; }
#langs button:hover{ color:var(--ink); }
#langs button.active{ border-color:var(--ink); color:var(--ink); }

/* ---------- narrator ---------- */
#narrator{ position:absolute; top:56px; left:0; right:0; bottom:calc(var(--ground) + var(--fig-h) + 16px); display:flex; align-items:center; justify-content:center; padding:0 18px; text-align:center; pointer-events:none; }
#cards{ position:relative; width:100%; max-width:760px; height:100%; pointer-events:auto; }
.card{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:safe center; align-items:center; overflow:hidden; opacity:0; visibility:hidden; }
.card .inner{ width:100%; display:flex; flex-direction:column; align-items:center; }
.card .inner > *{ flex:none; max-width:100%; }
.card .date{ font:700 13px/1 var(--font-latin); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0 0 14px; }
html[lang="fa"] .card .date{ font-family:var(--font-fa); letter-spacing:0; font-size:14px; }
.card h1, .card h2{ font:700 clamp(34px, 6.5vw, 64px)/1.05 var(--font-hand); margin:0 0 16px; }
html[lang="fa"] .card h1, html[lang="fa"] .card h2{ font:800 clamp(28px, 5.5vw, 50px)/1.35 var(--font-fa); }
.card p{ font-size:clamp(16px, 2.1vw, 21px); line-height:1.65; margin:0; color:#3a3a3a; }
.card .w, .card .c{ display:inline-block; white-space:pre; backface-visibility:hidden; }
.card .wd{ display:inline-block; white-space:nowrap; }
.card h1, .card h2{ perspective:600px; }
.card .caret{ display:inline-block; width:3px; height:.8em; background:var(--accent); margin-inline-start:4px; vertical-align:-0.05em; animation:blink .8s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0 } }
.card h2.marker{ --mk:0%; background:linear-gradient(transparent 55%, #fff1a8 55%, #fff1a8 92%, transparent 92%) no-repeat; background-size:var(--mk) 100%; display:inline-block; padding:0 .15em; }
.card .tags{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:16px; }
.card .chip{ display:inline-block; padding:5px 12px; border:2px solid var(--ink); border-radius:999px; font:700 13px/1 var(--font-latin); background:#fff; }
.card .chip:nth-child(3n+1){ border-color:#e63946 } .card .chip:nth-child(3n+2){ border-color:#457b9d } .card .chip:nth-child(3n){ border-color:#2a9d8f }
.card .date{ unicode-bidi:plaintext; }
.card .bul{ list-style:none; margin:14px auto 0; padding:0; max-width:640px; text-align:start; }
.card .bul li{ position:relative; padding-inline-start:18px; font-size:clamp(14px,1.7vw,16.5px); line-height:1.5; color:#444; margin:4px 0; }
.card .bul li::before{ content:''; position:absolute; inset-inline-start:0; top:.55em; width:8px; height:8px; border-radius:50%; background:var(--accent); }
a.chip{ text-decoration:none; color:var(--ink); }
a.chip:hover{ background:#fff1a8; }
.card .links{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin-top:18px; }
.card .lnk{ font:600 clamp(14px,2vw,17px)/1.3 var(--font-latin); color:var(--ink); text-decoration:none; border-bottom:2px solid var(--accent); padding-bottom:2px; direction:ltr; unicode-bidi:isolate; }
.card .lnk b{ font-weight:800; color:var(--accent); margin-inline-end:6px; }
.card .cv{ display:inline-block; margin-top:20px; padding:10px 20px; border:2.5px solid var(--ink); border-radius:999px; font:800 15px/1 var(--font-latin); color:var(--ink); text-decoration:none; background:#fff; }
html[lang="fa"] .card .cv{ font-family:var(--font-fa); }
.card .cv:hover{ background:var(--ink); color:#fff; }
.note{ position:absolute; bottom:0; width:0; }
.note-card{ position:absolute; bottom:70px; left:-90px; width:180px; padding:8px 10px; background:#fff; border:2.5px solid var(--ink); border-radius:8px; font:600 12px/1.4 var(--font-latin); text-align:center; transform:rotate(-2deg); }
html[lang="fa"] .note-card{ font-family:var(--font-fa); }
.note-card b{ display:block; font-weight:800; margin-bottom:2px; }
.note-card span{ color:#555; }
.note-card::after{ content:''; position:absolute; left:50%; bottom:-14px; width:0; height:0; border:7px solid transparent; border-top-color:var(--ink); transform:translateX(-50%); }
.note i{ position:absolute; bottom:0; left:-2px; width:4px; height:62px; background:var(--ink); }
.card .mail{ display:inline-block; margin-top:18px; font:700 clamp(16px,2.4vw,24px)/1 var(--font-latin); color:var(--ink); text-decoration:none; border-bottom:2px solid var(--accent); padding-bottom:3px; }
#ticker{ position:absolute; top:50%; left:0; right:0; transform:translateY(-50%); text-align:center; font:700 clamp(44px, 9vw, 96px)/1 var(--font-hand); color:#dcdcdc; opacity:0; letter-spacing:.02em; }
html[lang="fa"] #ticker{ font-family:var(--font-fa); font-weight:800; }

/* ---------- scene ---------- */
#scene{ position:absolute; left:0; right:0; bottom:0; height:calc(var(--ground) + var(--fig-h) + 90px); }
#ground{ position:absolute; left:0; right:0; bottom:var(--ground); height:2px; background:var(--ink); }
#ground::after{ content:''; position:absolute; left:0; right:0; top:7px; height:2px;
  background:repeating-linear-gradient(90deg, #c8c8c8 0 18px, transparent 18px 44px);
  background-position-x:var(--ox, 0px); }
#world, #worldFront{ position:absolute; left:0; bottom:var(--ground); height:0; will-change:transform; }
.prop{ position:absolute; bottom:0; }
.prop svg{ display:block; overflow:visible; }
#figure{ position:absolute; bottom:var(--ground); height:var(--fig-h); width:calc(var(--fig-h) * 220 / 240); transform:translateX(-50%); will-change:transform; }
#figure svg{ width:100%; height:100%; overflow:visible; display:block; }

/* ---------- scroll hint ---------- */
#hint{ position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px;
  font:700 11px/1 var(--font-latin); letter-spacing:.25em; text-transform:uppercase; color:var(--muted); transition:opacity .3s; }
html[lang="fa"] #hint{ font-family:var(--font-fa); letter-spacing:0; font-size:13px; }
#hint i{ display:block; width:1.5px; height:30px; background:var(--muted); animation:drop 1.5s ease-in-out infinite; }
@keyframes drop{ 0%{ transform:scaleY(0); transform-origin:top } 48%{ transform:scaleY(1); transform-origin:top } 52%{ transform:scaleY(1); transform-origin:bottom } 100%{ transform:scaleY(0); transform-origin:bottom } }

/* ---------- mobile ---------- */
@media (max-width: 640px){
  :root{ --fig-h:150px; --ground:13vh; }
  #night .bolt{ left:70%; top:12%; width:40px; height:110px; }
  .card .chip{ font-size:11.5px; padding:4px 10px; }
  .card .tags{ gap:6px; margin-top:12px; }
  .card .bul li{ font-size:13.5px; }
  .card.long h2{ font-size:26px; margin-bottom:8px; }
  .card.long p{ font-size:14px; }
  .card.long .bul li{ font-size:12.5px; line-height:1.4; margin:2px 0; }
  .card.long .tags{ margin-top:8px; }
  .note-card{ width:140px; font-size:11px; left:-70px; }
  #narrator{ top:48px; }
  .card p{ font-size:15.5px; line-height:1.55; }
  .card .date{ font-size:11px; margin-bottom:10px; }
  #ticker{ font-size:54px; }
}
@media (max-height: 900px) and (min-width: 641px){
  :root{ --fig-h:200px; --ground:14vh; }
  .card h1, .card h2{ font-size:clamp(30px, 5vw, 48px); margin-bottom:10px; }
  .card .bul li{ font-size:14px; margin:2px 0; }
}
@media (prefers-reduced-motion: reduce){
  #hint i{ animation:none; }
}