@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:wght@500;600;700&display=swap');

:root{
  --bg:#100810;
  --bg2:#1b0c1a;
  --cream:#fff6ed;
  --soft:#e8cbd2;
  --rose:#e9879d;
  --gold:#f5d48a;
  --pink:#ffb5c4;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; color:var(--cream);
  background:radial-gradient(circle at 50% 10%,#35162f 0%,var(--bg2) 36%,var(--bg) 78%);
  font-family:"DM Sans",system-ui,sans-serif; overflow-x:hidden;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.12;
  background-image:radial-gradient(#fff 0.7px,transparent .7px);background-size:24px 24px;
}
.bg-glow{position:fixed;border-radius:50%;filter:blur(80px);opacity:.24;pointer-events:none}
.glow-a{width:260px;height:260px;background:#d44f83;top:-80px;left:-80px}
.glow-b{width:300px;height:300px;background:#9d5fba;right:-120px;bottom:5%}
.screen{min-height:100svh;display:none;position:relative}
.screen.active{display:block}
#cover{display:grid;place-items:center;padding:34px 18px}
.intro{text-align:center;width:min(700px,100%);animation:rise .9s ease both}
.eyebrow{font-size:.72rem;letter-spacing:.28em;color:var(--gold);font-weight:600;margin:0 0 15px}
h1,h2,h3,h4{font-family:"Playfair Display",Georgia,serif}
h1{font-size:clamp(2.25rem,7vw,4.7rem);line-height:1.03;margin:0}
h1 span,h2 span{color:var(--pink);font-style:italic}
.hint{color:#d8bdc8;margin:18px 0 15px}
.tiny{font-size:.72rem;color:#a88f9e;margin-top:18px}
.card-wrap{
  position:relative;width:min(310px,78vw);aspect-ratio:1.42/1;margin:10px auto 0;
  background:none;border:0;cursor:pointer;perspective:1200px;padding:0;display:block;
}
.card-shadow{position:absolute;inset:18% -4% -8%;background:#000;filter:blur(28px);opacity:.55;border-radius:50%}
.birthday-card{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.15s cubic-bezier(.2,.75,.15,1)}
.card-wrap:hover .birthday-card{transform:translateY(-7px) rotateX(3deg)}
.card-front,.card-back{
  position:absolute;inset:0;border-radius:13px 17px 17px 13px;backface-visibility:hidden;
  overflow:hidden;box-shadow:0 22px 50px #0008;
}
.card-front{
  background:
    radial-gradient(circle at 75% 22%,#ffffff28 0 2px,transparent 3px),
    linear-gradient(135deg,#7c234c,#b44e70 47%,#3a132f);
  border:1px solid #f5d48a70;display:flex;flex-direction:column;align-items:center;justify-content:center;
  transform:translateZ(2px);
}
.card-front:after{content:"";position:absolute;inset:9px;border:1px solid #f5d48a45;border-radius:9px}
.card-front p{font-size:1rem;letter-spacing:.5em;margin:0 0 4px;color:#ffe9c5}
.card-front strong{font-family:"Playfair Display";font-size:2.45rem;letter-spacing:.06em}
.card-front span{font-size:1.15rem;letter-spacing:.4em;margin-top:5px;color:#ffe9c5}
.card-front small{margin-top:18px;color:#f5d9df;font-style:italic}
.ribbon{position:absolute;top:13px;right:17px;color:#ffdca5;font-size:1.5rem}
.card-deco{position:absolute;top:23px;left:22px;color:#f5d48a;font-size:1.2rem}
.mini-flowers{color:#f5d48a;font-size:1.25rem;margin-top:14px}
.card-back{background:linear-gradient(135deg,#5a183a,#a43f64);transform:rotateY(180deg)}
.card-wrap.open .birthday-card{transform:rotateY(-178deg)}
.content{width:min(850px,100%);margin:auto;padding:70px 18px 80px;text-align:center}
.hero-photo{width:min(310px,76vw);aspect-ratio:4/5;margin:0 auto 30px;position:relative}
.hero-photo img{width:100%;height:100%;object-fit:cover;border-radius:150px 150px 24px 24px;border:2px solid #f5d48a70;box-shadow:0 20px 70px #0008;position:relative;z-index:2}
.photo-glow{position:absolute;inset:12% -7% -8%;background:#df668c;filter:blur(40px);opacity:.32}
h2{font-size:clamp(2.1rem,7vw,4rem);line-height:1.05;margin:0 0 18px}
.lead{max-width:650px;margin:auto;color:#dbc6ce;line-height:1.75;font-size:1rem}
.music-btn{
  margin:25px auto 0;border:1px solid #f5d48a55;background:#ffffff0b;color:var(--cream);
  border-radius:999px;padding:11px 16px;display:flex;align-items:center;gap:10px;cursor:pointer;
  backdrop-filter:blur(12px)
}
.music-btn b{font-size:.65rem;letter-spacing:.1em;color:var(--gold)}
.divider{color:var(--gold);margin:35px 0;font-size:1.4rem}
h3{font-size:2rem;margin:0 0 22px}
.wishes{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;text-align:left}
.wish{
  position:relative;padding:24px;border:1px solid #f5d48a25;border-radius:22px;
  background:linear-gradient(145deg,#ffffff0c,#ffffff03);backdrop-filter:blur(14px);
  box-shadow:0 12px 40px #0003;transition:transform .3s,border-color .3s
}
.wish:hover{transform:translateY(-4px);border-color:#f5d48a55}
.wish>span{color:var(--gold);font-size:.7rem;letter-spacing:.15em}
.wish h4{font-size:1.35rem;margin:12px 0 8px}
.wish p{color:#cfbbc4;line-height:1.7;margin:0;font-size:.94rem}
.memory-heading{margin:70px 0 25px}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gallery figure{margin:0}
.gallery figure:first-child{grid-row:span 2}
.gallery img{width:100%;height:100%;max-height:470px;object-fit:cover;border-radius:20px;display:block;border:1px solid #fff2;cursor:pointer;transition:transform .4s}
.gallery figure:not(:first-child) img{max-height:230px}
.gallery img:hover{transform:scale(1.015)}
figcaption{font-size:.78rem;color:#bba6b1;padding:8px 3px}
.final-card{
  margin-top:70px;padding:45px 25px;border:1px solid #f5d48a45;border-radius:30px;
  background:linear-gradient(145deg,#8e3155,#34132e);box-shadow:0 25px 80px #0006
}
.cake{font-size:3.2rem;margin-bottom:12px}
.final-card h2{font-size:clamp(2.1rem,7vw,3.5rem)}
.final-card p:not(.eyebrow){color:#ead7de;line-height:1.75;max-width:600px;margin:0 auto 20px}
.signature{font-family:"Playfair Display";font-style:italic;color:#ffdca5;margin:24px 0}
#replay{border:1px solid #f5d48a70;background:#fff1;color:#fff;padding:11px 17px;border-radius:999px;cursor:pointer}
.modal{position:fixed;inset:0;background:#070307ed;display:none;place-items:center;padding:24px;z-index:20;backdrop-filter:blur(10px)}
.modal.show{display:grid}
.modal img{max-width:min(900px,94vw);max-height:78vh;object-fit:contain;border-radius:18px;box-shadow:0 20px 80px #000}
.modal p{position:absolute;bottom:28px;color:#fff;text-align:center;max-width:90vw}
#closeModal{position:absolute;top:16px;right:20px;background:#fff1;color:white;border:1px solid #fff3;border-radius:50%;width:42px;height:42px;font-size:1.6rem;cursor:pointer}
.particle{position:fixed;width:5px;height:5px;border-radius:50%;background:#f5d48a;pointer-events:none;animation:float 4s linear forwards;opacity:0}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes float{0%{opacity:0;transform:translateY(20px) scale(.5)}15%{opacity:.8}100%{opacity:0;transform:translateY(-110px) scale(1.2)}}
@media(max-width:650px){
  .wishes{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .gallery figure:first-child{grid-row:auto}
  .gallery figure:not(:first-child) img{max-height:440px}
  .content{padding-top:45px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}