/* ============================================================
   كل سنة وانتي طيبة يا مهموهتي 🎂
   Birthday gift — playful handcrafted theme, Arabic / RTL
   ============================================================ */

:root{
  --paper:#fff4e2;
  --ink:#3a241f;
  --ink-soft:#8a6a5b;
  --coral:#ff4d6d;
  --coral-d:#e0324f;
  --sun:#ffc23c;
  --mint:#16c0a6;
  --sky:#3fa9f5;
  --pink:#ff9cb6;
  --plum:#7b3f6e;
  --card:#fffdf8;
  --shadow:rgba(58,36,31,.20);
  --font-display:'Lalezar', 'Segoe UI', Tahoma, sans-serif;
  --font-body:'Lemonada', 'Segoe UI', Tahoma, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  font-family:var(--font-body);
  color:var(--ink);
  line-height:1.85;
  overflow-x:hidden;
  background:
    radial-gradient(38vw 38vw at 10% 6%,  rgba(255,77,109,.16), transparent 62%),
    radial-gradient(36vw 36vw at 92% 18%, rgba(63,169,245,.14), transparent 62%),
    radial-gradient(44vw 44vw at 86% 74%, rgba(22,192,166,.13), transparent 62%),
    radial-gradient(40vw 40vw at 14% 96%, rgba(255,194,60,.20), transparent 62%),
    var(--paper);
  background-attachment:fixed;
}
body.intro-open{overflow:hidden;height:100vh}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ---- paper grain ---- */
.grain{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  opacity:.42;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.84' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- doodles ---- */
.doodle{position:absolute;z-index:0;pointer-events:none;opacity:.5;animation:float 7s ease-in-out infinite}
.d-star{fill:var(--sun)}
.d-heart{fill:var(--coral)}
.d-spark{fill:var(--sky)}
.d-1{width:54px;top:14%;inset-inline-start:8%;animation-delay:-1s}
.d-2{width:42px;top:24%;inset-inline-end:11%;animation-delay:-3s}
.d-3{width:40px;bottom:23%;inset-inline-start:14%;animation-delay:-5s}

/* ============================ layout ============================ */
.section{
  position:relative;
  padding:clamp(3.4rem,9vw,7rem) clamp(1.1rem,5vw,3rem);
  max-width:1120px;margin-inline:auto;
}

.sec-title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2.1rem,7.5vw,3.6rem);
  line-height:1.2;text-align:center;
  color:var(--ink);
  margin-bottom:.5rem;
}
.sec-title .squiggle{display:block;width:140px;height:14px;margin:.35rem auto 0}
.sec-title .squiggle path{fill:none;stroke:var(--coral);stroke-width:5;stroke-linecap:round}
.sec-sub{
  text-align:center;color:var(--ink-soft);
  font-size:clamp(.92rem,2.6vw,1.08rem);
  max-width:36ch;margin:0 auto clamp(2rem,5vw,3rem);
}

/* ============================ music button ============================ */
.music-btn{
  position:fixed;inset-block-end:16px;inset-inline-start:16px;z-index:60;
  width:54px;height:54px;border-radius:50%;
  background:var(--coral);color:#fff;
  font-size:1.35rem;line-height:1;
  box-shadow:0 6px 0 var(--shadow);
  display:grid;place-items:center;
  transition:transform .25s ease,background .25s ease;
}
.music-btn:hover{transform:scale(1.1) rotate(-8deg)}
.music-btn:active{transform:scale(.92)}
.music-btn .ic-note{animation:spin 3.4s linear infinite}
.music-btn .ic-play{display:none;font-size:1rem}
.music-btn.paused{background:var(--ink-soft)}
.music-btn.paused .ic-note{display:none}
.music-btn.paused .ic-play{display:block}

/* ============================ intro / gift ============================ */
.intro{
  position:fixed;inset:0;z-index:100;
  display:grid;place-items:center;text-align:center;
  background:
    radial-gradient(60vw 60vw at 50% 40%, rgba(255,194,60,.30), transparent 70%),
    var(--paper);
  transition:opacity .7s ease, visibility .7s;
}
.intro.gone{opacity:0;visibility:hidden}
.intro-inner{padding:2rem}
.intro-kicker{
  font-family:var(--font-display);
  font-size:clamp(1.4rem,5vw,2.1rem);color:var(--plum);margin-bottom:1.6rem;
}
.intro-cta{
  margin-top:1.7rem;color:var(--ink-soft);
  font-size:1rem;animation:bob 1.6s ease-in-out infinite;
}

