/* ============================================================
   Ms. Hazbri — a love story
   ============================================================ */
:root{
  --ink:#0a0208; --ink2:#160512; --ink3:#22081a;
  --rose:#ff2d6f; --ember:#ff4d00; --gold:#ffc048; --goldl:#ffe4a8;
  --cream:#f7e9d6; --muted:#c2a08f;
  --serif:"Cormorant Garamond",Georgia,serif;
  --disp:"Cinzel Decorative",Georgia,serif;
  --caps:"Cinzel",Georgia,serif;
  --script:"Great Vibes",cursive;
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--cream);
  font-family:var(--serif); font-size:20px; line-height:1.78;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
body.locked{overflow:hidden}
img{max-width:100%; display:block}
::selection{background:var(--rose); color:#fff}

/* ---------- ambient background ---------- */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(255,77,0,.20), transparent 62%),
    radial-gradient(900px 560px at 92% 12%, rgba(255,45,111,.17), transparent 60%),
    radial-gradient(1000px 700px at 50% 108%, rgba(255,192,72,.11), transparent 62%);
}
#embers{position:fixed; inset:0; z-index:1; pointer-events:none}
#stage{position:relative; z-index:2}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(30px); filter:blur(4px);
  transition:opacity 1s cubic-bezier(.2,.7,.3,1) var(--d,0s),
             transform 1s cubic-bezier(.2,.7,.3,1) var(--d,0s),
             filter 1s ease var(--d,0s)}
.reveal.in{opacity:1; transform:none; filter:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* ---------- shared bits ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 26px}
.wrap.narrow{max-width:760px}
.gold{
  background:linear-gradient(100deg,#ffb43c 0%,#ffe9b8 22%,#ff8a3d 44%,#ffd77a 62%,#ff5a2a 84%,#ffc048 100%);
  background-size:280% 100%; -webkit-background-clip:text; background-clip:text;
  color:transparent; animation:shimmer 7s linear infinite;
}
@keyframes shimmer{to{background-position:280% 0}}
.rule{display:flex; align-items:center; justify-content:center; gap:16px; color:var(--gold); margin:26px 0; font-size:15px}
.rule span{height:1px; width:min(120px,22vw); background:linear-gradient(90deg,transparent,var(--gold))}
.rule span:last-of-type{background:linear-gradient(90deg,var(--gold),transparent)}
.section-kicker{font-family:var(--caps); font-size:12px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--rose); text-align:center; margin:0 0 12px}
.section-title{font-family:var(--disp); font-weight:900; text-align:center;
  font-size:clamp(30px,5.4vw,58px); line-height:1.14; margin:0 0 14px; letter-spacing:-.01em}
.section-sub{text-align:center; color:var(--muted); font-style:italic; margin:0 0 46px}
.big-line,.chapter p.big-line{font-family:var(--caps); font-size:clamp(19px,2.4vw,26px);
  color:var(--goldl); line-height:1.5; margin:26px 0; text-shadow:0 0 34px rgba(255,120,40,.35)}

/* ---------- progress heart ---------- */
#progress{position:fixed; right:22px; bottom:22px; z-index:60; opacity:0; transition:opacity .5s}
#progress.on{opacity:1}
#progress svg{filter:drop-shadow(0 0 12px rgba(255,77,0,.6))}

/* ---------- music ---------- */
#music{position:fixed; left:22px; bottom:22px; z-index:60; width:42px; height:42px; border-radius:50%;
  background:rgba(20,4,12,.72); border:1px solid rgba(255,192,72,.34); color:var(--gold);
  display:grid; place-items:center; cursor:pointer; opacity:0; transition:opacity .5s,transform .25s,background .25s;
  backdrop-filter:blur(8px)}
#music.on{opacity:1}
#music:hover{transform:scale(1.12); background:rgba(255,77,0,.22)}
#music .m-slash{position:absolute; width:24px; height:1.6px; background:currentColor; transform:rotate(-45deg); transition:opacity .2s}
#music.playing .m-slash{opacity:0}

/* ============ CURTAIN ============ */
#curtain{position:fixed; inset:0; z-index:100; display:grid; place-items:center; text-align:center;
  background:radial-gradient(circle at 50% 42%,#2a0714 0%,#0a0208 62%);
  transition:opacity 1.5s ease,visibility 1.5s}
#curtain.gone{opacity:0; visibility:hidden}
.curtain-inner{padding:26px; max-width:640px}
.crest{margin-bottom:14px}
.crest svg{animation:crestrock 5.5s ease-in-out infinite; transform-origin:50% 88%;
  filter:drop-shadow(0 0 22px rgba(255,120,50,.5))}
@keyframes crestrock{
  0%,100%{transform:rotate(-5deg) translateY(0)}
  50%    {transform:rotate(5deg)  translateY(-6px)}
}
@keyframes beat{0%,100%{transform:scale(1)}14%{transform:scale(1.13)}28%{transform:scale(1)}42%{transform:scale(1.09)}}
.curtain-kicker{font-family:var(--caps); font-size:11px; letter-spacing:.5em; text-transform:uppercase;
  color:var(--rose); margin:0 0 6px; opacity:0; animation:fadeUp 1.1s .2s forwards}
.curtain-title{font-family:var(--disp); font-weight:900; font-size:clamp(46px,11vw,104px); margin:0;
  line-height:1.02; opacity:0; animation:fadeUp 1.3s .5s forwards;
  background:linear-gradient(100deg,#ffb43c,#ffe9b8 25%,#ff6a2a 55%,#ffd77a 80%,#ffb43c);
  background-size:250% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 40px rgba(255,90,30,.42))}
