/* ═══════════════════════════════════════════════════════════════
   KAMYA · Birthday Experience — style.css  ·  v2 (Awwwards pass)
   A soft, luxe, glassmorphic world in pink / lavender / rose-gold.
   ───────────────────────────────────────────────────────────────
   Contents:
     1.  Tokens (color · type scale · spacing · shadows · easing)
     2.  Reset & base
     3.  Cursor
     4.  Ambient background (aurora · stars · grain · vignette)
     5.  Loader
     6.  Fixed UI (scroll progress · music · scroll hint)
     7.  Layout primitives (section · headings · glass · buttons)
     8.  Image reveal + frames
     9.  Sections 1–8
     10. FX canvas · lightbox
     11. Responsive
     12. Reduced motion
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────── 1 · TOKENS ─────────────────────────── */
:root {
  /* palette */
  --blush:#ffd9ea; --rose:#ff9ec6; --rose-deep:#ff6fae; --rose-ink:#e14b8f;
  --rosegold:#e9b8b0; --gold:#ffd9a8;
  --lav:#cbb6ff; --lav-deep:#a888ff; --lav-ink:#8a63f0;
  --cream:#fff6fb; --plum:#4a2e46; --plum-soft:#7c5b74; --plum-mute:#a98ba3;

  /* glass */
  --glass:rgba(255,255,255,.55);
  --glass-2:rgba(255,255,255,.32);
  --glass-brd:rgba(255,255,255,.75);
  --glass-blur:20px;

  /* layered shadows for real depth */
  --sh-sm:0 2px 6px rgba(120,60,110,.10);
  --sh-md:0 10px 24px -10px rgba(130,60,110,.28), 0 4px 10px -6px rgba(130,60,110,.18);
  --sh-lg:0 30px 60px -25px rgba(120,60,110,.38), 0 12px 24px -14px rgba(120,60,110,.24);
  --sh-xl:0 48px 100px -30px rgba(150,70,130,.48), 0 18px 40px -20px rgba(150,70,130,.30);
  --glow-rose:0 0 42px rgba(255,111,174,.45);
  --glow-lav:0 0 42px rgba(168,136,255,.40);

  /* type scale (fluid) */
  --fs-eyebrow:clamp(.7rem,1.6vw,.78rem);
  --fs-sub:clamp(1.05rem,2.4vw,1.4rem);
  --fs-h3:clamp(1.25rem,2.6vw,1.5rem);
  --fs-sec:clamp(2.1rem,5.5vw,3.7rem);
  --fs-hero:clamp(2.4rem,6vw,4.8rem);
  --fs-mega:clamp(3.4rem,15vw,10rem);

  /* spacing rhythm */
  --pad-sec:clamp(5rem,12vh,9.5rem);
  --pad-x:clamp(1.15rem,5vw,5rem);
  --maxw:1200px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.65,.05,.36,1);
  --radius:26px;
}

/* ─────────────────────────── 2 · RESET & BASE ─────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Poppins',sans-serif;color:var(--plum);
  background:
    radial-gradient(120% 120% at 15% 0%, #fff8fc 0%, transparent 45%),
    radial-gradient(120% 120% at 85% 100%, #f6ecff 0%, transparent 50%),
    linear-gradient(180deg,#fff6fb 0%,#fdeaf6 32%,#f4ecff 66%,#fff2f8 100%);
  background-attachment:fixed;
  overflow-x:hidden;min-height:100vh;line-height:1.6;
  cursor:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
em{font-style:italic;color:var(--rose-deep)}
.script{font-family:'Great Vibes',cursive}
.hidden{display:none!important}
::selection{background:rgba(255,111,174,.28);color:var(--plum)}

/* Touch / no-hover: native cursor, no custom pointer */
@media (hover:none),(pointer:coarse){
  body{cursor:auto}
  .cursor-dot,.cursor-glow{display:none!important}
  .music-btn,.finale-cta,.poph,.candle,.lb-close,.lb-nav,a,button{cursor:pointer}
}

/* ─────────────────────────── 3 · CURSOR ─────────────────────────── */
.cursor-dot{
  position:fixed;top:0;left:0;z-index:9999;width:9px;height:9px;border-radius:50%;
  background:var(--rose-deep);transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:multiply;
  transition:width .28s var(--ease),height .28s var(--ease),background .28s,opacity .3s;
}
.cursor-glow{
  position:fixed;top:0;left:0;z-index:9998;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,158,198,.30) 0%,rgba(203,182,255,.15) 42%,transparent 72%);
  transform:translate(-50%,-50%);pointer-events:none;filter:blur(6px);transition:opacity .4s;
}
body.cursor-active .cursor-dot{width:46px;height:46px;background:rgba(255,111,174,.22);mix-blend-mode:normal;border:1px solid rgba(255,111,174,.5)}

