/* ═══════════════════════════════════════════════════════════
   ALICE NO PAÍS DAS MARAVILHAS — 15 ANOS DE LAURA
   Ultra Luxury Cinema Invitation CSS
═══════════════════════════════════════════════════════════ */

/* ── Variables ── */
:root {
  --gold: #c9a227;
  --gold-light: #f0d060;
  --gold-dark: #8b6914;
  --purple-deep: #0d0520;
  --purple-mid: #1a0533;
  --purple-bright: #4a1070;
  --rose: #ff6b9d;
  --rose-dark: #c73b6f;
  --teal: #00e5cc;
  --cream: #f5e6c8;
  --font-display: 'Cinzel Decorative', serif;
  --font-heading: 'Cinzel', serif;
  --font-body: 'Cormorant Garamond', serif;
  --font-italic: 'IM Fell English', serif;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--purple-deep);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 18px;
  overflow-x: hidden;
  cursor: default;
}

.hidden { display: none !important; }

/* ══════════════════════════════════════════════════════
   INTRO OVERLAY
══════════════════════════════════════════════════════ */
#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#intro-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 60%, rgba(74,16,112,0.5) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 40%, rgba(255,107,157,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(201,162,39,0.1) 0%, transparent 40%);
  animation: bgPulse 6s ease-in-out infinite;
}

@keyframes bgPulse {
  0%,100% { opacity:1; }
  50% { opacity:0.7; }
}

/* Cinema bars */
#intro-bars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.bar {
  position: absolute;
  left: 0; right: 0;
  height: 80px;
  background: #000;
  transition: height 1.2s cubic-bezier(.77,0,.18,1);
}
.bar-top { top: 0; }
.bar-bottom { bottom: 0; }
.bars-open .bar-top { height: 0; }
.bars-open .bar-bottom { height: 0; }

/* Intro text */
#intro-text {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 0 2rem;
  margin-bottom: 3rem;
}

.intro-line {
  display: block;
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--cream);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s, transform 1s;
  text-shadow: 0 0 40px rgba(201,162,39,0.6);
}
#il1 { font-size: clamp(1rem, 3vw, 1.6rem); margin-bottom: 0.5rem; }
#il2 { font-size: clamp(1.2rem, 4vw, 2rem); color: var(--gold); }

.intro-line.visible { opacity: 1; transform: translateY(0); }

/* Vignette */
#intro-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.9) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Intro button */
#intro-btn {
  position: relative;
  z-index: 4;
  background: transparent;
  border: 2px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-heading);
  font-size: clamp(0.85rem, 2.5vw, 1.1rem);
  letter-spacing: 0.15em;
  padding: 1rem 2.5rem;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s, transform 0.8s, background 0.3s, box-shadow 0.3s;
  overflow: hidden;
}
#intro-btn::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, var(--gold), transparent, var(--gold));
  opacity: 0;
  transition: opacity 0.3s;
}
#intro-btn:hover {
  background: rgba(201,162,39,0.15);
  box-shadow: 0 0 30px rgba(201,162,39,0.5), inset 0 0 20px rgba(201,162,39,0.1);
}
#intro-btn.visible { opacity: 1; transform: translateY(0); }
.btn-glow { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════
   RABBIT HOLE
══════════════════════════════════════════════════════ */
#rabbit-hole {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: radial-gradient(ellipse at center, #1a0533 0%, #000 80%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  perspective: 800px;
}
#rabbit-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: black;
}
/* === RABBIT HOLE BASE === */
#rabbit-hole {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, #2b1b10 0%, #120800 70%);
  overflow: hidden;
  z-index: 999;
  perspective: 900px;
}

/* === TÚNEL === */
#tunnel-wrapper {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: tunnelRotate 30s linear infinite;
}

