/* ===================== Variables ===================== */
:root{
  --wine: #5c0f1a;
  --wine-deep: #3d0a12;
  --red: #9c1c2e;
  --red-bright: #c8283f;
  --gold: #d4af37;
  --gold-light: #f3d98a;
  --gold-soft: #e8c766;
  --cream: #fff8ec;
  --paper: #fffaf2;
  --ink: #2a1210;
  --ink-soft: #5a3a34;
  --shadow: rgba(60, 10, 15, 0.25);
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --script: 'Dancing Script', cursive;
  --sans: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  overflow-x:hidden;
  cursor: default;
}
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
section{ position:relative; }

::selection{ background: var(--gold-light); color: var(--wine-deep); }

/* ===================== Scrollbar ===================== */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: var(--cream); }
::-webkit-scrollbar-thumb{ background: var(--gold); border-radius: 10px; }

/* ===================== Preloader ===================== */
#preloader{
  position:fixed; inset:0; z-index:9999;
  background: var(--wine-deep);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 18px;
  transition: opacity .8s ease, visibility .8s ease;
}
#preloader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-heart svg path{ fill: var(--gold); animation: heartbeat 1.1s ease-in-out infinite; transform-origin:center; }
.preloader-heart svg{ filter: drop-shadow(0 0 18px rgba(212,175,55,.6)); }
#preloader p{ font-family: var(--serif); font-style:italic; color: var(--gold-light); letter-spacing: .5px; font-size: 1.05rem; }
.dots span{ animation: blinkDot 1.4s infinite; opacity:0; }
.dots span:nth-child(2){ animation-delay:.2s; }
.dots span:nth-child(3){ animation-delay:.4s; }
@keyframes blinkDot{ 0%,100%{opacity:0;} 50%{opacity:1;} }
@keyframes heartbeat{ 0%,100%{ transform:scale(1);} 25%{ transform:scale(1.15);} 40%{ transform:scale(0.95);} 60%{ transform:scale(1.1);} }

/* ===================== Floating hearts canvas ===================== */
#hearts-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index: 2; opacity:.55;
}

/* ===================== Progress bar ===================== */
#progress-bar{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background: linear-gradient(90deg, var(--gold), var(--red-bright), var(--gold));
  background-size: 200% 100%;
  z-index: 10000;
  transition: width .1s ease-out;
}