.curtain-sub{color:var(--muted); font-style:italic; margin:12px 0 30px; opacity:0; animation:fadeUp 1.1s 1s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
#begin{
  font-family:var(--caps); font-size:13px; letter-spacing:.3em; text-transform:uppercase; cursor:pointer;
  padding:16px 42px; border-radius:100px; color:#1a0206; border:none;
  background:linear-gradient(100deg,var(--gold),var(--ember) 55%,var(--rose));
  box-shadow:0 12px 40px rgba(255,77,0,.42); opacity:0; animation:fadeUp 1s 1.35s forwards;
  transition:transform .25s,box-shadow .25s}
#begin:hover{transform:translateY(-3px) scale(1.04); box-shadow:0 18px 54px rgba(255,45,111,.55)}
.curtain-hint{font-size:12px; letter-spacing:.24em; text-transform:uppercase; font-family:var(--caps);
  color:rgba(194,160,143,.6); margin-top:20px; opacity:0; animation:fadeUp 1s 1.7s forwards}

/* ============ HERO ============ */
#hero{min-height:100svh; display:grid; place-items:center; text-align:center; position:relative; padding:90px 0}
.hero-glow{position:absolute; width:min(880px,92vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(255,77,0,.24),transparent 66%); filter:blur(46px); animation:pulse 7s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.16);opacity:1}}
.hero-inner{position:relative}
.eyebrow{font-family:var(--caps); font-size:11px; letter-spacing:.46em; text-transform:uppercase; color:var(--rose); margin:0 0 22px}
.hero-name{margin:0; font-family:var(--disp); font-weight:900; line-height:.98; letter-spacing:-.015em}
.hero-name .line{display:block; font-size:clamp(52px,13.5vw,150px)}
.hero-name .line:first-child{color:var(--cream); text-shadow:0 0 60px rgba(255,45,111,.3)}
.hero-name .line.gold{filter:drop-shadow(0 0 46px rgba(255,90,30,.4))}
.hero-tag{max-width:600px; margin:0 auto; color:var(--muted); font-size:21px; font-style:italic; line-height:1.7}
.scroll-cue{margin-top:56px; font-family:var(--caps); font-size:10.5px; letter-spacing:.4em;
  text-transform:uppercase; color:rgba(194,160,143,.72)}
.scroll-cue i{display:block; width:1px; height:60px; margin:16px auto 0;
  background:linear-gradient(var(--gold),transparent); animation:drop 2.2s ease-in-out infinite}
@keyframes drop{0%,100%{transform:scaleY(.35);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ============ PROLOGUE ============ */
.prologue{padding:120px 0 70px}
.prologue p{margin:0 0 24px; font-size:22px; color:#e9d6c2}
.prologue .drop::first-letter{
  font-family:var(--disp); font-size:76px; line-height:.78; float:left; padding:10px 14px 0 0;
  background:linear-gradient(160deg,var(--gold),var(--ember)); -webkit-background-clip:text; background-clip:text; color:transparent}
.prologue .sig{font-family:var(--script); font-size:38px; color:var(--gold); text-align:right; margin-top:34px}

/* ============ MAP ============ */
#journey{padding:90px 0 60px}
.map-holder{margin:34px 0 6px}
#map{width:100%; height:auto; overflow:visible}
#arcs path{stroke-dasharray:var(--len); stroke-dashoffset:var(--len); opacity:.9}
#arcs path.draw{animation:draw 2.2s ease forwards var(--dl)}
@keyframes draw{to{stroke-dashoffset:0}}
.city circle{fill:var(--gold); opacity:0; transform-box:fill-box; transform-origin:center; filter:drop-shadow(0 0 10px var(--ember))}
.city.lit circle{animation:pop .7s ease forwards, twinkle 3.4s ease-in-out infinite 1s}
@keyframes pop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.55}}
.city text{text-anchor:middle; opacity:0; letter-spacing:.12em; font-size:13px; text-transform:uppercase}
.city.lit text{animation:fadeUp .8s .25s forwards}
.map-note{text-align:center; color:var(--muted); font-style:italic; margin-top:18px}

/* ============ CHAPTERS ============ */
#story{padding:40px 0}
.chapter{max-width:var(--maxw); margin:0 auto; padding:96px 26px; position:relative;
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.chapter.wide{grid-template-columns:1fr; max-width:820px; text-align:center}
.chapter.flip .ch-media{order:2}
.ch-num{position:absolute; top:34px; left:26px; font-family:var(--disp); font-weight:900;
  font-size:clamp(78px,13vw,168px); line-height:1; color:transparent; pointer-events:none;
  -webkit-text-stroke:1.5px rgba(255,140,60,.16); opacity:.9}
.chapter.wide .ch-num{left:50%; transform:translateX(-50%)}
.ch-label{font-family:var(--caps); font-size:11px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--rose); margin:0 0 10px}
.chapter h2{font-family:var(--disp); font-weight:900; font-size:clamp(30px,4.6vw,52px);
  line-height:1.1; margin:0 0 24px; letter-spacing:-.01em;
  background:linear-gradient(100deg,#ffe9b8,#ffb43c 40%,#ff7a35 75%,#ffd77a);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.chapter p{margin:0 0 20px; color:#e5d2be}
.chapter em{color:var(--goldl); font-style:italic}
.ch-text.full{position:relative; z-index:1}

/* frames */
.frame{margin:0; position:relative; border-radius:6px; overflow:hidden; background:var(--ink2);
  border:1px solid rgba(255,192,72,.2); box-shadow:0 26px 70px rgba(0,0,0,.6);
  transition:transform .6s cubic-bezier(.2,.7,.3,1), box-shadow .6s}
.frame::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg,rgba(255,192,72,.14),transparent 42%)}
.frame img{width:100%; aspect-ratio:4/5; object-fit:cover}
.frame.tilt:hover{transform:translateY(-8px) rotate(-.9deg) scale(1.02); box-shadow:0 36px 90px rgba(255,77,0,.3)}
/* chapter frames also carry scroll parallax via --py, composed not overwritten */
.ch-media .frame{transform:translateY(var(--py,0px)); transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .6s}
.ch-media .frame.tilt:hover{transform:translateY(calc(var(--py,0px) - 8px)) rotate(-.9deg) scale(1.02)}
.frame figcaption{position:absolute; left:0; right:0; bottom:0; padding:26px 18px 14px; z-index:2;
  font-family:var(--caps); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--goldl);
  background:linear-gradient(transparent,rgba(10,2,8,.92))}
