:root{
  --ink:#8c1d34;          /* handwritten red, like the reel */
  --ink-soft:#b5485f;
  --paper:rgba(255,250,248,.78);
  --pink:#f9d3dc; --peach:#fde7c8;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{overflow-x:hidden}
body{font-family:Caveat,"Segoe Script",cursive;color:var(--ink);font-weight:600;font-size:clamp(1.3rem,3.4vw,1.75rem);line-height:1.35;-webkit-tap-highlight-color:transparent}

/* pastel sky with stars, like the reel's site */
.sky{position:fixed;inset:0;background:radial-gradient(circle at 20% 15%,#fff3d6,transparent 45%),radial-gradient(circle at 85% 80%,#f7bfd0,transparent 50%),linear-gradient(160deg,#fbd5de,#fde9d0 55%,#f6c3d3);z-index:-3}
#stars,#fx{position:fixed;inset:0;pointer-events:none}
#stars{z-index:-1}
#fx{z-index:40}
.star{position:absolute;color:#f08aa5;opacity:.55;animation:tw 3.5s ease-in-out infinite}
@keyframes tw{50%{opacity:.15;transform:scale(.7) rotate(20deg)}}

.deck{position:relative}
.slide{position:relative;min-height:100svh;background-size:cover;background-position:center;scroll-snap-align:start}
.slide::before{content:"";position:absolute;inset:0;background:rgba(255,244,240,.35);z-index:0}
.inner{position:relative;z-index:1;min-height:100svh;padding:4.5rem 1.1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;text-align:center}
/* gentle reveal as each section scrolls into view (only when JS is running) */
.reveal .inner>*{opacity:0;transform:translateY(28px);transition:opacity .8s,transform .8s}
.reveal .slide.on .inner>*{opacity:1;transform:none}
.reveal .slide.on .inner>:nth-child(2){transition-delay:.12s}
.reveal .slide.on .inner>:nth-child(3){transition-delay:.24s}
.reveal .slide.on .inner>:nth-child(4){transition-delay:.36s}
.hint{font:inherit;font-size:1.4rem;color:var(--ink-soft);background:none;border:0;cursor:pointer;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(6px)}}
.inner>*{max-width:960px}

.script{font-family:Sacramento,cursive;font-weight:400;line-height:1.05}
h1.script{font-size:clamp(3.2rem,12vw,6.5rem)}
h2.script{font-size:clamp(3rem,10vw,5.5rem)}
.script.big{font-size:clamp(2.2rem,6vw,3.2rem);margin-top:.4rem}
.eyebrow{font-size:1.3rem;color:var(--ink-soft)}
.lead{font-size:clamp(1.5rem,4vw,2.1rem)}
.big{font-size:clamp(1.5rem,4vw,2.1rem)}

.card{background:var(--paper);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:22px;padding:1.2rem 1.5rem;box-shadow:0 10px 30px rgba(140,29,52,.15);border:1px solid rgba(255,255,255,.7)}
.card p+p{margin-top:.9rem}
.card.text{text-align:left}
.card.center{text-align:center}
.card.long{font-size:clamp(1.2rem,2.6vw,1.5rem);line-height:1.4}
.card b{font-weight:700}

.polas{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;align-items:center}
.polas.col{flex-direction:column}
.polas.grid{max-width:900px}
.pola{background:#fff;padding:.5rem .5rem .4rem;border-radius:6px;box-shadow:0 8px 22px rgba(0,0,0,.22);transform:rotate(var(--r,0deg));transition:transform .3s;cursor:zoom-in;width:min(200px,42vw)}
.pola.sm{width:min(150px,28vw)}
.polas.col .pola{width:min(240px,60vw)}
.pola:hover{transform:rotate(0) scale(1.05)}
.pola img,.pola video{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px}
.pola.vid{width:min(190px,40vw);cursor:default}
.pola.vid video{aspect-ratio:3/4}
.pola figcaption{font-size:1.15rem;padding-top:.3rem;color:var(--ink)}
.split{flex-direction:column}
@media(min-width:820px){
  .split{flex-direction:row;gap:2.5rem;max-width:1100px;margin:0 auto}
  .split .card{flex:1.4}
  .pola{width:min(210px,18vw)}
  .pola.sm{width:min(170px,14vw)}
}

.stack{line-height:1.45}
.signs{display:flex;align-items:center;justify-content:center;gap:1.5rem}
.signs figure{width:min(140px,30vw)}
.const{width:100%;overflow:visible}
.const polyline{fill:none;stroke:var(--ink-soft);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:240;stroke-dashoffset:240}
.const circle{fill:#f4b14b;stroke:#fff;stroke-width:1}
.slide.on .const polyline{animation:draw 2.4s .5s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.signs figcaption{font-size:1.3rem}
.signs small{font-size:1rem;opacity:.7}
.link{color:#f4b14b;letter-spacing:.2em;font-size:1.1rem}

/* closing note */
.slide[data-bg=""]{background:url(assets/bg2.jpg) center/cover}
.note{width:min(620px,94vw);aspect-ratio:736/593;background:url(assets/note.png) center/contain no-repeat;display:flex;align-items:center;justify-content:center}
.note-text{width:62%;margin:-4% 4% 0 -4%;text-align:center;font-size:clamp(1rem,3.1vw,1.55rem);line-height:1.25}
.note-text p+p{margin-top:.6rem}
.sign{font-family:Sacramento,cursive;font-size:1.6em;color:var(--ink-soft)}
@media(max-width:480px){.note{width:98vw}.note-text{width:66%;font-size:clamp(.95rem,4vw,1.15rem)}}


#lb{position:fixed;inset:0;z-index:60;background:rgba(40,10,20,.82);display:flex;align-items:center;justify-content:center;padding:1rem;cursor:zoom-out}
#lb[hidden]{display:none}
#lb img{max-width:100%;max-height:100%;border-radius:8px;box-shadow:0 20px 60px #000a}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.const polyline{stroke-dashoffset:0}}

/* slide 5: bigger selfies and constellations */
.polas.pair .pola.sm{width:min(230px,42vw)}
.signs figure{width:min(170px,34vw)}
@media(min-width:820px){.polas.pair .pola.sm{width:min(280px,22vw)}.signs figure{width:min(200px,18vw)}}

/* background music toggle */
.music{position:fixed;right:max(.9rem,env(safe-area-inset-right));bottom:max(.9rem,env(safe-area-inset-bottom));z-index:35;font:inherit;font-size:1.25rem;color:var(--ink);background:rgba(255,250,248,.85);border:1px solid rgba(140,29,52,.25);border-radius:999px;padding:.45rem 1rem;box-shadow:0 6px 18px rgba(140,29,52,.2);cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.music[hidden]{display:none}
.music.playing{animation:none}
.music:not(.playing){animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.06)}}