/* ============================================================
   Design tokens
   Palette: midnight plum → deep wine, dusty rose + soft champagne gold
   Type: Cormorant Garamond (display), Jost (body), Parisienne (script)
   ============================================================ */
:root{
  --bg-0:#150a17;
  --bg-1:#231327;
  --bg-2:#331b38;
  --wine:#4a1f3d;
  --rose:#e3a6b3;
  --rose-soft:#f0c9d1;
  --gold:#d3ac72;
  --cream:#f6ece1;
  --muted:#c3aec4;
  --line: rgba(246,236,225,0.18);

  --display: 'Cormorant Garamond', serif;
  --body: 'Jost', sans-serif;
  --script: 'Parisienne', cursive;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--body);
  background: var(--bg-0);
  color: var(--cream);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

/* ---------------- background canvas (ambient particles) ---------------- */
#particles{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:1; opacity:.7;
}

/* ---------------- layout scaffolding ---------------- */
#scroller{
  position:relative; z-index:2;
  height:100vh; overflow-y:scroll; scroll-snap-type: y mandatory;
}
.panel{
  position:relative;
  min-height:100vh;
  scroll-snap-align:start;
  display:flex; align-items:center; justify-content:center;
  padding: 8vh 6vw;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, var(--wine) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 100%, rgba(211,172,114,0.10) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  overflow:hidden;
}
.panel-tall{ padding-top:10vh; padding-bottom:10vh; }
.panel-inner{
  position:relative; z-index:3;
  max-width:640px; width:100%;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  animation: rise 1s var(--ease) both;
}
@keyframes rise{
  from{opacity:0; transform:translateY(24px);}
  to{opacity:1; transform:translateY(0);}
}

/* starfield veil texture per panel */
.stars-veil{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 80% 30%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.5px 1.5px at 30% 70%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 60% 85%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.5px 1.5px at 92% 65%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 45% 12%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 15% 92%, rgba(255,255,255,.35), transparent);
  background-repeat:no-repeat;
}

/* ---------------- typography ---------------- */
.eyebrow{
  font-family: var(--body);
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color: var(--gold); margin-bottom:1.4rem; font-weight:500;
}
.display-xl{
  font-family: var(--display);
  font-weight:500; font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height:1.05; color: var(--cream);
}
.display-lg{
  font-family: var(--display);
  font-weight:500; font-size: clamp(2.1rem, 5.5vw, 3.4rem);
  line-height:1.1; color: var(--cream); margin-bottom:.6rem;
}
.display-xl em, .display-lg em{
  font-style:italic; color: var(--rose-soft);
}
.sub{
  font-family: var(--body); font-weight:300;
  color: var(--muted); font-size:1rem; margin-top:1.1rem;
  letter-spacing:.02em;
}
.hint{
  color: var(--muted); font-size:.82rem; margin-top:1.2rem;
  letter-spacing:.04em; font-style:italic; font-family: var(--display);
}

/* ---------------- countdown timer ---------------- */
.timer{
  display:flex; align-items:center; gap: clamp(.4rem,1.5vw,1rem);
  margin-top: 2.6rem;
}
.timer-cell{
  display:flex; flex-direction:column; align-items:center;
  min-width:64px; padding: .9rem .6rem;
  background: rgba(246,236,225,0.05);
  border:1px solid var(--line);
  border-radius:10px;
  backdrop-filter: blur(6px);
}
.timer .num{
  font-family: var(--display); font-size: clamp(1.6rem,4vw,2.4rem);
  font-weight:600; color: var(--cream); font-variant-numeric: tabular-nums;
}
.timer .lbl{
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color: var(--muted); margin-top:.35rem;
}
.colon{ color: var(--gold); font-family: var(--display); font-size:1.6rem; opacity:.6; margin-bottom:1.2rem;}