/* === ANÉIS DO TÚNEL === */
.tunnel-ring {
  position: absolute;
  inset: 50% auto auto 50%;
  width: calc(120vmax - var(--i) * 12vmax);
  height: calc(120vmax - var(--i) * 12vmax);
  border-radius: 48% 52% 50% 50%;
  transform:
    translate(-50%, -50%)
    translateZ(calc(var(--i) * -200px));
  
  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(255,205,150,0.15),
      rgba(60,30,10,0.85)
    ),
    repeating-conic-gradient(
      from 10deg,
      rgba(255,255,255,0.03) 0deg 8deg,
      rgba(0,0,0,0.12) 8deg 16deg
    );

  box-shadow:
    inset 0 0 40px rgba(0,0,0,0.8),
    inset 0 0 120px rgba(60,30,10,0.9);

  filter: blur(calc(var(--i) * 0.7px));
  animation:
    pulseLight 6s ease-in-out infinite,
    organicWave 18s ease-in-out infinite;
}

/* === LUZ PULSANTE === */
@keyframes pulseLight {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.85; }
}

/* === MOVIMENTO ORGÂNICO === */
@keyframes organicWave {
  0%, 100% {
    border-radius: 48% 52% 50% 50%;
  }
  50% {
    border-radius: 55% 45% 52% 48%;
  }
}

/* === ROTAÇÃO MUITO SUAVE === */
@keyframes tunnelRotate {
  from { transform: rotateZ(0deg); }
  to { transform: rotateZ(360deg); }
}

/* === VINHETA DE PROFUNDIDADE === */
#hole-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center,
      transparent 30%,
      rgba(0,0,0,0.75) 80%,
      rgba(0,0,0,0.9) 100%);
  pointer-events: none;
}

#tunnel-wrapper {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 600px;
}

.tunnel-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(201,162,39, calc(0.8 - var(--i) * 0.1));
  box-shadow:
    0 0 20px rgba(201,162,39,0.3),
    inset 0 0 20px rgba(74,16,112,0.5);
  animation: tunnelSpin 2s linear infinite;
  animation-delay: calc(var(--i) * -0.25s);
}

#tunnel-glow {
  position: absolute;
  width: 30vmax;
  height: 30vmax;
  background: radial-gradient(circle, rgba(255,220,160,0.6), transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: glowPulse 4s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% {
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(0.9);
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.1);
  }
}
.tunnel-ring:nth-child(1) { width: 100px;  height: 100px; }
.tunnel-ring:nth-child(2) { width: 200px;  height: 200px; }
.tunnel-ring:nth-child(3) { width: 320px;  height: 320px; }
.tunnel-ring:nth-child(4) { width: 450px;  height: 450px; }
.tunnel-ring:nth-child(5) { width: 600px;  height: 600px; }
.tunnel-ring:nth-child(6) { width: 780px;  height: 780px; }
.tunnel-ring:nth-child(7) { width: 980px;  height: 980px; }
.tunnel-ring:nth-child(8) { width: 1200px; height: 1200px; }

@keyframes tunnelSpin {
  from { transform: rotateX(80deg) rotate(0deg) scaleZ(1); }
  to   { transform: rotateX(80deg) rotate(360deg) scaleZ(1); }
}

#falling-lady {
  position: absolute;
  z-index: 5;
  width: clamp(180px, 35vw, 380px);
  animation: ladyFall 3.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  filter: drop-shadow(0 0 30px rgba(201,162,39,0.6));
}
#falling-lady img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

@keyframes ladyFall {
  0%   { top: -30%; opacity: 0; transform: rotate(-5deg) scale(0.6); }
  15%  { opacity: 1; }
  50%  { top: 20%; transform: rotate(3deg) scale(1); }
  80%  { top: 40%; transform: rotate(-2deg) scale(1.05); opacity: 1; }
  100% { top: 120%; transform: rotate(5deg) scale(0.8); opacity: 0; }
}

.fall-item {
  position: absolute;
  top: -10%;
  left: var(--x);
  font-size: clamp(1.5rem, 4vw, 3rem);
  animation: itemFall 3.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: var(--delay);
  filter: drop-shadow(0 0 8px rgba(201,162,39,0.8));
}
@keyframes itemFall {
  0%   { top: -10%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.8; }
  100% { top: 110%; opacity: 0; transform: rotate(360deg); }
}