/* ===================== Dot navigation ===================== */
#dot-nav{
  position:fixed; right: 22px; top:50%; transform:translateY(-50%);
  z-index: 500; display:flex; flex-direction:column; gap:14px;
}
#dot-nav .dot{
  width:10px; height:10px; border-radius:50%;
  background: rgba(92,15,26,.25);
  border: 1px solid rgba(92,15,26,.4);
  position:relative; transition: all .3s ease;
}
#dot-nav .dot.active{ background: var(--red-bright); box-shadow: 0 0 0 4px rgba(200,40,63,.18); }
#dot-nav .dot::after{
  content: attr(data-label);
  position:absolute; right: 22px; top:50%; transform:translateY(-50%);
  font-size:.7rem; letter-spacing:.5px; text-transform:uppercase;
  color: var(--wine); background: var(--paper); padding: 4px 10px; border-radius: 4px;
  white-space:nowrap; opacity:0; pointer-events:none; transition: opacity .25s ease;
  box-shadow: 0 4px 12px var(--shadow);
}
#dot-nav .dot:hover::after{ opacity:1; }
@media (max-width: 780px){ #dot-nav{ display:none; } }

/* ===================== Shared section styles ===================== */
.section-inner{
  max-width: 780px; margin:0 auto; padding: 130px 24px;
  text-align:center; position:relative; z-index:3;
}
.section-inner.wide{ max-width: 1180px; }
@media (max-width: 600px){
  .section-inner{ padding: 84px 18px; }
}
.eyebrow{
  font-family: var(--script); font-size: 1.5rem; color: var(--red-bright);
  margin-bottom: 6px;
}
.eyebrow.center{ text-align:center; }
.section-title{
  font-family: var(--serif); font-weight:600; font-style:italic;
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: var(--wine-deep); margin-bottom: 14px; line-height:1.25;
}
.section-sub{ color: var(--ink-soft); font-weight:300; margin-bottom: 40px; font-size:1rem; }

.reveal{ opacity:0; transform: translateY(40px); transition: opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform: translateY(0); }
/* --rs drives the scale-in amount; components with their own base transform (e.g. .live-card's
   rotate) fold var(--rs) into that transform instead of letting this rule's transform win/lose outright. */
.reveal-scale{ opacity:0; --rs: .85; }
.reveal-scale.in{ opacity:1; --rs: 1; }

/* ===================== HERO ===================== */
#hero{
  min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
}
.hero-photo-bg{
  position:absolute; inset:-6%; z-index:0;
  background-image: url('../assets/art/art-01.png');
  background-size:cover; background-position:center 20%;
  animation: kenBurns 9s ease-in-out infinite alternate;
}
@keyframes kenBurns{
  0%{ transform: scale(1.05) translate(0, 0); }
  100%{ transform: scale(1.22) translate(-2%, -1.5%); }
}
/* Vertical photo on phones (matches the portrait screen); horizontal photo on laptop/desktop. */
@media (min-width: 900px){
  .hero-photo-bg{
    background-image: url('../assets/art/hero-horizontal.png');
    background-position: center 35%;
  }
}
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(61,10,18,.4) 0%, rgba(61,10,18,.45) 45%, rgba(20,4,7,.88) 100%);
}

.hero-content{
  position:relative; z-index:2; text-align:center; color: var(--cream); padding: 0 20px;
}
.hero-title{
  font-family: var(--script); font-size: clamp(3.4rem, 6vw + 4vh, 8rem); line-height:1;
  margin: 0 0 10px; white-space: nowrap;
  opacity:0; animation: fadeUp 1.1s .4s ease forwards;
}
.title-name{
  display:inline-block;
  background: linear-gradient(100deg, var(--gold) 15%, #fff8ec 32%, var(--gold-light) 42%, var(--gold) 58%, var(--gold-light) 75%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color:transparent; -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 30px rgba(212,175,55,.35), 0 4px 18px rgba(0,0,0,.35);
  animation: titleShimmer 7s linear infinite 1.7s;
}
@keyframes titleShimmer{ 0%{ background-position: 220% 0; } 100%{ background-position: -60% 0; } }
.heart-inline{
  color: var(--red-bright); -webkit-text-fill-color: var(--red-bright);
  display:inline-block; animation: heartbeat 1.6s ease-in-out infinite; margin-left: 6px;
}
.hero-subtitle{
  font-family: var(--serif); font-style:italic; font-weight:500; font-size: clamp(1rem, 2.4vw, 1.4rem);
  color: var(--gold-light); opacity:0; animation: fadeUp 1s .7s ease forwards;
}
@keyframes fadeUp{ from{ opacity:0; transform: translateY(24px);} to{ opacity:1; transform: translateY(0);} }

.hero-divider{
  display:flex; align-items:center; justify-content:center; margin: 24px 0 8px;
  opacity:0; animation: fadeUp 1s 1s ease forwards;
}
.hero-divider span{ width:90px; height:1px; background: linear-gradient(90deg, transparent, var(--gold-light), transparent); }

.scroll-cue{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  margin-top: clamp(20px, 5vh, 46px);
  color: var(--gold-light); font-size:.7rem; letter-spacing:3px; text-transform:uppercase;
  opacity:0; animation: fadeUp 1s 1.25s ease forwards;
}
.scroll-cue-line{ width:1px; height:38px; background: linear-gradient(var(--gold), transparent); animation: scrollLine 1.8s ease-in-out infinite; }
@keyframes scrollLine{ 0%{ transform: scaleY(0); transform-origin:top; opacity:1;} 50%{ transform: scaleY(1); transform-origin:top; opacity:1;} 51%{transform-origin:bottom;} 100%{ transform: scaleY(0); transform-origin:bottom; opacity:0;} }

/* ===================== COUNTER ===================== */
#counter{ background: linear-gradient(180deg, var(--cream), #fff); overflow:hidden; }

.counter-glow{
  position:absolute; left:50%; top:50%; width: 60vw; height:60vw; max-width:700px; max-height:700px;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(200,40,63,.16) 0%, rgba(212,175,55,.10) 45%, transparent 72%);
  z-index:1; pointer-events:none;
  animation: glowPulse 2.6s ease-in-out infinite;
}
@keyframes glowPulse{
  0%,100%{ transform: translate(-50%,-50%) scale(0.92); opacity:.75; }
  50%{ transform: translate(-50%,-50%) scale(1.06); opacity:1; }
}

