/* =========================================
   MASIKO & LOVENESS – Main Styles
   ========================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Premium Gold & Emerald Theme ── */
  --cream:   #faf6f0;
  --warm:    #f5efe3;
  --emerald: #0f4c3a;
  --emerald-l: #1a6b51;
  --emerald-d: #0a3329;
  --emerald-xl: #d4f0e6;
  --gold:    #d4af37;
  --gold-l:  #f0d98d;
  --gold-d:  #b8941f;
  --text:    #2c3e2e;
  --text-l:  #5a7a5a;
  --white:   #ffffff;
  --dark:    #0a1f1a;
  --shadow:  0 6px 30px rgba(212, 175, 55, 0.25);
  --font:    'Cormorant Garamond', Georgia, serif;
  --script:  'Cormorant Garamond', Georgia, serif;

  /* Legacy aliases for backward compatibility */
  --blue:    #0f4c3a;
  --blue-l:  #1a6b51;
  --blue-d:  #0a3329;
  --blue-xl: #d4f0e6;
  --brown:   #d4af37;
  --brown-l: #f0d98d;
  --brown-d: #b8941f;
}
html { scroll-behavior: smooth; }
body {
  background: linear-gradient(160deg, #faf6f0 0%, #f5efe3 30%, #ebe3d5 60%, #faf6f0 100%);
  background-attachment: fixed;
  font-family: var(--font); 
  color: var(--text); 
  min-height: 100vh;
  position: relative;
}

/* Premium gold shimmer effect */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(212, 175, 55, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(212, 175, 55, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(15, 76, 58, 0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: shimmer 15s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ══════════════════════════════
   SPLASH / ENVELOPE SCREEN
══════════════════════════════ */
.splash {
  position: fixed; inset: 0; z-index: 9999;
  background: linear-gradient(135deg, #0a3329 0%, #0f4c3a 50%, #0a3329 100%);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.splash.exit {
  opacity: 0; pointer-events: none;
  transform: scale(1.06);
}

/* floating gold petals */
.petals { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.petal {
  position: absolute; color: #f0d98d; opacity: 0;
  font-size: clamp(0.8rem, 2vw, 1.4rem);
  animation: floatPetal 6s ease-in-out infinite;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}
.p1{left:8%;top:15%;animation-delay:0s;   animation-duration:7s;}
.p2{left:20%;top:70%;animation-delay:1s;  animation-duration:8s;}
.p3{left:80%;top:20%;animation-delay:0.5s;animation-duration:6s;}
.p4{left:88%;top:75%;animation-delay:2s;  animation-duration:9s;}
.p5{left:45%;top:5%; animation-delay:1.5s;animation-duration:7s;}
.p6{left:60%;top:90%;animation-delay:0.8s;animation-duration:8s;}
.p7{left:5%; top:50%;animation-delay:3s;  animation-duration:6s;}
.p8{left:75%;top:45%;animation-delay:2.5s;animation-duration:7s;}
@keyframes floatPetal {
  0%   { opacity:0; transform: translateY(0) rotate(0deg); }
  20%  { opacity: 0.6; }
  80%  { opacity: 0.4; }
  100% { opacity:0; transform: translateY(-60px) rotate(360deg); }
}

/* envelope wrap */
.envelope-wrap {
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer; user-select: none;
  animation: envFloat 3s ease-in-out infinite;
}
@keyframes envFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* envelope body */
.envelope {
  position: relative;
  width: clamp(280px, 70vw, 480px);
  height: clamp(190px, 48vw, 330px);
  border-radius: 12px;
  filter: drop-shadow(0 20px 50px rgba(0,0,0,0.7));
}

/* back panel - Premium gold gradient */
.env-back {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #d4af37 0%, #f0d98d 50%, #d4af37 100%);
  border-radius: 12px;
  border: 2px solid rgba(212, 175, 55, 0.6);
  box-shadow: 
    0 0 30px rgba(212, 175, 55, 0.4),
    inset 0 0 60px rgba(240, 217, 141, 0.3);
}

/* front face */
.env-front {
  position: absolute; inset: 0;
  background: linear-gradient(145deg, #d6ecf8 0%, #b8d8ee 50%, #9ec8e0 100%);
  border-radius: 12px;
  border: 1px solid rgba(120,190,230,0.5);
  overflow: hidden;
}

/* diagonal fold lines on front */
.env-line {
  position: absolute; background: rgba(150,120,70,0.18);
  transform-origin: center center;
  height: 1px;
}
.el1 { width: 141%; top: 50%; left: -20%; transform: rotate(35deg); }
.el2 { width: 141%; top: 50%; left: -20%; transform: rotate(-35deg); }
.el3 { width: 141%; top: 50%; left: -20%; transform: rotate(37deg); opacity:0.1; }
.el4 { width: 141%; top: 50%; left: -20%; transform: rotate(-37deg); opacity:0.1; }

/* flap */
.env-flap {
  position: absolute; top: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(170deg, #e0f0fb 0%, #b8d8ee 100%);
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
  border-radius: 12px 12px 0 0;
  transform-origin: top center;
  transform: rotateX(0deg);
  transition: transform 0.7s cubic-bezier(0.4,0,0.2,1);
  z-index: 3;
  border-top: 1px solid rgba(120,190,230,0.5);
  border-left: 1px solid rgba(120,190,230,0.5);
  border-right: 1px solid rgba(120,190,230,0.5);
}
.env-flap .flap-fold {
  position: absolute; height: 1px;
  background: rgba(150,120,70,0.15);
  width: 120%; left: -10%;
}
.flap-fold.fl1 { top: 40%; transform: rotate(-3deg); }
.flap-fold.fl2 { top: 70%; transform: rotate(2deg); }
.envelope.opening .env-flap {
  transform: rotateX(-170deg);
}

/* wax seal */
.wax-seal {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(70px, 16vw, 110px);
  height: clamp(70px, 16vw, 110px);
  background: radial-gradient(circle at 35% 35%, #f0c030 0%, #c8902a 45%, #9a6818 100%);
  border-radius: 50%;
  z-index: 4;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(0,0,0,0.5), inset 0 1px 4px rgba(255,220,100,0.4);
  clip-path: polygon(50% 0%,61% 12%,76% 6%,74% 22%,90% 24%,82% 37%,96% 46%,84% 55%,90% 70%,74% 71%,73% 87%,59% 81%,50% 94%,41% 81%,27% 87%,26% 71%,10% 70%,16% 55%,4% 46%,18% 37%,10% 24%,26% 22%,24% 6%,39% 12%);
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.envelope.opening .wax-seal {
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0.5;
}
.seal-inner {
  font-family: var(--font);
  font-size: clamp(0.9rem, 2.5vw, 1.4rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #5c3208;
  text-shadow: 0 1px 2px rgba(255,200,50,0.3);
}

/* tap hint */
.tap-hint {
  margin-top: 32px;
  font-family: var(--font);
  font-size: clamp(0.75rem, 2vw, 0.95rem);
  letter-spacing: 0.35em;
  color: var(--gold-l);
  text-transform: uppercase;
  opacity: 0.85;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity: 0.85; }
  50%      { opacity: 0.4; }
}

/* ══════════════════════════════
   MAIN SITE
══════════════════════════════ */
.main-site { background: transparent; }
.main-site.hidden {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  left: -9999px;
}
.main-site.reveal {
  animation: siteReveal 0.9s ease forwards;
}
@keyframes siteReveal {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* NAVBAR */
.navbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(232,244,253,0.96);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid rgba(26,111,168,0.15);
  padding: 16px 48px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.navbar-brand {
  font-family: var(--font); font-size: 0.95rem;
  font-weight: 500; letter-spacing: 0.28em;
  color: var(--blue-d); text-transform: uppercase;
}
.navbar-links { display: flex; gap: 30px; }
.navbar-links a {
  font-family: var(--font); font-size: 0.9rem;
  letter-spacing: 0.1em; color: var(--text);
  text-decoration: none; padding-bottom: 3px;
  border-bottom: 1.5px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.navbar-links a.active, .navbar-links a:hover {
  color: var(--blue-d); border-bottom-color: var(--blue);
}

/* hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--blue); border-radius: 2px; transition: transform 0.25s, opacity 0.25s; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════════════════════════════
   HERO SECTION
══════════════════════════════ */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #e8f4fd 0%, #c2e0f4 50%, #d6ecf8 100%);
  background-size: cover; background-position: center top;
  transition: background-image 0.6s ease;
}
/* when a photo IS uploaded, add a dark overlay so text stays readable */
.hero-bg.has-photo + .hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0,20,50,0.45) 0%,
    rgba(0,20,50,0.20) 50%,
    rgba(0,20,50,0.65) 100%
  );
}
.hero-overlay {
  position: absolute; inset: 0;
  background: transparent;
  transition: background 0.4s;
}
.branch-left  { position: absolute; top: 0; left: 0; width: 260px; pointer-events: none; z-index: 1; }
.branch-right { position: absolute; bottom: 0; right: 0; width: 220px; pointer-events: none; z-index: 1; transform: scaleX(-1) scaleY(-1); }

/* When photo loaded, branches go white */
.hero.has-photo .branch-left  path,
.hero.has-photo .branch-left  ellipse,
.hero.has-photo .branch-right path,
.hero.has-photo .branch-right ellipse {
  stroke: #fff;
  fill: #fff;
}
.corner-deco {
  position: absolute; color: rgba(26,111,168,0.25);
  pointer-events: none; z-index: 1;
}
.top-right { top: 24px;  right: 36px; transform: rotate(45deg); }
.bot-left  { bottom: 24px; left: 36px; transform: rotate(-135deg); }

.hero-content {
  position: relative; z-index: 2;
  text-align: center; padding: 40px 32px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  border: 1px solid rgba(26,111,168,0.18);
  box-shadow: 0 8px 40px rgba(26,111,168,0.12);
  max-width: 560px;
  margin: 0 auto;
}
/* Remove glass card when photo is loaded — names float over photo */
.hero.has-photo .hero-content {
  background: transparent;
  backdrop-filter: none;
  border: none;
  box-shadow: none;
}
.hero-pre {
  font-family: var(--font); font-size: 0.82rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--blue-d); margin-bottom: 18px; opacity: 0.75;
}
.script-name {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-size: clamp(3rem, 9vw, 5.5rem);
  font-weight: 300;
  font-style: italic;
  color: var(--blue-d);
  line-height: 1.15;
  letter-spacing: 0.06em;
  display: block;
}
.and-ornament {
  font-family: var(--font); font-size: 1.4rem;
  color: var(--blue); margin: 10px 0; letter-spacing: 0.2em;
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.ao-line {
  display: inline-block; height: 1px; width: 48px;
  background: var(--blue); opacity: 0.45; flex-shrink: 0;
}
.ao-text {
  font-family: var(--font); font-size: 1.3rem; font-weight: 400;
  color: var(--blue); letter-spacing: 0.1em;
}

/* When photo loaded — ornament goes gold */
.hero.has-photo .and-ornament   { color: var(--gold-l); }
.hero.has-photo .ao-line        { background: var(--gold-l); opacity: 0.6; }
.hero.has-photo .ao-text        { color: var(--gold-l); }
.hero-date-badge {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 24px; padding: 10px 24px;
  border: 1px solid rgba(26,111,168,0.35);
  border-radius: 2px; background: rgba(255,255,255,0.55);
  backdrop-filter: blur(4px);
  font-family: var(--font); font-size: 0.88rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--blue-d);
}
.hero-date-badge .dot { color: var(--blue-l); }
.hero-cta {
  display: inline-block; margin-top: 28px;
  padding: 13px 36px;
  background: var(--blue); color: #fff;
  font-family: var(--font); font-size: 0.85rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  text-decoration: none; border-radius: 4px;
  transition: background 0.2s, transform 0.15s;
  box-shadow: 0 4px 16px rgba(26,111,168,0.35);
}
.hero-cta:hover { background: var(--blue-d); transform: translateY(-2px); }

/* When a photo is loaded: white text (dark overlay active) */
.hero.has-photo .hero-pre       { color: rgba(255,255,255,0.75); }
.hero.has-photo .script-name    { color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,0.6); font-style: italic; }
.hero.has-photo .and-ornament   { color: var(--gold-l); }
.hero.has-photo .ao-line        { background: var(--gold-l); opacity: 0.6; }
.hero.has-photo .ao-text        { color: var(--gold-l); }
.hero.has-photo .hero-date-badge { background: rgba(0,0,0,0.25); border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.85); }
.hero.has-photo .hero-date-badge .dot { color: var(--gold-l); }
.hero.has-photo .hero-cta       { background: var(--gold); box-shadow: 0 4px 16px rgba(200,149,42,0.4); }
.hero.has-photo .hero-cta:hover { background: var(--gold-l); }
.hero.has-photo .corner-deco    { color: rgba(200,149,42,0.5); }

.scroll-hint {
  position: absolute; bottom: 28px; left: 50%;
  transform: translateX(-50%); z-index: 2;
}
.scroll-hint span {
  display: block; width: 1px; height: 48px;
  background: linear-gradient(to bottom, rgba(26,111,168,0) 0%, rgba(26,111,168,0.6) 100%);
  margin: 0 auto;
  animation: scrollDrop 1.8s ease-in-out infinite;
}
.hero.has-photo .scroll-hint span {
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 100%);
}
@keyframes scrollDrop {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ══════════════════════════════
   COUNTDOWN
══════════════════════════════ */
.date-section {
  position: relative; text-align: center;
  padding: 60px 24px 64px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(6px);
  overflow: hidden;
}
.deco-leaf {
  position: absolute;
  color: rgba(160,120,80,0.12); pointer-events: none;
}
.dl-tl { top: 16px; left: 20px; transform: rotate(-30deg); }
.dl-tr { top: 16px; right: 20px; transform: rotate(30deg); }

.wedding-date {
  font-family: var(--font); font-size: clamp(1.2rem, 3.5vw, 1.8rem);
  font-weight: 400; letter-spacing: 0.32em; color: var(--brown);
  text-transform: uppercase; margin-bottom: 8px;
}
.venue {
  font-family: var(--font); font-size: 0.95rem;
  letter-spacing: 0.08em; color: var(--text-l); margin-bottom: 36px;
}
.countdown {
  display: flex; justify-content: center;
  align-items: center; gap: 8px; flex-wrap: wrap;
}
.count-item { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.count-item span {
  font-family: var(--font); font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 300; color: var(--brown); letter-spacing: 0.06em; line-height: 1;
}
.count-item label {
  font-family: var(--font); font-size: 0.72rem;
  letter-spacing: 0.2em; color: var(--text-l);
  text-transform: uppercase; margin-top: 5px;
}
.count-sep {
  font-family: var(--font); font-size: 2rem; color: var(--brown-l);
  opacity: 0.4; line-height: 1; margin-bottom: 18px;
}

/* ══════════════════════════════
   ORNAMENT DIVIDERS
══════════════════════════════ */
.ornament-divider {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; padding: 12px 40px; background: var(--cream);
}
.od-line { flex: 1; max-width: 180px; height: 1px; background: rgba(160,120,80,0.25); }
.od-symbol { 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brown-l); 
  opacity: 0.7; 
}

/* section-pre label */
.section-pre {
  font-family: var(--script); font-size: 1.6rem;
  color: var(--brown-l); display: block;
  text-align: center; margin-bottom: 4px;
}

/* ══════════════════════════════
   STORY
══════════════════════════════ */
.story-section {
  max-width: 780px; margin: 0 auto;
  padding: 48px 32px 64px; text-align: center;
  background: transparent;
}
.story-title {
  font-family: var(--font); font-size: clamp(0.88rem, 2.2vw, 1.1rem);
  font-weight: 500; letter-spacing: 0.22em; color: var(--brown);
  text-transform: uppercase; margin-bottom: 24px; line-height: 1.6;
}
.story-quote {
  font-family: var(--font); font-style: italic; font-size: 1.05rem;
  color: var(--text); border: none;
  margin: 0 auto 28px; max-width: 660px; line-height: 1.9; letter-spacing: 0.02em;
}
.story-body {
  font-family: var(--font); font-size: 1rem;
  color: var(--text); line-height: 1.95; max-width: 680px; margin: 0 auto;
}

/* ══════════════════════════════
   GALLERY
══════════════════════════════ */
.gallery-section {
  padding: 24px 32px 72px; text-align: center; background: rgba(255,255,255,0.45);
  backdrop-filter: blur(4px);
}
.section-heading {
  font-family: var(--font); font-size: clamp(1.1rem, 3vw, 1.65rem);
  font-weight: 400; letter-spacing: 0.36em; color: var(--brown);
  text-transform: uppercase; margin-bottom: 10px;
}
.registry-note {
  font-family: var(--font); font-size: 0.97rem; color: var(--text-l);
  max-width: 560px; margin: 0 auto 36px; line-height: 1.8; letter-spacing: 0.02em;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px; max-width: 960px; margin: 0 auto;
}
.gallery-item {
  position: relative; aspect-ratio: 3/4;
  border-radius: 4px; overflow: hidden;
  cursor: pointer; background: var(--cream);
  border: 1px solid rgba(160,120,80,0.2);
  box-shadow: var(--shadow);
  transition: transform 0.25s, box-shadow 0.25s;
}
.gallery-item:first-child {
  grid-column: span 2; grid-row: span 2;
  aspect-ratio: 1;
}
.gallery-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease;
}
.gallery-item:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(120,80,50,0.22); }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item .gi-overlay {
  position: absolute; inset: 0; background: rgba(30,15,5,0); display: flex;
  align-items: flex-end; padding: 14px;
  transition: background 0.3s;
}
.gallery-item:hover .gi-overlay { background: rgba(30,15,5,0.35); }
.gi-caption {
  font-family: var(--font); font-size: 0.78rem; letter-spacing: 0.1em;
  color: #fff; opacity: 0; transform: translateY(6px);
  transition: opacity 0.3s, transform 0.3s;
}
.gallery-item:hover .gi-caption { opacity: 1; transform: translateY(0); }

/* empty placeholder */
.gallery-placeholder {
  grid-column: 1 / -1; padding: 60px 20px;
  font-family: var(--font); font-size: 1rem;
  color: var(--text-l); font-style: italic; letter-spacing: 0.05em;
}
.gallery-placeholder span { font-size: 2rem; display: block; margin-bottom: 10px; opacity: 0.4; }

/* LIGHTBOX */
.lightbox {
  position: fixed; inset: 0; z-index: 8000;
  background: rgba(10,5,2,0.95);
  display: none; align-items: center; justify-content: center;
  flex-direction: column;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 90vw; max-height: 82vh;
  object-fit: contain; border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.lb-caption {
  font-family: var(--font); font-size: 0.9rem; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6); margin-top: 16px; font-style: italic;
}
.lb-close {
  position: absolute; top: 20px; right: 24px;
  background: none; border: 1px solid rgba(255,255,255,0.3);
  color: #fff; width: 36px; height: 36px;
  border-radius: 50%; cursor: pointer; transition: background 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.lb-close:hover { background: rgba(255,255,255,0.1); }
.lb-prev, .lb-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2);
  color: #fff; width: 48px; height: 48px;
  border-radius: 50%; cursor: pointer; transition: background 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
.lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,0.18); }

/* ══════════════════════════════
   SCHEDULE / TIMELINE
══════════════════════════════ */
.schedule-section {
  padding: 24px 32px 72px; text-align: center; background: transparent;
}
.timeline {
  max-width: 580px; margin: 0 auto; text-align: left; position: relative;
}
.timeline::before {
  content: ''; position: absolute; left: 23px; top: 8px; bottom: 8px;
  width: 1px; background: rgba(160,120,80,0.28);
}
.timeline-item {
  display: flex; gap: 24px; align-items: flex-start;
  margin-bottom: 36px; position: relative;
}
.timeline-dot {
  width: 12px; height: 12px; background: var(--gold); border-radius: 50%;
  flex-shrink: 0; margin-top: 4px; position: relative; z-index: 1;
  box-shadow: 0 0 0 3px rgba(200,149,42,0.2); margin-left: 18px;
}
.timeline-time {
  font-family: var(--font); font-size: 0.76rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 2px;
}
.timeline-event {
  font-family: var(--font); font-size: 1.05rem; color: var(--brown);
  font-weight: 500; letter-spacing: 0.05em; margin-bottom: 3px;
}
.timeline-desc {
  font-family: var(--font); font-size: 0.9rem; color: var(--text-l);
  font-style: italic; line-height: 1.6;
}

/* ══════════════════════════════
   REGISTRY
══════════════════════════════ */
.registry-section {
  padding: 24px 32px 72px; text-align: center; background: rgba(255,255,255,0.45);
  backdrop-filter: blur(4px);
}
.registry-cards {
  display: flex; gap: 24px; justify-content: center;
  flex-wrap: wrap; max-width: 880px; margin: 0 auto;
}
.registry-card {
  background: var(--cream); border: 1px solid rgba(160,120,80,0.2);
  border-radius: 6px; padding: 36px 28px;
  flex: 1 1 220px; max-width: 260px;
  transition: box-shadow 0.2s, transform 0.2s;
  position: relative; overflow: hidden;
}
.registry-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: linear-gradient(90deg, var(--gold), var(--brown-l));
}
.registry-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.registry-icon { 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px; 
}
.registry-card h4 {
  font-family: var(--font); font-size: 0.95rem; font-weight: 500;
  letter-spacing: 0.15em; color: var(--brown); text-transform: uppercase; margin-bottom: 10px;
}
.registry-card p { font-family: var(--font); font-size: 0.9rem; color: var(--text-l); line-height: 1.7; }

