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

:root {
  --rose:      #e5989b;
  --blush:     #e8c4b8;
  --warm-gray: #9e8f85;
  --ink:       #2a1e16;
  --cream:     #f9f4ee;
}

html, body { background:#fff; color:var(--ink); font-family:'Jost',sans-serif; font-weight:300; overflow-x:hidden; }

/* ═══ CONFETTI CANVAS ═══ */
#confettiCanvas { position:fixed; inset:0; pointer-events:none; z-index:9990; width:100%; height:100%; }

/* ═══ PAGE FADE ═══ */
#page-fade { position:fixed; inset:0; background:#fff; z-index:9999; opacity:0; pointer-events:none; transition:opacity .45s ease; }
#page-fade.fade-out { opacity:1; pointer-events:all; }
body { animation:fadeInPage .5s ease forwards; }
@keyframes fadeInPage { from{opacity:0} to{opacity:1} }

/* ═══ PARTICLES ═══ */
.particle { position:fixed; border-radius:50%; pointer-events:none; z-index:99999; animation:particleBurst .7s ease-out forwards; }
@keyframes particleBurst {
  0%   { transform:translate(0,0) scale(1); opacity:1; }
  100% { transform:translate(var(--tx),var(--ty)) scale(0); opacity:0; }
}

/* ═══ NAVBAR ═══ */
#navbar {
  position:fixed; top:18px; left:50%; transform:translateX(-50%);
  z-index:1000; width:94%; max-width:1400px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; height:56px;
  background:transparent; border-radius:100px;
  border:1px solid transparent; overflow:visible;
  opacity:0; transition:opacity .4s ease;
}
#navbar.ready { opacity:1; }
.nav-logo { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:400; letter-spacing:3px; color:var(--ink); text-decoration:none; white-space:nowrap; }
.nav-logo em { font-style:italic; color:var(--rose); }
.nav-links { display:flex; align-items:center; gap:36px; list-style:none; }
.nav-links a { font-family:'Jost',sans-serif; font-weight:300; font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--warm-gray); text-decoration:none; transition:color .3s; white-space:nowrap; }
.nav-links a:hover { color:var(--ink); }

/* ═══ BURGER & DRAWER ═══ */
.nav-burger { display:none; flex-direction:column; justify-content:center; gap:5px; cursor:pointer; padding:6px; flex-shrink:0; z-index:1002; }
.nav-burger span { display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s,opacity .3s; }
.nav-burger.open span:nth-child(1){ transform:rotate(45deg) translate(5px,5px); }
.nav-burger.open span:nth-child(2){ opacity:0; }
.nav-burger.open span:nth-child(3){ transform:rotate(-45deg) translate(5px,-5px); }
.nav-drawer { display:none; position:fixed; inset:0; z-index:9998; background:rgba(249,244,238,.97); backdrop-filter:blur(24px); flex-direction:column; align-items:center; justify-content:center; gap:32px; }
.nav-drawer.open { display:flex; animation:drawerIn .3s ease forwards; }
@keyframes drawerIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
.nav-drawer a { font-family:'Cormorant Garamond',serif; font-size:clamp(32px,8vw,52px); font-weight:300; color:var(--ink); text-decoration:none; letter-spacing:2px; transition:color .2s; }
.nav-drawer a:hover { color:var(--rose); }
.nav-drawer-close { position:absolute; top:12px; right:16px; background:none; border:none; font-size:48px; line-height:1; color:var(--warm-gray); cursor:pointer; z-index:9999; padding:12px 18px; min-width:64px; min-height:64px; display:flex; align-items:center; justify-content:center; }

/* ═══ HERO ═══ */
.gifts-hero {
  min-height:55vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:120px 24px 80px;
  background:linear-gradient(180deg,#fff 0%,var(--cream) 100%);
  position:relative; overflow:hidden;
}
.gifts-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 70% 50% at 50% 60%,rgba(232,196,184,.3),transparent 70%); pointer-events:none; }
.gifts-eyebrow { font-size:11px; letter-spacing:6px; text-transform:uppercase; color:var(--warm-gray); margin-bottom:20px; position:relative; }
.gifts-title { font-family:'Cormorant Garamond',serif; font-size:clamp(48px,9vw,100px); font-weight:300; line-height:1.05; color:var(--ink); letter-spacing:-1px; margin-bottom:20px; position:relative; }
.gifts-title em { font-style:italic; color:var(--rose); }
.gifts-sub { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(16px,2vw,22px); color:var(--warm-gray); position:relative; }

/* ═══ BIRTHDAY SECTION ═══ */
.birthday-section { padding:80px 0 120px; background:var(--cream); border-top:1px solid rgba(0,0,0,.06); }

.bday-header { text-align:center; padding:0 24px 60px; max-width:700px; margin:0 auto; }
.bday-year-tag { display:inline-block; font-family:'Cormorant Garamond',serif; font-size:clamp(80px,15vw,140px); font-weight:300; color:rgba(0,0,0,.06); line-height:1; margin-bottom:-20px; user-select:none; }
.bday-title { font-family:'Cormorant Garamond',serif; font-size:clamp(32px,5vw,56px); font-weight:300; color:var(--ink); line-height:1.1; margin-bottom:20px; }
.bday-title em { font-style:italic; color:var(--rose); }
.bday-desc { font-size:16px; color:var(--warm-gray); line-height:1.8; }