/* ─────────────────────────── 4 · AMBIENT BACKGROUND ─────────────────────────── */
.aurora{position:fixed;inset:0;z-index:-4;overflow:hidden;pointer-events:none;filter:blur(64px) saturate(1.18)}
.aurora-blob{position:absolute;border-radius:50%;opacity:.55;mix-blend-mode:screen;will-change:transform}
.a1{width:56vw;height:56vw;background:radial-gradient(circle,#ffb6d5,transparent 70%);top:-12%;left:-8%;animation:drift1 24s var(--ease) infinite alternate}
.a2{width:50vw;height:50vw;background:radial-gradient(circle,#cbb6ff,transparent 70%);top:18%;right:-14%;animation:drift2 28s var(--ease) infinite alternate}
.a3{width:48vw;height:48vw;background:radial-gradient(circle,#ffd9ea,transparent 70%);bottom:-14%;left:18%;animation:drift3 32s var(--ease) infinite alternate}
.a4{width:42vw;height:42vw;background:radial-gradient(circle,#ffe2c2,transparent 70%);bottom:4%;right:12%;animation:drift1 30s var(--ease) infinite alternate-reverse}
@keyframes drift1{to{transform:translate(8vw,6vh) scale(1.16)}}
@keyframes drift2{to{transform:translate(-7vw,9vh) scale(1.1)}}
@keyframes drift3{to{transform:translate(6vw,-8vh) scale(1.2)}}

.star-canvas{position:fixed;inset:0;z-index:-3;pointer-events:none}
.ambient-canvas{position:fixed;inset:0;z-index:-2;pointer-events:none}

.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.vignette{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(120,60,110,.10) 100%)}

/* ─────────────────────────── 5 · LOADER ─────────────────────────── */
.loader{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;
  background:linear-gradient(160deg,#fff6fb,#fbe6f3 55%,#efe6ff);
  transition:opacity .9s var(--ease),visibility .9s;clip-path:inset(0 0 0 0)}
.loader.done{opacity:0;visibility:hidden}
.loader-inner{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.3rem}
.loader-heart{margin-bottom:.6rem;filter:drop-shadow(0 8px 24px rgba(255,111,174,.35))}
.loader-heart-path{stroke-dasharray:340;stroke-dashoffset:340;animation:drawHeart 2.2s var(--ease) infinite}
@keyframes drawHeart{0%{stroke-dashoffset:340}55%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:.35}}
.loader-title{font-family:'Great Vibes',cursive;font-size:clamp(2.8rem,7vw,4.4rem);color:var(--rose-deep);line-height:1}
.loader-sub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.05rem;color:var(--plum-soft);letter-spacing:.02em}
.loader-bar{margin-top:1.5rem;width:min(260px,62vw);height:3px;border-radius:3px;background:rgba(255,158,198,.22);overflow:hidden}
.loader-bar span{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--rose),var(--lav-deep));box-shadow:0 0 12px rgba(255,111,174,.6);transition:width .3s var(--ease)}
.loader-count{margin-top:.7rem;font-family:'Playfair Display',serif;font-size:.9rem;letter-spacing:.25em;color:var(--plum-soft)}
.loader-count i{font-style:normal;opacity:.6;font-size:.7em}

/* ─────────────────────────── 6 · FIXED UI ─────────────────────────── */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:600;
  background:linear-gradient(90deg,var(--rose-deep),var(--lav-deep));box-shadow:0 0 12px rgba(255,111,174,.5)}

.music-btn{position:fixed;top:22px;right:22px;z-index:400;display:flex;align-items:center;gap:.55rem;
  padding:.6rem 1rem;border:1px solid var(--glass-brd);border-radius:999px;background:var(--glass);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));color:var(--plum);
  font-family:'Poppins';font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;cursor:none;
  box-shadow:var(--sh-md);transition:box-shadow .4s var(--ease)}
.music-btn:hover{box-shadow:var(--sh-lg),var(--glow-rose)}
.music-label{opacity:.8}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.eq i{width:3px;height:4px;border-radius:2px;background:linear-gradient(var(--rose-deep),var(--lav-deep))}
.music-btn.playing .eq i{animation:eqbar .9s ease-in-out infinite}
.music-btn.playing .eq i:nth-child(2){animation-delay:.2s}
.music-btn.playing .eq i:nth-child(3){animation-delay:.4s}
.music-btn.playing .eq i:nth-child(4){animation-delay:.1s}
@keyframes eqbar{0%,100%{height:4px}50%{height:14px}}

.scroll-hint{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;align-items:center;gap:.5rem;
  font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--plum-soft);transition:opacity .6s}