.flip-counter{ display:flex; justify-content:center; align-items:center; gap: 18px; flex-wrap:wrap; margin: 44px 0 22px; }

.flip-sep{
  font-family: var(--serif); font-weight:700; font-size: clamp(1.8rem, 4.6vw, 2.6rem);
  color: var(--gold); align-self:center; margin-top:-30px;
  animation: sepBlink 1s steps(1) infinite;
}
@keyframes sepBlink{ 0%,49%{ opacity:1; } 50%,100%{ opacity:.25; } }
@media (max-width: 640px){ .flip-sep{ display:none; } }
@media (max-width: 480px){
  .flip-counter{ gap: 12px; }
  .flip-value{ font-size: clamp(2rem, 9.5vw, 2.6rem); }
}

.flip-unit{
  display:flex; flex-direction:column; align-items:center;
  transform: scale(var(--rs, 1));
  transition: transform .3s ease, opacity .6s ease, transition-delay 0s;
}
.flip-unit:nth-child(1){ transition-delay: 0s; }
.flip-unit:nth-child(3){ transition-delay: .1s; }
.flip-unit:nth-child(5){ transition-delay: .2s; }
.flip-unit:nth-child(7){ transition-delay: .3s; }
.flip-unit:hover{ transform: translateY(-4px); }

.flip-value{
  display:flex; justify-content:center; gap: 6px;
  font-family: var(--serif); font-weight:700; font-size: clamp(2.3rem, 7.5vw, 3.8rem);
  font-variant-numeric: tabular-nums;
}