/* empty state */
.frame.empty img{display:none}
.frame.empty{background:
  repeating-linear-gradient(45deg,rgba(255,192,72,.045) 0 12px,transparent 12px 24px), var(--ink2);
  border-style:dashed; border-color:rgba(255,192,72,.3)}
.frame.empty::before{
  content:"\2764"; position:absolute; inset:0; display:grid; place-items:center;
  font-size:44px; color:rgba(255,77,0,.34); animation:beat 2.6s ease-in-out infinite}
.frame.empty{aspect-ratio:4/5}
.frame.empty figcaption{background:linear-gradient(transparent,rgba(10,2,8,.8))}

/* chapter 8 coincidence */
.coincidence{display:grid; gap:14px; margin:34px 0}
.co{padding:20px 24px; border-radius:12px; border:1px solid rgba(255,192,72,.24);
  background:linear-gradient(100deg,rgba(255,77,0,.10),rgba(255,45,111,.06))}
.co span{display:block; font-family:var(--caps); font-size:11px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--muted); margin-bottom:4px}
.co strong{font-family:var(--disp); font-weight:900; font-size:clamp(22px,3.4vw,34px); color:var(--goldl)}

/* chapter 10 stamp */
.stamp-line{text-align:center; margin:34px 0!important}
.stamp{display:inline-block; font-family:var(--caps); font-weight:600; letter-spacing:.34em; font-size:clamp(18px,3vw,30px);
  color:#5cf08a; border:3px solid #5cf08a; border-radius:8px; padding:10px 26px; transform:rotate(-7deg);
  opacity:.92; text-shadow:0 0 22px rgba(92,240,138,.5); box-shadow:0 0 30px rgba(92,240,138,.22)}
.reveal.in .stamp{animation:slam .6s cubic-bezier(.2,1.6,.4,1) both}
@keyframes slam{0%{transform:rotate(-7deg) scale(3);opacity:0}70%{transform:rotate(-7deg) scale(.94);opacity:1}100%{transform:rotate(-7deg) scale(1)}}

/* chapter 12 worlds */
.worlds{display:grid; grid-template-columns:1fr auto 1fr; gap:26px; align-items:center; margin:38px 0}
.w{padding:26px 22px; border-radius:14px; border:1px solid rgba(255,192,72,.22);
  background:linear-gradient(160deg,rgba(255,45,111,.09),rgba(10,2,8,.4))}
.w span{display:block; font-family:var(--caps); font-size:10.5px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--rose); margin-bottom:8px}
.w strong{display:block; font-family:var(--disp); font-weight:900; font-size:clamp(19px,2.6vw,26px); color:var(--goldl); margin-bottom:10px}
.w em{display:block; font-size:16.5px; color:var(--muted); font-style:italic; line-height:1.6}
.w-heart{font-size:34px; color:var(--rose); animation:beat 2.2s ease-in-out infinite;
  filter:drop-shadow(0 0 18px rgba(255,45,111,.7))}

/* ============ GALLERY ============ */
#gallery{padding:100px 0}
#gallery .grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
#gallery .frame:nth-child(odd){transform:rotate(-1.1deg)}
#gallery .frame:nth-child(even){transform:rotate(1deg)}
#gallery .frame:hover{transform:translateY(-10px) rotate(0deg) scale(1.04); z-index:3}
#gallery .g1{grid-column:span 2; grid-row:span 2}
#gallery .g1 img,#gallery .g1.empty{aspect-ratio:1/1}

/* ============ VIDEO ============ */
#filmsec{padding:80px 0 100px}
.film{position:relative; border-radius:14px; overflow:hidden; border:1px solid rgba(255,192,72,.26);
  background:var(--ink2); box-shadow:0 30px 90px rgba(0,0,0,.65); aspect-ratio:16/9}
.film video{width:100%; height:100%; object-fit:cover; display:block}
.film.empty video{display:none}
.film-empty{display:none; position:absolute; inset:0; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; color:rgba(255,192,72,.6); text-align:center;
  background:repeating-linear-gradient(45deg,rgba(255,192,72,.04) 0 14px,transparent 14px 28px)}
.film.empty .film-empty{display:flex}
.film-empty p{font-family:var(--caps); letter-spacing:.3em; text-transform:uppercase; font-size:12px; margin:0}
.film-empty small{font-size:13px; color:var(--muted)}
.film-empty code{background:rgba(255,192,72,.1); padding:2px 6px; border-radius:4px; font-size:12px}

