/* ===========================================================
   HAPPY BIRTHDAY JYOTI  -  stylesheet
   -----------------------------------------------------------
   Colour + font knobs live in :root below. Change those and
   the whole site changes with them.
   =========================================================== */

:root{
  /* --- pastel palette --- */
  --blush:        #ffe3ec;
  --blush-deep:   #ff9ebb;
  --pink:         #ff7da6;
  --lav:          #ece3fd;
  --lav-deep:     #b89cf0;
  --peach:        #ffe2d0;
  --peach-deep:   #ffab7e;
  --cream:        #fffaf7;
  --gold:         #cfa049;
  --gold-soft:    #f3dda4;
  --ink:          #5c4350;
  --ink-soft:     #8d7384;

  /* --- fonts (local fallbacks keep it pretty offline) --- */
  --f-head: "Dancing Script", "Segoe Script", "Brush Script MT", cursive;
  --f-hand: "Caveat", "Segoe Script", "Comic Sans MS", cursive;
  --f-body: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;

  --shadow:   0 16px 38px rgba(176,116,146,.18);
  --shadow-sm:0 6px 16px rgba(176,116,146,.16);
  --radius: 22px;
}

*,*::before,*::after{ box-sizing:border-box; }

/* no heading or quote is ever allowed to overflow a narrow phone */
h1,h2,h3,p,span{ overflow-wrap:break-word; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100vh;
  font-family:var(--f-body);
  font-weight:300;
  color:var(--ink);
  background:
    radial-gradient(1100px 620px at 12% -8%,  var(--blush) 0%, transparent 62%),
    radial-gradient(900px  560px at 92% 6%,   var(--lav)   0%, transparent 60%),
    radial-gradient(820px  520px at 50% 108%, var(--peach) 0%, transparent 62%),
    linear-gradient(170deg, #fffdfc 0%, #fff6f9 45%, #f9f3ff 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}

/* page is frozen until she opens the envelope */
body.locked{ overflow:hidden; height:100vh; }

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

/* ---------- floating hearts + sparkles (background) ---------- */
.bg-float{
  position:fixed; inset:0;
  pointer-events:none; z-index:0; overflow:hidden;
}
.bg-float span{
  position:absolute; bottom:-8vh;
  opacity:0; will-change:transform,opacity;
  animation-name:drift; animation-timing-function:linear;
  animation-iteration-count:infinite;
}
@keyframes drift{
  0%   { opacity:0;   transform:translate3d(0,0,0) rotate(0deg) scale(.8); }
  12%  { opacity:.85; }
  85%  { opacity:.5; }
  100% { opacity:0;   transform:translate3d(var(--dx,20px),-118vh,0) rotate(var(--rot,40deg)) scale(1.1); }
}

/* ---------- confetti / fireworks canvas ---------- */
#fx{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:110; }

/* ===========================================================
   1. WELCOME SCREEN + ENVELOPE
   =========================================================== */
.welcome{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(700px 480px at 50% 30%, #fff 0%, transparent 70%),
    linear-gradient(165deg, var(--blush) 0%, var(--lav) 55%, var(--peach) 100%);
  transition:opacity .9s ease, visibility .9s ease, transform .9s ease;
}
.welcome.is-gone{ opacity:0; visibility:hidden; transform:scale(1.12); }

.welcome__inner{ text-align:center; width:100%; max-width:560px; }

.welcome__hint{
  font-size:.95rem; letter-spacing:.04em; color:var(--ink-soft);
  margin:0 0 26px; animation:pulse 2.1s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:.55; transform:translateY(0);} 50%{opacity:1; transform:translateY(-4px);} }

.welcome__text{
  font-family:var(--f-head); font-weight:700;
  font-size:clamp(1.7rem, 7vw, 2.9rem); line-height:1.25;
  margin:30px 0 8px; color:var(--pink);
  text-shadow:0 2px 0 #fff, 0 10px 24px rgba(255,125,166,.28);
}
.welcome__sub{
  margin:0; font-size:.95rem; color:var(--ink-soft); font-style:italic;
}

/* the envelope itself */
.envelope{
  position:relative; display:block; margin:0 auto;
  width:clamp(196px, 60vw, 272px); aspect-ratio:3/2;
  padding:0; border:0; background:none; cursor:pointer;
  perspective:1000px; animation:bob 3.4s ease-in-out infinite;
  -webkit-tap-highlight-color:transparent;
}
@keyframes bob{ 0%,100%{transform:translateY(0) rotate(-1deg);} 50%{transform:translateY(-12px) rotate(1deg);} }
.envelope:focus-visible{ outline:3px dashed var(--gold); outline-offset:14px; border-radius:18px; }

.envelope__shadow{
  position:absolute; left:12%; right:12%; bottom:-11%; height:16px; border-radius:50%;
  background:rgba(188,120,150,.26); filter:blur(7px);
}
.envelope__back{
  position:absolute; inset:0; border-radius:14px; z-index:1;
  background:linear-gradient(160deg,#ffd4e3,#ffbcd3);
  box-shadow:inset 0 -2px 6px rgba(205,120,155,.25);
}
/* the little love note that slides out */
.envelope__note{
  position:absolute; left:9%; right:9%; top:15%; height:78%; z-index:2;
  display:grid; place-items:center; font-size:clamp(1.9rem,8vw,2.6rem);
  background:var(--cream); border-radius:10px;
  box-shadow:0 6px 16px rgba(170,110,140,.22);
  transform:translateY(5%); transition:transform .85s cubic-bezier(.2,.9,.2,1) .25s, opacity .5s ease .9s;
}
.envelope__front{
  position:absolute; inset:0; border-radius:14px; z-index:3;
  background:linear-gradient(175deg,#ffc6da,#ff9fc0);
  clip-path:polygon(0 0, 50% 48%, 100% 0, 100% 100%, 0 100%);
}
.envelope__flap{
  position:absolute; left:0; right:0; top:0; height:52%; z-index:4;
  background:linear-gradient(175deg,#ffb8d0,#ff8fb4);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  border-radius:14px 14px 0 0; transform-origin:top center;
  transform:rotateX(0deg);
  transition:transform .8s cubic-bezier(.55,-0.25,.4,1.25), z-index 0s .4s;
}
/* little gold wax seal on the flap */
.envelope__seal{
  position:absolute; left:50%; top:48%; z-index:5;
  width:46px; height:46px; margin:-23px 0 0 -23px;
  border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 34% 28%, #f8e9b8, var(--gold) 72%);
  box-shadow:0 5px 12px rgba(150,110,50,.38), inset 0 1px 0 rgba(255,255,255,.65);
  color:#fff9ec; font-size:1.15rem; line-height:1;
  transition:opacity .4s ease, transform .55s ease;
}

/* opened state */
.envelope.is-open{ animation:none; }
.envelope.is-open .envelope__seal{ opacity:0; transform:scale(.35) rotate(-45deg); }
.envelope.is-open .envelope__flap{ transform:rotateX(-172deg); z-index:0; }
.envelope.is-open .envelope__note{ transform:translateY(-66%) scale(1.08) rotate(-3deg); opacity:0; }

/* ===========================================================
   MUSIC TOGGLE
   =========================================================== */
.music-btn{
  position:fixed; top:16px; right:16px; z-index:80;
  width:52px; height:52px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.75);
  background:rgba(255,255,255,.62); backdrop-filter:blur(8px);
  box-shadow:var(--shadow-sm);
  display:grid; place-items:center;
  opacity:0; transform:scale(.6); pointer-events:none;
  transition:opacity .5s ease, transform .5s ease, background .3s ease;
}
.music-btn.is-ready{ opacity:1; transform:none; pointer-events:auto; }
.music-btn:hover{ background:#fff; }
.music-btn__icon{ font-size:1.25rem; line-height:1; }
.music-btn.is-off .music-btn__icon{ opacity:.45; }
/* dancing bars while music plays */
.music-btn__bars{ position:absolute; bottom:6px; display:flex; gap:2px; align-items:flex-end; height:9px; opacity:0; transition:opacity .3s; }
.music-btn.is-on .music-btn__bars{ opacity:1; }
.music-btn__bars i{ width:2px; background:var(--pink); border-radius:2px; animation:eq .9s ease-in-out infinite; }
.music-btn__bars i:nth-child(1){ height:5px; animation-delay:0s; }
.music-btn__bars i:nth-child(2){ height:9px; animation-delay:.18s; }
.music-btn__bars i:nth-child(3){ height:6px; animation-delay:.36s; }
@keyframes eq{ 0%,100%{transform:scaleY(.4);} 50%{transform:scaleY(1);} }

/* ===========================================================
   SHARED LAYOUT, TITLES, BUTTONS, SCROLL REVEAL
   =========================================================== */
.site{
  position:relative; z-index:1;
  opacity:0; transform:translateY(18px); pointer-events:none;
  transition:opacity 1s ease .25s, transform 1s ease .25s;
}
.site.is-open{ opacity:1; transform:none; pointer-events:auto; }

.section{
  padding:clamp(56px,11vw,104px) clamp(16px,5vw,32px);
  max-width:1120px; margin:0 auto; text-align:center;
}
.section__title{
  font-family:var(--f-head); font-weight:700;
  font-size:clamp(2rem,8.4vw,3.3rem); line-height:1.15;
  margin:0 0 10px; color:var(--pink);
  text-shadow:0 2px 0 #fff, 0 9px 22px rgba(255,125,166,.22);
}
.section__lead{
  margin:0 auto clamp(30px,6vw,48px); max-width:34ch;
  font-size:clamp(.94rem,3.5vw,1.05rem); color:var(--ink-soft); font-style:italic;
}

/* fade-in-on-scroll (JS adds .in) */
.reveal{ opacity:0; transform:translateY(38px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* buttons */
.btn{
  position:relative; display:inline-block; cursor:pointer;
  font-family:var(--f-body); font-weight:500; font-size:clamp(.92rem,3.5vw,1.02rem);
  padding:14px 26px; border-radius:999px; border:0;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{ transform:scale(.96); }
.btn--gold{
  color:#5b4524; background:linear-gradient(135deg,var(--gold-soft),#ffeec4 55%,var(--gold-soft));
  box-shadow:0 10px 24px rgba(207,160,73,.34), inset 0 1px 0 #fff;
}
.btn--gold:hover{ transform:translateY(-3px); box-shadow:0 16px 30px rgba(207,160,73,.42), inset 0 1px 0 #fff; }
.btn--ghost{
  color:var(--ink-soft); background:rgba(255,255,255,.7);
  border:1px dashed rgba(184,156,240,.75); box-shadow:var(--shadow-sm);
}
.btn--ghost:hover{ color:var(--pink); border-color:var(--pink); transform:translateY(-2px); }
.btn--big{
  color:#fff; font-size:clamp(1rem,4vw,1.18rem); padding:18px 34px; font-weight:500;
  background:linear-gradient(135deg,var(--pink),var(--lav-deep));
  box-shadow:0 14px 34px rgba(255,125,166,.4);
  animation:breathe 2.6s ease-in-out infinite;
}
.btn--big:hover{ transform:translateY(-3px) scale(1.02); }
@keyframes breathe{ 0%,100%{box-shadow:0 14px 34px rgba(255,125,166,.34);} 50%{box-shadow:0 18px 44px rgba(184,156,240,.5);} }

/* ===========================================================
   2. HERO
   =========================================================== */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:92px 20px 64px; overflow:hidden;
}
.hero__glow{
  position:absolute; width:min(130vw,780px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,214,228,.85) 0%, rgba(236,227,253,.45) 45%, transparent 70%);
  filter:blur(8px); animation:glow 9s ease-in-out infinite; z-index:-1;
}
@keyframes glow{ 0%,100%{transform:scale(1) translateY(0); opacity:.9;} 50%{transform:scale(1.12) translateY(-16px); opacity:.65;} }

.hero__eyebrow{
  margin:0 0 14px; font-size:clamp(.74rem,3vw,.86rem);
  letter-spacing:.2em; text-transform:uppercase; color:var(--lav-deep);
  animation:fade-up 1s ease .2s backwards;
}
.hero__title{
  font-family:var(--f-head); font-weight:700;
  font-size:clamp(2.5rem,12.5vw,5.6rem); line-height:1.08;
  margin:0 0 18px; color:var(--pink);
  text-shadow:0 3px 0 #fff, 0 14px 32px rgba(255,125,166,.3);
}
/* script.js wraps each word in .word, and each letter in its own span */
.hero__title .word{ display:inline-block; white-space:nowrap; }
.hero__title .word > span{ display:inline-block; animation:letter-pop .7s cubic-bezier(.2,1.5,.4,1) backwards; }
@keyframes letter-pop{
  0%  { opacity:0; transform:translateY(34px) rotate(-10deg) scale(.6); }
  100%{ opacity:1; transform:none; }
}
@keyframes fade-up{ 0%{opacity:0; transform:translateY(16px);} 100%{opacity:1; transform:none;} }

.hero__typed{
  margin:0 0 20px; font-size:clamp(1.15rem,5.2vw,1.75rem); font-weight:400;
  display:flex; flex-wrap:wrap; gap:.4em; justify-content:center; align-items:baseline;
  animation:fade-up 1s ease .9s backwards;
}
.hero__typed-pre{ color:var(--ink-soft); }
.typed{ font-family:var(--f-head); font-weight:700; color:var(--lav-deep); min-height:1em; }
.caret{ width:2px; height:1.1em; background:var(--pink); border-radius:2px; animation:blink 1s steps(1) infinite; }
@keyframes blink{ 0%,49%{opacity:1;} 50%,100%{opacity:0;} }

.hero__note{
  margin:0; max-width:30ch; font-size:clamp(.88rem,3.4vw,1rem); color:var(--ink-soft);
  font-style:italic; animation:fade-up 1s ease 1.3s backwards;
}
.scroll-hint{
  margin-top:clamp(40px,9vw,70px); text-decoration:none; color:var(--ink-soft);
  font-size:.86rem; letter-spacing:.06em; animation:fade-up 1s ease 1.7s backwards;
}
.scroll-hint span{ display:inline-block; animation:bounce 1.8s ease-in-out infinite; }
@keyframes bounce{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(7px);} }

/* ===========================================================
   3. POLAROID GALLERY
   =========================================================== */
.polaroids{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(20px,5vw,38px); padding:10px 0;
}
.pola{
  position:relative; width:clamp(218px,74vw,250px);
  display:flex; flex-direction:column;
  padding:13px 13px 8px; border:0; cursor:pointer;
  background:#fff; border-radius:5px;
  box-shadow:0 14px 30px rgba(170,110,140,.22);
  transition:transform .4s cubic-bezier(.2,.9,.2,1), box-shadow .4s ease;
  opacity:0; transform:translateY(34px);
}
.pola.in{ opacity:1; transform:rotate(var(--tilt,0deg)); }
.pola:hover, .pola:focus-visible{
  transform:rotate(0deg) translateY(-10px) scale(1.03);
  box-shadow:0 26px 46px rgba(170,110,140,.3); outline:none; z-index:2;
}
.pola__frame{
  position:relative; display:block; width:100%;
  aspect-ratio:1/1; overflow:hidden; border-radius:3px;
  background:linear-gradient(135deg,var(--blush),var(--lav));
}
.pola__frame img{ width:100%; height:100%; object-fit:cover; }
/* shown only when the photo file is not there yet */
.pola__ph{
  position:absolute; inset:0; display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
  font-size:.78rem; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.2); padding:12px; text-align:center;
}
.pola__ph b{ font-size:1.8rem; font-weight:400; }
.pola.is-missing .pola__ph{ display:flex; }
.pola__caption{
  width:100%; font-family:var(--f-hand); font-size:clamp(1.02rem,4vw,1.2rem);
  color:var(--ink); margin:10px 4px 6px; line-height:1.25; min-height:2.4em;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- fullscreen lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center; gap:4px; padding:16px;
  background:rgba(74,50,64,.93); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .35s ease;
}
.lightbox.is-open{ opacity:1; }
.lb__figure{ margin:0; flex:1 1 auto; min-width:0; max-width:900px; text-align:center; }
.lb__figure img{
  max-width:100%; max-height:74vh; margin:0 auto; border-radius:10px;
  background:#fff; box-shadow:0 20px 50px rgba(0,0,0,.4);
  animation:zoom-in .35s cubic-bezier(.2,.9,.2,1);
}
@keyframes zoom-in{ 0%{opacity:0; transform:scale(.9);} 100%{opacity:1; transform:none;} }
.lb__figure figcaption{
  margin-top:14px; color:#fff; font-family:var(--f-hand);
  font-size:clamp(1.05rem,4.4vw,1.35rem); display:flex; flex-direction:column; gap:4px;
}
.lb__count{ font-family:var(--f-body); font-size:.76rem; opacity:.65; letter-spacing:.1em; }
.lb__arrow, .lb__close{
  border:0; background:rgba(255,255,255,.16); color:#fff; cursor:pointer;
  border-radius:50%; display:grid; place-items:center; backdrop-filter:blur(4px);
  transition:background .25s ease, transform .25s ease;
}
.lb__arrow{ width:48px; height:48px; font-size:2rem; line-height:1; flex:0 0 auto; padding-bottom:4px; }
.lb__close{ position:absolute; top:14px; right:14px; width:42px; height:42px; font-size:1.05rem; }
.lb__arrow:hover, .lb__close:hover{ background:rgba(255,255,255,.32); transform:scale(1.08); }

/* ===========================================================
   4. FLIP CARDS
   =========================================================== */
.cards{
  display:grid; gap:clamp(14px,3.4vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  max-width:1000px; margin:0 auto;
}
.card{
  perspective:1200px; background:none; border:0; padding:0; cursor:pointer;
  height:clamp(168px,44vw,196px); -webkit-tap-highlight-color:transparent;
  opacity:0; transform:translateY(30px); transition:opacity .7s ease, transform .7s ease;
}
.card.in{ opacity:1; transform:none; }
.card__inner{
  position:relative; display:block; width:100%; height:100%; transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.3,.8,.25,1);
}
.card.flipped .card__inner{ transform:rotateY(180deg); }
.card__face{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:20px; padding:16px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; box-shadow:var(--shadow-sm);
}
.card__face--front{
  background:linear-gradient(150deg,#fff 0%,var(--blush) 100%);
  border:1px solid rgba(255,158,187,.4);
}
.card__face--front .card__no{
  font-family:var(--f-head); font-weight:700; font-size:clamp(1.5rem,6vw,1.95rem); color:var(--pink);
}
.card__face--front .card__tap{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); opacity:.75; }
.card__heart{ font-size:1.2rem; animation:bob 3s ease-in-out infinite; }
.card__face--back{
  transform:rotateY(180deg);
  background:linear-gradient(150deg,var(--lav) 0%,#fff 100%);
  border:1px solid rgba(184,156,240,.45);
}
.card__text{
  font-family:var(--f-hand); font-size:clamp(1.02rem,4.1vw,1.2rem);
  line-height:1.35; color:var(--ink); margin:0;
}

/* ===========================================================
   5. QUOTES CAROUSEL
   =========================================================== */
.carousel{ position:relative; max-width:720px; margin:0 auto; padding:0 clamp(0px,4vw,52px); }
.carousel__viewport{ overflow:hidden; border-radius:var(--radius); }
.carousel__track{ display:flex; transition:transform .65s cubic-bezier(.3,.9,.2,1); }
.carousel__slide{ flex:0 0 100%; padding:4px; }
.quote-card{
  position:relative; height:100%; padding:clamp(30px,7vw,46px) clamp(22px,6vw,42px);
  border-radius:var(--radius); background:rgba(255,255,255,.78);
  backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center;
  min-height:clamp(200px,52vw,236px);
}
.quote-card::before{
  content:"\201C"; position:absolute; top:-6px; left:14px;
  font-family:var(--f-head); font-size:5.5rem; color:var(--gold-soft); line-height:1; pointer-events:none;
}
.quote-card p{
  margin:0; font-family:var(--f-hand); line-height:1.45;
  font-size:clamp(1.22rem,5.4vw,1.72rem); color:var(--ink);
}
/* phones first: arrows sit in a row under the card, beside the dots,
   so they can never cover the quote text */
.carousel__bar{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(10px,3vw,18px); margin-top:20px;
}
.carousel__arrow{
  width:42px; height:42px; border-radius:50%; border:0; cursor:pointer; flex:0 0 auto;
  font-size:1.7rem; line-height:1; padding:0 0 4px;
  background:#fff; color:var(--pink); box-shadow:var(--shadow-sm);
  transition:transform .25s ease, color .25s ease;
}
.carousel__arrow:hover{ transform:scale(1.12); color:var(--lav-deep); }
.carousel__dots{ display:flex; justify-content:center; gap:9px; flex-wrap:wrap; }

/* roomier screens: float the arrows out to the sides of the card */
@media (min-width:601px){
  .carousel__bar{ margin-top:22px; }
  .carousel__arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; }
  .carousel__arrow:hover{ transform:translateY(-50%) scale(1.12); }
  .carousel__arrow--prev{ left:-4px; }
  .carousel__arrow--next{ right:-4px; }
}
.carousel__dots button{
  width:9px; height:9px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(184,156,240,.38); transition:all .3s ease;
}
.carousel__dots button.is-active{ width:26px; border-radius:6px; background:var(--pink); }

/* ===========================================================
   6. BIRTHDAY CAKE
   =========================================================== */
.cake-wrap{ display:grid; place-items:center; margin-bottom:clamp(26px,6vw,40px); }
.cake{ position:relative; width:clamp(210px,66vw,288px); padding-top:74px; }

.cake__candles{
  position:absolute; top:0; left:0; right:0; height:74px;
  display:flex; align-items:flex-end; justify-content:center; gap:clamp(9px,3.6vw,18px);
}
.candle{
  position:relative; width:11px; height:50px; border-radius:5px;
  background:repeating-linear-gradient(135deg,#ff9ec0 0 6px,#fffdfd 6px 12px);
  box-shadow:0 2px 4px rgba(170,110,140,.3);
}
.candle__wick{ position:absolute; top:-5px; left:50%; width:2px; height:6px; background:#6b5560; transform:translateX(-50%); }
.candle__flame{
  position:absolute; top:-26px; left:50%; width:14px; height:22px;
  transform:translateX(-50%); transform-origin:bottom center;
  border-radius:50% 50% 46% 46% / 62% 62% 38% 38%;
  background:radial-gradient(ellipse at 50% 76%, #fffbe2 0%, #ffd874 38%, #ff9f43 72%, rgba(255,120,40,.1) 100%);
  box-shadow:0 0 22px 8px rgba(255,186,90,.5);
  animation:flicker .42s ease-in-out infinite alternate;
  transition:opacity .4s ease, transform .4s ease;
}
@keyframes flicker{
  0%  { transform:translateX(-50%) scale(1) rotate(-3deg); }
  100%{ transform:translateX(-50%) scale(1.14,.92) rotate(3deg); }
}
.candle__smoke{
  position:absolute; top:-26px; left:50%; font-size:.85rem; opacity:0;
  transform:translateX(-50%);
}
.candle.is-out .candle__flame{ opacity:0; transform:translateX(-50%) scale(.2); animation:none; }
.candle.is-out .candle__smoke{ animation:smoke 1.5s ease-out forwards; }
@keyframes smoke{
  0%  { opacity:.75; transform:translate(-50%,0) scale(.6); }
  100%{ opacity:0;   transform:translate(-50%,-52px) scale(1.5) rotate(18deg); }
}

/* cake body */
.cake__top{
  position:relative; width:84%; height:26px; margin:0 auto;
  background:linear-gradient(#fffaf6,#ffeef4);
  border-radius:14px 14px 4px 4px; z-index:2;
  box-shadow:0 3px 7px rgba(170,110,140,.14);
}
.cake__top::after{ /* frosting drips */
  content:""; position:absolute; left:0; right:0; bottom:-13px; height:16px;
  background:
    radial-gradient(circle at 10px 0, #ffeef4 11px, transparent 12px),
    radial-gradient(circle at 36px 0, #ffeef4 13px, transparent 14px),
    radial-gradient(circle at 64px 0, #ffeef4 10px, transparent 11px),
    radial-gradient(circle at 92px 0, #ffeef4 14px, transparent 15px),
    radial-gradient(circle at 122px 0, #ffeef4 11px, transparent 12px),
    radial-gradient(circle at 150px 0, #ffeef4 13px, transparent 14px),
    radial-gradient(circle at 180px 0, #ffeef4 10px, transparent 11px),
    radial-gradient(circle at 210px 0, #ffeef4 13px, transparent 14px);
}
.cake__layer{ margin:0 auto; position:relative; z-index:1; }
.cake__layer--1{
  width:84%; height:clamp(56px,16vw,72px);
  background:linear-gradient(170deg,#ffc3d8,#ff9dbd);
  background-image:
    radial-gradient(circle at 22% 38%, #fff 2.5px, transparent 3px),
    radial-gradient(circle at 58% 62%, #fff6c4 2.5px, transparent 3px),
    radial-gradient(circle at 80% 30%, #d7c3ff 2.5px, transparent 3px),
    radial-gradient(circle at 38% 74%, #fff 2px, transparent 2.5px),
    linear-gradient(170deg,#ffc3d8,#ff9dbd);
  border-radius:5px 5px 3px 3px;
}
.cake__layer--2{
  width:100%; height:clamp(62px,17vw,80px); margin-top:4px;
  background-image:
    radial-gradient(circle at 15% 44%, #fff 2.5px, transparent 3px),
    radial-gradient(circle at 46% 26%, #ffd9a8 2.5px, transparent 3px),
    radial-gradient(circle at 72% 60%, #fff 2.5px, transparent 3px),
    radial-gradient(circle at 88% 34%, #ffc6dd 2.5px, transparent 3px),
    linear-gradient(170deg,#e4d6fb,#c9b2f3);
  border-radius:5px 5px 4px 4px;
  box-shadow:inset 0 -6px 12px rgba(150,110,200,.18);
}
.cake__plate{
  width:118%; height:15px; margin:0 auto; margin-left:-9%;
  background:linear-gradient(#fdf0d4,var(--gold-soft) 55%,#e0bd71);
  border-radius:50% / 100%; box-shadow:0 12px 24px rgba(170,110,140,.26);
}
.cake-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.cake-msg{
  margin:26px auto 0; min-height:2.6em; max-width:26ch;
  font-family:var(--f-head); font-weight:700;
  font-size:clamp(1.3rem,5.6vw,1.95rem); color:var(--gold);
  opacity:0; transform:translateY(12px) scale(.94);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,1.4,.4,1);
}
.cake-msg.is-show{ opacity:1; transform:none; }
.cake-msg small{ display:block; font-family:var(--f-body); font-size:.62em; color:var(--ink-soft); font-weight:300; margin-top:6px; }

/* ===========================================================
   7. LETTER
   =========================================================== */
.paper{
  position:relative; max-width:660px; margin:0 auto; text-align:left;
  padding:clamp(34px,8vw,58px) clamp(24px,7vw,54px);
  border-radius:4px; transform:rotate(-.7deg);
  color:#4d3b46;
  background-color:#fffdf6;
  background-image:
    repeating-linear-gradient(transparent 0 33px, rgba(184,156,240,.16) 33px 34px),
    radial-gradient(circle at 18% 12%, rgba(255,224,208,.5) 0, transparent 45%),
    radial-gradient(circle at 86% 88%, rgba(236,227,253,.55) 0, transparent 42%);
  box-shadow:0 20px 44px rgba(170,110,140,.22), inset 0 0 60px rgba(214,180,140,.12);
}
.paper__tape{
  position:absolute; top:-12px; width:86px; height:26px;
  background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.8);
  box-shadow:0 2px 6px rgba(170,110,140,.18);
}
.paper__tape--l{ left:-14px; transform:rotate(-26deg); }
.paper__tape--r{ right:-14px; transform:rotate(24deg); }
.paper__greeting{
  font-family:var(--f-head); font-weight:700; margin:0 0 18px;
  font-size:clamp(1.6rem,6.6vw,2.3rem); color:var(--pink);
}
.paper__body{
  font-family:var(--f-hand); line-height:1.62;
  font-size:clamp(1.14rem,4.7vw,1.42rem); min-height:8em;
}
.paper__body p{ margin:0 0 15px; }
.paper__body .cursor{ display:inline-block; width:2px; height:1em; background:var(--pink); vertical-align:-.12em; animation:blink 1s steps(1) infinite; }
.paper__sign{
  font-family:var(--f-head); font-weight:700; margin:22px 0 0;
  font-size:clamp(1.25rem,5vw,1.7rem); color:var(--lav-deep); text-align:right;
}
.paper__skip{
  position:absolute; bottom:10px; right:14px; border:0; background:none; cursor:pointer;
  font-size:.72rem; color:var(--ink-soft); opacity:.6; transition:opacity .3s, color .3s;
}
.paper__skip:hover{ opacity:1; color:var(--pink); }
.paper__skip[hidden]{ display:none; }

/* ===========================================================
   8. FINAL SURPRISE  (big heart made of little hearts)
   =========================================================== */
.finale__reveal{ margin-top:clamp(34px,7vw,52px); }
.finale__reveal[hidden]{ display:none; }

.heart-grid{
  position:relative; width:min(88vw,430px); aspect-ratio:1/1; margin:0 auto;
}
.heart-grid span{
  position:absolute; line-height:1;
  font-size:clamp(13px,4.2vw,22px);
  transform:translate(-50%,-50%) scale(0);
  animation:bloom .8s cubic-bezier(.2,1.6,.4,1) forwards, sway 3.6s ease-in-out infinite;
}
@keyframes bloom{ 0%{opacity:0; transform:translate(-50%,-50%) scale(0) rotate(-40deg);} 100%{opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0deg);} }
@keyframes sway{ 0%,100%{margin-top:0;} 50%{margin-top:-5px;} }

.finale__msg{
  font-family:var(--f-head); font-weight:700; line-height:1.2;
  font-size:clamp(1.55rem,7.2vw,2.7rem); color:var(--pink);
  max-width:22ch; margin:clamp(10px,3vw,24px) auto clamp(24px,5vw,34px);
  text-shadow:0 2px 0 #fff, 0 12px 28px rgba(255,125,166,.3);
  opacity:0; animation:fade-up 1.2s ease 1.1s forwards;
}

/* ===========================================================
   FOOTER
   =========================================================== */
.footer{
  padding:clamp(40px,8vw,70px) 20px clamp(46px,9vw,64px); text-align:center;
}
.footer p{ margin:0; font-family:var(--f-head); font-size:clamp(1.3rem,5.4vw,1.8rem); color:var(--pink); font-weight:700; }
.footer__small{ font-family:var(--f-body) !important; font-size:.84rem !important; color:var(--ink-soft) !important; font-weight:300 !important; margin-top:8px !important; font-style:italic; }

/* ===========================================================
   RESPONSIVE TWEAKS
   =========================================================== */
@media (max-width:600px){
  .carousel{ padding:0; }
  .quote-card{ padding:34px 24px; }
  .cards{ grid-template-columns:repeat(auto-fit,minmax(142px,1fr)); }
  .lb__arrow{ width:42px; height:42px; font-size:1.7rem; }
  .paper{ transform:none; }
  .music-btn{ top:12px; right:12px; width:46px; height:46px; }
}
@media (min-width:1024px){
  .pola:nth-child(3n+1){ margin-top:14px; }
  .pola:nth-child(3n+2){ margin-top:-10px; }
}

/* ===========================================================
   GENTLER MOTION for anyone who prefers it
   =========================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.18s !important; }
  html{ scroll-behavior:auto; }
  .bg-float{ display:none; }
  .reveal{ opacity:1; transform:none; }
  .pola{ opacity:1; }
  .card{ opacity:1; transform:none; }
}

/* ===========================================================
   HOUSEKEEPING  (small but important)
   =========================================================== */

/* our class rules would otherwise beat the browser's [hidden] */
[hidden]{ display:none !important; }

/* keep the hero animations frozen until the envelope is opened,
   so she actually sees them play instead of finding them finished */
.site:not(.is-open) *{ animation-play-state:paused !important; }

/* placeholder shown in a polaroid when the photo file is not there yet */
.pola__ph{ font-family:var(--f-body); letter-spacing:.02em; }

/* ###########################################################################
   THE WILD STUFF
   ########################################################################### */

/* ---------- slow drifting pastel aurora ---------- */
.aurora{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; filter:blur(60px); opacity:.5; }
.aurora i{ position:absolute; display:block; border-radius:50%; }
.aurora i:nth-child(1){ width:60vw; height:60vw; left:-14vw; top:-10vh;
  background:radial-gradient(circle,rgba(255,170,205,.85),transparent 68%); animation:aur1 26s ease-in-out infinite; }
.aurora i:nth-child(2){ width:56vw; height:56vw; right:-12vw; top:18vh;
  background:radial-gradient(circle,rgba(180,150,245,.8),transparent 68%); animation:aur2 31s ease-in-out infinite; }
.aurora i:nth-child(3){ width:64vw; height:64vw; left:12vw; bottom:-22vh;
  background:radial-gradient(circle,rgba(255,190,150,.75),transparent 68%); animation:aur3 36s ease-in-out infinite; }
@keyframes aur1{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(12vw,8vh) scale(1.18);} }
@keyframes aur2{ 0%,100%{transform:translate(0,0) scale(1.1);} 50%{transform:translate(-14vw,12vh) scale(.92);} }
@keyframes aur3{ 0%,100%{transform:translate(0,0) scale(.95);} 50%{transform:translate(10vw,-10vh) scale(1.2);} }

/* ---------- the night sky that takes over at the end ---------- */
.cosmic-veil{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:0; transition:opacity 1.6s ease;
  background:
    radial-gradient(900px 620px at 18% 8%,  #4a2d7a 0%, transparent 62%),
    radial-gradient(820px 560px at 86% 18%, #5b2f6e 0%, transparent 58%),
    radial-gradient(760px 520px at 50% 104%,#6b3560 0%, transparent 60%),
    linear-gradient(180deg,#120b26 0%, #1e1240 45%, #2c1746 100%);
}
body.cosmic .cosmic-veil{ opacity:1; }

.stars{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity 1.8s ease .3s; }
body.cosmic .stars{ opacity:1; }
.stars i{
  position:absolute; width:var(--s,2px); height:var(--s,2px); border-radius:50%;
  background:#fff; box-shadow:0 0 6px rgba(255,255,255,.9);
  animation-name:twinkle; animation-timing-function:ease-in-out;
  animation-iteration-count:infinite; animation-direction:alternate;
}
@keyframes twinkle{ from{opacity:.16; transform:scale(.65);} to{opacity:1; transform:scale(1.3);} }

/* ---------- shooting stars ---------- */
.shoot{
  position:absolute; width:clamp(90px,22vw,180px); height:2px; border-radius:2px; opacity:0;
  background:linear-gradient(90deg, rgba(255,255,255,0), #fff3cf 45%, #ffd3e4);
  filter:drop-shadow(0 0 6px rgba(255,214,150,.85));
  animation-name:shoot; animation-timing-function:ease-in; animation-fill-mode:forwards;
}
@keyframes shoot{
  0%  { opacity:0; transform:rotate(20deg) translate3d(0,0,0) scaleX(.3); }
  14% { opacity:1; }
  100%{ opacity:0; transform:rotate(20deg) translate3d(-78vw,0,0) scaleX(1); }
}

/* ---------- sparkles that follow her finger ---------- */
.trail{
  position:fixed; z-index:95; pointer-events:none; line-height:1;
  transform:translate(-50%,-50%);
  animation:trail .95s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes trail{
  0%  { opacity:1; transform:translate(-50%,-50%) scale(.4) rotate(0deg); }
  100%{ opacity:0; transform:translate(calc(-50% + var(--tx,0px)), calc(-50% - 48px)) scale(1.2) rotate(30deg); }
}

/* ---------- hearts blasting out of a point ---------- */
.boom-heart{
  position:fixed; z-index:96; pointer-events:none; line-height:1;
  transform:translate(-50%,-50%);
  animation:boom 1.5s cubic-bezier(.15,.8,.3,1) forwards;
}
@keyframes boom{
  0%  { opacity:0; transform:translate(-50%,-50%) scale(.2); }
  12% { opacity:1; }
  100%{ opacity:0; transform:translate(calc(-50% + var(--bx,0px)), calc(-50% + var(--by,0px))) scale(1.15) rotate(40deg); }
}

/* ===========================================================
   5. THE LOVE SCANNER
   =========================================================== */
.scan{ max-width:580px; margin:0 auto; }
.scan__screen{
  background:rgba(255,255,255,.74); border:1px solid rgba(255,255,255,.9);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:clamp(20px,5vw,30px); margin-bottom:22px; text-align:left;
  transition:background .9s ease, border-color .9s ease;
}
.scan__out{ min-height:clamp(140px,36vw,184px); }
.scan__row{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:8px 0; border-bottom:1px dashed rgba(184,156,240,.32);
  font-size:clamp(.78rem,3.1vw,.92rem);
  animation:fade-up .45s ease backwards;
}
.scan__label{ color:var(--ink-soft); }
.scan__value{ color:var(--pink); font-weight:500; text-align:right; }
.scan__meter{
  height:12px; border-radius:99px; margin-top:18px; overflow:hidden;
  background:rgba(184,156,240,.22);
}
.scan__bar{
  display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,var(--lav-deep),var(--pink) 55%,var(--gold-soft));
  transition:width .6s ease;
}
.scan__bar.is-over{ width:100% !important; animation:overload .6s ease-in-out infinite alternate; }
@keyframes overload{ from{filter:brightness(1);} to{filter:brightness(1.4) saturate(1.5);} }
.scan__pct{ margin-top:9px; text-align:right; font-size:.76rem; letter-spacing:.14em; color:var(--ink-soft); }

/* ===========================================================
   7. SCRATCH CARD
   =========================================================== */
.scratch{ display:grid; justify-items:center; gap:18px; }
.scratch__card{
  position:relative; width:min(100%,440px); min-height:clamp(192px,46vw,224px);
  display:grid; place-items:center; padding:clamp(24px,6vw,36px);
  border-radius:20px; overflow:hidden; box-shadow:var(--shadow);
  background:linear-gradient(150deg,#fff,var(--blush));
  transition:background .9s ease;
}
.scratch__msg{
  margin:0; font-family:var(--f-hand); line-height:1.42; color:var(--ink);
  font-size:clamp(1.08rem,4.5vw,1.38rem);
}
.scratch__foil{
  position:absolute; inset:0; width:100%; height:100%;
  cursor:grab; touch-action:none; transition:opacity .8s ease;
}
.scratch__foil:active{ cursor:grabbing; }
.scratch__foil.is-gone{ opacity:0; pointer-events:none; }
.scratch__card.is-open{ box-shadow:0 20px 46px rgba(255,125,166,.35); }

/* ===========================================================
   9. THE "WHAT ARE WE?" WHEEL
   =========================================================== */
.wheel-wrap{ position:relative; width:min(84vw,330px); aspect-ratio:1/1; margin:0 auto clamp(24px,5vw,32px); }
.wheel{
  position:absolute; inset:0; border-radius:50%;
  transition:transform 4.2s cubic-bezier(.16,.72,.14,1);
  box-shadow:0 18px 40px rgba(170,110,140,.3), inset 0 0 0 8px rgba(255,255,255,.88);
}
.wheel__label{
  position:absolute; left:calc(50% - 52px); top:16px;
  width:104px; height:calc(50% - 16px); transform-origin:50% 100%;
  text-align:center; pointer-events:none; text-transform:uppercase;
  font-size:clamp(.64rem,2.7vw,.78rem); font-weight:600; letter-spacing:.07em; color:#6b4a5e;
}
.wheel__pin{
  position:absolute; top:-9px; left:50%; transform:translateX(-50%); z-index:3;
  width:0; height:0; border-left:12px solid transparent; border-right:12px solid transparent;
  border-top:23px solid var(--pink); filter:drop-shadow(0 3px 5px rgba(170,110,140,.45));
}
.wheel__hub{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:#fff; font-size:1.35rem; box-shadow:0 6px 16px rgba(170,110,140,.32);
  transition:background .9s ease;
}

/* ===========================================================
   THE CERTIFICATE OF OFFICIALLY UNDEFINED
   =========================================================== */
.cert{
  position:relative; max-width:560px; text-align:center;
  margin:clamp(36px,8vw,56px) auto 0;
  padding:clamp(30px,7vw,44px) clamp(22px,6vw,38px) clamp(24px,5vw,32px);
  border-radius:6px; border:2px solid var(--gold-soft);
  background:linear-gradient(#fffdf4,#fff8ec);
  box-shadow:var(--shadow), inset 0 0 0 1px #fff;
  transition:background .9s ease;
}
.cert::before{
  content:""; position:absolute; inset:8px; pointer-events:none;
  border:1px dashed rgba(207,160,73,.5); border-radius:4px;
}
.cert__seal{
  position:absolute; top:-20px; left:50%; transform:translateX(-50%);
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 34% 28%,#f8e9b8,var(--gold) 72%);
  color:#fff9ec; font-size:1.05rem; box-shadow:0 5px 12px rgba(150,110,50,.4);
}
.cert__title{
  font-family:var(--f-head); font-weight:700; color:var(--gold); margin:12px 0 16px;
  font-size:clamp(1.4rem,5.8vw,2.05rem); line-height:1.15;
}
.cert__body{
  font-family:var(--f-hand); line-height:1.5; color:var(--ink); margin:0 0 16px;
  font-size:clamp(1.05rem,4.3vw,1.3rem);
}
.cert__small{ font-size:.75rem; font-style:italic; color:var(--ink-soft); margin:0 0 26px; letter-spacing:.02em; }
.cert__signs{ display:flex; justify-content:space-around; gap:18px; flex-wrap:wrap; }
.cert__signs span{
  font-family:var(--f-head); font-weight:700; color:var(--lav-deep);
  font-size:clamp(1.05rem,4vw,1.3rem); min-width:120px;
  border-top:1px solid rgba(184,156,240,.55); padding-top:8px;
}

/* ===========================================================
   11. THE BUTTON TRAP
   =========================================================== */
.btn--danger{
  color:#fff; font-weight:500; padding:17px 30px;
  font-size:clamp(.95rem,3.8vw,1.1rem);
  background:linear-gradient(135deg,#ff7d8f,#ffa0bd);
  box-shadow:0 12px 30px rgba(255,125,143,.42);
}
.btn--danger:hover{ transform:translateY(-3px); }
.btn--danger:disabled{ opacity:1; cursor:default; }
.btn--danger.is-shaking{ animation:shake .45s ease; }
@keyframes shake{
  0%,100%{ transform:translateX(0) rotate(0); }
  20%{ transform:translateX(-9px) rotate(-2.5deg); }
  40%{ transform:translateX(9px) rotate(2.5deg); }
  60%{ transform:translateX(-6px) rotate(-1.5deg); }
  80%{ transform:translateX(6px) rotate(1.5deg); }
}

/* ===========================================================
   SHARED "BIG ANSWER" MESSAGE STYLE
   (cake wish, scan verdict, wheel result, trap reveal)
   =========================================================== */
.scan__verdict, .wheel__result, .trap__msg{
  margin:26px auto 0; max-width:26ch; min-height:2.2em;
  font-family:var(--f-head); font-weight:700; line-height:1.2;
  font-size:clamp(1.25rem,5.4vw,1.85rem); color:var(--gold);
  opacity:0; transform:translateY(12px) scale(.94);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,1.4,.4,1);
}
.wheel__result{ color:var(--pink); }
.trap__msg{ color:var(--pink); }
.scan__verdict.is-show, .wheel__result.is-show, .trap__msg.is-show{ opacity:1; transform:none; }
.scan__verdict small, .trap__msg small{
  display:block; margin-top:8px; font-family:var(--f-body); font-weight:300;
  font-size:.56em; color:var(--ink-soft); line-height:1.45;
}

/* ===========================================================
   FINALE EXTRAS
   =========================================================== */
.finale__sub{
  font-family:var(--f-body); font-style:italic; color:var(--ink-soft);
  font-size:clamp(.9rem,3.6vw,1.05rem); max-width:28ch;
  margin:-8px auto clamp(24px,5vw,32px);
  opacity:0; animation:fade-up 1.2s ease 1.6s forwards;
}
.finale__btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ###########################################################################
   COSMIC MODE
   Added to <body> by the final surprise. The whole page becomes a night sky,
   so every surface that was white has to become deep space instead.
   ########################################################################### */
body.cosmic{
  --ink:#f1e7ff;
  --ink-soft:#c2b0e4;
  --pink:#ff9fc8;
  --lav-deep:#c7aeff;
  --gold:#ffd77a;
}
body.cosmic .aurora{ opacity:.34; filter:blur(70px) saturate(1.4); }
body.cosmic .hero__glow{ opacity:.25; }

/* headings lose their white outline and pick up a glow instead */
body.cosmic .section__title,
body.cosmic .hero__title,
body.cosmic .finale__msg,
body.cosmic .footer p{ text-shadow:0 0 26px rgba(255,150,200,.6); }

/* every pale surface goes deep */
body.cosmic .pola{ background:#2a1b4d; }
body.cosmic .quote-card{ background:rgba(42,27,74,.72); border-color:rgba(255,255,255,.14); }
body.cosmic .card__face--front{ background:linear-gradient(150deg,#33204f,#4a2a64); border-color:rgba(255,158,187,.3); }
body.cosmic .card__face--back{ background:linear-gradient(150deg,#271c4a,#3e2763); border-color:rgba(199,174,255,.35); }
body.cosmic .scan__screen{ background:rgba(42,27,74,.72); border-color:rgba(255,255,255,.14); }
body.cosmic .scratch__card{ background:linear-gradient(150deg,#33204f,#4a2a64); }
body.cosmic .wheel__hub{ background:#2a1b4d; }
body.cosmic .carousel__arrow{ background:#33204f; }
body.cosmic .carousel__dots button{ background:rgba(199,174,255,.3); }
body.cosmic .carousel__dots button.is-active{ background:var(--pink); }
body.cosmic .music-btn{ background:rgba(42,27,74,.72); border-color:rgba(255,255,255,.18); }
body.cosmic .btn--ghost{ background:rgba(255,255,255,.08); border-color:rgba(199,174,255,.5); }

/* the letter becomes a page lit by starlight */
body.cosmic .paper{
  color:#f1e7ff; background-color:#241a44; border:1px solid rgba(255,255,255,.08);
  background-image:
    repeating-linear-gradient(transparent 0 33px, rgba(199,174,255,.13) 33px 34px),
    radial-gradient(circle at 18% 12%, rgba(255,160,200,.12) 0, transparent 45%),
    radial-gradient(circle at 86% 88%, rgba(160,140,255,.16) 0, transparent 42%);
  box-shadow:0 20px 48px rgba(0,0,0,.45);
}
body.cosmic .paper__tape{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.2); }

/* the certificate turns into something signed among the stars */
body.cosmic .cert{
  background:linear-gradient(#2b1d4f,#372159);
  box-shadow:0 20px 48px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08);
}

/* the big heart glows */
body.cosmic .heart-grid span{ filter:drop-shadow(0 0 10px rgba(255,150,200,.75)); }

/* keep the swap smooth rather than snapping */
.pola, .quote-card, .card__face, .scan__screen, .scratch__card, .wheel__hub,
.carousel__arrow, .music-btn, .btn--ghost, .paper, .cert, .section__title,
.hero__title, .section__lead, body{
  transition:background-color .9s ease, background .9s ease, color .9s ease,
             border-color .9s ease, text-shadow .9s ease;
}

/* ---------- gentler motion, part two ---------- */
@media (prefers-reduced-motion:reduce){
  .aurora, .shoot, .trail{ display:none; }
  .wheel{ transition-duration:1.2s; }
}

/* ===========================================================
   VIDEOS IN THE GALLERY
   =========================================================== */
.pola--video .pola__frame::after{      /* gentle shade so the badge reads on any frame */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(transparent 42%, rgba(78,44,64,.3));
}
.pola__play{
  position:absolute; left:50%; top:50%; z-index:2;
  transform:translate(-50%,-50%);
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center; pointer-events:none;
  background:rgba(255,255,255,.86); backdrop-filter:blur(3px);
  box-shadow:0 6px 18px rgba(120,70,95,.38);
  transition:transform .35s ease, background .3s ease;
}
.pola__play::after{                    /* the little triangle */
  content:""; margin-left:5px; width:0; height:0;
  border-left:18px solid var(--pink);
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
}
.pola--video:hover .pola__play,
.pola--video:focus-visible .pola__play{ transform:translate(-50%,-50%) scale(1.14); background:#fff; }

/* the video player inside the fullscreen lightbox */
.lb__figure video{
  max-width:100%; max-height:74vh; margin:0 auto; border-radius:10px;
  background:#000; box-shadow:0 20px 50px rgba(0,0,0,.45);
  animation:zoom-in .35s cubic-bezier(.2,.9,.2,1);
}