/* =========================================================
   A Little Gift — keepsake-style birthday website template
   Commits to one warm, candlelit palette regardless of the
   viewer's OS theme (see README for why).
   ========================================================= */

:root{
  --garnet:#7b3f4a;
  --garnet-bright:#9c5966;
  --garnet-deep:#3d2028;
  --paper:#fbf6ef;
  --paper-deep:#eadfcf;
  --gold:#b99765;
  --gold-soft:#d4bb91;
  --ink:#3b2a2d;
  --ink-soft:#725a5d;
  --rose:#d7b5b3;
  --desk:#211d1b;
  --desk-glow:#3a302b;

  --font-script:'Beau Rivage', cursive;
  --font-accent:'Cormorant Garamond', serif;
  --font-type:'Cormorant Garamond', serif;
  --font-ui:'Outfit', system-ui, sans-serif;
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{height:100%;}
body{
  margin:0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, var(--desk-glow), transparent 70%),
    var(--desk);
  font-family:var(--font-ui);
  color:var(--ink);
  display:flex;
  justify-content:center;
  padding-block:24px;
}

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

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

.page{
  min-height:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:56px 30px;
  overflow:hidden;
}
.page-inner{position:relative;z-index:2;}

.page-paper{background:var(--paper);}
.page-garnet{background:linear-gradient(175deg, var(--garnet-bright), var(--garnet) 55%, var(--garnet-deep));}
.page-gingham{
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 2px, transparent 2px 34px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 2px, transparent 2px 34px),
    linear-gradient(175deg, var(--garnet) 0%, var(--garnet-deep) 100%);
}
.page-footer .footer-inner{display:flex; flex-direction:column; align-items:center;}

/* ---------- type ---------- */
.script-xl{font-family:var(--font-script); font-size:clamp(2.6rem,13vw,3.6rem); line-height:1.05; margin:.2em 0; color:var(--garnet); text-wrap:balance;}
.script-lg{font-family:var(--font-script); font-size:clamp(2rem,9vw,2.6rem); margin:.2em 0 .5em; color:var(--garnet); text-wrap:balance;}
.script-xl.light, .script-lg.light{color:var(--paper);}
.accent-italic{font-family:var(--font-accent); font-style:italic; font-weight:500; font-size:1.15rem; color:var(--ink-soft); margin:.3em 0;}
.accent-italic.light{color:var(--gold-soft);}
.eyebrow{font-family:var(--font-ui); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); opacity:.75; margin:0 0 .4em;}
.eyebrow.light{color:var(--gold-soft);}
.hint-text{font-family:var(--font-ui); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); opacity:.7; text-align:center; margin-top:18px;}
.hint-text.light{color:var(--gold-soft);}
.hint-text.dim{margin-top:6px; opacity:.5; font-size:.7rem;}
.hint-text.left{text-align:left;}
.date-label{font-family:var(--font-ui); font-size:.85rem; letter-spacing:.1em; color:var(--gold-soft); margin:0 0 .3em;}

/* ---------- intro / envelope ---------- */
.intro-inner{text-align:center;}
.envelope-wrap{
  width:min(230px,62vw); aspect-ratio:1.5; margin:28px auto; position:relative;
  border:0; background:none; padding:0; cursor:pointer; perspective:900px;
}
.envelope-back{position:absolute; inset:0; z-index:2; border-radius:8px;
  background:linear-gradient(155deg,var(--garnet-bright),var(--garnet-deep));
  box-shadow:0 18px 34px -14px rgba(0,0,0,.55);
}
.envelope-letter{
  position:absolute; left:9%; right:9%; top:16%; height:58%; z-index:1;
  background:var(--paper); border-radius:2px; box-shadow:0 8px 16px rgba(0,0,0,.2);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:10px;
  font-family:var(--font-script); font-size:1.3rem; color:var(--garnet);
  transform:translateY(8%);
  transition:transform .9s cubic-bezier(.22,.8,.25,1) .1s;
}
.envelope-flap{
  position:absolute; top:0; left:0; width:100%; height:56%; z-index:3;
  background:linear-gradient(155deg,#c9384c,var(--garnet));
  clip-path:polygon(0 0,100% 0,50% 96%);
  transform-origin:top center;
  transition:transform .9s cubic-bezier(.6,-0.3,.3,1.25), opacity .5s ease .35s;
}
.wax-seal{
  position:absolute; top:52%; left:50%; z-index:4; transform:translate(-50%,-50%);
  width:54px; height:54px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--gold-soft), var(--gold) 55%, #8a642a 100%);
  box-shadow:0 6px 14px rgba(0,0,0,.4), inset 0 -3px 6px rgba(0,0,0,.3);
  display:grid; place-items:center; color:var(--garnet-deep); font-size:1.2rem;
  transition:transform .5s ease, opacity .4s ease;
}
.envelope-wrap.open .envelope-flap{transform:rotateX(180deg); opacity:0;}
.envelope-wrap.open .envelope-letter{z-index:5; transform:translateY(-58%) rotate(-2deg);}
.envelope-wrap.open .wax-seal{transform:translate(-50%,-50%) scale(0); opacity:0;}
.envelope-wrap:focus-visible{outline:2px solid var(--gold); outline-offset:6px; border-radius:10px;}