.giftbox{
  position:relative;width:172px;height:160px;margin-inline:auto;
  animation:bob 2.2s ease-in-out infinite;
  transition:transform .2s ease;
}
.giftbox:hover{transform:scale(1.06)}
.giftbox:active{transform:scale(.95)}
.gift-base{
  position:absolute;bottom:0;inset-inline:11px;height:104px;
  background:linear-gradient(160deg,var(--coral),var(--coral-d));
  border-radius:12px;box-shadow:0 10px 0 var(--shadow);
}
.gift-ribbon{
  position:absolute;bottom:0;inset-inline-start:calc(50% - 15px);
  width:30px;height:104px;background:var(--sun);
}
.gift-lid{
  position:absolute;top:34px;inset-inline:0;height:42px;
  background:linear-gradient(160deg,#ff6b86,var(--coral));
  border-radius:11px;box-shadow:0 6px 0 rgba(58,36,31,.18);
  transition:transform .5s cubic-bezier(.5,-0.6,.4,1.4),opacity .5s;
  z-index:3;
}
.gift-knot{position:absolute;top:-9px;inset-inline-start:calc(50% - 11px);width:22px;height:22px;background:var(--sun);border-radius:50%}
.gift-bow{position:absolute;top:-20px;width:34px;height:30px;background:var(--sun);border-radius:60% 60% 60% 0}
.gift-bow-l{inset-inline-start:calc(50% - 33px);transform:rotate(-22deg)}
.gift-bow-r{inset-inline-start:calc(50% - 1px);transform:rotate(22deg) scaleX(-1)}
.gift-shine{position:absolute;top:40px;inset-inline-start:24px;width:16px;height:60px;background:rgba(255,255,255,.35);border-radius:50%;transform:rotate(18deg)}
.giftbox.opening .gift-lid{transform:translateY(-120px) rotate(-26deg);opacity:0}
.giftbox.opening{animation:gift-shake .5s ease}

/* ============================ hero ============================ */
.hero{
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:1.1rem;overflow:hidden;
}
.balloons{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-inner{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:1.05rem}

.chip{
  display:inline-block;font-family:var(--font-display);
  background:var(--sky);color:#fff;
  padding:.15em 1.05em;border-radius:999px;
  font-size:clamp(1rem,3.4vw,1.35rem);
  transform:rotate(-3deg);
  box-shadow:0 5px 0 var(--shadow);
}
.hero-title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.7rem,11vw,5.4rem);
  line-height:1.12;color:var(--ink);max-width:14ch;
}
.hero-title .hl{position:relative;color:var(--coral);white-space:nowrap}
.hero-title .hl::before{
  content:"";position:absolute;inset:8% -6% 6% -6%;z-index:-1;
  background:var(--sun);border-radius:42% 58% 56% 44%/58% 44% 56% 42%;
  transform:rotate(-2.5deg);
}
.hero-sub{
  color:var(--ink-soft);max-width:30ch;
  font-size:clamp(1rem,3vw,1.22rem);
}

/* hero photo polaroid */
.snap{
  background:#fff;padding:10px 10px 0;border-radius:6px;
  box-shadow:0 14px 26px var(--shadow);
}
.snap-hero{
  position:relative;width:min(290px,72vw);margin-top:.6rem;
  transform:rotate(-4deg);padding-bottom:48px;
}
.snap-hero img{border-radius:3px;aspect-ratio:4/3;object-fit:cover}
.snap-hero .tape{
  position:absolute;top:-14px;left:50%;
  width:88px;height:30px;transform:translateX(-50%) rotate(-6deg);
  background:rgba(63,169,245,.42);
  box-shadow:0 2px 5px rgba(0,0,0,.08);
}

