/* =========================================================
   TOKENS
   Palette: midnight plum → ember. Warm gold + rose for the
   one moment that's allowed to shine (the name reveal).
   Type: Cormorant Garamond (headings/body), Petit Formal
   Script (handwriting moments), Jost (small labels/UI).
   ========================================================= */
:root{
  --ink-950: #1a1024;
  --ink-900: #241531;
  --ink-800: #331d42;
  --plum-700: #4a2856;
  --rose-400: #e8879a;
  --rose-300: #f2a9b6;
  --gold-400: #e8b86d;
  --gold-300: #f3d19a;
  --paper: #f7f0e4;
  --paper-line: #d8c9ae;
  --ink-text: #3a2b30;
  --white-60: rgba(247,240,228,.6);
  --white-85: rgba(247,240,228,.88);

  --font-serif: 'Cormorant Garamond', serif;
  --font-script: 'Petit Formal Script', cursive;
  --font-sans: 'Jost', sans-serif;

  --ease-soft: cubic-bezier(.22,.68,.35,1);
}

*{ box-sizing: border-box; }
html,body{
  margin:0; padding:0; height:100%;
  background: radial-gradient(120% 140% at 50% 0%, var(--plum-700) 0%, var(--ink-900) 46%, var(--ink-950) 100%);
  color: var(--white-85);
  font-family: var(--font-serif);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

button{ font-family: var(--font-sans); border:0; background:none; cursor:pointer; }

/* subtle grain-free starfield, generated in CSS via layered radial dots */
#starfield{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, var(--white-60) 50%, transparent 51%),
    radial-gradient(1px 1px at 80% 10%, var(--white-60) 50%, transparent 51%),
    radial-gradient(1px 1px at 60% 70%, var(--white-60) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 30% 85%, var(--white-60) 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 60%, var(--white-60) 50%, transparent 51%),
    radial-gradient(1px 1px at 45% 40%, var(--white-60) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 15% 55%, var(--white-60) 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 90%, var(--white-60) 50%, transparent 51%);
  opacity:.35;
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle{ from{ opacity:.2; } to{ opacity:.5; } }

#hearts-canvas, #confetti-canvas{
  position:fixed; inset:0; width:100%; height:100%; pointer-events:none;
}
#hearts-canvas{ z-index:1; }
#confetti-canvas{ z-index:2; }

#sound-toggle{
  position:fixed; top:18px; right:18px; z-index:50;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.08); backdrop-filter:blur(4px);
  color:var(--white-85); font-size:16px;
  display:flex; align-items:center; justify-content:center;
}

/* =========================================================
   STAGE / SCENES
   ========================================================= */
#stage{ position:relative; z-index:2; height:100vh; height:100dvh; width:100%; }

.scene{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; padding:8vh 7vw;
  text-align:center;
  opacity:0; visibility:hidden;
  transform:translateY(14px);
  transition: opacity .7s var(--ease-soft), transform .7s var(--ease-soft);
}
.scene.is-active{ opacity:1; visibility:visible; transform:translateY(0); }

.eyebrow-line{
  font-family: var(--font-sans); font-weight:400; letter-spacing:.14em;
  font-size:13px; color: var(--rose-300); margin:0; text-transform:lowercase;
}
.name-fill{ color: var(--gold-300); font-style:italic; }
.sender-fill{ color: var(--gold-300); }

.script-line{
  font-family: var(--font-script); font-weight:400; font-size:clamp(28px,7vw,44px);
  color: var(--paper); margin:0; line-height:1.3;
}

.hint{
  font-family: var(--font-sans); font-size:12.5px; letter-spacing:.06em;
  color: var(--white-60); margin:2px 0 0;
}
.hint--top{ margin-bottom:4px; }

