/* Musafir Tara — a scroll story. One night sky, one gold thread, nine quiet scenes. */
:root{
  --night:#1b1528; --plum:#302744; --dusk:#4a3476;
  --cream:#faf3e3; --soft:#d9cde4; --gold:#f5c780; --amber:#e9b558;
  --serif:Georgia,'Iowan Old Style','Times New Roman',serif;
  --sans:system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--cream);font-family:var(--serif);overflow-x:hidden}
a{color:var(--gold)}
a:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:6px}
.defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- sky ---------- */
.sky{position:fixed;inset:0;z-index:0;overflow:hidden;
  background:radial-gradient(120% 90% at 75% 15%,#4b3a66 0%,var(--plum) 38%,var(--night) 100%)}
.stars{position:absolute;inset:0;width:100%;height:100%;transition:opacity 1.6s}
.storm,.dawn{position:absolute;inset:0;opacity:0;transition:opacity 1.8s}
.storm{background:linear-gradient(#0e0a16,#1a1424)}
.dawn{background:linear-gradient(transparent 45%,#6b4263 80%,#a8684f 100%)}
.guide{position:absolute;top:9svh;right:11vw;width:clamp(34px,5vw,58px);fill:var(--gold);
  filter:drop-shadow(0 0 14px #f5c78099);transition:opacity 1.6s,transform 1.6s;opacity:.85}
[data-scene="lost"] .stars{opacity:.12}
[data-scene="lost"] .storm{opacity:.9}
[data-scene="lost"] .guide{opacity:.06;transform:scale(.6)}
[data-scene="star"] .guide{opacity:0}
[data-scene="weave"] .guide,[data-scene="others"] .guide,[data-scene="end"] .guide{opacity:1;transform:scale(1.25)}
[data-scene="others"] .dawn{opacity:.6}
[data-scene="end"] .dawn{opacity:1}

/* ---------- story ---------- */
main{position:relative;z-index:1}
.thread{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.thread path{fill:none;stroke-linecap:round}
#thread-ghost{stroke:var(--gold);stroke-width:1;opacity:.12;stroke-dasharray:2 9}
#thread-line{stroke:var(--gold);stroke-width:2.5;filter:drop-shadow(0 0 6px #f5c78088)}
#thread-tip{fill:#fff3d6;filter:drop-shadow(0 0 10px #f5c780);opacity:0}

.scene{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.1rem;padding:12svh max(11vw,28px);text-align:center}
.art{width:min(680px,100%);height:auto;margin-bottom:.8rem;overflow:visible}
.line{margin:0;max-width:24ch;font-size:clamp(1.4rem,1rem + 2vw,2.15rem);line-height:1.4;text-wrap:balance;
  text-shadow:0 2px 18px #120d1cdd}
.line.soft{font-style:italic;color:var(--soft);font-size:clamp(1.15rem,.9rem + 1.3vw,1.6rem);max-width:28ch}

.js .scene .line,.js .scene .art{opacity:0;transform:translateY(18px);transition:opacity 1.1s ease,transform 1.1s ease}
.js .scene.seen .art{opacity:1;transform:none}
.js .scene.seen .line{opacity:1;transform:none;transition-delay:.35s}
.js .scene.seen .line + .line{transition-delay:1.1s}

/* intro + end */
.portrait{position:relative;width:min(340px,70vw);display:grid;place-items:center}
.portrait.small{width:min(260px,58vw)}
.moon{position:absolute;width:92%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fff6df,#f3dfb4 60%,#e3c489);
  box-shadow:0 0 60px 10px #f5c78055,0 0 140px 40px #f5c78022}
.portrait img{position:relative;width:100%;height:auto;display:block}
.end .portrait img{transform:scaleX(-1)}
h1{margin:.6rem 0 0;font-size:clamp(2.6rem,1.6rem + 5vw,4.6rem);font-weight:400;letter-spacing:-.02em;line-height:1.05}
.whisper{margin:0;font-style:italic;color:var(--soft);font-size:clamp(1.05rem,.9rem + .8vw,1.35rem)}
.begin{display:inline-flex;align-items:center;gap:.5em;min-height:44px;margin-top:1.2rem;padding:.5rem 1.4rem;
  font-family:var(--sans);font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  border:1px solid #f5c78066;border-radius:999px}
.begin:hover{background:#f5c7801f}
.begin span{display:inline-block;animation:nudge 2.2s ease-in-out infinite}
.names{font-size:clamp(1.1rem,.9rem + 1vw,1.45rem);color:var(--soft);max-width:none}
.big{font-size:clamp(2.2rem,1.4rem + 4vw,3.8rem);color:var(--gold)}

/* ---------- illustrations ---------- */
.far{fill:#3e3159}.mid{fill:#322748}.near{fill:#211930}.ink{fill:#17111f}
.wall{fill:#3a2d50}.roof{fill:#17111f}.snow{fill:#cfc4de;opacity:.6}
.glow{fill:#ffd98f;filter:drop-shadow(0 0 10px #ffd98f)}
.trail{fill:none;stroke:var(--gold);stroke-width:2;stroke-dasharray:1 8;stroke-linecap:round;opacity:.7}
.tower{fill:#1c1529}
.cloud{fill:#2c2438;opacity:.95}
.c1{animation:drift 26s ease-in-out infinite alternate}
.c2{animation:drift 34s ease-in-out infinite alternate-reverse}
.c3{fill:#231c2e;animation:drift 42s ease-in-out infinite alternate}
.rays circle{fill:none;stroke:var(--gold);stroke-width:1;opacity:.22}
.rays{transform-origin:300px 120px;animation:breathe 5s ease-in-out infinite}
.bigstar{fill:var(--gold);filter:drop-shadow(0 0 22px #f5c780aa)}
.edge{fill:var(--amber)}
.fringe{stroke:var(--amber);stroke-width:3;stroke-linecap:round;fill:none}
.js .cloth{clip-path:inset(0 100% 0 0);transition:clip-path 2.6s cubic-bezier(.3,.1,.2,1) .3s}
.js .seen .cloth{clip-path:inset(0 -5% 0 0)}
.lamp{fill:#ffd98f;filter:drop-shadow(0 0 6px #ffd98f)}

@keyframes nudge{50%{transform:translateY(5px)}}
@keyframes drift{from{transform:translateX(-18px)}to{transform:translateX(18px)}}
@keyframes breathe{50%{transform:scale(1.08);opacity:.7}}

footer{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem 1.5rem;
  padding:1.2rem max(16px,5vw) 2rem;font-family:var(--sans);font-size:.9rem;color:var(--cream)}
footer a{display:inline-flex;align-items:center;min-height:44px;padding:0 .5rem}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .scene .line,.js .scene .art{opacity:1;transform:none}
  .js .cloth{clip-path:none}
}