.scroll-cue{
  position:relative;z-index:3;margin-top:1.4rem;
  text-decoration:none;color:var(--ink-soft);
  display:flex;flex-direction:column;align-items:center;gap:.2rem;
  font-size:.9rem;
}
.scroll-arrow{
  font-size:1.5rem;color:var(--coral);
  animation:bob 1.4s ease-in-out infinite;
}

/* staggered hero entrance (triggered when the gift opens) */
.hero-inner > *,.scroll-cue{opacity:0}
body.lit .chip{animation:fade-in .7s .15s both}
body.lit .hero-title{animation:fade-in .7s .32s both}
body.lit .hero-sub{animation:fade-in .7s .55s both}
body.lit .snap-hero{animation:fade-in .7s .78s both}
body.lit .scroll-cue{animation:fade-in .7s 1.05s both}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

/* ============================ cake ============================ */
.cake-section{text-align:center}
.cake{
  position:relative;width:264px;height:248px;margin:1rem auto 0;
  transition:transform .18s ease;
}
.cake:hover{transform:scale(1.03)}
.cake:active{transform:scale(.97)}
.cake-plate{position:absolute;bottom:0;inset-inline-start:2px;width:260px;height:34px;background:#efe0c8;border-radius:50%;box-shadow:0 9px 0 var(--shadow)}
.cake-tier{position:absolute;left:50%;transform:translateX(-50%);border-radius:16px 16px 10px 10px}
.cake-tier-2{bottom:20px;width:216px;height:96px;background:linear-gradient(180deg,#ff708a,var(--coral))}
.cake-tier-1{bottom:104px;width:150px;height:74px;background:linear-gradient(180deg,#ffd66b,var(--sun))}
.cake-tier::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background-image:radial-gradient(3.5px 3.5px at 30% 40%,#fff 99%,transparent),
                   radial-gradient(3.5px 3.5px at 65% 65%,#fff 99%,transparent),
                   radial-gradient(3.5px 3.5px at 80% 30%,#fff 99%,transparent),
                   radial-gradient(3.5px 3.5px at 15% 70%,#fff 99%,transparent);
  opacity:.85;
}
.cake-icing{
  position:absolute;bottom:158px;left:50%;transform:translateX(-50%);
  width:158px;height:30px;background:#fffaf0;border-radius:16px;
  box-shadow:0 8px 0 -2px #fffaf0, 0 5px 12px rgba(0,0,0,.08);
  z-index:2;
}
.cake-icing::before,.cake-icing::after{
  content:"";position:absolute;top:16px;width:24px;height:24px;
  background:#fffaf0;border-radius:0 0 60% 60%;
}
.cake-icing::before{inset-inline-start:24px}
.cake-icing::after{inset-inline-end:24px}
.candle{
  position:absolute;bottom:184px;width:13px;height:42px;z-index:3;
  background:repeating-linear-gradient(45deg,#fff 0 6px,var(--sky) 6px 12px);
  border-radius:3px;
}
.candle:nth-of-type(1){inset-inline-start:calc(50% - 44px)}
.candle:nth-of-type(2){inset-inline-start:calc(50% - 6px)}
.candle:nth-of-type(3){inset-inline-start:calc(50% + 32px)}
.flame{
  position:absolute;top:-22px;left:50%;
  width:16px;height:22px;
  transform:translateX(-50%);
  background:radial-gradient(circle at 50% 70%,#fff6b0,#ffae00 55%,#ff5a00);
  border-radius:50% 50% 50% 50%/62% 62% 38% 38%;
  box-shadow:0 0 16px 5px rgba(255,170,0,.6);
  transform-origin:50% 100%;
  animation:flicker .28s ease-in-out infinite alternate;
}
.smoke{
  position:absolute;top:-20px;left:50%;
  width:7px;height:7px;border-radius:50%;
  background:rgba(120,120,120,.5);opacity:0;
}
.cake.blown .flame{transform:translateX(-50%) scale(0);opacity:0;transition:.3s}
.cake.blown .smoke{animation:smoke-up 1s ease-out forwards}
.cake-hint{margin-top:1.6rem;color:var(--ink-soft);font-size:.95rem;animation:bob 1.6s ease-in-out infinite}
@media(max-width:380px){
  .cake{transform:scale(.82);transform-origin:top center;margin-block-end:-2.6rem}
}
.cake-done{
  margin:1.4rem auto 0;max-width:30ch;
  font-family:var(--font-display);font-size:1.4rem;color:var(--mint);
}

/* ============================ letter / envelope ============================ */
.letter-section{text-align:center}
.env-wrap{display:grid;justify-items:center;min-height:230px;position:relative}
.envelope{
  position:relative;width:min(380px,84vw);aspect-ratio:3/2;
  animation:bob 2.6s ease-in-out infinite;transition:transform .25s ease;
}
.envelope:hover{transform:scale(1.04)}
.envelope:active{transform:scale(.96)}
.env-body{
  position:absolute;inset:0;border-radius:14px;
  background:linear-gradient(160deg,#ffe1c2,#ffcf9f);
  box-shadow:0 14px 0 var(--shadow);
  overflow:hidden;
}
.env-body::before,.env-body::after{
  content:"";position:absolute;inset-inline:0;height:140%;
  background:linear-gradient(150deg,#ffd9b0,#ffc792);
}
.env-body::before{top:50%;transform-origin:top;transform:skewY(26deg)}
.env-body::after{bottom:50%;transform-origin:bottom;transform:skewY(-26deg)}
.env-flap{
  position:absolute;inset-inline:0;top:0;height:64%;z-index:3;
  background:linear-gradient(160deg,#ffd9b0,#ffbf86);
  clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:top;transition:transform .55s ease;
}
.env-seal{
  position:absolute;left:50%;top:46%;z-index:4;
  transform:translate(-50%,-50%);font-size:2rem;
  transition:transform .35s ease,opacity .35s;
}
.envelope.opening .env-flap{transform:rotateX(180deg)}
.envelope.opening .env-seal{transform:translate(-50%,-50%) scale(0);opacity:0}
.envelope.sent{animation:env-away .6s ease forwards}

.letter-card{
  position:relative;max-width:560px;margin-inline:auto;
  background:var(--card);
  background-image:repeating-linear-gradient(transparent 0 37px,rgba(63,169,245,.13) 37px 38px);
  border-radius:8px;padding:clamp(1.6rem,5vw,2.8rem);
  box-shadow:0 20px 40px var(--shadow);
  text-align:start;transform:rotate(-.6deg);
}
.letter-card::before{
  content:"";position:absolute;top:0;bottom:0;inset-inline-end:42px;
  width:2px;background:rgba(255,77,109,.25);
}
.letter-card.show{animation:pop-in .6s cubic-bezier(.2,.9,.3,1.4) both}
.letter-body p{
  font-size:clamp(1rem,3vw,1.16rem);
  margin-bottom:1rem;color:var(--ink);
}
.letter-body p:first-child{font-family:var(--font-display);font-size:1.35rem;color:var(--coral);line-height:1.4}
.letter-sign{
  margin-top:1.4rem;font-family:var(--font-display);
  font-size:1.5rem;color:var(--plum);text-align:start;
}
.env-hint{margin-top:1.3rem;color:var(--ink-soft);font-size:.95rem}

/* ============================ the song / player ============================ */
.song-section{text-align:center}
.player{
  display:flex;gap:1.5rem;align-items:center;
  max-width:580px;margin-inline:auto;
  background:linear-gradient(165deg,#ffffff,#fff0d4);
  border-radius:30px;padding:clamp(1.2rem,4vw,1.9rem);
  box-shadow:0 18px 40px var(--shadow), 0 0 0 4px var(--sun) inset;
  transform:rotate(-1.2deg);
}
.vinyl{
  position:relative;flex:none;
  width:clamp(120px,30vw,158px);aspect-ratio:1;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,#181818 0 3px,#2c2c2c 3px 6px);
  box-shadow:0 10px 22px rgba(0,0,0,.45);
  display:grid;place-items:center;
  animation:spin 5.5s linear infinite;animation-play-state:paused;
}
.player.playing .vinyl{animation-play-state:running}
.vinyl::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(125deg,rgba(255,255,255,.26) 0 28%,transparent 52%);
}
.vinyl-label{
  position:relative;z-index:1;
  width:43%;aspect-ratio:1;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 3px var(--coral),0 0 0 6px #111;
  display:grid;place-items:center;background:var(--coral);font-size:1.5rem;
}
.vinyl-label img{width:100%;height:100%;object-fit:cover}
.player-main{flex:1;min-width:0;text-align:start}
.song-name{font-family:var(--font-display);font-weight:400;font-size:clamp(1.4rem,5vw,1.95rem);color:var(--coral);line-height:1.25}
.song-by{color:var(--ink-soft);font-size:.85rem;margin-bottom:.4rem}
.viz{width:100%;height:42px;display:block;margin:.15rem 0}
.seek{
  position:relative;height:11px;border-radius:999px;
  background:rgba(58,36,31,.15);cursor:pointer;margin:.5rem 0 .35rem;
  touch-action:none;
}
.seek-fill{
  position:absolute;inset-block:0;inset-inline-start:0;width:0;
  background:linear-gradient(var(--coral),var(--coral-d));border-radius:999px;
}
.seek-fill::after{
  content:"";position:absolute;inset-inline-end:-8px;top:50%;
  width:18px;height:18px;border-radius:50%;background:#fff;
  transform:translateY(-50%);box-shadow:0 2px 7px rgba(0,0,0,.35);
}
.player-row{display:flex;align-items:center;gap:.9rem;margin-top:.35rem}
.play-btn{
  flex:none;width:54px;height:54px;border-radius:50%;
  background:var(--coral);color:#fff;font-size:1rem;
  display:grid;place-items:center;
  box-shadow:0 5px 0 var(--shadow);transition:transform .15s ease;
}
.play-btn:active{transform:scale(.9)}
.play-btn .ic-pause{display:none}
.player.playing .play-btn .ic-play{display:none}
.player.playing .play-btn .ic-pause{display:block}
.time{color:var(--ink-soft);font-size:.92rem;letter-spacing:.04em}
.time i{margin-inline:.45em;font-style:normal;opacity:.5}
.song-hint{margin-top:1.4rem;color:var(--ink-soft);font-size:.92rem;animation:bob 1.8s ease-in-out infinite}
@media(max-width:540px){
  .player{flex-direction:column;text-align:center}
  .player-main{text-align:center}
  .player-row{justify-content:center}
}

/* ============================ timeline ============================ */
.timeline{position:relative;max-width:880px;margin-inline:auto;padding-block:1rem}
.timeline::before{
  content:"";position:absolute;top:0;bottom:0;
  inset-inline-start:21px;width:4px;
  background:repeating-linear-gradient(var(--mint) 0 11px,transparent 11px 22px);
  border-radius:2px;
}
.tl-item{position:relative;padding-inline-start:62px;margin-bottom:2.1rem}
.tl-dot{
  position:absolute;inset-inline-start:0;top:2px;
  width:46px;height:46px;border-radius:50%;
  background:var(--card);display:grid;place-items:center;
  font-size:1.35rem;
  box-shadow:0 0 0 4px var(--mint), 0 6px 14px var(--shadow);
}
.tl-card{
  background:var(--card);border-radius:18px;
  padding:1.1rem 1.3rem;
  box-shadow:7px 7px 0 var(--shadow);
  transition:transform .22s ease;
}
.tl-card:hover{transform:translateY(-4px) rotate(-1deg)}
.tl-date{
  display:inline-block;font-family:var(--font-display);
  background:var(--sun);color:var(--ink);
  padding:.05em .8em;border-radius:999px;font-size:.95rem;margin-bottom:.4rem;
}
.tl-title{font-family:var(--font-display);font-weight:400;font-size:1.4rem;color:var(--coral);line-height:1.3}
.tl-text{font-size:.98rem;color:var(--ink-soft)}

@media(min-width:760px){
  .timeline::before{left:50%;transform:translateX(50%)}
  .tl-item{width:50%;padding:0;margin-bottom:2.6rem}
  .tl-item:nth-child(odd){margin-inline-start:auto;padding-inline-start:46px}
  .tl-item:nth-child(even){padding-inline-end:46px;text-align:start}
  .tl-dot{inset-inline-start:auto}
  .tl-item:nth-child(odd) .tl-dot{inset-inline-start:-23px}
  .tl-item:nth-child(even) .tl-dot{inset-inline-end:-23px}
}

/* ============================ reasons / flip cards ============================ */
.reasons-grid{
  display:grid;gap:1.1rem;
  grid-template-columns:repeat(2,1fr);
  max-width:760px;margin-inline:auto;
}
@media(min-width:720px){.reasons-grid{grid-template-columns:repeat(3,1fr)}}
.flip-card{
  perspective:1000px;background:none;
  display:flex;min-height:9rem;
}
.flip-inner{
  position:relative;flex:1;width:100%;min-height:9rem;
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.3,.8,.3,1.2);
}
.flip-card.flipped .flip-inner{transform:rotateY(180deg)}
.flip-face{
  position:absolute;inset:0;backface-visibility:hidden;
  border-radius:22px;display:grid;place-items:center;text-align:center;
  padding:1rem;box-shadow:6px 6px 0 var(--shadow);
}
.flip-front{background:var(--card)}
.flip-front .q{font-family:var(--font-display);font-size:2.6rem;color:var(--c,var(--coral))}
.flip-front .hint{font-size:.8rem;color:var(--ink-soft)}
.flip-back{
  background:var(--c,var(--coral));color:#fff;transform:rotateY(180deg);
}
.flip-back .emo{font-size:1.9rem;margin-bottom:.3rem}
.flip-back .txt{font-size:.95rem;line-height:1.6;font-weight:500}

/* ============================ gallery ============================ */
.gallery{
  column-count:2;column-gap:14px;
  max-width:980px;margin-inline:auto;
}
@media(min-width:680px){.gallery{column-count:3}}
@media(min-width:1000px){.gallery{column-count:4}}
.gallery{column-gap:16px}
.gallery .snap{
  break-inside:avoid;margin-bottom:18px;
  padding:9px 9px 34px;cursor:pointer;
  transform:rotate(var(--r,0deg));
  transition:transform .22s ease,box-shadow .22s ease;
}
.gallery .snap img{border-radius:3px;background:#eee}
.gallery .snap figcaption{
  font-size:.78rem;color:var(--ink-soft);text-align:center;
  padding-top:7px;
}
.gallery .snap:hover{transform:rotate(0) scale(1.04);box-shadow:0 20px 32px var(--shadow);z-index:5;position:relative}

/* ============================ closing ============================ */
.closing-section{text-align:center}
.closing-card{
  max-width:620px;margin-inline:auto;
  background:linear-gradient(165deg,#fff,#ffe9ee);
  border-radius:30px;padding:clamp(2rem,7vw,3.6rem);
  box-shadow:0 22px 48px var(--shadow), 0 0 0 4px var(--coral) inset;
}
.closing-title{font-family:var(--font-display);font-weight:400;font-size:clamp(1.6rem,5vw,2.3rem);color:var(--plum)}
.closing-big{
  font-family:var(--font-display);
  font-size:clamp(4rem,20vw,8rem);line-height:1;color:var(--coral);
  margin:.2rem 0;
}
.closing-text{color:var(--ink);font-size:clamp(1rem,3vw,1.14rem);margin-bottom:.4rem}
.closing-sign{font-family:var(--font-display);font-size:1.5rem;color:var(--sky)}
.surprise-btn{
  margin-top:1.6rem;
  font-family:var(--font-display);font-size:1.25rem;
  background:var(--sun);color:var(--ink);
  padding:.4em 1.5em;border-radius:999px;
  box-shadow:0 7px 0 var(--shadow);
  transition:transform .15s ease;
}
.surprise-btn:hover{transform:translateY(-3px) rotate(-2deg)}
.surprise-btn:active{transform:translateY(2px)}
.final-msg{
  margin-top:1.3rem;font-family:var(--font-display);
  font-size:clamp(1.2rem,4vw,1.7rem);color:var(--mint);
}
.final-msg.show{animation:pop-in .6s cubic-bezier(.2,.9,.3,1.4) both}
.hearts-hint{margin-top:1.6rem;color:var(--ink-soft);font-size:.9rem}

.footer{
  text-align:center;padding:2.4rem 1rem 3.4rem;
  color:var(--ink-soft);font-size:.9rem;
}

/* ============================ lightbox ============================ */
.lightbox{
  position:fixed;inset:0;z-index:120;
  display:grid;place-items:center;
  background:rgba(36,20,16,.93);
  padding:clamp(1rem,5vw,3rem);
}
.lightbox[hidden]{display:none}
.lb-stage{display:flex;flex-direction:column;align-items:center;gap:.7rem;max-width:100%}
.lb-stage img{
  max-width:90vw;max-height:78svh;border-radius:8px;
  box-shadow:0 16px 50px rgba(0,0,0,.6);
  background:#222;
}
.lb-stage figcaption{color:#fff6;font-size:.9rem;text-align:center;display:flex;gap:.8rem}
.lb-count{color:#ffffff55}
.lb-btn{
  position:absolute;width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:1.6rem;
  display:grid;place-items:center;backdrop-filter:blur(4px);
  transition:background .2s ease,transform .2s ease;
}
.lb-btn:hover{background:var(--coral);transform:scale(1.1)}
.lb-close{top:18px;inset-inline-end:18px}
.lb-prev{inset-inline-end:14px;top:50%;transform:translateY(-50%)}
.lb-next{inset-inline-start:14px;top:50%;transform:translateY(-50%)}
.lb-prev:hover,.lb-next:hover{transform:translateY(-50%) scale(1.1)}

/* ============================ confetti / sparkle / hearts ============================ */
.confetti-canvas{position:fixed;inset:0;z-index:200;pointer-events:none}
.spark{
  position:fixed;z-index:150;pointer-events:none;
  font-size:14px;will-change:transform,opacity;
  animation:spark-out .8s ease-out forwards;
}
.float-heart{
  position:fixed;z-index:150;pointer-events:none;
  font-size:26px;will-change:transform,opacity;
  animation:heart-up 1.7s ease-out forwards;
}
.balloon{
  position:absolute;bottom:-150px;width:46px;height:58px;
  border-radius:50% 50% 48% 48%/46% 46% 54% 54%;
  cursor:pointer;will-change:transform;pointer-events:auto;
  box-shadow:inset -7px -7px 14px rgba(0,0,0,.16);
}
.balloon::before{
  content:"";position:absolute;bottom:-7px;left:50%;
  transform:translateX(-50%);
  border:5px solid transparent;border-top-color:inherit;
}
.balloon::after{
  content:"";position:absolute;bottom:-46px;left:50%;
  width:1.5px;height:42px;background:rgba(58,36,31,.3);
  transform:translateX(-50%);
}
.balloon.pop{animation:balloon-pop .3s ease-out forwards}

/* ============================ reveal ============================ */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1)}
.reveal.from-start{transform:translateX(-44px)}
.reveal.from-end{transform:translateX(44px)}
.reveal.zoom{transform:scale(.8)}
.reveal.in{opacity:1;transform:none}

/* ============================ keyframes ============================ */
@keyframes float{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-16px) rotate(8deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes flicker{
  0%{transform:translateX(-50%) scale(1) rotate(-3deg)}
  100%{transform:translateX(-50%) scale(1.14) rotate(3deg)}
}
@keyframes smoke-up{0%{opacity:.7;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-46px) scale(2.4)}}
@keyframes rise{
  0%{transform:translateY(0) translateX(0)}
  100%{transform:translateY(-118svh) translateX(var(--drift,20px))}
}
@keyframes balloon-pop{0%{transform:scale(1)}50%{transform:scale(1.35)}100%{transform:scale(0);opacity:0}}
@keyframes pop-in{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:scale(1)}}
@keyframes gift-shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
@keyframes env-away{to{transform:translateY(60px) scale(.4);opacity:0}}
@keyframes spark-out{0%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}100%{opacity:0;transform:translate(-50%,-110%) scale(0) rotate(140deg)}}
@keyframes heart-up{
  0%{opacity:1;transform:translate(-50%,0) scale(.5)}
  20%{opacity:1;transform:translate(-50%,-20px) scale(1.1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--hx,0px)),-220px) scale(.8)}
}

/* ============================ reduced motion ============================ */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.12s!important;scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}