/* ============ LETTER ============ */
#letter{padding:60px 0 110px}
#envelope{position:relative; width:min(560px,92vw); margin:44px auto 0; aspect-ratio:3/2; cursor:pointer;
  perspective:1400px}
.env-back{position:absolute; inset:0; border-radius:10px;
  background:linear-gradient(160deg,#2b0a16,#1a0510); border:1px solid rgba(255,192,72,.3)}
.env-body{position:absolute; inset:0; border-radius:10px; z-index:3; pointer-events:none;
  background:linear-gradient(160deg,rgba(255,77,0,.18),rgba(255,45,111,.10));
  border:1px solid rgba(255,192,72,.34);
  clip-path:polygon(0 100%,0 22%,50% 62%,100% 22%,100% 100%)}
.env-flap{position:absolute; left:0; right:0; top:0; height:62%; z-index:4; transform-origin:top center;
  background:linear-gradient(160deg,#3a0d1d,#250714); border:1px solid rgba(255,192,72,.34);
  clip-path:polygon(0 0,100% 0,50% 100%); transition:transform 1s cubic-bezier(.6,-0.2,.3,1)}
.env-seal{position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); z-index:5;
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-size:24px; color:#fff;
  background:radial-gradient(circle at 35% 30%,#ff6a3d,#c1102f);
  box-shadow:0 8px 26px rgba(193,16,47,.6); transition:opacity .5s,transform .5s}
.env-hint{position:absolute; left:0; right:0; bottom:-34px; text-align:center; z-index:6;
  font-family:var(--caps); font-size:10.5px; letter-spacing:.34em; text-transform:uppercase;
  color:rgba(194,160,143,.72); animation:blink 2.4s ease-in-out infinite; transition:opacity .4s}
@keyframes blink{0%,100%{opacity:.45}50%{opacity:1}}
.env-paper{position:absolute; left:5%; right:5%; bottom:6%; z-index:2; padding:34px 30px; border-radius:8px;
  background:linear-gradient(170deg,#fdf3e2,#f3e2c8); color:#3a2416; text-align:left;
  box-shadow:0 -10px 40px rgba(0,0,0,.5); opacity:0; transform:translateY(0) scale(.96);
  transition:transform 1.1s cubic-bezier(.2,.8,.3,1) .35s, opacity .5s .35s; max-height:76%; overflow:hidden}
#envelope.open .env-flap{transform:rotateX(180deg); z-index:1}
#envelope.open .env-seal{opacity:0; transform:translate(-50%,-50%) scale(.4)}
#envelope.open .env-hint{opacity:0}
#envelope.open{aspect-ratio:auto; cursor:default}
#envelope.open .env-paper{position:relative; left:auto; right:auto; bottom:auto; opacity:1;
  transform:none; max-height:none; width:100%}
#envelope.open .env-back,#envelope.open .env-body,#envelope.open .env-flap{opacity:0; transition:opacity .5s}
.env-paper .salut{font-family:var(--disp); font-weight:900; font-size:26px; margin:0 0 18px; color:#8c1027}
.env-paper #typed{font-size:19px; line-height:1.85; min-height:40px; white-space:pre-wrap}
.env-paper #typed::after{content:"|"; animation:caret .9s steps(1) infinite; color:#8c1027}
#envelope.done .env-paper #typed::after{display:none}
@keyframes caret{50%{opacity:0}}
.env-paper .sign{font-family:var(--script); font-size:34px; color:#8c1027; text-align:right; margin:26px 0 0; opacity:0;
  transition:opacity 1s}
#envelope.done .env-paper .sign{opacity:1}
.env-paper .sign span{font-size:40px}

/* ============ FINALE ============ */
#finale{padding:120px 0 130px; text-align:center; position:relative; overflow:hidden}
.finale-glow{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(1100px,120vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(255,45,111,.2),rgba(255,77,0,.09) 44%,transparent 68%);
  filter:blur(50px); animation:pulse 8s ease-in-out infinite}
.finale-line{font-family:var(--disp); font-weight:900; font-size:clamp(24px,4.2vw,46px);
  line-height:1.25; margin:0 0 12px; color:var(--cream); position:relative}
.finale-line.gold{
  color:transparent;
  background:linear-gradient(100deg,#ffb43c 0%,#ffe9b8 22%,#ff8a3d 44%,#ffd77a 62%,#ff5a2a 84%,#ffc048 100%);
  background-size:280% 100%; -webkit-background-clip:text; background-clip:text;
  animation:shimmer 7s linear infinite;
  filter:drop-shadow(0 0 40px rgba(255,90,30,.45))}
.finale-sub{color:var(--muted); font-style:italic; font-size:21px; margin:0 0 40px; position:relative}
#yesbtn{position:relative; font-family:var(--caps); font-size:13px; letter-spacing:.28em; text-transform:uppercase;
  cursor:pointer; padding:19px 46px; border-radius:100px; border:none; color:#1a0206;
  background:linear-gradient(100deg,var(--gold),var(--ember) 52%,var(--rose));
  box-shadow:0 14px 46px rgba(255,77,0,.46); transition:transform .25s,box-shadow .25s}
#yesbtn:hover{transform:translateY(-4px) scale(1.05); box-shadow:0 22px 62px rgba(255,45,111,.6)}
#yesbtn:active{transform:scale(.97)}
#yesmsg{margin:26px 0 0; font-family:var(--script); font-size:34px; color:var(--gold);
  opacity:0; transform:translateY(14px); transition:opacity .9s,transform .9s; position:relative}
#yesmsg.show{opacity:1; transform:none}

/* ============ FOOTER ============ */
footer{padding:70px 26px 90px; text-align:center; border-top:1px solid rgba(255,192,72,.14); position:relative; z-index:2}
.f-name{font-family:var(--disp); font-weight:900; font-size:clamp(20px,3vw,30px); margin:0 0 8px; color:var(--goldl)}
.f-name span{color:var(--rose); font-family:var(--script); font-size:1.3em}
.f-sub{font-family:var(--caps); font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); margin:0 0 18px}
.f-tiny{font-size:14px; color:rgba(194,160,143,.55); font-style:italic; margin:0}

/* ============ FLOATING HEART BURST ============ */
.burst{position:fixed; pointer-events:none; z-index:70; font-size:20px;
  animation:burst 1.5s ease-out forwards}
@keyframes burst{
  0%{opacity:1; transform:translate(-50%,-50%) scale(.3) rotate(0)}
  100%{opacity:0; transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1.35) rotate(var(--r))}
}

/* ============ RESPONSIVE ============ */
@media (max-width:940px){
  body{font-size:19px}
  .chapter{grid-template-columns:1fr; gap:34px; padding:76px 22px}
  .chapter.flip .ch-media{order:0}
  .ch-num{font-size:96px; top:20px; left:22px}
  .worlds{grid-template-columns:1fr; gap:16px}
  .w-heart{justify-self:center}
  #gallery .grid{grid-template-columns:repeat(2,1fr); gap:14px}
  #gallery .g1{grid-column:span 2; grid-row:auto}
  #gallery .g1 img,#gallery .g1.empty{aspect-ratio:4/5}
}
@media (max-width:560px){
  body{font-size:18px}
  .wrap{padding:0 20px}
  .prologue p{font-size:19.5px}
  .hero-tag{font-size:18.5px}
  #progress,#music{bottom:14px}
  #progress{right:14px}#music{left:14px}
  .env-paper{padding:26px 22px}
  .env-paper #typed{font-size:17.5px}
  .map-note{font-size:16px}
  .city text{font-size:18px}
}

/* ============ NOW PLAYING ============ */
#nowplaying{position:fixed; left:74px; bottom:24px; z-index:60; display:flex; align-items:center; gap:12px;
  padding:10px 18px 10px 14px; border-radius:100px; pointer-events:none;
  background:rgba(20,4,12,.82); border:1px solid rgba(255,192,72,.3); backdrop-filter:blur(10px);
  box-shadow:0 10px 34px rgba(0,0,0,.5);
  opacity:0; transform:translateX(-14px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.3,1)}