#hole-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 20%, rgba(0,0,0,0.95) 80%);
  pointer-events: none;
  z-index: 3;
}

/* ══════════════════════════════════════════════════════
   MAIN CONTENT
══════════════════════════════════════════════════════ */
#main-content {
  position: relative;
  min-height: 100vh;
}

/* ── Parallax Sections ── */
.parallax-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.section-bg-blur {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* ══════════════════════════════════════════════════════
   HERO SECTION
══════════════════════════════════════════════════════ */
#hero {
  background:
    radial-gradient(ellipse at 20% 80%, rgba(74,16,112,0.8) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(201,162,39,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(13,5,32,1) 0%, rgba(0,0,0,1) 100%);
  min-height: 100vh;
}

/* Particles canvas */
#particles-canvas {
  position: absolute;
  z-index: 1;
pointer-events: none;
}

/* Fog */
#fog-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(ellipse at 50% 100%, rgba(74,16,112,0.3) 0%, transparent 60%);
  animation: fogDrift 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fogDrift {
  0%,100% { transform: translateX(-2%) scale(1); opacity: 0.7; }
  50% { transform: translateX(2%) scale(1.05); opacity: 1; }
}

/* Vignette */
#vignette-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}

/* Light beam */
#light-beam {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 60%;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(201,162,39,0.4), transparent);
  z-index: 4;
  filter: blur(8px);
  animation: beamPulse 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes beamPulse {
  0%,100% { opacity: 0.3; width: 80px; }
  50% { opacity: 0.7; width: 120px; }
}

/* Hero Content */
.hero-content {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: 2rem;
  max-width: 900px;
}

.crown-deco {
  font-size: 1.5rem;
  color: var(--gold);
  letter-spacing: 0.5em;
  margin-bottom: 1.5rem;
  text-shadow: 0 0 20px rgba(201,162,39,0.8);
  animation: glimmer 3s ease-in-out infinite;
}
@keyframes glimmer {
  0%,100% { text-shadow: 0 0 20px rgba(201,162,39,0.8); }
  50% { text-shadow: 0 0 40px rgba(201,162,39,1), 0 0 60px rgba(201,162,39,0.5); }
}

.hero-subtitle {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  color: var(--cream);
  opacity: 0.9;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

.hero-tagline {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(0.9rem, 2vw, 1.2rem);
  color: var(--gold);
  opacity: 0.85;
  margin-bottom: 2rem;
}

/* Ornament divider */
.divider-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1.5rem 0;
}
.ornament-line {
  display: block;
  flex: 1;
  max-width: 200px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.ornament-diamond {
  color: var(--gold);
  font-size: 1rem;
  text-shadow: 0 0 10px var(--gold);
}

.hero-name {
  font-family: var(--font-display);
  font-size: clamp(3rem, 12vw, 7rem);
  font-weight: 900;
  background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--gold-dark), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  text-shadow: none;
  filter: drop-shadow(0 0 20px rgba(201,162,39,0.5));
  animation: nameShimmer 4s ease-in-out infinite;
  background-size: 200% 200%;
}
@keyframes nameShimmer {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.hero-name-last {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 4vw, 2.5rem);
  font-weight: 400;
  letter-spacing: 0.3em;
  color: var(--cream);
  opacity: 0.85;
  margin-top: 0.2rem;
  text-transform: uppercase;
}

.hero-age {
  margin-top: 1.5rem;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
}
.age-number {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 900;
  color: var(--rose);
  text-shadow: 0 0 30px rgba(255,107,157,0.7);
  animation: roseGlow 2s ease-in-out infinite;
}
@keyframes roseGlow {
  0%,100% { text-shadow: 0 0 20px rgba(255,107,157,0.7); }
  50% { text-shadow: 0 0 40px rgba(255,107,157,1), 0 0 60px rgba(255,107,157,0.4); }
}
.age-text {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 3vw, 1.8rem);
  color: var(--gold);
  letter-spacing: 0.2em;
}