.scroll-line{width:1px;height:44px;background:linear-gradient(var(--rose-deep),transparent);position:relative;overflow:hidden}
.scroll-line::after{content:'';position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--rose-deep);animation:scrollDot 1.8s var(--ease) infinite}
@keyframes scrollDot{to{top:120%}}

/* ─────────────────────────── 7 · LAYOUT PRIMITIVES ─────────────────────────── */
.section{position:relative;padding:var(--pad-sec) var(--pad-x)}
.sec-head{text-align:center;max-width:760px;margin:0 auto clamp(2.5rem,6vh,4.2rem)}
.eyebrow{font-size:var(--fs-eyebrow);letter-spacing:.42em;text-transform:uppercase;color:var(--rose-deep);margin-bottom:1rem;opacity:.92}
.sec-title{font-family:'Playfair Display',serif;font-weight:700;font-size:var(--fs-sec);line-height:1.1;color:var(--plum)}
.sec-sub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:var(--fs-sub);color:var(--plum-soft);margin-top:.9rem}

/* gradient-bordered glass (premium) */
.glass{position:relative;background:var(--glass);border:1px solid transparent;
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));box-shadow:var(--sh-md);
  background-clip:padding-box}
.glass::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,158,198,.25) 40%,rgba(203,182,255,.3));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.glass::after{content:'';position:absolute;inset:0 0 60% 0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.35),transparent);opacity:.7}

/* magnetic + ripple hosts */
.magnetic{will-change:transform}
.ripple-host{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;transform:translate(-50%,-50%) scale(0);pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.6),rgba(255,158,198,.25) 60%,transparent 70%);mix-blend-mode:screen}

/* ─────────────────────────── 8 · IMAGE REVEAL + FRAMES ─────────────────────────── */
/* clip-path mask reveal — GSAP animates --reveal 0→100 */
.reveal-img{position:relative;overflow:hidden;border-radius:inherit}
.reveal-img img{transform:scale(1.14);transition:none}
.reveal-img.revealed img{transform:scale(1)}
.reveal-img::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,#ffe3f0,#efe4ff);
  transform-origin:right;transition:transform 1.1s var(--ease)}
.reveal-img.revealed::after{transform:scaleX(0)}

.photo-shell{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--glass-brd);
  box-shadow:var(--sh-xl);background:linear-gradient(135deg,#ffe3f0,#efe4ff)}
.hero-photo{position:relative;will-change:transform}
.hero-photo .photo-shell{aspect-ratio:3/4}
.hero-img{width:100%;height:100%;object-fit:cover;object-position:center 22%;will-change:transform}
.photo-shine{position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.4) 48%,transparent 60%);transform:translateX(-100%);pointer-events:none;z-index:3}
.hero-photo:hover .photo-shine{animation:shine 1.1s var(--ease)}
@keyframes shine{to{transform:translateX(100%)}}
.photo-ring{position:absolute;inset:0;border-radius:var(--radius);pointer-events:none;z-index:2;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);opacity:0;transition:opacity .5s,box-shadow .5s}
.hero-photo:hover .photo-ring{opacity:1;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 0 60px rgba(255,111,174,.35)}
.hero-photo-cap{text-align:center;margin-top:1rem;font-size:1.75rem;color:var(--rose-deep)}