/* ---- Realistic mechanical flip card, per digit ---- */
.flip-card{
  position:relative; width: 0.82em; height: 1.32em;
  perspective: 320px;
  border-radius: 6px;
  box-shadow: 0 10px 22px var(--shadow);
}
.flip-card::after{
  content:''; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px;
  background: rgba(0,0,0,.45); z-index:4; pointer-events:none;
}
.fc-layer, .fc-flap{
  position:absolute; left:0; width:100%; height:50%; overflow:hidden;
  background: linear-gradient(160deg, var(--wine) 0%, var(--wine-deep) 100%);
}
.fc-layer .fc-digit, .fc-flap .fc-digit{
  position:absolute; left:0; width:100%; height:200%;
  display:flex; align-items:center; justify-content:center;
  color: var(--gold-light); text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.fc-top{ top:0; border-radius:6px 6px 0 0; box-shadow: inset 0 -1px 0 rgba(0,0,0,.35); }
.fc-top .fc-digit{ top:0; }
.fc-bottom{ bottom:0; border-radius:0 0 6px 6px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.fc-bottom .fc-digit{ top:-100%; }

.fc-flap{ z-index:2; backface-visibility:hidden; }
.fc-flap-top{
  top:0; border-radius:6px 6px 0 0; transform-origin: bottom;
  transform: rotateX(0deg); transition: transform .32s cubic-bezier(.5,0,.5,1);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.35);
}
.fc-flap-top .fc-digit{ top:0; }
.fc-flap-top.flip{ transform: rotateX(-90deg); }

.fc-flap-bottom{
  bottom:0; border-radius:0 0 6px 6px; transform-origin: top;
  transform: rotateX(90deg); transition: transform .32s cubic-bezier(.5,0,.5,1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.fc-flap-bottom .fc-digit{ top:-100%; }
.fc-flap-bottom.flip{ transform: rotateX(0deg); }

.flip-label{ font-size:.68rem; letter-spacing:2px; text-transform:uppercase; color: var(--gold-soft); margin-top:10px; }
.counter-body{
  font-family: var(--serif); color: var(--ink-soft); font-size:1.05rem; line-height:1.8;
  max-width: 560px; margin: 34px auto 0;
}
.counter-caption{ font-family: var(--serif); font-style:italic; color: var(--ink-soft); font-size:1.1rem; margin-top: 18px; }

/* ===================== GALLERY (masonry) ===================== */
#gallery{ background:#fff; }
.masonry{
  column-count: 4; column-gap: 14px;
}
.masonry .m-item{
  break-inside: avoid; margin-bottom: 14px; border-radius: 12px; overflow:hidden;
  position:relative; cursor: pointer; box-shadow: 0 8px 22px var(--shadow);
  transition: transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease, opacity .6s ease;
}
.masonry .m-item:hover{ transform: translateY(-6px) scale(1.015); box-shadow: 0 20px 34px var(--shadow); z-index:2; }
.masonry .m-item img{ width:100%; height:auto; display:block; transition: transform .6s ease; }
.masonry .m-item:hover img{ transform: scale(1.06); }
.masonry .m-item::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(200deg, transparent 60%, rgba(92,15,26,.35));
  opacity:0; transition: opacity .4s ease;
}
.masonry .m-item:hover::after{ opacity:1; }
.masonry .m-item.special{ outline: 2px solid var(--gold); }

@media (max-width: 1000px){ .masonry{ column-count:3; } }
@media (max-width: 680px){ .masonry{ column-count:2; column-gap:10px; } .masonry .m-item{ margin-bottom:10px; border-radius:9px; } }

/* ===================== LIVE MEMORIES ===================== */
.live-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 900px){ .live-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px){ .live-grid{ grid-template-columns: 1fr 1fr; gap:12px; } }

.live-card{
  position:relative; border-radius: 10px; overflow:hidden; aspect-ratio: 3/4;
  background: var(--ink); box-shadow: 0 10px 26px var(--shadow);
  border: 6px solid #fff; border-bottom-width: 26px;
  transform: rotate(var(--r, 0deg)) scale(var(--rs, 1));
  transition: transform .4s ease, box-shadow .4s ease, opacity .8s ease;
}
.live-card:nth-child(4n+1){ --r: -3deg; }
.live-card:nth-child(4n+2){ --r: 2deg; }
.live-card:nth-child(4n+3){ --r: -1.5deg; }
.live-card:nth-child(4n+4){ --r: 3deg; }
.live-card:hover{ transform: rotate(0deg) scale(1.04); box-shadow: 0 20px 36px var(--shadow); z-index:5; }
.live-card img, .live-card video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.live-card video{ opacity:0; transition: opacity .35s ease; }
.live-card.playing video{ opacity:1; }
.live-card.playing img{ opacity:0; }
.live-badge{
  position:absolute; top:8px; left:8px; z-index:2;
  background: rgba(20,4,7,.55); backdrop-filter: blur(3px);
  color: var(--gold-light); font-size:.62rem; letter-spacing:1.5px; text-transform:uppercase;
  padding: 4px 8px; border-radius: 20px; display:flex; align-items:center; gap:4px;
}
.live-badge .dot-live{ width:6px; height:6px; border-radius:50%; background: var(--red-bright); animation: pulseDot 1.4s infinite; }
@keyframes pulseDot{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(1.3);} }