/* Floating 3D Cards */
.floating-cards {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.card-3d {
  position: absolute;
  font-size: clamp(2rem, 5vw, 4rem);
  font-family: serif;
  font-weight: bold;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
  border: 1px solid rgba(201,162,39,0.4);
  border-radius: 8px;
  padding: 0.3em 0.5em;
  backdrop-filter: blur(4px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 20px rgba(201,162,39,0.2);
  transform-style: preserve-3d;
}
.card-1 { top: 15%; left: 5%; color: #1a1a2e; background: rgba(201,162,39,0.8); animation: cardFloat1 6s ease-in-out infinite; }
.card-2 { top: 20%; right: 8%; color: #8b0000; background: rgba(255,220,220,0.9); animation: cardFloat2 7s ease-in-out infinite; }
.card-3 { bottom: 25%; left: 8%; color: #8b0000; background: rgba(255,220,220,0.9); animation: cardFloat3 8s ease-in-out infinite; }
.card-4 { bottom: 20%; right: 5%; color: #1a1a2e; background: rgba(201,162,39,0.8); animation: cardFloat4 5s ease-in-out infinite; }

@keyframes cardFloat1 { 0%,100%{transform:rotate(-15deg) translateY(0) rotateY(20deg)} 50%{transform:rotate(-10deg) translateY(-20px) rotateY(-10deg)} }
@keyframes cardFloat2 { 0%,100%{transform:rotate(10deg) translateY(0) rotateY(-20deg)} 50%{transform:rotate(5deg) translateY(-15px) rotateY(15deg)} }
@keyframes cardFloat3 { 0%,100%{transform:rotate(8deg) translateY(0) rotateY(15deg)} 50%{transform:rotate(12deg) translateY(-25px) rotateY(-20deg)} }
@keyframes cardFloat4 { 0%,100%{transform:rotate(-12deg) translateY(0) rotateY(-15deg)} 50%{transform:rotate(-8deg) translateY(-18px) rotateY(10deg)} }

/* Scroll hint */
#scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  text-align: center;
  animation: scrollBounce 2s ease-in-out infinite;
}
.scroll-rabbit { font-size: 1.5rem; }
.scroll-arrow { font-size: 1.2rem; color: var(--gold); opacity: 0.8; }
@keyframes scrollBounce {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* ══════════════════════════════════════════════════════
   INVITATION SECTION
══════════════════════════════════════════════════════ */
#invitation {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(74,16,112,0.6) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(201,162,39,0.1) 0%, transparent 50%),
    linear-gradient(to bottom, rgba(13,5,32,0.95), rgba(20,5,40,0.95));
  padding: 4rem 1rem;
}

.container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1rem;
}
.confirmed-name {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.1rem;
  margin: 6px 0;
  color: #e6d8a2;
  text-align: center;
}
/* Frame decorativo */
.invitation-frame, .rsvp-frame {
  position: relative;
  background: rgba(13,5,32,0.85);
  border: 1px solid rgba(201,162,39,0.4);
  border-radius: 4px;
  padding: clamp(1.5rem, 5vw, 3rem);
  backdrop-filter: blur(20px);
  box-shadow:
    0 0 60px rgba(74,16,112,0.5),
    0 0 120px rgba(201,162,39,0.1),
    inset 0 0 60px rgba(74,16,112,0.2);
}

.frame-corner {
  position: absolute;
  width: 30px;
  height: 30px;
  border-color: var(--gold);
  border-style: solid;
}
.frame-corner.tl { top: 8px; left: 8px; border-width: 2px 0 0 2px; }
.frame-corner.tr { top: 8px; right: 8px; border-width: 2px 2px 0 0; }
.frame-corner.bl { bottom: 8px; left: 8px; border-width: 0 0 2px 2px; }
.frame-corner.br { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }

.invite-header {
  text-align: center;
  margin-bottom: 2rem;
}
.tea-roses { font-size: 1.5rem; margin-bottom: 1rem; }
.invite-title {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  color: var(--cream);
  opacity: 0.8;
  margin-bottom: 0.5rem;
}
.invite-event {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 6vw, 3.5rem);
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
}
.invite-honor {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--cream);
  opacity: 0.7;
  margin-bottom: 0.3rem;
}
.invite-name-honor {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  color: var(--rose);
  text-shadow: 0 0 20px rgba(255,107,157,0.5);
}

/* Clock + Details layout */
.invite-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin: 2rem 0;
}

@media (min-width: 600px) {
  .invite-details { flex-direction: row; align-items: flex-start; }
}

/* SVG Clock */
.clock-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
#clock-svg {
  width: clamp(130px, 25vw, 200px);
  height: auto;
  filter: drop-shadow(0 0 20px rgba(201,162,39,0.5));
}
.clock-label {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--gold);
  letter-spacing: 0.2em;
  margin-top: 0.5rem;
  text-shadow: 0 0 10px rgba(201,162,39,0.6);
}