.btn{
  margin-top:8px; padding:13px 30px; border-radius:999px;
  border:1px solid rgba(243,209,154,.5);
  color: var(--gold-300); font-size:13px; letter-spacing:.08em;
  transition: background .3s var(--ease-soft), transform .2s var(--ease-soft);
}
.btn:hover{ background: rgba(243,209,154,.12); transform: translateY(-1px); }
.btn--ghost{ border-color: rgba(247,240,228,.3); color: var(--white-85); }

/* =========================================================
   SCENE 1 — ENVELOPE
   ========================================================= */
.envelope{
  position:relative; width:min(78vw,260px); aspect-ratio:3/2; cursor:pointer;
  margin-top:10px;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.45));
}
.envelope__back{
  position:absolute; inset:0; border-radius:6px;
  background: linear-gradient(155deg, var(--gold-300), var(--gold-400));
}
.envelope__letter-peek{
  position:absolute; left:8%; right:8%; top:-6%; height:60%;
  background: var(--paper); border-radius:2px 2px 0 0;
  transition: top .6s var(--ease-soft) .15s;
}
.envelope__flap{
  position:absolute; inset:0 0 auto 0; height:52%;
  background: linear-gradient(155deg, var(--gold-400), #d69a4c);
  clip-path: polygon(0 0, 100% 0, 50% 88%);
  transform-origin: top center; transform-style:preserve-3d;
  transition: transform .6s var(--ease-soft);
  border-radius:6px 6px 0 0;
}
.envelope__seal{
  position:absolute; left:50%; top:38%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #fff7e8, var(--paper));
  color: var(--ink-800); font-family:var(--font-script); font-size:22px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
  transition: opacity .3s;
}
.envelope.is-open .envelope__flap{ transform: rotateX(160deg); }
.envelope.is-open .envelope__letter-peek{ top:-34%; }
.envelope.is-open .envelope__seal{ opacity:0; }

/* =========================================================
   SCENE 2 — LETTER
   ========================================================= */
.paper{
  width:min(86vw,360px); max-height:64vh; overflow-y:auto;
  background: var(--paper); color: var(--ink-text);
  padding:34px 26px; border-radius:3px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  background-image: repeating-linear-gradient(var(--paper) 0 31px, var(--paper-line) 31px 32px);
  background-position: 0 8px;
}
.paper__greeting{
  font-size:22px; font-style:italic; margin:6px 0 14px; text-align:left;
}
.paper__body{
  font-size:17.5px; line-height:32px; text-align:left; white-space:pre-wrap;
  min-height:64px;
}
.paper__body .cursor{ display:inline-block; width:1px; background:var(--ink-text); animation:blink 1s step-end infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.paper__sign{ font-family:var(--font-script); font-size:26px; text-align:right; margin:18px 0 0; }

/* =========================================================
   SCENE 3 — CAKE
   ========================================================= */
.cake{ position:relative; width:180px; height:150px; margin-top:10px; cursor:pointer; }
.cake__wick{ position:absolute; left:50%; top:22px; transform:translateX(-50%); width:2px; height:14px; background:#7a5230; }
.cake__flame{
  position:absolute; left:50%; top:2px; width:12px; height:20px; transform:translateX(-50%);
  background: radial-gradient(circle at 50% 70%, #fff3c4, var(--gold-400) 60%, #d0602a 100%);
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  animation: flicker 1.6s ease-in-out infinite;
  transition: opacity .3s, transform .3s;
}
@keyframes flicker{
  0%,100%{ transform:translateX(-50%) rotate(-3deg) scale(1); }
  50%{ transform:translateX(-50%) rotate(3deg) scale(1.08); }
}
.cake.is-blown .cake__flame{ opacity:0; transform:translateX(-50%) scale(0); }
.cake.is-blown .cake__wick{ background:#4a3a2c; }
.cake__tier{ position:absolute; left:50%; transform:translateX(-50%); border-radius:6px; display:flex; justify-content:space-evenly; align-items:flex-start; }
.cake__tier--top{ top:36px; width:70px; height:34px; background:linear-gradient(180deg,var(--rose-300),var(--rose-400)); }
.cake__tier--mid{ top:66px; width:118px; height:50px; background:linear-gradient(180deg,#f6c9c9,var(--rose-300)); }
.cake__tier span{ width:4px; height:8px; margin-top:-8px; background:var(--gold-300); border-radius:2px; }
.cake__plate{ position:absolute; top:114px; left:50%; transform:translateX(-50%); width:150px; height:10px; border-radius:50%; background:rgba(255,255,255,.15); }

/* =========================================================
   SCENE 4 — BIRTHDAY HEADLINE
   ========================================================= */
.headline-name{
  margin:0; font-weight:600; font-style:italic;
  font-size:clamp(40px,13vw,72px); line-height:1;
  color: var(--paper);
  text-shadow: 0 0 26px rgba(232,184,109,.5);
}
.subline{ font-family:var(--font-sans); font-weight:300; font-size:14px; color:var(--white-60); max-width:280px; margin:0; }

/* =========================================================
   SCENE 5 — GIFT BOX
   ========================================================= */
.gift{ position:relative; width:150px; height:130px; margin-top:6px; cursor:pointer; }
.gift__box{ position:absolute; bottom:0; width:100%; height:78px; background:linear-gradient(155deg,var(--rose-300),var(--rose-400)); border-radius:4px; transition: transform .5s var(--ease-soft); }
.gift__lid{ position:absolute; top:34px; width:100%; height:22px; background:linear-gradient(155deg,var(--gold-300),var(--gold-400)); border-radius:4px; transform-origin:left center; transition: transform .6s var(--ease-soft), top .6s var(--ease-soft); }
.gift__ribbon-v{ position:absolute; left:50%; top:0; transform:translateX(-50%); width:14px; height:100%; background:var(--gold-300); transition:opacity .3s; }
.gift__ribbon-h{ position:absolute; top:40px; width:100%; height:14px; background:var(--gold-300); transition:opacity .3s; }
.gift__bow{ position:absolute; left:50%; top:16px; transform:translateX(-50%); width:34px; height:20px; transition: transform .5s var(--ease-soft), opacity .3s; }
.gift__bow::before,.gift__bow::after{ content:""; position:absolute; top:0; width:16px; height:20px; background:var(--gold-300); border-radius:50% 50% 50% 0; }
.gift__bow::before{ left:0; transform:rotate(-25deg); }
.gift__bow::after{ right:0; transform:rotate(25deg) scaleX(-1); }

.gift.is-open .gift__lid{ transform:rotate(-108deg); top:-6px; }
.gift.is-open .gift__box{ transform: scale(1.06); }
.gift.is-open .gift__ribbon-v,
.gift.is-open .gift__ribbon-h,
.gift.is-open .gift__bow{ opacity:0; }

/* =========================================================
   SCENE 6 — PHOTO FIELD (the "photo bomb")
   ========================================================= */
.photo-field{
  position:relative; width:min(92vw,420px); height:52vh; margin-top:6px;
}
.photo-card{
  position:absolute; width:104px; height:132px; border-radius:8px;
  background-size:cover; background-position:center;
  border:5px solid var(--paper);
  box-shadow:0 14px 30px rgba(0,0,0,.5);
  opacity:0; transform: translate(-50%,-50%) scale(.2) rotate(0deg);
  transition: transform .8s var(--ease-soft), opacity .5s ease;
  cursor:pointer;
}
.photo-card.is-in{ opacity:1; }

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox{
  position:fixed; inset:0; z-index:80; display:none;
  align-items:center; justify-content:center;
  background:rgba(15,8,20,.9);
}
.lightbox.is-open{ display:flex; }
.lightbox img{ max-width:88vw; max-height:82vh; border-radius:8px; border:6px solid var(--paper); box-shadow:0 20px 60px rgba(0,0,0,.6); }

@media (min-width:640px){
  .paper{ width:440px; }
  .photo-field{ height:60vh; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}