/* ══════════════════════════════
   FORM ELEMENTS (shared)
══════════════════════════════ */
.form-row { display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.form-group { flex: 1 1 200px; display: flex; flex-direction: column; gap: 6px; }
.form-group.full { flex: 1 1 100%; margin-bottom: 20px; }
.form-group label {
  font-family: var(--font); font-size: 0.78rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--brown); font-weight: 500;
}
.req { color: #c0634d; }
.form-group input, .form-group select, .form-group textarea {
  font-family: var(--font); font-size: 0.97rem; color: var(--text);
  background: #fff; border: 2px solid rgba(26,111,168,0.2);
  border-radius: 8px; padding: 12px 16px; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  width: 100%; resize: vertical;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--blue); 
  box-shadow: 0 0 0 4px rgba(26,111,168,0.12);
  background: #fff;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-l); opacity: 0.65; }
.form-error {
  background: #fdf0ec; border: 1px solid #e0a090; border-radius: 4px;
  color: #a04030; font-family: var(--font); font-size: 0.88rem;
  padding: 12px 16px; margin-bottom: 16px; letter-spacing: 0.02em;
}
.btn-submit {
  display: block; width: 100%; padding: 18px 28px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-d) 100%);
  color: #fff; font-family: var(--font); font-size: 0.95rem;
  letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600;
  border: none; border-radius: 8px; cursor: pointer;
  transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s; margin-top: 12px;
  box-shadow: 0 6px 20px rgba(26,111,168,0.4);
}
.btn-submit:hover { 
  opacity: 0.9; 
  transform: translateY(-2px); 
  box-shadow: 0 8px 24px rgba(26,111,168,0.5);
}
.btn-submit:active { transform: translateY(0); }