/* ---------------- buttons ---------------- */
.ghost-btn{
  margin-top:2.4rem;
  font-family: var(--body); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color: var(--cream); background:transparent;
  border:1px solid var(--line); border-radius:999px;
  padding: .95rem 2.1rem; cursor:pointer;
  transition: all .4s var(--ease);
}
.ghost-btn:hover, .ghost-btn:focus-visible{
  border-color: var(--gold); color: var(--gold);
  background: rgba(211,172,114,0.08);
  transform: translateY(-2px);
}
.ghost-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* wax seal button */
.wax-seal{
  position:relative; width:92px; height:92px; margin-top:2.6rem;
  border-radius:50%; cursor:pointer; border:none;
  background: radial-gradient(circle at 32% 28%, #b3475a, #7a2338 65%, #591628 100%);
  box-shadow: 0 8px 24px rgba(122,35,56,.45), inset 0 -6px 10px rgba(0,0,0,.35), inset 0 4px 8px rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center;
  transition: transform .5s var(--ease);
}
.wax-seal:hover{ transform: scale(1.06) rotate(-4deg); }
.wax-seal:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }
.seal-ring{
  position:absolute; inset:6px; border-radius:50%;
  border:1px dashed rgba(246,236,225,.4);
}
.seal-glyph{ font-family: var(--display); font-size:1.6rem; color: var(--rose-soft); }
.wax-seal.cracked{ animation: crack .55s var(--ease) forwards; }
@keyframes crack{
  0%{transform:scale(1);}
  40%{transform:scale(1.15) rotate(-8deg);}
  100%{transform:scale(0); opacity:0;}
}

/* ---------------- floating polaroids on landing ---------------- */
.polaroid-float{
  position:absolute; z-index:2;
  width: 128px; padding: 10px 10px 26px;
  background:#f4ede2; border-radius:3px;
  box-shadow: 0 18px 34px rgba(0,0,0,.45);
  animation: bob 7s ease-in-out infinite;
}
.polaroid-float img{ width:100%; display:block; border-radius:1px; }
.float-a{ top:12%; left:8%; transform:rotate(-9deg); animation-delay:0s;}
.float-b{ top:16%; right:8%; transform:rotate(7deg); animation-delay:1.2s;}
.float-c{ bottom:14%; left:10%; transform:rotate(6deg); animation-delay:2.1s;}
.float-d{ bottom:10%; right:9%; transform:rotate(-6deg); animation-delay:.6s;}
@keyframes bob{
  0%,100%{ transform: translateY(0) rotate(var(--r,0deg)); }
  50%{ transform: translateY(-14px) rotate(var(--r,0deg)); }
}
@media (max-width: 760px){
  .polaroid-float{ width:88px; padding:7px 7px 18px;}
}

/* ---------------- letter ---------------- */
.letter-wrap{ max-width:600px; }
.letter-card{
  margin-top:2rem; text-align:left;
  background: rgba(246,236,225,0.045);
  border:1px solid var(--line); border-radius:14px;
  padding: clamp(1.6rem,4vw,2.6rem);
  font-family: var(--display); font-size: clamp(1.02rem,2vw,1.18rem);
  line-height:1.75; color: var(--cream);
  backdrop-filter: blur(6px);
}
.letter-card p{ margin-bottom:1rem; }
.letter-card p:last-child{ margin-bottom:0; }
.salutation{ font-style:italic; color: var(--rose-soft); }
.signoff{ color: var(--gold); font-style:italic; }
.heart{ color: var(--rose); }

