/* =========================================================
   Magenta Glam — glamorous, romantic, editorial birthday theme.
   Hot magenta-to-plum gradient, gold accents, real photography,
   a soft blush "paper" moment for the intimate beats (envelope,
   little note, letter). See THEME_RULES.md for the data
   contract this theme must respect.
   ========================================================= */

:root{
  --magenta:#765467;
  --magenta-soft:#aa7f8f;
  --plum:#493847;
  --plum-deep:#29202b;
  --plum-black:#18131b;
  --gold:#b29a70;
  --gold-soft:#d9c39a;
  --cream:#fdf8f1;
  --cream-deep:#eee3d4;
  --blush:#f6e3e7;
  --blush-deep:#ecd0d7;
  --ink:#30262e;
  --ink-soft:#685563;
  --rose-red:#984b5d;
  --pink-glow:#a97d8c;

  --font-script:'Alex Brush', cursive;
  --font-accent:'Cormorant Garamond', serif;
  --font-ui:'Poppins', system-ui, sans-serif;
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{height:100%;}
body{
  margin:0;
  background:linear-gradient(135deg, var(--magenta) 0%, #765064 38%, var(--plum) 68%, var(--plum-deep) 100%);
  font-family:var(--font-ui);
  color:var(--ink);
  display:flex;
  justify-content:center;
  padding-block:20px;
}

img{max-width:100%;}
button{font-family:inherit;}

#glamBook{
  width:100%;
  max-width:440px;
  height:min(100dvh - 40px, 900px);
  overflow-y:auto;
  overflow-x:hidden;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
  border-radius:20px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.3);
  position:relative;
  scrollbar-width:thin;
}
#glamBook::-webkit-scrollbar{width:6px;}
#glamBook::-webkit-scrollbar-thumb{background:rgba(0,0,0,.3);border-radius:3px;}

.section{
  min-height:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:60px 28px;
  overflow:hidden;
  background:linear-gradient(160deg, var(--magenta) 0%, #765064 45%, var(--plum) 80%, var(--plum-deep) 100%);
}
.section-inner{position:relative; z-index:2; text-align:center;}
.section::before{
  content:"";
  position:absolute;
  inset:14px;
  border:1px solid rgba(240,215,140,.22);
  border-radius:14px;
  pointer-events:none;
  z-index:1;
}
.section-photo::before{display:none;}
.section::after{
  content:"";
  position:absolute;
  width:280px;
  height:280px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,.1);
  border-radius:50%;
  box-shadow:0 0 0 24px rgba(255,255,255,.025), 0 0 70px rgba(200,141,165,.18);
  pointer-events:none;
  z-index:1;
}
.section-photo::after{display:none;}

/* full-bleed photo sections (intro / hero / footer) */
.section-photo{padding:0; justify-content:flex-end;}
.photo-fill{position:absolute; inset:0; border:none; z-index:0;}
.cinematic-overlay{position:absolute; inset:0; z-index:1; background:linear-gradient(0deg, var(--plum-black) 0%, rgba(41,32,43,.6) 45%, rgba(41,32,43,.15) 75%);}
.cinematic-overlay.strong{background:linear-gradient(0deg, var(--plum-black) 15%, rgba(24,19,27,.65) 55%, rgba(24,19,27,.3) 100%);}

/* blush "paper" sections (envelope / note / letter) */
.section-paper{background:linear-gradient(175deg, var(--blush) 0%, var(--blush-deep) 100%);}
.section-paper::before{border-color:rgba(140,34,48,.15);}
.section-paper::after{border-color:rgba(140,34,48,.08); box-shadow:0 0 0 24px rgba(140,34,48,.02), 0 0 70px rgba(140,34,48,.06);}

.brand-mark{position:absolute; top:20px; left:24px; z-index:3; margin:0; font-family:var(--font-script); font-size:1.5rem; color:#fff;}

/* ---------- type ---------- */
.script-headline{
  font-family:var(--font-script); font-weight:400;
  font-size:clamp(2.8rem,14vw,4rem); line-height:1.05; margin:.1em 0 .3em;
  color:#fff; text-shadow:0 3px 18px rgba(0,0,0,.35); text-wrap:balance;
}
.script-headline.dark{color:var(--rose-red); text-shadow:none;}
.script-name{
  font-family:var(--font-script); font-weight:400;
  font-size:clamp(2.4rem,13vw,3.6rem); line-height:1.1; margin:.25em 0 .1em;
  color:#fff; text-shadow:0 3px 16px rgba(0,0,0,.4);
}
.script-name.dark{color:var(--rose-red); text-shadow:none;}
.heart-accent{font-size:.7em; color:var(--gold-soft); vertical-align:middle;}
.accent-italic{font-family:var(--font-accent); font-style:italic; font-weight:500; font-size:1.1rem; color:var(--gold-soft); margin:.3em 0;}
.caption-italic{font-family:var(--font-accent); font-style:italic; font-weight:500; font-size:1rem; color:var(--gold-soft); margin-top:16px; letter-spacing:.02em;}
.caption-italic.dark{color:var(--rose-red); opacity:.75;}
.eyebrow{font-family:var(--font-ui); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft); opacity:.85; margin:0 0 .6em;}
.date-label{font-family:var(--font-ui); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-soft); margin:0 0 .8em;}