/* graceful missing-image fallback (never a broken icon) */
.img-missing{position:relative;min-height:240px;background:linear-gradient(135deg,#ffd9ea,#cbb6ff)}
.img-missing::after{content:'♡ add photo';position:absolute;inset:0;display:grid;place-items:center;
  font-family:'Great Vibes',cursive;font-size:1.7rem;color:rgba(74,46,70,.55);
  background:linear-gradient(135deg,rgba(255,217,234,.92),rgba(203,182,255,.92))}

/* ─────────────────────────── 9 · SECTIONS ─────────────────────────── */

/* 1 · WELCOME */
.welcome{min-height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden}
.parallax-scene{position:absolute;inset:0;pointer-events:none;z-index:0}
.orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.7;will-change:transform}
.orb-1{width:120px;height:120px;top:18%;left:14%;background:radial-gradient(circle at 30% 30%,#fff,rgba(255,158,198,.5) 60%,transparent)}
.orb-2{width:80px;height:80px;top:64%;left:78%;background:radial-gradient(circle at 30% 30%,#fff,rgba(203,182,255,.5) 60%,transparent)}
.orb-3{width:160px;height:160px;top:72%;left:10%;background:radial-gradient(circle at 30% 30%,#fff,rgba(255,217,168,.5) 60%,transparent)}
.welcome-glow{position:absolute;width:72vw;height:72vw;max-width:820px;max-height:820px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,158,198,.38),transparent 65%);filter:blur(34px);z-index:0}
.welcome-content{z-index:2;will-change:transform}
.welcome-kicker{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1rem,3vw,1.4rem);letter-spacing:.3em;text-transform:uppercase;color:var(--rose-deep);margin-bottom:1.5rem}
.welcome-title{font-family:'Playfair Display',serif;font-weight:900;line-height:1.02}
.welcome-title .line{display:block;overflow:hidden;padding-bottom:.04em}
.welcome-title .t{display:inline-block;will-change:transform}
.welcome-title .line:nth-child(1) .t,.welcome-title .line:nth-child(2) .t{font-size:var(--fs-hero);color:var(--plum)}
.name-line{margin-top:.06em;display:flex;justify-content:center;align-items:center;gap:.1em;flex-wrap:wrap}
.name-word{font-size:var(--fs-mega);background:linear-gradient(120deg,var(--rose-deep) 0%,var(--rosegold) 45%,var(--lav-deep) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 12px 34px rgba(255,111,174,.32));background-size:200% 200%;animation:nameFlow 8s ease infinite}
@keyframes nameFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.heart-emoji{font-size:clamp(2rem,8vw,5rem);color:var(--rose-deep);animation:heartBeat 1.6s ease-in-out infinite}
@keyframes heartBeat{0%,100%{transform:scale(1)}15%{transform:scale(1.18)}30%{transform:scale(1)}45%{transform:scale(1.12)}}
.welcome-lead{margin-top:1.7rem;font-family:'Cormorant Garamond',serif;font-size:clamp(1.1rem,3vw,1.6rem);color:var(--plum-soft);max-width:30ch;margin-inline:auto}

/* 2 · HERO */
.hero-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.hero-head{font-family:'Playfair Display',serif;font-weight:700;line-height:1.02;margin:1rem 0 1.5rem}
.hero-head .hl{display:block;font-size:var(--fs-hero);color:var(--plum)}
.hero-head .accent{font-style:italic;color:var(--rose-deep)}
.hero-head .big{font-size:var(--fs-mega);line-height:.9;background:linear-gradient(120deg,var(--rose-deep),var(--lav-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-text{font-family:'Cormorant Garamond',serif;font-size:clamp(1.1rem,2.4vw,1.45rem);color:var(--plum-soft);max-width:46ch}

/* 3 · GALLERY */
.masonry{max-width:var(--maxw);margin:0 auto;column-count:3;column-gap:1.5rem}
.poph{position:relative;break-inside:avoid;margin-bottom:1.5rem;cursor:none;padding:.7rem .7rem 2.7rem;border-radius:16px;
  background:#fff;box-shadow:var(--sh-md);transform:rotate(var(--rot,0deg));transition:transform .55s var(--ease),box-shadow .55s;will-change:transform}
.poph .reveal-img{border-radius:9px}
.poph img{width:100%;border-radius:9px;object-fit:cover}
.poph figcaption{position:absolute;bottom:.6rem;left:0;right:0;text-align:center;font-size:1.4rem;color:var(--plum-soft)}
.poph:hover{transform:rotate(0deg) translateY(-10px) scale(1.03);box-shadow:var(--sh-xl),var(--glow-rose);z-index:5}

/* 4 · TIMELINE */
.timeline{position:relative;max-width:880px;margin:0 auto}
.tl-line{position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);background:rgba(255,158,198,.22)}
.tl-progress{position:absolute;top:0;left:0;width:100%;height:0;background:linear-gradient(var(--rose-deep),var(--lav-deep));box-shadow:0 0 12px rgba(255,111,174,.5)}
.tl-item{position:relative;width:50%;padding:1rem 2.5rem;margin-bottom:1rem}
.tl-item.left{left:0;text-align:right}
.tl-item.right{left:50%}
.tl-dot{position:absolute;top:2rem;width:16px;height:16px;border-radius:50%;background:var(--rose-deep);box-shadow:0 0 0 6px rgba(255,158,198,.22),0 0 18px rgba(255,111,174,.6)}
.tl-item.left .tl-dot{right:-8px}
.tl-item.right .tl-dot{left:-8px}
.tl-card{padding:1.6rem 1.8rem;border-radius:22px}
.tl-when{font-family:'Great Vibes',cursive;font-size:1.5rem;color:var(--rose-deep)}
.tl-card h3{font-family:'Playfair Display',serif;font-size:var(--fs-h3);color:var(--plum);margin:.1rem 0 .5rem}
.tl-card p{font-size:.96rem;color:var(--plum-soft)}

/* 5 · REASONS */
.reason-grid{max-width:1050px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.reason-card{padding:2.1rem 1.6rem;border-radius:24px;text-align:center;transition:transform .55s var(--ease),box-shadow .55s;will-change:transform}
.reason-card:hover{box-shadow:var(--sh-xl),var(--glow-lav)}
.r-ico{font-size:2.7rem;display:block;margin-bottom:.8rem;filter:drop-shadow(0 6px 14px rgba(255,111,174,.32))}
.reason-card h3{font-family:'Playfair Display',serif;font-size:var(--fs-h3);color:var(--plum);margin-bottom:.4rem}
.reason-card p{font-size:.95rem;color:var(--plum-soft)}

/* 6 · WISH */
.wish{text-align:center}
.wish-inner{max-width:840px;margin:0 auto}
.wish-quote{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;font-size:clamp(1.5rem,4vw,2.7rem);line-height:1.4;color:var(--plum)}
.wish-quote .word{display:inline-block}
.wish-sign{font-size:clamp(2rem,5vw,3rem);color:var(--rose-deep);margin-top:1.6rem}

/* 7 · HEARTS */
.hearts-stage{position:relative;max-width:900px;height:46vh;min-height:320px;margin:0 auto;border-radius:32px;overflow:hidden;cursor:none;
  background:linear-gradient(160deg,rgba(255,217,234,.45),rgba(203,182,255,.32));border:1px solid var(--glass-brd);box-shadow:var(--sh-lg);display:grid;place-items:center}
.hearts-hint{font-family:'Great Vibes',cursive;font-size:2.1rem;color:rgba(74,46,70,.4);pointer-events:none;transition:opacity .5s}
.float-heart{position:absolute;pointer-events:none;will-change:transform,opacity;font-size:1.6rem}

/* 8 · FINALE / CAKE */
.finale{text-align:center;min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.cake-wrap{display:grid;place-items:center;margin:1rem auto 2rem;perspective:1000px}
.cake{position:relative;width:300px;height:300px;will-change:transform}
.cake-glow{position:absolute;inset:-10% -10% 0 -10%;background:radial-gradient(circle at 50% 40%,rgba(255,170,60,.28),transparent 60%);filter:blur(20px);opacity:0;transition:opacity .6s}
.cake.lit .cake-glow{opacity:1}
.cake-plate{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:300px;height:26px;border-radius:50%;background:radial-gradient(ellipse at center,#fff,#eddaf0);box-shadow:0 18px 34px -10px rgba(120,60,110,.42)}
.cake-layer{position:absolute;left:50%;transform:translateX(-50%);border-radius:18px 18px 12px 12px}
.layer-bottom{bottom:26px;width:240px;height:110px;background:linear-gradient(180deg,#ffc6e0,#ff9ec6);box-shadow:inset 0 -12px 20px rgba(200,80,140,.25)}
.layer-top{bottom:130px;width:175px;height:90px;background:linear-gradient(180deg,#ffe0ee,#ffb6d5);box-shadow:inset 0 -10px 18px rgba(200,80,140,.2)}
.cake-drip{position:absolute;bottom:120px;left:50%;transform:translateX(-50%);width:175px;height:34px;background:#fff5fb;border-radius:0 0 40% 40%/0 0 100% 100%;filter:drop-shadow(0 4px 3px rgba(200,120,160,.25));z-index:2}
.cake-drip::before,.cake-drip::after{content:'';position:absolute;top:0;width:26px;height:26px;background:#fff5fb;border-radius:0 0 50% 50%}
.cake-drip::before{left:24px}.cake-drip::after{right:24px;height:34px}
.cake-candles{position:absolute;bottom:210px;left:50%;transform:translateX(-50%);display:flex;gap:20px;z-index:3}
.candle{position:relative;width:12px;height:52px;border-radius:6px;background:repeating-linear-gradient(45deg,#fff 0 6px,#ff9ec6 6px 12px);box-shadow:0 3px 6px rgba(0,0,0,.1);cursor:none}
.candle .wick{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:2px;height:6px;background:#5a3a2a}
.flame{position:absolute;top:-26px;left:50%;transform:translateX(-50%);width:14px;height:22px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:radial-gradient(circle at 50% 70%,#fff 0%,#ffe07a 35%,#ff9d3d 75%,#ff6a00 100%);
  box-shadow:0 0 18px 6px rgba(255,170,60,.7),0 0 40px 12px rgba(255,120,40,.35);transform-origin:bottom center;animation:flicker .28s ease-in-out infinite alternate}
@keyframes flicker{from{transform:translateX(-50%) scale(1) rotate(-2deg)}to{transform:translateX(-50%) scale(1.08,1.12) rotate(2deg)}}
.candle.out .flame{animation:none;opacity:0;transform:translateX(-50%) scale(.2);transition:all .3s}
.candle.out::after{content:'';position:absolute;top:-20px;left:50%;width:4px;height:20px;border-radius:4px;background:linear-gradient(rgba(180,180,180,.5),transparent);animation:smoke 1.2s ease-out forwards}
@keyframes smoke{to{transform:translate(-50%,-24px) scaleY(1.6);opacity:0}}

.finale-cta{margin:0 auto;padding:1.05rem 2.5rem;border:none;border-radius:999px;cursor:none;font-family:'Poppins';font-size:.95rem;letter-spacing:.05em;color:#fff;
  background:linear-gradient(120deg,var(--rose-deep),var(--lav-deep));background-size:200% 200%;box-shadow:var(--sh-lg),var(--glow-rose);animation:ctaGlow 3s ease infinite;transition:box-shadow .4s}
.finale-cta:hover{box-shadow:var(--sh-xl),var(--glow-rose),var(--glow-lav)}
@keyframes ctaGlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.finale-message{margin-top:1rem}
.finale-big{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(2.4rem,8vw,5.5rem);line-height:1.05;color:var(--plum)}
.finale-big span{background:linear-gradient(120deg,var(--rose-deep),var(--lav-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.finale-message p{font-family:'Cormorant Garamond',serif;font-size:clamp(1.1rem,3vw,1.6rem);color:var(--plum-soft);margin-top:.8rem}

/* FOOTER */
.footer{text-align:center;padding:3rem 1rem 4rem}
.footer .script{font-size:2.1rem;color:var(--rose-deep)}
.footer-mini{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--plum-soft);margin-top:.4rem}

/* ─────────────────────────── 10 · FX CANVAS · LIGHTBOX ─────────────────────────── */
.fx-canvas{position:fixed;inset:0;z-index:500;pointer-events:none}

.lightbox{position:fixed;inset:0;z-index:9000;display:none;place-items:center;background:rgba(60,30,55,.55);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);opacity:0;transition:opacity .4s var(--ease)}
.lightbox.open{display:grid;opacity:1}
.lb-figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:1rem}
.lb-img{max-width:88vw;max-height:78vh;border-radius:18px;box-shadow:0 40px 90px -20px rgba(0,0,0,.55);transform:scale(.92);transition:transform .5s var(--ease)}
.lightbox.open .lb-img{transform:scale(1)}
.lb-cap{color:#fff;font-size:1.8rem;text-shadow:0 4px 16px rgba(0,0,0,.4)}
.lb-close,.lb-nav{position:absolute;z-index:2;border:1px solid var(--glass-brd);background:var(--glass);color:var(--plum);
  backdrop-filter:blur(10px);cursor:none;border-radius:999px;display:grid;place-items:center;transition:background .3s}
.lb-close{top:22px;right:22px;width:48px;height:48px;font-size:1.1rem}
.lb-nav{top:50%;transform:translateY(-50%);width:56px;height:56px;font-size:1.9rem}
.lb-prev{left:3vw}.lb-next{right:3vw}
.lb-close:hover,.lb-nav:hover{background:#fff}

/* ─────────────────────────── 11 · RESPONSIVE ─────────────────────────── */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:2.5rem}
  .hero-copy{text-align:center;order:2}
  .hero-text{margin-inline:auto}
  .hero-photo{order:1;max-width:400px;margin:0 auto}
  .masonry{column-count:2}
}
@media (max-width:720px){
  :root{--radius:20px}
  .tl-line{left:20px}
  .tl-item,.tl-item.left,.tl-item.right{width:100%;left:0;text-align:left;padding-left:3rem;padding-right:.4rem}
  .tl-item.left .tl-dot,.tl-item.right .tl-dot{left:12px;right:auto}
  .reason-grid{grid-template-columns:repeat(2,1fr)}
  .lb-nav{width:44px;height:44px}.lb-prev{left:8px}.lb-next{right:8px}
  .lb-cap{font-size:1.4rem}
}
@media (max-width:560px){
  .masonry{column-count:1;max-width:400px}
  .reason-grid{grid-template-columns:1fr;max-width:340px}
  .name-line{gap:.2em}
  .music-btn{top:14px;right:14px;padding:.5rem .8rem}
  .scroll-hint{display:none}
}

/* ─────────────────────────── 12 · REDUCED MOTION ─────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .aurora-blob,.name-word{animation:none}
  .reveal-img img{transform:none}
  .reveal-img::after{display:none}
}

/* ─────────────────────────── 13 · FINAL POLISH ───────────────────────────
   Accessibility (skip link, focus rings, reduced-transparency), animated
   title underline, richer footer, and satisfying press feedback. */

/* Skip-to-content link — appears only on keyboard focus */
.skip-link{position:fixed;top:-100px;left:16px;z-index:10001;padding:.65rem 1.1rem;border-radius:12px;
  background:#fff;color:var(--plum);font-size:.85rem;font-weight:500;box-shadow:var(--sh-lg);
  transition:top .3s var(--ease)}
.skip-link:focus{top:16px}

/* Focus: invisible for mouse, clear ring for keyboard */
:focus{outline:none}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--rose-deep);outline-offset:4px;border-radius:14px;
  box-shadow:0 0 0 6px rgba(255,111,174,.18)}
.poph:focus-visible{outline-offset:6px;transform:rotate(0) translateY(-6px) scale(1.02);z-index:6}
#hero:focus,#hero:focus-visible{outline:none} /* scroll target only */
.name-word:focus-visible{outline-offset:8px}

/* Animated gradient underline under emphasised words (lit by JS on reveal) */
.sec-title em{position:relative}
.sec-title em::after{content:'';position:absolute;left:0;bottom:.02em;width:100%;height:.11em;border-radius:6px;
  background:linear-gradient(90deg,var(--rose),var(--lav-deep));opacity:.55;
  transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease) .2s}
.sec-title.lit em::after{transform:scaleX(1)}

/* Press feedback — a quick, satisfying dip on tap */
.finale-cta:active{filter:brightness(.96)}
.poph:active{transform:rotate(0) translateY(-4px) scale(.99)}
.candle:active{transform:translateY(1px)}
.lb-close:active,.lb-nav:active{filter:brightness(.94)}

/* Gallery caption: gentle lift on hover/focus */
.poph figcaption{transition:transform .5s var(--ease),color .5s}
.poph:hover figcaption,.poph:focus-visible figcaption{transform:translateY(-2px);color:var(--rose-deep)}

/* Richer footer with a soft glow wash + gradient script */
.footer{position:relative;overflow:hidden}
.footer-shine{position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:70vw;height:130%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,158,198,.25),rgba(203,182,255,.12) 45%,transparent 68%);filter:blur(28px)}
.footer .script{position:relative;background:linear-gradient(120deg,var(--rose-deep),var(--lav-deep));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Accessibility: honour reduced-transparency by making glass solid & legible */
@media (prefers-reduced-transparency:reduce){
  .glass,.music-btn,.lb-close,.lb-nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.92)}
  .lightbox{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(60,30,55,.85)}
}

/* Tiny screens: keep everything breathing, never cramped or overflowing */
@media (max-width:400px){
  :root{--pad-x:1rem}
  .name-word{font-size:clamp(3rem,20vw,4.5rem)}
  .hearts-stage{border-radius:24px}
  .cake{transform:scale(.92)}
}

/* ─────────────────────────── 14 · MULTI-PAGE (nav + pages) ─────────────────────────── */

/* Glass navbar — floats top-center on desktop, becomes a bottom tab-bar on phones */
.nav-pill{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:450;display:flex;gap:.15rem;padding:.35rem;
  border-radius:999px;background:var(--glass);border:1px solid var(--glass-brd);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));box-shadow:var(--sh-md);
  max-width:calc(100vw - 96px);overflow-x:auto;scrollbar-width:none}
.nav-pill::-webkit-scrollbar{display:none}
.nav-link{position:relative;flex:0 0 auto;padding:.5rem .95rem;border-radius:999px;cursor:none;white-space:nowrap;
  font-family:'Poppins';font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--plum-soft);
  text-decoration:none;transition:color .35s var(--ease),background .35s var(--ease)}
.nav-link:hover{color:var(--plum);background:rgba(255,255,255,.5)}
.nav-link.active{color:#fff;background:linear-gradient(120deg,var(--rose-deep),var(--lav-deep));box-shadow:0 6px 18px -6px rgba(255,111,174,.6)}
@media (hover:none),(pointer:coarse){.nav-link{cursor:pointer}}
@media (max-width:640px){
  .nav-pill{top:auto;bottom:14px;max-width:calc(100vw - 20px);padding:.3rem}
  .nav-link{padding:.5rem .8rem;font-size:.68rem;letter-spacing:.08em}
  .music-btn{top:14px;right:14px}
  .scroll-hint{display:none}
}

/* Sub-page hero header (shared) */
.page{min-height:100vh}
.page-head{text-align:center;max-width:820px;margin:0 auto;padding:clamp(6.5rem,16vh,10rem) 0 clamp(2rem,5vh,3.5rem)}
.page-title{font-family:'Playfair Display',serif;font-weight:900;font-size:var(--fs-mega);line-height:.98;
  background:linear-gradient(120deg,var(--rose-deep),var(--rosegold) 45%,var(--lav-deep));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 12px 34px rgba(255,111,174,.28));background-size:200% 200%;animation:nameFlow 8s ease infinite}
.page-title.small{font-size:clamp(2.6rem,8vw,5rem)}
.page-lead{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:var(--fs-sub);color:var(--plum-soft);margin-top:1rem}
.back-home{display:inline-block;margin-top:1.4rem;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-deep);text-decoration:none;cursor:none}
.back-home:hover{text-decoration:underline}

/* GALLERY PAGE — a bit larger + a featured lead image */
.gallery-page .masonry{column-count:3}
.gallery-page .poph{margin-bottom:1.6rem}
.featured{max-width:620px;margin:0 auto clamp(2rem,5vh,3rem);}
.featured .photo-shell{aspect-ratio:4/5}
.featured img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.featured figcaption{text-align:center;margin-top:.9rem;font-size:1.8rem;color:var(--rose-deep)}
@media (max-width:900px){.gallery-page .masonry{column-count:2}}
@media (max-width:560px){.gallery-page .masonry{column-count:1;max-width:400px}}

/* LETTER PAGE */
.letter-wrap{max-width:720px;margin:0 auto;padding-bottom:clamp(4rem,10vh,7rem)}
.letter-card{position:relative;padding:clamp(2rem,5vw,3.5rem);border-radius:28px}
.letter-card .letter-date{font-family:'Great Vibes',cursive;font-size:2rem;color:var(--rose-deep);display:block;margin-bottom:1.2rem}
.letter-card p{font-family:'Cormorant Garamond',serif;font-size:clamp(1.2rem,2.6vw,1.5rem);line-height:1.75;color:var(--plum);margin-bottom:1.25rem}
.letter-card p .lead-cap{float:left;font-family:'Playfair Display',serif;font-weight:700;font-size:3.4em;line-height:.72;padding:.06em .12em 0 0;color:var(--rose-deep)}
.letter-sign{font-family:'Great Vibes',cursive;font-size:2.6rem;color:var(--rose-deep);text-align:right;margin-top:1rem}

/* COUNTDOWN PAGE */
.countdown-wrap{max-width:900px;margin:0 auto;text-align:center;padding-bottom:clamp(4rem,10vh,7rem)}
.cd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.6rem,2vw,1.4rem);max-width:760px;margin:0 auto}
.cd-cell{position:relative;padding:clamp(1.1rem,3vw,2rem) .5rem;border-radius:24px;overflow:hidden}
.cd-num{display:block;font-family:'Playfair Display',serif;font-weight:900;line-height:1;font-size:clamp(2.4rem,9vw,5rem);
  background:linear-gradient(120deg,var(--rose-deep),var(--lav-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cd-label{display:block;margin-top:.6rem;font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--plum-soft)}
.cd-msg{margin-top:clamp(2rem,5vh,3rem);font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.2rem,3vw,1.7rem);color:var(--plum)}
#countdown.is-birthday .cd-num{animation:heartBeat 1.2s ease-in-out infinite}
@media (max-width:560px){.cd-grid{grid-template-columns:repeat(2,1fr);max-width:340px}}

/* WISHES PAGE */
.wishes-wrap{max-width:1100px;margin:0 auto;padding-bottom:clamp(4rem,10vh,7rem)}
.wish-form{max-width:620px;margin:0 auto clamp(2.5rem,6vh,4rem);display:flex;flex-direction:column;gap:.8rem;
  padding:1.4rem;border-radius:24px}
.wish-form textarea,.wish-form input{width:100%;font-family:'Poppins';font-size:1rem;color:var(--plum);
  background:rgba(255,255,255,.6);border:1px solid var(--glass-brd);border-radius:14px;padding:.9rem 1.1rem;resize:vertical;cursor:none}
.wish-form textarea{min-height:90px}
.wish-form textarea::placeholder,.wish-form input::placeholder{color:var(--plum-mute)}
.wish-form textarea:focus,.wish-form input:focus{outline:none;border-color:var(--rose);box-shadow:0 0 0 4px rgba(255,111,174,.15)}
.wish-form .row{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.wish-form input{flex:1;min-width:180px}
.wish-submit{flex:0 0 auto;padding:.85rem 1.8rem;border:none;border-radius:999px;cursor:none;color:#fff;font-family:'Poppins';font-size:.85rem;letter-spacing:.05em;
  background:linear-gradient(120deg,var(--rose-deep),var(--lav-deep));background-size:200% 200%;box-shadow:var(--sh-md),var(--glow-rose);transition:box-shadow .4s}
.wish-submit:hover{box-shadow:var(--sh-lg),var(--glow-rose)}
.wishes-grid{column-count:3;column-gap:1.4rem}
.wish-card{break-inside:avoid;margin-bottom:1.4rem;padding:1.6rem 1.7rem;border-radius:22px}
.wish-card .wish-mark{font-size:1.6rem;display:block;margin-bottom:.5rem}
.wish-card p{font-family:'Cormorant Garamond',serif;font-size:1.25rem;line-height:1.5;color:var(--plum)}
@media (max-width:900px){.wishes-grid{column-count:2}}
@media (max-width:560px){.wishes-grid{column-count:1;max-width:420px;margin:0 auto}}