/* Cake + info */
.bday-main { display:flex; align-items:center; gap:60px; max-width:1100px; margin:0 auto; padding:0 60px 80px; }
.cake-wrap { flex:0 0 480px; text-align:center; }
.cake-viewer { width:100%; height:480px; background:transparent; }
.cake-label { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:18px; color:var(--warm-gray); margin-top:12px; }

.bday-info { flex:1; }
.bday-info-tag { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:4px; text-transform:uppercase; color:var(--warm-gray); margin-bottom:20px; }
.bday-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--rose); }
.bday-info-title { font-family:'Cormorant Garamond',serif; font-size:clamp(28px,4vw,44px); font-weight:300; color:var(--ink); line-height:1.2; margin-bottom:24px; }
.bday-info-text { font-size:15px; color:var(--warm-gray); line-height:1.9; margin-bottom:16px; }
.bday-firma { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:20px; color:var(--rose); margin-top:32px; }

/* ═══ GALLERY ═══ */
.gallery-section { max-width:1100px; margin:0 auto; padding:0 60px; }
.gallery-header { text-align:center; margin-bottom:48px; }
.gallery-eyebrow { font-size:11px; letter-spacing:5px; text-transform:uppercase; color:var(--warm-gray); margin-bottom:12px; }
.gallery-title { font-family:'Cormorant Garamond',serif; font-size:clamp(28px,4vw,44px); font-weight:300; color:var(--ink); }
.gallery-title em { font-style:italic; color:var(--rose); }

.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

.gallery-card { position:relative; border-radius:12px; overflow:hidden; cursor:pointer; box-shadow:0 4px 24px rgba(0,0,0,.08); transition:transform .3s,box-shadow .3s; aspect-ratio:4/3; }
.gallery-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.14); }

.gallery-img { width:100%; height:100%; }
.gallery-img img { width:100%; height:100%; object-fit:cover; display:block; }
.placeholder-img { background:linear-gradient(135deg,#f9e8e0,#fce4ec); width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.placeholder-inner { font-size:56px; opacity:.7; }

.gallery-card-caption { position:absolute; bottom:0; left:0; right:0; padding:10px 14px; background:linear-gradient(to top,rgba(0,0,0,.45),transparent); font-size:11px; letter-spacing:2px; color:rgba(255,255,255,.8); text-transform:uppercase; }

.gallery-plus { position:absolute; bottom:12px; right:12px; width:34px; height:34px; background:rgba(255,255,255,.92); border:none; border-radius:50%; font-size:22px; line-height:1; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 12px rgba(0,0,0,.15); transition:background .2s,transform .2s; z-index:2; }
.gallery-plus:hover { background:#fff; transform:scale(1.1); }

/* ═══ LIGHTBOX ═══ */
.lightbox { display:none; position:fixed; inset:0; z-index:10000; align-items:center; justify-content:center; }
.lightbox.open { display:flex; }
.lightbox-backdrop { position:absolute; inset:0; background:rgba(15,10,6,.88); backdrop-filter:blur(8px); cursor:pointer; animation:lbFadeIn .3s ease forwards; }
@keyframes lbFadeIn { from{opacity:0} to{opacity:1} }
.lightbox-box { position:relative; z-index:2; max-width:min(90vw,780px); width:100%; background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 24px 80px rgba(0,0,0,.5); animation:lbSlideIn .35s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes lbSlideIn { from{opacity:0;transform:translateY(24px) scale(.97)} to{opacity:1;transform:none} }
.lightbox-close { position:absolute; top:12px; right:12px; background:rgba(255,255,255,.9); border:none; font-size:26px; line-height:1; color:var(--warm-gray); cursor:pointer; z-index:3; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 12px rgba(0,0,0,.1); transition:color .2s; }
.lightbox-close:hover { color:var(--ink); }
.lightbox-img-wrap { width:100%; aspect-ratio:4/3; overflow:hidden; }
.lightbox-img-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
.lightbox-img-wrap .placeholder-img { aspect-ratio:4/3; }
.lightbox-img-wrap .placeholder-inner { font-size:100px; }
.lightbox-desc { padding:24px 28px; font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:300; font-style:italic; color:var(--warm-gray); line-height:1.7; border-top:1px solid rgba(0,0,0,.06); }

/* ═══ RESPONSIVE ═══ */
@media (max-width:900px) {
  .bday-main { flex-direction:column; padding:0 24px 60px; gap:40px; }
  .cake-wrap { flex:none; width:100%; max-width:400px; margin:0 auto; }
  .cake-viewer { height:360px; }
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
  .gallery-section { padding:0 24px; }
}
@media (max-width:600px) {
  .bday-main { padding:0 16px 60px; }
  .gallery-grid { grid-template-columns:1fr; }
  .gallery-section { padding:0 16px; }
  .gifts-hero { padding:100px 20px 60px; }
  .bday-header { padding:0 16px 40px; }
}
@media (max-width:640px) {
  .nav-links { display:none !important; }
  .nav-burger { display:flex; }
  #navbar { overflow:visible !important; }
}
@media (min-width:641px) and (max-width:860px) {
  #navbar { width:94% !important; padding:0 20px !important; height:50px; }
  .nav-links { gap:16px; }
  .nav-links a { font-size:10px; letter-spacing:1.5px; }
}