/* shared btn-download / btn-back */
.btn-download {
  display: inline-block; padding: 13px 28px;
  background: linear-gradient(135deg, var(--gold) 0%, #a87020 100%);
  color: #fff; font-family: var(--font); font-size: 0.88rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  border: none; border-radius: 4px; cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  box-shadow: 0 4px 14px rgba(180,120,30,0.35);
}
.btn-download:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-back {
  display: inline-block; background: none;
  border: 1px solid rgba(160,120,80,0.4); color: var(--text-l);
  font-family: var(--font); font-size: 0.85rem; letter-spacing: 0.1em;
  padding: 11px 22px; border-radius: 4px; cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.btn-back:hover { border-color: var(--brown); color: var(--brown); }

/* ══════════════════════════════
   FOOTER
══════════════════════════════ */
.footer-branch { text-align: center; padding: 40px 0 16px; background: rgba(255,255,255,0.3); }
.footer-branch svg { width: clamp(200px,50vw,340px); height: auto; }
.site-footer {
  background: rgba(13,79,122,0.9);
  backdrop-filter: blur(8px);
  text-align: center;
  padding: 32px 24px 48px; border-top: 1px solid rgba(74,159,212,0.3);
}
.footer-logo {
  font-family: var(--font); font-size: 1rem; letter-spacing: 0.28em;
  color: #fff; text-transform: uppercase; margin-bottom: 6px;
}
.footer-tagline {
  font-family: var(--font); font-size: 0.9rem; font-style: italic;
  color: rgba(255,255,255,0.7); margin-bottom: 18px;
}
.footer-nav { display: flex; justify-content: center; gap: 28px; margin-bottom: 18px; flex-wrap: wrap; }
.footer-nav a {
  font-family: var(--font); font-size: 0.82rem; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.7); text-decoration: none; text-transform: uppercase; transition: color 0.2s;
}
.footer-nav a:hover { color: #fff; }
.footer-copy { font-family: var(--font); font-size: 0.76rem; color: rgba(255,255,255,0.5); }
.admin-link {
  display: inline-block; margin-top: 18px; font-family: var(--font);
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.2); text-decoration: none; transition: color 0.2s;
}
.admin-link:hover { color: rgba(255,255,255,0.6); }

/* ══════════════════════════════
   FADE-IN + TOAST + RESPONSIVE
══════════════════════════════ */
.fade-in { opacity: 0; transform: translateY(28px); transition: opacity 0.75s ease, transform 0.75s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

.toast {
  position: fixed; bottom: 28px; right: 28px;
  background: var(--brown); color: var(--cream);
  font-family: var(--font); font-size: 0.9rem; letter-spacing: 0.06em;
  padding: 14px 22px; border-radius: 4px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.3s, transform 0.3s; z-index: 9999; max-width: 300px;
}
.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 600px) {
  .hamburger { display: flex; }
  .navbar-links {
    display: none; flex-direction: column; gap: 0; position: absolute;
    top: 100%; left: 0; right: 0; background: var(--cream);
    border-bottom: 1px solid rgba(160,120,80,0.18); padding: 0 24px 16px; z-index: 99;
  }
  .navbar-links.open { display: flex; }
  .navbar-links a { padding: 12px 0; border-bottom: 1px solid rgba(160,120,80,0.1); }
  .navbar { position: sticky; top: 0; flex-wrap: nowrap; }
  .hero { min-height: 100svh; }
  .gallery-item:first-child { grid-column: span 1; grid-row: span 1; }
  .form-row { flex-direction: column; gap: 16px; }
  .form-group { flex: 1 1 100%; }
  .success-message { padding: 40px 20px; }
  .lb-prev { left: 6px; } .lb-next { right: 6px; }
}

/* ══════════════════════════════════════════
   INVITATION CARD — RSVP SECTION
══════════════════════════════════════════ */
.register-section {
  padding: 60px 20px 80px;
  background: linear-gradient(160deg, #061a2e 0%, #0d3a5c 50%, #061a2e 100%);
  position: relative; overflow: hidden;
}

/* subtle background texture dots */
.register-section::before {
  content: '✦ ✿ ✦ ✿ ✦ ✿ ✦ ✿ ✦ ✿ ✦ ✿ ✦ ✿ ✦ ✿ ✦ ✿ ✦';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; letter-spacing: 2.5rem;
  color: rgba(200,149,42,0.04);
  word-break: break-all; line-height: 3.5rem;
  pointer-events: none;
}

/* ── THE CARD ── */
.invite-card {
  max-width: 720px; margin: 0 auto;
  border-radius: 16px; overflow: hidden;
  box-shadow:
    0 4px 0 rgba(74,159,212,0.5),
    0 -4px 0 rgba(74,159,212,0.5),
    0 35px 100px rgba(0,0,0,0.75),
    0 0 0 1px rgba(74,159,212,0.35);
  position: relative; z-index: 1;
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

.invite-card:hover {
  transform: translateY(-4px);
}

/* ── CARD HEADER ── */
.card-header {
  position: relative; min-height: 360px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #0d3a5c 0%, #1a6fa8 50%, #0d3a5c 100%);
  background-size: cover; background-position: center;
  overflow: hidden;
}
.card-header-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(6,26,46,0.55) 0%,
    rgba(6,26,46,0.35) 40%,
    rgba(6,26,46,0.75) 100%
  );
}

/* corner decorations on card header */
.card-corner {
  position: absolute; color: rgba(74,159,212,0.8);
  opacity: 0.85; z-index: 2;
  text-shadow: 0 0 10px rgba(74,159,212,0.6);
}
.cc-tl { top: 18px;    left: 18px; }
.cc-tr { top: 18px;    right: 18px; }
.cc-bl { bottom: 18px; left: 18px; }
.cc-br { bottom: 18px; right: 18px; }
.card-corner svg { width: 1.5rem; height: 1.5rem; }

/* inner border frame */
.card-frame {
  position: absolute; inset: 16px;
  border: 2px solid rgba(74,159,212,0.45);
  border-radius: 8px; pointer-events: none; z-index: 2;
  box-shadow: inset 0 0 20px rgba(74,159,212,0.15);
}

.card-header-content {
  position: relative; z-index: 3;
  text-align: center; padding: 48px 36px;
}
.card-header-pre {
  font-family: var(--font); font-size: 0.8rem;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(255,255,255,0.75); margin-bottom: 18px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.card-header-names {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.4rem, 6.5vw, 4rem);
  font-style: italic; font-weight: 300;
  color: #fff; line-height: 1.2;
  text-shadow: 0 2px 25px rgba(0,0,0,0.7), 0 0 40px rgba(74,159,212,0.4);
  letter-spacing: 0.03em;
}
.card-header-date {
  font-family: var(--font); font-size: 0.88rem;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(125,211,252,0.95); margin-top: 16px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.card-header-ornament {
  letter-spacing: 0.25em;
  color: rgba(74,159,212,0.7); margin: 16px 0;
  text-shadow: 0 0 12px rgba(74,159,212,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.card-header-sub {
  font-family: var(--font); font-size: 0.82rem;
  letter-spacing: 0.12em; color: rgba(255,255,255,0.65);
  font-style: italic;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

/* ── CARD BODY ── */
.card-body {
  background: linear-gradient(to bottom, #ffffff 0%, #fafcfe 100%);
  padding: 0;
  box-shadow: inset 0 8px 16px rgba(26,111,168,0.04);
}

/* ── STEP 1: Attendance choice ── */
.attend-choice {
  padding: 44px 40px 40px;
  text-align: center;
  border-bottom: 1px solid rgba(26,111,168,0.12);
}
.choice-label {
  font-family: var(--font); font-size: 1.15rem;
  letter-spacing: 0.08em; color: var(--blue-d);
  margin-bottom: 32px; font-style: italic;
  font-weight: 500;
}
.choice-btns {
  display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;
}
.choice-btn {
  flex: 1 1 220px; max-width: 260px;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 32px 24px;
  border: 2px solid rgba(26,111,168,0.25);
  border-radius: 12px; 
  background: linear-gradient(135deg, #ffffff 0%, #f5fafd 100%);
  cursor: pointer; transition: all 0.3s ease;
  font-family: var(--font);
  box-shadow: 0 4px 12px rgba(26,111,168,0.08);
}
.choice-btn:hover { 
  transform: translateY(-6px); 
  box-shadow: 0 12px 32px rgba(26,111,168,0.22); 
}
.btn-yes:hover, .btn-yes.selected {
  border-color: #3d6b2c; 
  background: linear-gradient(135deg, #f0f7ec 0%, #e8f5e9 100%);
  box-shadow: 0 12px 32px rgba(60,100,40,0.25);
}
.btn-no:hover, .btn-no.selected {
  border-color: var(--blue); 
  background: linear-gradient(135deg, #e8f4fd 0%, #d6ecf8 100%);
  box-shadow: 0 12px 32px rgba(26,111,168,0.25);
}
.choice-icon { 
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.choice-title {
  font-family: var(--font); font-size: 1rem;
  font-weight: 600; letter-spacing: 0.12em; color: var(--blue-d);
  text-transform: uppercase;
}
.choice-sub { 
  font-family: var(--font); font-size: 0.88rem; 
  color: var(--text-l); font-style: italic; 
}

/* ── STEP 2: Form inside card ── */
#rsvpForm {
  padding: 0 40px 40px;
  background: transparent;
  border: none; box-shadow: none; border-radius: 0;
}

/* chosen badge at top of form */
.chosen-badge {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-radius: 8px; margin: 32px 0 8px;
  font-family: var(--font); font-size: 1rem; letter-spacing: 0.06em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.chosen-badge.attending { 
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  color: #2e7d32; 
  border: 2px solid rgba(60,100,40,0.35); 
}
.chosen-badge.declining { 
  background: linear-gradient(135deg, #e8f4fd 0%, #c2e0f4 100%);
  color: var(--blue-d); 
  border: 2px solid rgba(26,111,168,0.35); 
}
.change-choice {
  font-family: var(--font); font-size: 0.78rem; letter-spacing: 0.12em;
  text-transform: uppercase; background: rgba(255,255,255,0.5); 
  border: 1px solid currentColor;
  padding: 5px 12px; border-radius: 4px; cursor: pointer; 
  opacity: 0.75;
  transition: opacity 0.2s, background 0.2s; color: inherit;
}
.change-choice:hover { opacity: 1; background: rgba(255,255,255,0.85); }

/* card divider with label */
.card-divider {
  display: flex; align-items: center; gap: 16px;
  margin: 28px 0 24px;
}
.card-divider::before, .card-divider::after {
  content: ''; flex: 1; height: 1px; 
  background: linear-gradient(90deg, transparent, rgba(26,111,168,0.25), transparent);
}
.card-divider span {
  font-family: var(--font); font-size: 0.8rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--blue); white-space: nowrap;
  font-weight: 600;
}

/* ── COMMENTS WALL (inside form, after submit) ── */
.comments-wall { margin-top: 40px; }
.comments-wall-title {
  font-family: var(--font); font-size: 0.78rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--brown-l); margin-bottom: 16px;
  padding-bottom: 8px; border-bottom: 1px solid rgba(160,120,80,0.15);
}
.comment-item {
  display: flex; gap: 14px; margin-bottom: 18px; align-items: flex-start;
}
.comment-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brown-l), var(--brown));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font); font-size: 1rem; color: #fff; font-weight: 500;
}
.comment-bubble {
  flex: 1; background: var(--cream); border: 1px solid rgba(160,120,80,0.18);
  border-radius: 0 8px 8px 8px; padding: 12px 16px;
}
.comment-name {
  font-family: var(--font); font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.06em; color: var(--brown); margin-bottom: 4px;
}
.comment-name .att-chip {
  display: inline-block; margin-left: 8px; padding: 1px 8px;
  border-radius: 10px; font-size: 0.68rem; letter-spacing: 0.08em; vertical-align: middle;
}
.att-yes { background: #e8f0e4; color: #3d6b2c; }
.att-no  { background: #faeae6; color: #8b3020; }
.comment-text { font-family: var(--font); font-size: 0.9rem; color: var(--text); line-height: 1.7; font-style: italic; }
.comment-time { font-family: var(--font); font-size: 0.7rem; color: var(--text-l); margin-top: 4px; }

/* ── STEP 3: Card success state ── */
.card-success {
  padding: 64px 44px; text-align: center;
  background: linear-gradient(to bottom, #ffffff 0%, #fafcfe 100%);
}
.success-seal {
  width: 90px; height: 90px; border-radius: 50%; margin: 0 auto 28px;
  background: radial-gradient(circle at 35% 35%, var(--blue-l) 0%, var(--blue) 50%, var(--blue-d) 100%);
  clip-path: polygon(50% 0%,61% 12%,76% 6%,74% 22%,90% 24%,82% 37%,96% 46%,84% 55%,90% 70%,74% 71%,73% 87%,59% 81%,50% 94%,41% 81%,27% 87%,26% 71%,10% 70%,16% 55%,4% 46%,18% 37%,10% 24%,26% 22%,24% 6%,39% 12%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font); font-size: 1.2rem; font-weight: 700; color: #fff;
  box-shadow: 0 8px 24px rgba(26,111,168,0.35);
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.card-success h3 {
  font-family: var(--font); font-size: clamp(1.5rem,3.2vw,2.2rem);
  font-weight: 500; letter-spacing: 0.08em; color: var(--blue-d); margin-bottom: 16px;
}
.card-success p { 
  font-family: var(--font); font-size: 1rem; color: var(--text-l); 
  line-height: 1.9; margin-bottom: 10px; 
}
.success-detail { font-style: italic; color: var(--blue) !important; font-weight: 500; }
.success-actions { 
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 32px; 
}

/* ── COMMENTS PREVIEW TICKER below card ── */
.comments-preview {
  max-width: 680px; margin: 28px auto 0;
}
.cp-heading {
  font-family: var(--font); font-size: 0.75rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(200,149,42,0.7); text-align: center;
  margin-bottom: 16px;
}
.cp-list { display: flex; flex-direction: column; gap: 10px; }
.cp-item {
  display: flex; gap: 12px; align-items: center;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(200,149,42,0.15);
  border-radius: 6px; padding: 12px 16px;
}
.cp-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #c8952a, #7a4f35);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font); font-size: 0.9rem; color: #fff; font-weight: 500;
}
.cp-name { font-family: var(--font); font-size: 0.85rem; color: rgba(255,255,255,0.8); font-weight: 500; }
.cp-msg  { font-family: var(--font); font-size: 0.8rem; color: rgba(255,255,255,0.5); font-style: italic; }
.cp-chip {
  display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.68rem;
  margin-left: 6px;
}
.cp-yes { background: rgba(60,100,40,0.35); color: #8fd46a; }
.cp-no  { background: rgba(120,40,30,0.35); color: #e08070; }

@media (max-width: 600px) {
  #rsvpForm { padding: 0 24px 32px; }
  .attend-choice { padding: 36px 24px; }
  .card-success { padding: 48px 24px; }
  .choice-btns { flex-direction: column; align-items: center; }
  .choice-btn { max-width: 100%; width: 100%; }
  .success-actions { flex-direction: column; }
  .btn-download, .btn-back { width: 100%; text-align: center; }
  .card-header { min-height: 280px !important; }
  .card-header-names { font-size: 2rem !important; }
}

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

/* ══════════════════════════════
   MUSIC TOGGLE BUTTON
══════════════════════════════ */
.music-btn {
  position: fixed; bottom: 28px; left: 28px; z-index: 8000;
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brown) 0%, var(--brown-d) 100%);
  border: 2px solid rgba(200,149,42,0.45);
  color: #fff; font-size: 1.2rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(0,0,0,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
  animation: musicPulse 3s ease-in-out infinite;
}
.music-btn:hover { transform: scale(1.1); box-shadow: 0 6px 22px rgba(0,0,0,0.5); }
.music-btn.playing { border-color: var(--gold-l); animation: musicPulse 1.5s ease-in-out infinite; }
@keyframes musicPulse {
  0%,100% { box-shadow: 0 4px 18px rgba(0,0,0,0.4), 0 0 0 0 rgba(200,149,42,0); }
  50%      { box-shadow: 0 4px 18px rgba(0,0,0,0.4), 0 0 0 8px rgba(200,149,42,0.15); }
}

/* ══════════════════════════════
   NAVBAR MOBILE — ensure position:relative for dropdown
══════════════════════════════ */
.navbar { position: relative; }

/* ══════════════════════════════
   SMOOTH CARD ENTRANCE
══════════════════════════════ */
.invite-card {
  animation: cardDrop 0.9s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes cardDrop {
  from { opacity: 0; transform: translateY(60px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ══════════════════════════════
   PRINT STYLES
══════════════════════════════ */
@media print {
  .navbar, .music-btn, .toast, #confettiCanvas,
  .splash, .hero, .date-section, .ornament-divider,
  .story-section, .gallery-section, .schedule-section,
  .registry-section, .footer-branch, .site-footer,
  .attend-choice, .comments-wall, .comments-preview { display: none !important; }
  .register-section { background: none !important; padding: 0 !important; }
  .invite-card { box-shadow: none !important; }
}

/* ══════════════════════════════════════════
   CONTACTS SECTION
══════════════════════════════════════════ */
.contacts-section {
  padding: 24px 32px 72px; text-align: center;
  background: rgba(255,255,255,0.5); backdrop-filter: blur(4px);
}
.contacts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px; max-width: 900px; margin: 0 auto;
}
.contact-card {
  background: var(--white);
  border: 1px solid rgba(26,111,168,0.2);
  border-radius: 10px; padding: 28px 22px; text-align: center;
  box-shadow: 0 4px 20px rgba(26,111,168,0.08);
  transition: transform 0.25s, box-shadow 0.25s;
  position: relative; overflow: hidden;
}
.contact-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--blue-d), var(--blue-l));
}
.contact-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 32px rgba(26,111,168,0.15);
}
.contact-role {
  font-family: var(--font); font-size: 0.75rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--blue-l); margin-bottom: 10px;
}
.contact-name {
  font-family: var(--font); font-size: 1.15rem; font-weight: 500;
  color: var(--blue-d); letter-spacing: 0.06em; margin-bottom: 10px;
}
.contact-phone {
  display: inline-block;
  font-family: var(--font); font-size: 0.95rem; letter-spacing: 0.06em;
  color: var(--blue); text-decoration: none;
  border-bottom: 1px dashed rgba(26,111,168,0.35);
  transition: color 0.2s, border-color 0.2s;
}
.contact-phone:hover { color: var(--blue-d); border-color: var(--blue-d); }

/* ══════════════════════════════════════════
   SEND-OFF SECTION
══════════════════════════════════════════ */
.sendoff-section {
  padding: 56px 24px 64px; text-align: center;
  background: linear-gradient(135deg, #0d3a5c 0%, #1a6fa8 60%, #0d3a5c 100%);
  position: relative; overflow: hidden;
}
.sendoff-section::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.sendoff-section .wedding-date { color: #fff; }
.sendoff-section .venue { color: rgba(255,255,255,0.7); }
.sendoff-section .count-item span { color: #7dd3fc; }
.sendoff-section .count-item label { color: rgba(255,255,255,0.6); }
.sendoff-section .count-sep { color: rgba(255,255,255,0.3); }
.sendoff-section .section-pre { color: rgba(255,255,255,0.7); }
.sendoff-section .section-heading { color: #fff; }
.sendoff-section .registry-note { color: rgba(255,255,255,0.65); }
.sendoff-badge {
  display: inline-block; margin-top: 20px;
  padding: 8px 24px; border: 1px solid rgba(125,211,252,0.4);
  border-radius: 20px; font-family: var(--font); font-size: 0.82rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

/* ══════════════════════════════════════════
   MCHANGO / CONTRIBUTION SECTION
══════════════════════════════════════════ */
.mchango-section {
  padding: 24px 32px 72px; text-align: center;
  background: rgba(255,255,255,0.5); backdrop-filter: blur(4px);
}
.mchango-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 22px; max-width: 900px; margin: 0 auto;
}
.mchango-card {
  background: var(--white);
  border: 1px solid rgba(26,111,168,0.18);
  border-radius: 12px; padding: 32px 24px; text-align: center;
  box-shadow: 0 4px 20px rgba(26,111,168,0.08);
  transition: transform 0.25s, box-shadow 0.25s;
  position: relative; overflow: hidden;
}
.mchango-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue-l), var(--gold), var(--blue-l));
}
.mchango-card:hover { transform: translateY(-5px); box-shadow: 0 12px 32px rgba(26,111,168,0.15); }
.mc-icon { 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px; 
}
.mc-bank {
  font-family: var(--font); font-size: 0.78rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--blue-l); margin-bottom: 8px;
}
.mc-account {
  font-family: var(--font); font-size: 1.3rem; font-weight: 500;
  color: var(--blue-d); letter-spacing: 0.08em; margin-bottom: 6px;
}
.mc-name {
  font-family: var(--font); font-size: 0.9rem; font-style: italic;
  color: var(--text-l); margin-bottom: 16px;
}
.mc-copy {
  font-family: var(--font); font-size: 0.8rem; letter-spacing: 0.1em;
  padding: 7px 18px; border-radius: 20px; cursor: pointer;
  background: var(--blue-xl); color: var(--blue-d);
  border: 1px solid rgba(26,111,168,0.25);
  transition: background 0.2s, transform 0.15s;
}
.mc-copy:hover { background: var(--blue-l); color: #fff; transform: scale(1.04); }
.mc-copy.copied { background: #22c55e; color: #fff; border-color: #22c55e; }

/* ══════════════════════════════════════════
   RESPONSIVE for new sections
══════════════════════════════════════════ */
@media (max-width: 600px) {
  .contacts-grid, .mchango-cards { grid-template-columns: 1fr; }
  .contacts-section, .mchango-section { padding: 16px 16px 48px; }
  .sendoff-section { padding: 40px 16px 48px; }
}

/* ══════════════════════════════════════════
   MUSIC PLAYER BAR
══════════════════════════════════════════ */
.music-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 8500;
  background: linear-gradient(135deg, rgba(13,58,92,0.97) 0%, rgba(26,111,168,0.97) 100%);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(74,159,212,0.4);
  display: flex; align-items: center; gap: 16px;
  padding: 10px 20px; flex-wrap: wrap;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.25);
  transition: transform 0.3s ease;
}
.music-bar.minimised {
  transform: translateY(calc(100% - 8px));
}
.music-bar.minimised .mb-min { transform: rotate(180deg); }

/* minimise button */
.mb-min {
  background: none; border: none; color: rgba(255,255,255,0.6);
  font-size: 0.75rem; cursor: pointer; padding: 4px 6px;
  transition: color 0.2s, transform 0.3s;
  flex-shrink: 0;
}
.mb-min:hover { color: #fff; }

/* song info */
.mb-info {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 160px;
}
.mb-note {
  font-size: 1.4rem; color: var(--gold-l);
  animation: noteBounce 1.2s ease-in-out infinite;
}
@keyframes noteBounce {
  0%,100% { transform: translateY(0) rotate(-10deg); }
  50%      { transform: translateY(-4px) rotate(10deg); }
}
.mb-text { display: flex; flex-direction: column; }
.mb-title {
  font-family: var(--font); font-size: 0.9rem; font-weight: 500;
  color: #fff; letter-spacing: 0.04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}
.mb-artist {
  font-family: var(--font); font-size: 0.75rem;
  color: rgba(255,255,255,0.55); letter-spacing: 0.06em; font-style: italic;
}

/* play controls */
.mb-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.mb-btn {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  color: #fff; border-radius: 50%; width: 32px; height: 32px;
  font-size: 0.75rem; cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: background 0.2s, transform 0.15s;
}
.mb-btn:hover { background: rgba(255,255,255,0.22); transform: scale(1.08); }
.mb-play {
  width: 42px; height: 42px; font-size: 1rem;
  background: var(--gold); border-color: var(--gold);
  box-shadow: 0 2px 12px rgba(200,149,42,0.45);
}
.mb-play:hover { background: var(--gold-l); }

/* progress */
.mb-progress-wrap {
  display: flex; align-items: center; gap: 8px; flex: 2; min-width: 140px;
}
.mb-time {
  font-family: var(--font); font-size: 0.72rem;
  color: rgba(255,255,255,0.55); letter-spacing: 0.06em; flex-shrink: 0;
}
.mb-progress {
  flex: 1; height: 4px; background: rgba(255,255,255,0.15);
  border-radius: 2px; cursor: pointer; position: relative;
  transition: height 0.2s;
}
.mb-progress:hover { height: 6px; }
.mb-progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--gold-l), #fff);
  border-radius: 2px; width: 0%; transition: width 0.3s linear;
  position: relative;
}
.mb-progress-fill::after {
  content: ''; position: absolute; right: -4px; top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 4px rgba(0,0,0,0.3);
  opacity: 0; transition: opacity 0.2s;
}
.mb-progress:hover .mb-progress-fill::after { opacity: 1; }

/* volume */
.mb-volume {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: 0.9rem; color: rgba(255,255,255,0.6);
}
.mb-vol-slider {
  -webkit-appearance: none; appearance: none;
  width: 70px; height: 4px;
  background: rgba(255,255,255,0.2); border-radius: 2px;
  outline: none; cursor: pointer;
}
.mb-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px;
  border-radius: 50%; background: var(--gold-l); cursor: pointer;
}
.mb-vol-pct {
  font-family: var(--font); font-size: 0.7rem;
  color: rgba(255,255,255,0.45); min-width: 28px;
}

/* responsive */
@media (max-width: 600px) {
  .music-bar { gap: 10px; padding: 8px 12px; }
  .mb-progress-wrap { min-width: 100px; }
  .mb-title { max-width: 120px; }
  .mb-volume { display: none; }
}

/* ══════════════════════════════════════════
   FINAL POLISH — Additional improvements
══════════════════════════════════════════ */

/* Hero content card — better shadow and spacing */
.hero-content {
  max-width: 580px !important;
  padding: 44px 40px !important;
  border-radius: 14px !important;
}

/* Name separator line looks better */
.ao-line { transition: width 0.3s ease; }
.hero-content:hover .ao-line { width: 64px; }

/* Countdown numbers — bigger and bolder on large screens */
@media (min-width: 768px) {
  .count-item span { font-size: 3rem; }
  .wedding-date    { font-size: 2rem; }
}

/* Story section — centered quote looks elegant */
.story-quote {
  position: relative;
  padding: 20px 32px;
  background: rgba(255,255,255,0.6);
  border-radius: 8px;
  border-left: 3px solid var(--blue-l);
  backdrop-filter: blur(4px);
  margin: 0 auto 28px;
}

/* Contact cards — phone number style */
.contact-phone {
  display: inline-block;
  margin-top: 4px;
  padding: 6px 16px;
  background: var(--blue-xl);
  border-radius: 20px;
  font-size: 0.95rem;
  transition: background 0.2s, color 0.2s;
}
.contact-phone:hover {
  background: var(--blue);
  color: #fff;
}

/* Mchango account number — monospace feel */
.mc-account {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.25rem !important;
  letter-spacing: 0.12em;
  background: var(--blue-xl);
  padding: 8px 14px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 10px;
  color: var(--blue-d);
}

/* Timeline — blue dots and lines */
.timeline::before { background: rgba(26,111,168,0.25) !important; }
.timeline-dot     { background: var(--blue) !important; box-shadow: 0 0 0 3px rgba(26,111,168,0.2) !important; }
.timeline-time    { color: var(--blue) !important; }

/* Registry cards — blue top border */
.registry-card::before {
  background: linear-gradient(90deg, var(--blue-d), var(--blue-l)) !important;
}

/* Success seal — blue gradient */
.success-seal {
  background: radial-gradient(circle at 35% 35%, var(--blue-l) 0%, var(--blue) 50%, var(--blue-d) 100%) !important;
  color: #fff !important;
}

/* Contribution form card */
.contribution-form-card {
  margin-top: 24px;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid rgba(26,111,168,0.18);
  background: linear-gradient(135deg, #fdf7ea 0%, #fffaf0 100%);
  box-shadow: 0 10px 28px rgba(26,111,168,0.08);
}
.contribution-form-title {
  margin-bottom: 14px;
  color: #9a6d12;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.contribution-label {
  display: block;
  margin-bottom: 10px;
  color: var(--blue-d);
  font-weight: 600;
}
.contribution-form-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.contribution-input {
  flex: 1 1 220px;
  min-width: 220px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(26,111,168,0.3);
  background: #fff;
  font-size: 1rem;
}
.contribution-helper {
  margin-top: 10px;
  color: #4a6c82;
  font-size: 0.92rem;
}

/* Music bar note icon animation */
.mb-note { display: inline-block; }

/* RSVP card header — min height on mobile */
@media (max-width: 600px) {
  .card-header { min-height: 240px !important; }
  .card-header-names { font-size: 1.8rem !important; }
  .hero-content { padding: 28px 20px !important; }
}

/* Smooth page scrolling on iOS */
html { -webkit-overflow-scrolling: touch; }

/* Better button hover states */
.hero-cta:focus, .btn-submit:focus, .btn-download:focus {
  outline: 3px solid rgba(26,111,168,0.4);
  outline-offset: 2px;
}

/* Toast — blue theme */
.toast {
  background: var(--blue-d) !important;
}

/* Gallery empty state */
.gallery-placeholder {
  padding: 80px 20px;
  border: 2px dashed rgba(26,111,168,0.2);
  border-radius: 8px;
  color: var(--text-l);
}

/* Comments preview on dark section */
.cp-item {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(74,159,212,0.2) !important;
}

/* ══════════════════════════════════════════
   PROFESSIONAL ICON ENHANCEMENTS
══════════════════════════════════════════ */

/* Ensure all SVG icons are properly sized and colored */
.contact-role svg,
.mc-icon svg,
.registry-icon svg,
.choice-icon svg,
.card-corner svg,
.corner-deco svg,
.deco-leaf svg,
.od-symbol svg {
  display: block;
  color: inherit;
}

/* Icon containers should be centered */
.inline-flex {
  display: inline-flex !important;
}

/* Consistent icon sizing for buttons */
button svg {
  flex-shrink: 0;
}

/* Smooth transitions for interactive icons */
button:hover svg,
a:hover svg {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}

/* Make sure lightbox buttons are properly centered */
.lb-close svg,
.lb-prev svg,
.lb-next svg {
  margin: auto;
}

/* Contact role icons should have proper spacing */
.contact-role {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}

/* Registry and mchango icons should be centered */
.registry-icon,
.mc-icon {
  width: 64px;
  height: 64px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

/* Choice button icons */
.choice-icon {
  width: 64px;
  height: 64px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* Footer logo heart icon */
.footer-logo {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Success detail location icon */
.success-detail {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Sendoff badge heart icon */
.sendoff-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}

/* Card divider mail icon */
.card-divider span {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}

/* Button icons should be properly aligned */
.btn-submit,
.btn-download,
.btn-back,
.mc-copy {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Hero date badge dot */
.hero-date-badge .dot {
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 50%;
  margin: 0 8px;
}

/* Ornament divider symbols should be properly centered */
.ornament-divider {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* Card header ornament should be centered */
.card-header-ornament {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* Responsive adjustments for icons */
@media (max-width: 600px) {
  .registry-icon,
  .mc-icon {
    width: 56px;
    height: 56px;
  }
  
  .choice-icon {
    width: 56px;
    height: 56px;
  }
  
  .card-corner svg {
    width: 1.2rem;
    height: 1.2rem;
  }
}