/* ===================== VIDEOS ===================== */
.video-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 900px){ .video-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .video-grid{ grid-template-columns: 1fr; } }

.video-card{
  position:relative; border-radius: 16px; overflow:hidden; aspect-ratio: 9/13;
  background: linear-gradient(150deg, var(--wine), var(--wine-deep));
  box-shadow: 0 14px 30px var(--shadow);
  transform: scale(var(--rs, 1));
  transition: transform .5s cubic-bezier(.2,.7,.3,1), opacity .8s ease;
}
.video-card video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video-play-btn{
  position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%;
  background: rgba(255,255,255,.15); backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.4rem; z-index:2; transition: all .3s ease;
}
.video-play-btn:hover{ background: var(--red-bright); border-color: var(--red-bright); transform: scale(1.08); }
.video-card.playing .video-play-btn{ opacity:0; pointer-events:none; }
.video-card .vc-shimmer{
  position:absolute; inset:0; background: linear-gradient(120deg, transparent 30%, rgba(212,175,55,.18) 50%, transparent 70%);
  background-size: 200% 100%; animation: shimmer 3.2s linear infinite; pointer-events:none;
}
.video-card.playing .vc-shimmer{ display:none; }
@keyframes shimmer{ 0%{ background-position: 200% 0;} 100%{ background-position: -200% 0;} }