/* ---------- scroll cue ---------- */
.scroll-chevron{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:2;
  width:22px; height:22px; stroke:var(--gold-soft); fill:none; stroke-width:2;
  opacity:.8; animation:bob 1.8s ease-in-out infinite;
}
.scroll-chevron.dark{stroke:var(--rose-red); opacity:.6;}
@keyframes bob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,6px);}}

/* ---------- back button ---------- */
.back-btn{
  position:absolute; top:18px; left:18px; z-index:5;
  display:inline-flex; align-items:center; gap:4px;
  font-family:var(--font-ui); font-weight:700; font-size:.7rem; letter-spacing:.06em;
  color:#2b1d29; background:linear-gradient(160deg,#ead9b2,#b59b68);
  border:none; border-radius:999px; padding:.5em 1em; cursor:pointer;
  box-shadow:0 6px 14px -4px rgba(0,0,0,.4);
  transition:transform .2s ease;
}
.back-btn:hover{transform:translateY(-1px);}
.back-btn:focus-visible{outline:2px solid var(--gold-soft); outline-offset:2px;}

/* ---------- buttons ---------- */
.pill-btn{
  display:inline-block; font-family:var(--font-ui); font-weight:600; font-size:.85rem;
  letter-spacing:.02em; color:#fff; background:var(--rose-red);
  border:1px solid var(--gold-soft); border-radius:999px; padding:.75em 1.5em; cursor:pointer;
  margin-top:18px; transition:transform .2s ease, background .2s ease;
}
.pill-btn:hover{transform:translateY(-1px); background:#7c3b4b;}
.pill-btn:focus-visible{outline:2px solid var(--gold-soft); outline-offset:3px;}
.pill-btn.primary{
  background:linear-gradient(155deg, var(--gold-soft), var(--gold) 70%); color:#3a1520; border-color:var(--gold-soft);
  font-size:.9rem; padding:.85em 1.7em; box-shadow:0 10px 24px -10px rgba(0,0,0,.55);
}
.pill-btn.primary:hover{background:linear-gradient(155deg, var(--gold-soft), var(--gold-soft) 70%);}
.pill-btn.ghost{background:transparent; color:var(--rose-red); border-color:var(--rose-red);}
.pill-btn.ghost.light{color:#fff; border-color:var(--gold-soft);}
.pill-btn.ghost.light:hover{background:var(--gold-soft); color:var(--plum-black);}

/* ---------- intro / opening ---------- */
.intro-inner{padding:0 28px 64px;}
.intro-kicker{
  display:inline-flex; align-items:center; gap:10px;
  margin:0 0 4px; color:var(--gold-soft);
  font-size:.68rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
}
.intro-kicker::before,.intro-kicker::after{
  content:""; width:26px; height:1px; background:linear-gradient(90deg,transparent,var(--gold-soft));
}
.intro-kicker::after{transform:scaleX(-1);}
.intro-kicker.dark{color:var(--rose-red);}
.intro-kicker.dark::before,.intro-kicker.dark::after{background:linear-gradient(90deg,transparent,var(--rose-red));}
.intro-subtitle{
  margin:-3px 0 15px; color:rgba(255,240,250,.85);
  font-family:var(--font-accent); font-size:1.05rem; font-style:italic;
}
.intro-subtitle.dark{color:var(--ink-soft);}

/* ---------- envelope ---------- */
.envelope{
  width:min(220px,58vw); aspect-ratio:1.4; margin:20px auto 6px; position:relative;
  border:0; background:none; padding:0; cursor:pointer;
}
.envelope-body{
  position:absolute; inset:0; border-radius:6px;
  background:linear-gradient(160deg,var(--rose-red),#6f303f);
  box-shadow:0 20px 40px -16px rgba(0,0,0,.4);
}
.envelope-flap{
  position:absolute; top:0; left:0; width:100%; height:58%;
  background:linear-gradient(160deg,#a8586a,var(--rose-red));
  clip-path:polygon(0 0,100% 0,50% 92%);
  transform-origin:top center;
  transition:transform .7s cubic-bezier(.6,-0.3,.3,1.25);
}
.seal{
  position:absolute; top:50%; left:50%; z-index:4; transform:translate(-50%,-50%);
  width:58px; height:58px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, var(--gold-soft), var(--gold) 55%, #8a642a 100%);
  box-shadow:0 8px 18px rgba(0,0,0,.35), inset 0 -4px 8px rgba(0,0,0,.25), inset 0 3px 6px rgba(255,255,255,.35);
  display:grid; place-items:center; cursor:pointer;
  transition:transform .35s ease;
}
.seal.small{position:relative; top:auto; left:auto; transform:none; width:46px; height:46px; margin:0 auto 18px;}
.seal-shine{position:absolute; top:14%; left:20%; width:40%; height:26%; border-radius:50%; background:rgba(255,255,255,.4); filter:blur(3px);}
.seal-glyph{width:24px; height:24px; fill:var(--rose-red); position:relative; z-index:1;}
.envelope:hover .seal{transform:translate(-50%,-50%) scale(1.05);}
.envelope:active .seal{transform:translate(-50%,-50%) scale(.94);}
.envelope.pressed .envelope-flap{transform:rotateX(180deg);}
.envelope.pressed .seal{transform:translate(-50%,-50%) scale(0); opacity:0;}
.envelope:focus-visible{outline:2px solid var(--rose-red); outline-offset:8px; border-radius:12px;}
.note-envelope{display:flex; justify-content:center;}

/* ---------- photo placeholders ---------- */
.photo-placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(160deg,#6d485d,#403041 65%,#2c202f);
  border:1.5px dashed rgba(240,215,140,.55);
  color:rgba(255,255,255,.85);
  text-align:center; font-family:var(--font-ui); font-size:.74rem; padding:10px;
}
.photo-placeholder .cam-icon{width:32px; height:32px; stroke:var(--gold-soft); fill:none; stroke-width:2;}
.photo-placeholder.small{width:100%; height:100%; padding:6px; gap:4px;}
.photo-placeholder.small .cam-icon{width:22px; height:22px;}
.photo-placeholder.filled{background:none; border:none; padding:0;}
.photo-placeholder.filled img{width:100%; height:100%; object-fit:cover; display:block;}

.hero-inner{padding:0 28px 60px;}

/* ---------- choose your surprise ---------- */
.menu-headline{margin-bottom:.2em;}
.menu-subtitle{font-family:var(--font-accent); font-style:italic; font-size:1rem; color:var(--gold-soft); opacity:.9; margin:0 0 22px;}
.surprise-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.surprise-item{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:rgba(255,255,255,.06); border:1px solid rgba(240,215,140,.3); cursor:pointer;
  padding:16px 6px; border-radius:16px; color:#fff; transition:transform .2s ease, background .2s ease;
}
.surprise-item:hover{background:rgba(255,255,255,.14); transform:translateY(-3px);}
.surprise-item:focus-visible{outline:2px solid var(--gold-soft); outline-offset:2px;}
.surprise-icon{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 35% 30%, var(--gold-soft), var(--gold) 70%);
  box-shadow:0 8px 16px -6px rgba(0,0,0,.5);
}
.surprise-icon svg{width:21px; height:21px; stroke:#3a1520; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.surprise-label{font-size:.7rem; letter-spacing:.02em; color:var(--gold-soft); text-align:center;}
.menu-hint{margin-top:22px; font-family:var(--font-accent); font-style:italic; font-size:.92rem; color:var(--gold-soft); opacity:.85;}

/* ---------- pesan / a little note ---------- */
.note-body{
  max-width:32ch; margin:0 auto; font-family:var(--font-accent); font-style:italic;
  font-size:1.1rem; line-height:1.6; color:var(--ink-soft);
}

/* ---------- galeri kenangan ---------- */
.strip-inner{width:100%;}
.gallery-headline{margin-bottom:.15em;}
.moments-track{
  display:flex; gap:16px; margin:18px 0 4px; padding:10px 28px 20px;
  margin-inline:-28px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.moments-track::-webkit-scrollbar{display:none;}
.moment-card{
  flex:0 0 66%; max-width:220px; scroll-snap-align:center; margin:0;
  background:#fff; padding:10px 10px 24px; box-shadow:0 14px 30px -12px rgba(0,0,0,.5);
  font-family:var(--font-accent); font-style:italic; font-weight:500; font-size:.88rem;
  color:var(--ink-soft); text-align:center;
}
.moment-card .photo-placeholder{aspect-ratio:1;}
.moment-card figcaption{margin-top:8px;}
.rot-1{transform:rotate(-4deg);}
.rot-2{transform:rotate(3deg);}
.rot-3{transform:rotate(-2deg);}
.moments-nav{display:flex; align-items:center; justify-content:center; gap:18px; margin-top:6px;}
.moments-counter{font-family:var(--font-ui); font-size:.75rem; letter-spacing:.12em; color:var(--gold-soft); opacity:.85; min-width:64px; text-align:center;}
.moments-arrow{
  width:36px; height:36px; border-radius:50%; flex:none; cursor:pointer;
  border:1px solid var(--gold-soft); background:rgba(255,255,255,.08); display:grid; place-items:center;
  transition:background .2s ease, transform .2s ease;
}
.moments-arrow:hover{background:rgba(255,255,255,.18); transform:translateY(-1px);}
.moments-arrow:focus-visible{outline:2px solid var(--gold-soft); outline-offset:2px;}
.moments-arrow svg{width:16px; height:16px; stroke:var(--gold-soft); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}

/* ---------- surat spesial ---------- */
.letter-inner{width:100%;}
.letter-name{font-size:clamp(2rem,10vw,2.8rem); margin-bottom:.15em;}
.letter-card{
  position:relative; background:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,.03) 0 2px, transparent 2px) 0 0/14px 14px,
    linear-gradient(175deg, var(--cream), var(--cream-deep));
  color:var(--ink); padding:30px 22px 24px; border-radius:3px;
  box-shadow:0 18px 36px -14px rgba(0,0,0,.35);
  transform:rotate(-1deg);
  text-align:left;
}
.letter-tape{
  position:absolute; top:-10px; left:50%; transform:translateX(-50%) rotate(-3deg);
  width:60px; height:22px; background:rgba(255,255,255,.6); box-shadow:0 1px 2px rgba(0,0,0,.15);
}
.letter-flower{position:absolute; top:16px; right:18px; width:32px; height:32px; opacity:.9;}
.letter-greeting{font-family:var(--font-script); font-size:1.6rem; color:var(--rose-red); margin:.1em 0 .4em;}
.letter-body{
  font-family:var(--font-accent); font-size:.98rem; line-height:1.75;
  color:var(--ink); margin:0 0 1.1em; white-space:pre-line;
}
.letter-sign{font-family:var(--font-script); font-size:1.3rem; color:var(--rose-red); margin:0; text-align:right;}
.letter-sign.light{color:var(--gold-soft); font-family:var(--font-ui); font-size:.85rem; font-style:normal;}

/* ---------- bunga virtual / kue ulang tahun ---------- */
.bouquet-illustration{width:150px; height:150px; margin:8px auto;}
.cake-illustration{width:150px; height:150px; margin:8px auto;}
.surprise-body{max-width:34ch; margin:6px auto 0; font-family:var(--font-accent); font-style:italic; font-size:1.05rem; line-height:1.6; color:rgba(255,240,250,.85);}
.wish-note{font-family:var(--font-accent); font-style:italic; color:var(--gold-soft); margin-top:12px;}

/* ---------- confetti (cake candle-blow) ---------- */
.confetti-piece{
  position:fixed; top:0; width:8px; height:8px; z-index:60; pointer-events:none;
  animation:confetti-fall linear forwards;
}
@keyframes confetti-fall{to{transform:translateY(70vh) rotate(540deg); opacity:0;}}

/* ---------- musik untukmu ---------- */
.music-inner{width:100%; position:relative; z-index:2;}
.music-headline{margin-bottom:.2em;}
.notes-squiggle{position:absolute; top:14px; left:0; width:100%; height:26px; opacity:.7; z-index:1;}
@media (prefers-reduced-motion:no-preference){
  .notes-squiggle{animation:squiggle-glow 2.4s ease-in-out infinite;}
}
@keyframes squiggle-glow{0%,100%{opacity:.55;}50%{opacity:.9;}}

.audio-player{display:flex; flex-direction:column; align-items:center; gap:4px;}
.vinyl-wrap{position:relative; width:min(190px,52vw); aspect-ratio:1; margin:10px auto 18px;}
.vinyl-disc{
  width:100%; height:100%; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:
    repeating-radial-gradient(circle at center, rgba(255,255,255,.05) 0 2px, transparent 2px 6px),
    radial-gradient(circle at center, var(--rose-red) 0 14%, #111 15% 22%, #1b1b1b 23% 100%);
  position:relative; animation:spin 6s linear infinite; animation-play-state:paused;
  box-shadow:0 18px 36px -14px rgba(0,0,0,.6);
}
.vinyl-disc:focus-visible{outline:2px solid var(--gold-soft); outline-offset:4px;}
.vinyl-disc.playing{animation-play-state:running;}
.vinyl-label{
  position:absolute; inset:36%; border-radius:50%; background:var(--gold); overflow:hidden;
  box-shadow:0 0 0 2px var(--plum-black), inset 0 0 0 1px rgba(0,0,0,.2);
}
.vinyl-photo{width:100%; height:100%; border-radius:50%;}
.vinyl-arm{
  position:absolute; top:-6px; right:2%; width:9px; height:50%; transform-origin:top center;
  background:linear-gradient(var(--gold-soft),var(--gold)); border-radius:6px; transform:rotate(-28deg);
  transition:transform .5s cubic-bezier(.32,.72,0,1); box-shadow:0 4px 10px rgba(0,0,0,.4);
}
.vinyl-disc.playing ~ .vinyl-arm{transform:rotate(-6deg);}
@keyframes spin{to{transform:rotate(360deg);}}

.song-title{font-family:var(--font-accent); font-style:italic; font-weight:600; font-size:1.2rem; color:#fff; margin:0;}
.song-artist{font-family:var(--font-ui); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-soft); opacity:.85; margin:.2em 0 18px;}

.song-progress{width:100%; height:4px; border-radius:2px; background:rgba(255,255,255,.18); cursor:pointer;}
.song-progress-fill{height:100%; width:0%; border-radius:2px; background:var(--gold-soft);}
.song-times{display:flex; align-items:center; justify-content:center; gap:20px; margin-top:12px;}
.song-times span{font-family:var(--font-ui); font-size:.7rem; color:var(--gold-soft); opacity:.8; min-width:2.4em;}
.song-play{
  width:44px; height:44px; border-radius:50%; flex:none; cursor:pointer;
  border:1px solid var(--gold-soft); background:rgba(255,255,255,.06); display:grid; place-items:center;
  transition:background .2s ease, transform .2s ease;
}
.song-play:hover{background:rgba(255,255,255,.14); transform:translateY(-1px);}
.song-play:focus-visible{outline:2px solid var(--gold-soft); outline-offset:3px;}
.song-play svg{width:18px; height:18px; stroke:#fff; fill:#fff;}
.song-play .icon-pause{display:none;}
.song-play.playing .icon-play{display:none;}
.song-play.playing .icon-pause{display:block;}
.song-hint{font-family:var(--font-ui); font-size:.72rem; color:var(--gold-soft); opacity:.85; min-height:1.2em; margin:10px 0 0;}

.youtube-player{width:100%;}
.youtube-frame-wrap{position:relative; width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; box-shadow:0 18px 34px -14px rgba(0,0,0,.55);}
.youtube-frame-wrap iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

/* ---------- one more thing ---------- */
.quote-card{
  max-width:30ch; margin:18px auto 0; padding:24px 20px; border-radius:4px;
  background:rgba(255,255,255,.06); border:1px solid rgba(240,215,140,.28);
}
.quote-card p{font-family:var(--font-accent); font-style:italic; font-size:1.15rem; line-height:1.55; color:#fff; margin:0;}

/* ---------- penutup ---------- */
.footer-inner{padding:0 28px 64px;}
.closing-polaroid{
  position:absolute; right:20px; bottom:120px; z-index:2; width:110px;
  background:#fff; padding:8px 8px 22px; box-shadow:0 14px 30px -12px rgba(0,0,0,.55);
  transform:rotate(6deg); font-family:var(--font-accent); font-style:italic; font-size:.7rem; color:var(--ink-soft);
  text-align:center; margin:0;
}
.closing-polaroid .photo-placeholder{aspect-ratio:1;}
.closing-polaroid figcaption{margin-top:6px;}

/* ---------- responsive ---------- */
@media (max-width:380px){
  .section{padding:48px 20px;}
  .surprise-grid{gap:8px;}
}

@media (max-width:340px){
  .closing-polaroid{width:88px; right:14px; bottom:150px;}
}

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