/* ---------------- gallery ---------------- */
.gallery{
  margin-top:2.4rem;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.6rem 1.2rem;
  max-width: 880px;
}
.polaroid{
  background:#f4ede2; padding:8px 8px 22px; border-radius:2px;
  box-shadow: 0 12px 26px rgba(0,0,0,.4);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.polaroid img{ width:100%; aspect-ratio: 3/4; object-fit:cover; display:block; }
.polaroid:hover{ transform: translateY(-8px) scale(1.04) rotate(0deg) !important; box-shadow:0 20px 34px rgba(0,0,0,.5); z-index:5;}
.p-1{ transform:rotate(-4deg);} .p-2{ transform:rotate(3deg);} .p-3{ transform:rotate(-2deg);}
.p-4{ transform:rotate(5deg);} .p-5{ transform:rotate(-6deg);} .p-6{ transform:rotate(2deg);}
.p-7{ transform:rotate(-3deg);} .p-8{ transform:rotate(4deg);} .p-9{ transform:rotate(-5deg);}
.p-10{ transform:rotate(3deg);}
@media (max-width: 760px){
  .gallery{ grid-template-columns: repeat(3, 1fr); gap:1.2rem .9rem; }
}
@media (max-width: 460px){
  .gallery{ grid-template-columns: repeat(2, 1fr); }
}

/* ---------------- video ---------------- */
.video-frame{
  position:relative; margin-top:2.2rem;
  width:min(300px, 78vw); border-radius:18px; overflow:hidden;
  border: 1px solid var(--line);
  box-shadow: 0 24px 50px rgba(0,0,0,.5);
  background:#000;
}
.video-frame video{ width:100%; display:block; aspect-ratio: 3/4; object-fit:cover; }
.play-overlay{
  position:absolute; inset:0; width:100%; height:calc(100% - 44px);
  background: rgba(21,10,23,0.28);
  border:none; cursor:pointer; color:#f6ece1;
  display:flex; align-items:center; justify-content:center;
  transition: opacity .3s var(--ease), background .3s;
}
.play-overlay svg{
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.5));
  transition: transform .3s var(--ease);
}
.play-overlay:hover svg{ transform: scale(1.15); }
.play-overlay.playing{ opacity:0; pointer-events:none; }
.video-scrub{
  position:absolute; left:0; right:0; bottom:0; height:44px;
  display:flex; align-items:center; gap:.5rem;
  padding: 0 .8rem; background: rgba(21,10,23,0.55); backdrop-filter: blur(4px);
}
.vt{ font-size:.68rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width:30px;}
#v-range{
  flex:1; appearance:none; height:3px; background: rgba(246,236,225,.25); border-radius:2px; outline:none;
}
#v-range::-webkit-slider-thumb{
  appearance:none; width:11px; height:11px; border-radius:50%; background: var(--gold);
  box-shadow:0 0 0 3px rgba(211,172,114,.25); cursor:pointer;
}
#v-range::-moz-range-thumb{
  width:11px; height:11px; border:none; border-radius:50%; background: var(--gold); cursor:pointer;
}

/* ---------------- closing ---------------- */
.typewriter{
  border-right: 2px solid var(--gold);
  white-space:nowrap; overflow:hidden; display:inline-block;
  width:0; animation: type 1.4s steps(14,end) .3s forwards, blink .8s step-end infinite;
}
@keyframes type{ to{ width: 100%; } }
@keyframes blink{ 50%{ border-color:transparent; } }
.closing-body{
  margin-top:1.6rem; color: var(--muted); font-size:1rem; line-height:1.8;
  max-width:440px; opacity:0; animation: fadeIn 1s var(--ease) 1.8s forwards;
}
.script-line{
  margin-top:2rem; font-family: var(--script); font-size:2.2rem; color: var(--rose-soft);
  opacity:0; animation: fadeIn 1s var(--ease) 2.4s forwards;
}
.script-line .heart{ color: var(--rose); }
@keyframes fadeIn{ to{ opacity:1; } }
#replay-btn{ opacity:0; animation: fadeIn 1s var(--ease) 2.9s forwards; }

/* ---------------- progress dots ---------------- */
.dots{
  position:fixed; right: clamp(14px,3vw,32px); top:50%; transform:translateY(-50%);
  z-index:50; display:flex; flex-direction:column; gap:.85rem;
}
.dot{
  width:7px; height:7px; border-radius:50%;
  background: rgba(246,236,225,.28); cursor:pointer;
  transition: all .35s var(--ease); display:block;
}
.dot.active{ background: var(--gold); box-shadow:0 0 0 3px rgba(211,172,114,.2); transform:scale(1.2); }
@media (max-width:560px){ .dots{ display:none; } }

/* ---------------- scroll cue ---------------- */
.scroll-cue{
  position:absolute; bottom: 2.2rem; left:50%; transform:translateX(-50%);
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color: var(--muted);
  z-index:3; animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:.35;} 50%{opacity:.9;} }
.closing .scroll-cue{ display:none; }