/* ===================== ART CAROUSEL ===================== */
.art-carousel-wrap{ position:relative; display:flex; align-items:center; gap: 10px; }
.art-track{
  display:flex; gap: 22px; overflow-x:auto; scroll-behavior:smooth; padding: 30px 10px;
  scrollbar-width:none;
}
.art-track::-webkit-scrollbar{ display:none; }
.art-card{
  flex: 0 0 auto; width: 260px; border-radius: 14px; overflow:hidden;
  box-shadow: 0 16px 32px var(--shadow); border: 4px solid var(--paper);
  transition: transform .4s cubic-bezier(.2,.7,.3,1), opacity .8s ease;
}
.art-card:hover{ transform: translateY(-10px) rotate(-1deg) scale(1.02); }
.art-card img{ width:100%; height: 340px; object-fit:cover; }
.art-arrow{
  flex-shrink:0; width:44px; height:44px; border-radius:50%; background: var(--paper);
  color: var(--wine); box-shadow: 0 6px 16px var(--shadow); font-size: .9rem;
  display:flex; align-items:center; justify-content:center; transition: all .3s ease;
  border: 1px solid rgba(92,15,26,.15);
}
.art-arrow:hover{ background: var(--red-bright); color:#fff; transform: scale(1.1); }
@media (max-width: 600px){ .art-card{ width: 200px; } .art-card img{ height:260px; } }

/* ===================== LETTER ===================== */
#letter{ background: radial-gradient(ellipse at 50% 0%, #fff, var(--cream) 60%); }
.letter-card{
  background: var(--paper); border-radius: 6px; padding: 60px 44px;
  box-shadow: 0 24px 60px var(--shadow);
  position:relative;
  background-image:
    linear-gradient(var(--paper), var(--paper)),
    repeating-linear-gradient(transparent, transparent 34px, rgba(92,15,26,.06) 35px);
  border: 1px solid rgba(212,175,55,.4);
}
@media (max-width: 600px){
  .letter-card{ padding: 46px 22px; }
  .wax-seal{ margin-top: -86px; }
}
.letter-card::before, .letter-card::after{
  content:''; position:absolute; width: 40%; height: 6px; background: rgba(92,15,26,.05);
  filter: blur(6px);
}
.wax-seal{
  width:56px; height:56px; border-radius:50%; margin: -100px auto 20px;
  background: radial-gradient(circle at 35% 30%, var(--red-bright), var(--wine-deep));
  color: var(--gold-light); display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; box-shadow: 0 8px 18px rgba(60,10,15,.5), inset 0 2px 4px rgba(255,255,255,.25);
  border: 2px solid var(--gold);
}
.letter-text{
  font-family: var(--serif); font-style:italic; font-size: clamp(1.05rem, 2.3vw, 1.35rem);
  line-height:1.9; color: var(--ink); text-align:left; white-space:pre-wrap;
  min-height: 260px;
}
.letter-text .cursor{ display:inline-block; width:2px; background: var(--red-bright); animation: blinkCursor .8s step-end infinite; margin-left:2px; }
@keyframes blinkCursor{ 50%{ opacity:0; } }

/* ===================== CLOSING ===================== */
#closing{
  min-height: 100vh; min-height: 100dvh; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, var(--wine-deep), #1a0407);
  overflow:hidden;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.closing-bg{ position:absolute; inset:0; opacity:.5; background-image: radial-gradient(circle, var(--gold) 1px, transparent 1.5px); background-size: 42px 42px; animation: driftStars 60s linear infinite; }
@keyframes driftStars{ from{ background-position:0 0;} to{ background-position: 500px 500px; } }
.closing-title{ font-family: var(--script); font-size: clamp(2.2rem, 6vw, 4rem); color: var(--gold-light); text-shadow: 0 0 30px rgba(212,175,55,.4); }
.closing-line{ font-family: var(--serif); font-style:italic; color: var(--cream); opacity:.85; margin: 14px 0 6px; font-size:1.05rem; }
.closing-choose{
  font-family: var(--script); font-size: clamp(2.6rem, 6vw, 4.2rem); color: var(--red-bright);
  margin: 10px 0 28px; text-shadow: 0 0 26px rgba(200,40,63,.45);
  animation: heartbeat 2.4s ease-in-out infinite;
}
.closing-timeline{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: 10px 16px;
  font-family: var(--serif); font-style:italic; color: var(--gold-light); font-size:1rem;
  margin-bottom: 46px; max-width: 420px; margin-left:auto; margin-right:auto;
}
.closing-timeline span{ opacity:0; animation: fadeUp .8s ease forwards; }
.closing-timeline span:nth-child(1){ animation-delay: .1s; }
.closing-timeline span:nth-child(2){ animation-delay: .5s; }
.closing-timeline span:nth-child(3){ animation-delay: .9s; }
.closing-timeline span:nth-child(4){ animation-delay: 1.3s; }
#surprise-btn{
  padding: 16px 40px; border-radius: 40px; font-size: 1rem; letter-spacing:1px;
  background: linear-gradient(120deg, var(--gold-soft), var(--gold-light));
  color: var(--wine-deep); font-weight:600; box-shadow: 0 10px 26px rgba(212,175,55,.35);
  transition: all .3s ease;
}
#surprise-btn:hover{ transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 34px rgba(212,175,55,.5); }
.closing-footer{ margin-top: 70px; color: rgba(255,248,236,.5); font-size:.75rem; letter-spacing:1px; }