/* Detail items */
.detail-items {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  flex: 1;
}
.detail-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.detail-icon { font-size: 1.5rem; flex-shrink: 0; margin-top: 0.1rem; }
.detail-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}
.detail-value {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  color: var(--cream);
  font-weight: 600;
}
.detail-sub {
  display: block;
  font-size: 0.9rem;
  color: rgba(245,230,200,0.7);
  margin-top: 0.2rem;
  line-height: 1.5;
}

/* Quote */
.invite-quote {
  text-align: center;
  padding: 1.5rem;
  border-top: 1px solid rgba(201,162,39,0.2);
  border-bottom: 1px solid rgba(201,162,39,0.2);
  margin: 1.5rem 0;
}
.invite-quote p {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  color: var(--cream);
  line-height: 1.7;
}
.invite-quote .quote-sub {
  font-size: clamp(0.85rem, 2vw, 1rem);
  color: rgba(245,230,200,0.75);
  margin-top: 0.8rem;
  font-style: normal;
}

/* Dress code warning */
.dress-code-warning {
  background: linear-gradient(135deg, rgba(139,0,0,0.2), rgba(201,162,39,0.1));
  border: 2px solid rgba(255,107,157,0.5);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  margin: 1.5rem 0;
  position: relative;
  overflow: hidden;
}
.dress-code-warning::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 8px,
    rgba(255,107,157,0.05) 8px,
    rgba(255,107,157,0.05) 16px
  );
}
.warning-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.warning-title {
  font-family: var(--font-heading);
  font-size: clamp(0.9rem, 2.5vw, 1.2rem);
  color: var(--rose);
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  position: relative;
}
.warning-text {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  color: var(--cream);
  line-height: 1.6;
  position: relative;
}
.warning-text strong { color: var(--rose); }
.warning-text em { color: var(--gold); }

/* Map link */
.map-link {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.7rem 1.8rem;
  border: 1px solid rgba(201,162,39,0.5);
  color: var(--gold);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  transition: all 0.3s;
  background: transparent;
  border-radius: 2px;
}
.map-link:hover {
  background: rgba(201,162,39,0.15);
  box-shadow: 0 0 20px rgba(201,162,39,0.3);
}

/* ══════════════════════════════════════════════════════
   COUNTDOWN SECTION
══════════════════════════════════════════════════════ */
#countdown-section {
  background:
    radial-gradient(ellipse at center, rgba(74,16,112,0.7) 0%, rgba(0,0,0,0.95) 80%);
  padding: 5rem 1rem;
  min-height: auto;
}

.countdown-title {
  text-align: center;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  color: var(--cream);
  opacity: 0.85;
  margin-bottom: 2.5rem;
}

#countdown-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  flex-wrap: wrap;
}