/* ---------- doodles ---------- */
.doodle{position:absolute; stroke:var(--ink-soft); stroke-width:1.6; fill:none; opacity:.55; stroke-linecap:round; stroke-linejoin:round; z-index:1;}
.doodle-heart{width:60px; top:30px; right:24px; stroke:var(--gold-soft);}

/* ---------- photo placeholders ---------- */
.photo-placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(160deg,#d8b98b,#a5673f 60%,#7a4326);
  border:1px dashed rgba(255,255,255,.5);
  color:rgba(255,255,255,.85);
  text-align:center; font-family:var(--font-ui); font-size:.78rem; padding:10px;
}
.photo-placeholder .cam-icon{width:34px; height:34px; stroke:rgba(255,255,255,.85); 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;}

.page-photo{padding:0; justify-content:flex-end;}
.photo-fill{position:absolute; inset:0; border:none;}
.cinematic-overlay{position:absolute; inset:0; z-index:1; background:linear-gradient(0deg, var(--garnet-deep) 0%, rgba(76,15,22,.55) 45%, rgba(76,15,22,.1) 75%);}
.hero-inner{padding:0 30px 56px;}
.scroll-cue{position:absolute; bottom:18px; left:50%; transform:translateX(-50%); width:22px; height:22px; z-index:2; stroke:var(--paper); fill:none; stroke-width:2; opacity:.85; animation:bob 1.8s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,6px);}}

/* ---------- gallery / polaroids ---------- */
.moments-track{
  display:flex; gap:18px; margin:18px 0 4px; padding:10px 30px 20px;
  margin-inline:-30px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.moments-track::-webkit-scrollbar{display:none;}
.moments-track .polaroid{flex:0 0 68%; max-width:230px; scroll-snap-align:center;}
.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(--ink-soft); opacity:.8; 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:var(--paper); display:grid; place-items:center;
  transition:background .2s ease, transform .2s ease;
}
.moments-arrow:hover{background:var(--paper-deep); transform:translateY(-1px);}
.moments-arrow:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.moments-arrow svg{width:16px; height:16px; stroke:var(--garnet); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}

.polaroid{
  background:#fff; padding:10px 10px 26px; box-shadow:0 10px 20px -8px rgba(0,0,0,.35);
  font-family:var(--font-type); font-style:italic; font-weight:500; font-size:.9rem; color:var(--ink-soft); text-align:center;
  margin:0;
}
.polaroid .photo-placeholder{aspect-ratio:1;}
.polaroid figcaption{margin-top:8px;}
.rot-1{transform:rotate(-5deg);}
.rot-2{transform:rotate(4deg);}
.rot-3{transform:rotate(-2deg);}
.rot-4{transform:rotate(6deg);}
.rot-neg{transform:rotate(-7deg);}

.tape::before{
  content:""; position:absolute; top:-10px; left:50%; transform:translateX(-50%) rotate(-3deg);
  width:56px; height:20px; background:rgba(255,255,255,.55); box-shadow:0 1px 2px rgba(0,0,0,.15);
}

/* ---------- letter ---------- */
.letter-card{
  position:relative; background:var(--paper); color:var(--ink); padding:26px 24px 24px; margin-top:6px;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.4);
  clip-path:polygon(0 0,100% 0,100% 97%,97% 100%,3% 100%,0 96%);
}
.letter-flower{position:absolute; top:14px; right:16px; width:34px; height:34px; opacity:.9;}
.letter-eyebrow{font-family:var(--font-ui); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin:0 0 .6em;}
.letter-body{font-family:var(--font-type); font-size:1rem; line-height:1.65; color:var(--ink); margin:0 0 1.2em;}

.pill-btn{
  display:inline-block; font-family:var(--font-ui); font-weight:600; font-size:.82rem;
  letter-spacing:.02em; color:var(--paper); background:var(--garnet-deep);
  border:1px solid var(--gold); border-radius:999px; padding:.7em 1.4em; cursor:pointer;
  transition:transform .2s ease, background .2s ease;
}
.pill-btn:hover{transform:translateY(-1px); background:var(--garnet);}
.pill-btn.ghost{background:transparent; color:var(--garnet); border-color:var(--garnet);}
.pill-btn.ghost:hover{background:var(--garnet); color:var(--paper);}
.pill-btn.primary{
  margin-top:24px; font-size:.88rem; padding:.85em 1.7em; color:var(--garnet-deep);
  background:linear-gradient(155deg, var(--gold-soft), var(--gold) 70%); border-color:var(--gold-soft);
  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%); color:var(--garnet-deep);}