/* ===================== POPUP ===================== */
.popup-overlay{
  position:fixed; inset:0; z-index: 8500; background: rgba(20,4,7,.82);
  display:flex; align-items:center; justify-content:center; padding: 24px;
  opacity:0; visibility:hidden; transition: opacity .4s ease, visibility .4s ease;
}
.popup-overlay.open{ opacity:1; visibility:visible; }
.popup-card{
  position:relative; max-width: 460px; width:100%; max-height: 86vh; overflow-y:auto;
  background: var(--paper); border-radius: 10px; padding: 60px 34px 34px;
  box-shadow: 0 30px 70px rgba(0,0,0,.55); border: 1px solid rgba(212,175,55,.4);
  text-align:center; transform: scale(.92); transition: transform .4s ease;
}
.popup-overlay.open .popup-card{ transform: scale(1); }
.popup-title{ font-family: var(--serif); font-style:italic; font-weight:600; color: var(--wine-deep); font-size: 1.6rem; margin-bottom: 18px; }
.popup-text{ font-family: var(--serif); font-style:italic; color: var(--ink); font-size:1.02rem; line-height:1.7; margin-bottom:16px; }
.popup-choose{
  font-family: var(--script); font-size: clamp(1.8rem, 5vw, 2.4rem); color: var(--red-bright);
  margin: 6px 0 20px; text-shadow: 0 0 20px rgba(200,40,63,.3);
}
.popup-list{ font-family: var(--serif); font-weight:600; color: var(--red-bright); font-size:1.08rem; line-height:2; margin-bottom:16px; }
.popup-sign{ font-family: var(--script); color: var(--red-bright); font-size:1.5rem; margin: 22px 0 26px; line-height:1.3; }
#popup-close{
  padding: 12px 30px; border-radius: 30px; font-size:.85rem; letter-spacing:.5px;
  background: linear-gradient(120deg, var(--wine), var(--wine-deep)); color: var(--gold-light);
  box-shadow: 0 10px 22px rgba(60,10,15,.35); transition: transform .3s ease, box-shadow .3s ease;
}
#popup-close:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(60,10,15,.5); }

/* ===================== FINALE ===================== */
.finale-overlay{
  position:fixed; inset:0; z-index: 9000; background:#000;
  display:flex; align-items:center; justify-content:center; padding: 40px;
  opacity:0; visibility:hidden; transition: opacity .8s ease, visibility .8s ease;
}
.finale-overlay.open{ opacity:1; visibility:visible; }
.finale-text{
  font-family: var(--serif); font-style:italic; color: var(--gold-light); text-align:center;
  font-size: clamp(1.2rem, 3vw, 1.9rem); line-height:1.9; white-space:pre-wrap; max-width: 640px;
}
.finale-text .cursor{ display:inline-block; width:2px; background: var(--gold-light); animation: blinkCursor .8s step-end infinite; margin-left:2px; }
.finale-close{
  position:absolute; top: calc(24px + env(safe-area-inset-top, 0px)); right: calc(24px + env(safe-area-inset-right, 0px));
  color: var(--gold-light); font-size: 2rem; line-height:1; padding: 8px; opacity:0; transition: opacity .3s ease, color .2s ease;
}
.finale-overlay.open .finale-close{ opacity:.7; transition-delay: .8s; }
.finale-close:hover{ opacity:1; color:#fff; }

/* ===================== LIGHTBOX ===================== */
.lightbox{
  position:fixed; inset:0; z-index: 8000; background: rgba(20,4,7,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition: opacity .35s ease, visibility .35s ease;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox img{ max-width: 88vw; max-height: 86vh; border-radius: 8px; box-shadow: 0 30px 70px rgba(0,0,0,.6); }
.lightbox-close{
  position:absolute; top: calc(22px + env(safe-area-inset-top, 0px)); right: calc(30px + env(safe-area-inset-right, 0px));
  color: var(--gold-light); font-size: 2.2rem; line-height:1; padding: 8px; z-index:2;
}
.lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); color: var(--gold-light); font-size:1.6rem; padding: 14px 18px; transition: color .2s ease, transform .2s ease; }
.lightbox-nav:hover{ color:#fff; }
.lightbox-prev{ left: 8px; } .lightbox-next{ right: 8px; }
@media (max-width: 600px){ .lightbox-nav{ padding: 10px 12px; } }

/* ===================== Confetti ===================== */
#confetti-canvas-wrap{ position:fixed; inset:0; pointer-events:none; z-index: 7000; }
#confetti-canvas{ width:100%; height:100%; }

/* ===================== Section separators / bg alternation ===================== */
#live{ background: linear-gradient(180deg, #fff, #fff5e9); }
#videos{ background: #fff5e9; }
#art{ background: linear-gradient(180deg, #fff5e9, #fff); }