.time-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(13,5,32,0.8);
  border: 1px solid rgba(201,162,39,0.4);
  border-radius: 4px;
  padding: clamp(1rem, 3vw, 1.5rem) clamp(1rem, 3vw, 2rem);
  min-width: clamp(70px, 18vw, 120px);
  box-shadow:
    0 0 30px rgba(74,16,112,0.5),
    inset 0 0 20px rgba(74,16,112,0.3);
  position: relative;
  overflow: hidden;
}
.time-unit::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}

.time-value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 4rem);
  font-weight: 700;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  transition: transform 0.2s;
}
.time-value.flip { transform: scale(1.1); }

.time-label {
  font-family: var(--font-heading);
  font-size: clamp(0.6rem, 1.5vw, 0.8rem);
  letter-spacing: 0.2em;
  color: var(--gold);
  opacity: 0.7;
  text-transform: uppercase;
  margin-top: 0.4rem;
}

.time-sep {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 3rem);
  color: var(--gold);
  opacity: 0.6;
  align-self: flex-start;
  padding-top: clamp(0.8rem, 2vw, 1rem);
}

.countdown-sub {
  text-align: center;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(0.85rem, 2vw, 1rem);
  color: var(--cream);
  opacity: 0.6;
  margin-top: 1.5rem;
}

/* ══════════════════════════════════════════════════════
   SHOWCASE SECTION
══════════════════════════════════════════════════════ */
#showcase-section {
  padding: 4rem 1rem;
  min-height: auto;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(201,162,39,0.1) 0%, transparent 50%),
    linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(13,5,32,0.9));
}

.showcase-frame {
  position: relative;
  display: inline-block;
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.showcase-img {
  width: 100%;
  max-width: 480px;
  height: auto;
  border-radius: 4px;
  border: 2px solid rgba(201,162,39,0.4);
  box-shadow:
    0 0 60px rgba(201,162,39,0.3),
    0 0 120px rgba(74,16,112,0.5);
  filter: brightness(1.05) contrast(1.05);
  transition: transform 0.5s, box-shadow 0.5s;
}
.showcase-img:hover {
  transform: scale(1.02);
  box-shadow:
    0 0 80px rgba(201,162,39,0.5),
    0 0 160px rgba(74,16,112,0.6);
}

.showcase-glow {
  position: absolute;
  inset: -10px;
  background: radial-gradient(ellipse at center, rgba(201,162,39,0.15) 0%, transparent 70%);
  pointer-events: none;
  animation: showcaseGlow 3s ease-in-out infinite;
}
@keyframes showcaseGlow {
  0%,100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.showcase-caption {
  text-align: center;
  margin-top: 1.5rem;
}
.showcase-name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.showcase-event {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: var(--cream);
  opacity: 0.6;
  margin-top: 0.3rem;
}

/* ══════════════════════════════════════════════════════
   RSVP SECTION
══════════════════════════════════════════════════════ */
#rsvp-section {
  padding: 4rem 1rem;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(255,107,157,0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(74,16,112,0.7) 0%, transparent 50%),
    linear-gradient(to bottom, rgba(13,5,32,0.98), rgba(0,0,0,0.98));
}

.rsvp-header {
  text-align: center;
  margin-bottom: 2rem;
}
.rsvp-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.rsvp-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  background: linear-gradient(135deg, var(--rose), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
}
.rsvp-subtitle {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--cream);
  opacity: 0.7;
  font-size: clamp(0.9rem, 2vw, 1.1rem);
}

/* Form */
.form-group {
  margin-bottom: 1.5rem;
}
.form-group label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.9rem 1.2rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(201,162,39,0.3);
  border-radius: 2px;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
  resize: vertical;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(245,230,200,0.35);
  font-style: italic;
}
.form-group input:focus,
.form-group textarea:focus {
  border-color: rgba(201,162,39,0.7);
  box-shadow: 0 0 20px rgba(201,162,39,0.2);
}