.pill-btn:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}

/* ---------- gift menu ---------- */
.gift-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:20px;}
.gift-item{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14); cursor:pointer; color:var(--paper);
  padding:16px 6px; border-radius:16px; transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.gift-item:hover{background:rgba(255,255,255,.1); border-color:rgba(212,187,145,.5); transform:translateY(-3px);}
.gift-item:focus-visible{outline:2px solid var(--gold-soft); outline-offset:2px;}
.gift-icon{
  width:48px; height:48px; 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);
}
.gift-icon svg{width:22px; height:22px; stroke:var(--garnet-deep); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.gift-label{font-size:.72rem; letter-spacing:.03em; color:var(--gold-soft); text-align:center;}

/* ---------- one more thing (scrapbook) ---------- */
.scrap-field{display:flex; gap:18px; justify-content:center; margin:18px 0 8px;}
.scrap-field .polaroid{width:110px; position:relative;}

/* ---------- a song for you (vinyl) ---------- */
.vinyl-wrap{position:relative; width:min(220px,58vw); aspect-ratio:1; margin:28px auto 22px;}
.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(--garnet-bright) 0 14%, #111 15% 22%, #1c1c1c 23% 100%);
  position:relative; animation:spin 6s linear infinite; animation-play-state:paused;
  box-shadow:0 20px 40px -16px 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(--garnet-deep), 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:10px; height:52%; 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-meta{font-family:var(--font-script); font-size:1.5rem; color:var(--paper); margin:.1em 0 0; text-align:center;}
.song-artist{font-family:var(--font-ui); font-size:.78rem; letter-spacing:.06em; color:var(--gold-soft); opacity:.85; text-align:center; margin:.2em 0 20px;}

.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:var(--paper); fill:var(--paper);}
.song-play .icon-pause{display:none;}
.song-play.playing .icon-play{display:none;}
.song-play.playing .icon-pause{display:block;}

.song-info{margin-top:20px; text-align:center;}
.song-hint{font-family:var(--font-ui); font-size:.72rem; color:var(--gold-soft); opacity:.85; min-height:1.2em;}

/* ---------- footer / final message ---------- */
.footer-inner{text-align:center; padding:0 30px 60px;}
.signature{font-family:var(--font-ui); font-size:.85rem; color:var(--ink-soft); margin:.4em 0 1.4em;}
.signature.light{color:var(--gold-soft);}
.pill-btn.ghost.light{background:transparent; color:var(--paper); border-color:var(--gold-soft);}
.pill-btn.ghost.light:hover{background:var(--gold-soft); color:var(--garnet-deep);}

.doodle-footer-heart{width:50px; top:12%; left:14%; transform:rotate(-12deg);}
.doodle-footer-sparkle-1{width:26px; top:20%; right:16%; stroke:var(--gold-soft); fill:var(--gold-soft); opacity:.6;}
.doodle-footer-sparkle-2{width:18px; bottom:16%; left:20%; stroke:var(--rose); fill:var(--rose); opacity:.55;}

/* ---------- modal ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  background:rgba(20,8,10,.65); opacity:0; pointer-events:none; transition:opacity .25s ease;
  padding:24px;
}
.modal-overlay.visible{opacity:1; pointer-events:auto;}
.modal-card{
  width:min(360px,100%); max-height:min(80vh,640px); overflow-y:auto; overscroll-behavior:contain;
  background:var(--paper); border-radius:14px; padding:30px 26px 26px;
  position:relative; text-align:center; transform:translateY(12px) scale(.97); transition:transform .3s ease;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
}
.modal-overlay.visible .modal-card{transform:translateY(0) scale(1);}
.modal-close{
  position:sticky; top:-4px; float:right; margin:-4px -10px 0 0; background:var(--paper); border:none;
  border-radius:50%; width:30px; height:30px; font-size:1.4rem; line-height:1;
  color:var(--ink-soft); cursor:pointer; z-index:1;
}
.modal-icon{width:88px; height:88px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 35% 30%, var(--gold-soft), var(--gold) 70%);}
.modal-icon svg{width:52px; height:52px; stroke:var(--garnet-deep); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
#modalTitle{font-family:var(--font-script); font-size:1.8rem; color:var(--garnet); margin:.2em 0;}
#modalBody{font-family:var(--font-type); font-size:1rem; line-height:1.65; color:var(--ink); white-space:pre-line;}
.candle-btn{margin-top:14px;}
.wish-note{font-family:var(--font-accent); font-style:italic; color:var(--garnet); margin-top:10px;}

/* ---------- confetti ---------- */
.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;}
}

/* ---------- responsive ---------- */
@media (max-width:380px){
  .page{padding:44px 20px;}
  .gift-grid{gap:8px;}
}

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