#nowplaying.show{opacity:1; transform:none}
.np-note{color:var(--gold); font-size:17px; animation:beat 1.9s ease-in-out infinite}
.np-txt{display:flex; flex-direction:column; line-height:1.25}
.np-txt strong{font-family:var(--caps); font-size:12.5px; letter-spacing:.13em; color:var(--goldl); font-weight:600}
.np-txt em{font-family:var(--caps); font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); font-style:normal; margin-top:2px}
@media (max-width:560px){
  #nowplaying{left:62px; bottom:15px; padding:8px 14px 8px 11px; gap:9px}
  .np-txt strong{font-size:11.5px} .np-txt em{font-size:9px}
}

/* ============ IN-FRAME VIDEO (chapter media) ============ */
.frame video{width:100%; aspect-ratio:4/5; object-fit:cover; display:block; background:var(--ink2)}
.frame.empty video{display:none}
/* faint sheen so a looping clip reads as part of the frame, not a UI player */
.frame.is-video::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(200deg,rgba(255,192,72,.10),transparent 46%)}

/* ============ THE SWIPE ============ */
#swipe{padding:70px 0 40px}
.phone-wrap{display:flex; flex-direction:column; align-items:center; gap:22px; margin-top:34px}
.phone{position:relative; width:min(330px,84vw); aspect-ratio:9/19.5; border-radius:44px; padding:11px;
  background:linear-gradient(160deg,#2b2f38,#0e1014 40%,#23272e); box-shadow:
    0 40px 90px rgba(0,0,0,.7), 0 0 0 2px #3a3f49, inset 0 0 0 2px #0a0c0f}
.phone::before{content:""; position:absolute; left:50%; top:11px; transform:translateX(-50%);
  width:96px; height:26px; background:#07080a; border-radius:0 0 16px 16px; z-index:6}
.phone-side{position:absolute; width:3px; border-radius:3px; background:#41464f}
.phone-side.left{left:-3px; top:120px; height:56px; box-shadow:0 74px 0 #41464f}
.phone-side.right{right:-3px; top:140px; height:78px}
.screen{position:relative; width:100%; height:100%; border-radius:34px; overflow:hidden;
  background:linear-gradient(170deg,#16181d,#0c0d10); display:flex; flex-direction:column}
.app-top{display:flex; align-items:center; gap:9px; padding:34px 16px 10px; flex:0 0 auto}
.app-top .whose{font-family:var(--caps); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:#c9ccd4; transition:opacity .4s}
.app-top .pill{margin-left:auto; font-family:var(--caps); font-size:9px; letter-spacing:.12em;
  padding:3px 9px; border-radius:100px; color:#ffb0c4; background:rgba(255,45,111,.16);
  border:1px solid rgba(255,45,111,.35)}
.deck{position:relative; flex:1 1 auto; margin:4px 12px 0}
.app-bottom{flex:0 0 auto; display:flex; justify-content:center; gap:16px; padding:12px 0 20px}
.act{width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.14);
  background:#1b1e24; color:#fff; font-size:17px; display:grid; place-items:center; cursor:default;
  transition:transform .2s, box-shadow .2s, background .2s}
.act.nope{color:#ff6b6b} .act.star{color:#5ac8fa; width:36px; height:36px; font-size:14px; align-self:center}
.act.like{color:#33d67f}
.act.flash{transform:scale(1.28); box-shadow:0 0 22px currentColor; background:#23272f}

/* cards */
.card{position:absolute; inset:0; border-radius:16px; overflow:hidden; background:#1a1d23;
  box-shadow:0 12px 34px rgba(0,0,0,.6); transform-origin:50% 120%;
  display:flex; flex-direction:column; justify-content:flex-end}
.card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.card .shade{position:absolute; inset:0; background:linear-gradient(transparent 42%,rgba(6,7,9,.93))}
.card .meta{position:relative; z-index:2; padding:0 14px 15px}
.card .nm{font-family:-apple-system,"Segoe UI",Roboto,sans-serif; font-size:20px; font-weight:700; color:#fff;
  line-height:1.15; display:flex; align-items:baseline; gap:7px}
.card .nm span{font-weight:300; font-size:17px}
.card .loc{font-family:-apple-system,sans-serif; font-size:11px; color:#cfd3da; margin-top:3px;
  display:flex; align-items:center; gap:5px}
.card .loc::before{content:""; width:5px; height:5px; border-radius:50%; background:#33d67f}
.card .bio{font-family:-apple-system,sans-serif; font-size:12px; line-height:1.5; color:#e6e9ee;
  margin-top:7px; max-height:0; opacity:0; overflow:hidden; transition:max-height .7s ease,opacity .7s ease}
.card.open .bio{max-height:150px; opacity:1}
/* photo indicator bars */
.card .bars{position:absolute; top:7px; left:7px; right:7px; z-index:3; display:flex; gap:4px}
.card .bars i{flex:1; height:2.5px; border-radius:2px; background:rgba(255,255,255,.3)}
.card .bars i.on{background:#fff}
/* anonymous filler cards */
.card.anon{background:linear-gradient(160deg,#2a2d35,#15171c)}
.card.anon .blob{position:absolute; left:50%; top:34%; transform:translate(-50%,-50%);
  width:44%; aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.09); filter:blur(13px)}
.card.anon .blob2{position:absolute; left:50%; top:76%; transform:translate(-50%,-50%);
  width:74%; height:38%; border-radius:46% 46% 0 0; background:rgba(255,255,255,.07); filter:blur(15px)}
.card.anon .redact{height:12px; width:58%; border-radius:3px; background:rgba(255,255,255,.2)}
.card.anon .redact.s{height:8px; width:38%; margin-top:7px; background:rgba(255,255,255,.13)}
/* stamps */
.stamp-w{position:absolute; top:20px; z-index:4; font-family:var(--caps); font-weight:600;
  font-size:20px; letter-spacing:.12em; padding:5px 12px; border:3px solid; border-radius:7px;
  opacity:0; transition:opacity .18s}
.stamp-w.no{left:14px; color:#ff5b5b; border-color:#ff5b5b; transform:rotate(14deg)}
.stamp-w.yes{right:14px; color:#33d67f; border-color:#33d67f; transform:rotate(-14deg)}
.card.show-no .stamp-w.no,.card.show-yes .stamp-w.yes{opacity:1}
/* swipe motion */
.card.go-left{transition:transform .5s cubic-bezier(.4,0,.6,1),opacity .5s;
  transform:translateX(-135%) rotate(-22deg); opacity:0}
.card.go-right{transition:transform .5s cubic-bezier(.4,0,.6,1),opacity .5s;
  transform:translateX(135%) rotate(22deg); opacity:0}
.card.enter{animation:cardIn .45s cubic-bezier(.2,.8,.3,1) both}
@keyframes cardIn{from{transform:scale(.9) translateY(14px);opacity:0}to{transform:none;opacity:1}}

/* match screen */
.matchscreen{position:absolute; inset:0; z-index:8; display:grid; place-items:center; text-align:center;
  background:linear-gradient(165deg,rgba(255,45,111,.96),rgba(255,77,0,.94) 55%,rgba(180,20,80,.96));
  opacity:0; visibility:hidden; transition:opacity .7s ease,visibility .7s}
.matchscreen.on{opacity:1; visibility:visible}
.ms-inner{padding:22px 16px}
.ms-title{font-family:var(--disp); font-weight:900; font-size:29px; color:#fff; margin:0;
  text-shadow:0 3px 18px rgba(0,0,0,.35)}
.matchscreen.on .ms-title{animation:slam .7s cubic-bezier(.2,1.6,.4,1) both}
.ms-sub{font-family:-apple-system,sans-serif; font-size:11.5px; color:rgba(255,255,255,.92); margin:5px 0 18px}
.ms-faces{display:flex; align-items:center; justify-content:center; gap:9px; margin-bottom:16px}
.ms-faces img{width:72px; height:72px; border-radius:50%; object-fit:cover; border:2.5px solid #fff;
  box-shadow:0 6px 20px rgba(0,0,0,.35)}
.matchscreen.on .ms-faces img:first-of-type{animation:slideR .8s .25s cubic-bezier(.2,.9,.3,1) both}
.matchscreen.on .ms-faces img:last-of-type{animation:slideL .8s .25s cubic-bezier(.2,.9,.3,1) both}
@keyframes slideR{from{transform:translateX(-70px);opacity:0}to{transform:none;opacity:1}}
@keyframes slideL{from{transform:translateX(70px);opacity:0}to{transform:none;opacity:1}}
.ms-heart{color:#fff; font-size:19px; opacity:0}
.matchscreen.on .ms-heart{animation:fadeUp .5s .9s both, beat 1.5s 1.4s ease-in-out infinite}
.ms-chat{display:flex; flex-direction:column; gap:6px; text-align:left}
.bub{font-family:-apple-system,sans-serif; font-size:11px; line-height:1.45; padding:7px 11px;
  border-radius:13px; max-width:88%; opacity:0}
.bub.him{background:rgba(255,255,255,.95); color:#2a1018; border-bottom-left-radius:4px; align-self:flex-start}
.bub.her{background:rgba(0,0,0,.32); color:#fff; border-bottom-right-radius:4px; align-self:flex-end}
.matchscreen.on .bub:nth-child(1){animation:fadeUp .5s 1.3s both}
.matchscreen.on .bub:nth-child(2){animation:fadeUp .5s 2.0s both}
.matchscreen.on .bub:nth-child(3){animation:fadeUp .5s 2.7s both}

#replaySwipe{font-family:var(--caps); font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  padding:11px 24px; border-radius:100px; cursor:pointer; color:var(--gold);
  background:rgba(20,4,12,.6); border:1px solid rgba(255,192,72,.3);
  opacity:0; transition:opacity .6s, background .25s, transform .25s}
#replaySwipe.on{opacity:1}
#replaySwipe:hover{background:rgba(255,77,0,.2); transform:translateY(-2px)}
.swipe-foot{text-align:center; color:var(--muted); font-style:italic; margin-top:30px; font-size:19px}
@media (max-width:560px){
  .ms-title{font-size:25px} .ms-faces img{width:62px;height:62px}
  .card .nm{font-size:18px} .card .bio{font-size:11.5px}
}

/* ============ TALL CHAPTER: photo stays beside the reading ============ */
.chapter.tall{align-items:start}
.chapter.tall .ch-media{position:sticky; top:11vh}
@media (max-width:940px){
  .chapter.tall{align-items:center}
  .chapter.tall .ch-media{position:static}
}

/* ============ KEEPSAKE (featured photo) ============ */
.keepsake{padding:40px 0 70px}
.ks-label{font-family:var(--caps); font-size:11px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--rose); text-align:center; margin:0 0 20px}
.ks-frame{margin:0 auto 34px; max-width:560px; position:relative; border-radius:8px; overflow:hidden;
  border:1px solid rgba(255,192,72,.35); background:var(--ink2);
  box-shadow:0 30px 90px rgba(0,0,0,.7), 0 0 60px rgba(255,77,0,.14)}
.ks-frame::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(165deg,rgba(255,192,72,.13),transparent 40%)}
.ks-frame img{width:100%; display:block}
.ks-frame.empty{aspect-ratio:4/5; border-style:dashed}
.ks-frame.empty::before{content:"\2764"; position:absolute; inset:0; display:grid; place-items:center;
  font-size:44px; color:rgba(255,77,0,.34); animation:beat 2.6s ease-in-out infinite}
.ks-frame.empty img{display:none}
.ks-text p{margin:0 0 20px; color:#e5d2be}
.ks-text .big-line{text-align:center}

/* ============ SCENES (sub-beats inside a chapter) ============ */
.chapter.scene{padding-top:40px; padding-bottom:60px}
.scene-label{font-family:var(--caps); font-size:10.5px; letter-spacing:.36em; text-transform:uppercase;
  color:var(--muted); margin:0 0 10px}
.chapter.scene h3,.pillowwall h3{font-family:var(--disp); font-weight:900;
  font-size:clamp(25px,3.6vw,40px); line-height:1.14; margin:0 0 22px;
  background:linear-gradient(100deg,#ffe9b8,#ffb43c 40%,#ff7a35 75%,#ffd77a);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.chapter.scene p{margin:0 0 20px; color:#e5d2be}
.pillowwall{padding:50px 0 90px}
.pillowwall p{margin:0 0 20px; color:#e5d2be}
.pillowwall em,.chapter.scene em{color:var(--goldl); font-style:italic}
.pillowwall .big-line{display:block}

/* music button asking to be tapped (autoplay refused) */
#music.needstap{animation:tapme 1.5s ease-in-out infinite; border-color:var(--rose); color:var(--rose)}
@keyframes tapme{0%,100%{box-shadow:0 0 0 0 rgba(255,45,111,.55)}70%{box-shadow:0 0 0 14px rgba(255,45,111,0)}}

/* ============ PASSWORD GATE ============ */
#gate{display:none; margin:6px auto 0; max-width:340px; animation:fadeUp .55s both}
#gate.on{display:block}
#gate label{display:block; font-family:var(--serif); font-style:italic; font-size:17px;
  color:var(--muted); margin-bottom:14px; line-height:1.5}
.gate-row{display:flex; gap:9px}
#pw{flex:1; min-width:0; padding:15px 18px; border-radius:100px; font-size:17px;
  font-family:var(--serif); letter-spacing:.22em; text-align:center; color:var(--cream);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,192,72,.34); outline:none;
  transition:border-color .25s, box-shadow .25s}
#pw:focus{border-color:var(--gold); box-shadow:0 0 0 4px rgba(255,192,72,.14)}
#pw::placeholder{color:rgba(194,160,143,.5); letter-spacing:.3em}
#gateGo{width:52px; flex:0 0 52px; border-radius:50%; border:none; cursor:pointer; font-size:20px; color:#1a0206;
  background:linear-gradient(100deg,var(--gold),var(--ember) 60%,var(--rose));
  box-shadow:0 8px 26px rgba(255,77,0,.4); transition:transform .2s, box-shadow .2s}
#gateGo:hover{transform:scale(1.08); box-shadow:0 12px 34px rgba(255,45,111,.55)}
#gateMsg{min-height:22px; margin:12px 0 0; font-family:var(--caps); font-size:10.5px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--rose); opacity:0; transition:opacity .3s}
#gateMsg.show{opacity:1}
#gate.wrong .gate-row{animation:shake .5s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-11px)}
  40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}

/* ============ LIVE PANEL (landing page) ============ */
#live{display:none; margin:30px auto 0; max-width:340px}
#live.on{display:block; animation:fadeUp 1s .9s both}
.live-head{display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:10px;
  font-family:var(--caps); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:#ff5b6e}
.live-head .dot{width:8px; height:8px; border-radius:50%; background:#ff2d3f;
  box-shadow:0 0 0 0 rgba(255,45,63,.7); animation:livepulse 1.8s infinite}
@keyframes livepulse{70%{box-shadow:0 0 0 11px rgba(255,45,63,0)}100%{box-shadow:0 0 0 0 rgba(255,45,63,0)}}
.live-box{position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden;
  background:#0d0f13; border:1px solid rgba(255,192,72,.28); box-shadow:0 18px 50px rgba(0,0,0,.6)}
.live-box iframe,.live-box video{position:absolute; inset:0; width:100%; height:100%; border:0}
.live-cap{margin:10px 0 0; font-family:var(--serif); font-style:italic; font-size:15px; color:var(--muted)}

/* ============ THE SEASHELL ============ */
.seashell{padding:30px 0 100px; position:relative}
.seashell::before{content:""; position:absolute; left:50%; top:6%; transform:translateX(-50%);
  width:min(720px,94vw); aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(255,192,72,.13),transparent 66%); filter:blur(46px)}
.shell-art{display:flex; justify-content:center; margin-bottom:18px; position:relative}
.shell-art svg{filter:drop-shadow(0 0 26px rgba(255,140,60,.45)); animation:shellfloat 6.5s ease-in-out infinite}
@keyframes shellfloat{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-12px) rotate(1.5deg)}}
.shell-text{position:relative}
.shell-text p{margin:0 0 20px; color:#e5d2be}
.shell-text em{color:var(--goldl); font-style:italic}
.shell-ps{display:flex; align-items:center; justify-content:center; gap:16px; margin-top:52px; position:relative}
.ps-rule{height:1px; flex:1; max-width:120px; background:linear-gradient(90deg,transparent,rgba(255,192,72,.55))}
.ps-rule:last-child{background:linear-gradient(90deg,rgba(255,192,72,.55),transparent)}
.shell-ps p{margin:0; font-family:var(--script); font-size:clamp(24px,3.4vw,34px); color:var(--gold);
  text-align:center; text-shadow:0 0 30px rgba(255,140,60,.4); line-height:1.3}
@media (max-width:560px){ .ps-rule{max-width:44px} }

/* landscape media inside a chapter frame */
.frame.landscape img{aspect-ratio:4/3}
.frame.landscape.empty{aspect-ratio:4/3}

/* ============ PHOTO STRIP (extra slots) ============ */
.photo-strip{max-width:var(--maxw); margin:0 auto; padding:0 26px 80px}
.strip-label{font-family:var(--caps); font-size:10.5px; letter-spacing:.36em; text-transform:uppercase;
  color:var(--muted); text-align:center; margin:0 0 20px}
.strip-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.strip-grid .frame:nth-child(odd){transform:rotate(-.9deg)}
.strip-grid .frame:nth-child(even){transform:rotate(.8deg)}
.strip-grid .frame:hover{transform:translateY(-8px) rotate(0) scale(1.03); z-index:3}
@media (max-width:940px){ .strip-grid{grid-template-columns:repeat(2,1fr); gap:12px} }

/* two smaller frames sitting under a chapter's main photo */
.media-pair{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px}
.media-pair .frame img{aspect-ratio:1/1}
.media-pair .frame.empty{aspect-ratio:1/1}
.media-pair .frame.empty::before{font-size:30px}
.media-pair .frame figcaption{padding:18px 12px 9px; font-size:9.5px; letter-spacing:.2em}

/* ---- live panel: offline / waiting state ---- */
.live-head .live-word{text-transform:uppercase}
#live.waiting .live-head{color:rgba(194,160,143,.75)}
#live.waiting .live-head .dot{background:rgba(194,160,143,.6); animation:none; box-shadow:none}
#live.waiting .live-when{opacity:.55}
.live-holder{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:7px; color:rgba(255,192,72,.5); text-align:center;
  background:repeating-linear-gradient(45deg,rgba(255,192,72,.035) 0 13px,transparent 13px 26px)}
#live:not(.waiting) .live-holder{display:none}
.live-holder svg{opacity:.75; animation:beat 3.2s ease-in-out infinite}
.lh-a{margin:0; font-family:var(--caps); font-size:9.5px; letter-spacing:.28em; text-transform:uppercase}
.lh-b{margin:0; font-family:var(--serif); font-style:italic; font-size:14px; color:var(--muted)}
#liveSound{display:block; margin:10px auto 0; font-family:var(--caps); font-size:9.5px;
  letter-spacing:.24em; text-transform:uppercase; cursor:pointer; padding:8px 16px; border-radius:100px;
  color:var(--gold); background:rgba(20,4,12,.6); border:1px solid rgba(255,192,72,.3)}
#liveSound:hover{background:rgba(255,77,0,.18)}
#liveSound[hidden]{display:none}