.rsvp-btn {
  width: 100%;
  padding: 1.2rem 2rem;
  background: linear-gradient(135deg, var(--rose-dark), var(--rose), #ff8fb8);
  border: none;
  border-radius: 2px;
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 20px rgba(255,107,157,0.4);
  position: relative;
  overflow: hidden;
}
.rsvp-btn::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 30%;
  height: 200%;
  background: rgba(255,255,255,0.2);
  transform: skewX(-20deg);
  transition: left 0.5s;
}
.rsvp-btn:hover::before { left: 130%; }
.rsvp-btn:hover {
  box-shadow: 0 8px 40px rgba(255,107,157,0.6);
  transform: translateY(-2px);
}
.rsvp-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Success message */
#rsvp-success {
  text-align: center;
  padding: 2rem;
  animation: successAppear 0.5s ease-out;
}
@keyframes successAppear {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
.success-icon { font-size: 3rem; margin-bottom: 1rem; }
.success-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--gold);
  margin-bottom: 0.8rem;
}
.success-text {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--cream);
  opacity: 0.85;
  line-height: 1.7;
  font-size: clamp(1rem, 2.5vw, 1.2rem);
}

/* Confirmed list */
#confirmed-list-section {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(201,162,39,0.2);
}
.confirmed-title {
  font-family: var(--font-heading);
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  color: var(--gold);
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}
.loading-magic {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--cream);
  opacity: 0.5;
  text-align: center;
  padding: 1rem;
}
#confirmed-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: 250px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dark) transparent;
}
.confirmed-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 1rem;
  background: rgba(255,255,255,0.04);
  border-left: 2px solid var(--gold-dark);
  border-radius: 0 2px 2px 0;
  animation: itemAppear 0.4s ease-out;
}
@keyframes itemAppear {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}
.confirmed-item .ci-icon { font-size: 1rem; }
.confirmed-item .ci-name {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--cream);
}
.confirmed-item .ci-time {
  margin-left: auto;
  font-size: 0.75rem;
  color: rgba(245,230,200,0.4);
  font-family: var(--font-heading);
  letter-spacing: 0.05em;
}

/* ══════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════ */
#site-footer {
  background: #000;
  text-align: center;
  padding: 3rem 1rem;
  border-top: 1px solid rgba(201,162,39,0.2);
}
.footer-ornament {
  font-size: 1rem;
  color: var(--gold);
  letter-spacing: 0.5em;
  margin: 0.5rem 0;
  opacity: 0.6;
}
.footer-text {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  color: var(--cream);
  opacity: 0.8;
  margin: 0.5rem 0;
}
.footer-text strong { color: var(--gold); }
.footer-sub {
  font-size: 0.85rem;
  color: rgba(245,230,200,0.5);
  margin: 0.3rem 0;
}
.footer-quote {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  color: var(--gold);
  opacity: 0.7;
  margin: 1rem 0;
}

/* ══════════════════════════════════════════════════════
   FLOATING BUTTONS
══════════════════════════════════════════════════════ */
#audio-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 1000;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(13,5,32,0.9);
  border: 1px solid rgba(201,162,39,0.5);
  color: var(--gold);
  font-size: 1.3rem;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 20px rgba(201,162,39,0.2);
  transition: all 0.3s;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
#audio-btn:hover {
  box-shadow: 0 0 30px rgba(201,162,39,0.5);
  transform: scale(1.1);
}
#audio-btn.hidden { display: none !important; }

#whatsapp-share {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 1000;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #25D366;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.4);
  transition: all 0.3s;
}
#whatsapp-share:hover {
  transform: scale(1.1);
  box-shadow: 0 0 30px rgba(37,211,102,0.6);
}
#whatsapp-share.hidden { display: none !important; }
#whatsapp-share img {
  width: 28px;
  height: 28px;
  filter: brightness(0) invert(1);
}

/* ══════════════════════════════════════════════════════
   ANIMATIONS FADE-IN-UP
══════════════════════════════════════════════════════ */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s, transform 1s;
}
.fade-in-up.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.3s; }
.delay-2 { transition-delay: 0.6s; }
.delay-3 { transition-delay: 0.9s; }

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .card-3d { display: none; }
  .time-sep { display: none; }
  #countdown-timer { gap: 0.5rem; }
}