/* ================================================================
   DARK ROMANTIC ATMOSPHERE — UNIFIED CINEMATIC BACKGROUND SYSTEM
   One single continuous background · Deep wine red · Burgundy · Crimson
   ================================================================ */

:root {
  --dark-wine: #0e0208;
  --dark-crimson: #1a0510;
  --dark-rose: #2e0a1e;
  --mid-rose: #4a1230;
  --glow-rose: rgba(180, 50, 90, 0.35);
  --glow-pink: rgba(255, 100, 150, 0.2);
  --text-light: rgba(255, 220, 235, 0.92);
  --text-muted: rgba(200, 150, 170, 0.7);
}

/* ================================================================
   GLOBAL FIXED BACKGROUND SYSTEM
   One unified background behind everything
   ================================================================ */

/* 1. Body is the root dark canvas */
html,
body {
  background: #0e0208 !important;
  min-height: 100%;
}

/* 2. Global fixed background layer — the ONE true background */
#global-bg-layer {
  position: fixed;
  inset: 0;
  z-index: -10;
  background: linear-gradient(
    160deg,
    #0e0208 0%,
    #1a0510 15%,
    #230818 30%,
    #1a0510 45%,
    #2a0c1c 60%,
    #1a0510 75%,
    #200714 90%,
    #0e0208 100%
  );
  pointer-events: none;
}

/* ── Slow-breathing ambient light radials — fixed so they never scroll */
#global-bg-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse 50% 35% at 20% 20%,
      rgba(140, 30, 70, 0.18) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 45% 30% at 80% 15%,
      rgba(100, 20, 55, 0.14) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 55% 35% at 15% 80%,
      rgba(120, 25, 60, 0.14) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 50% 35% at 85% 85%,
      rgba(90, 15, 45, 0.16) 0%,
      transparent 50%
    );
  pointer-events: none;
  animation: bg-breathe 12s ease-in-out infinite alternate;
}

/* 4. Top/bottom cinematic glow edge lights */
#global-bg-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse 90% 35% at 50% 0%,
      rgba(180, 50, 90, 0.12) 0%,
      transparent 65%
    ),
    radial-gradient(
      ellipse 80% 30% at 50% 100%,
      rgba(120, 25, 60, 0.14) 0%,
      transparent 65%
    );
  pointer-events: none;
}

@keyframes bg-breathe {
  0% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

/* ================================================================
   MAIN SITE — transparent overlay on top of global background
   ================================================================ */
#main-site {
  background: transparent !important;
  position: relative;
}

/* Remove the old ::before fixed background */
#main-site::before {
  display: none !important;
}

/* Remove the old ::after fog */
#main-site::after {
  display: none !important;
}

/* ================================================================
   ALL SECTIONS — fully transparent, NO individual backgrounds
   ================================================================ */
section,
#hero,
#message,
#reasons,
#garden,
#memories {
  background: transparent !important;
}

/* Garden section ambient — subtle, not conflicting */
.garden-bg {
  background: linear-gradient(
    180deg,
    transparent,
    rgba(60, 10, 30, 0.25) 30%,
    rgba(70, 15, 40, 0.2) 70%,
    transparent
  ) !important;
}

/* Finale section: use same dark atmosphere, NOT a separate background */
#finale {
  background: transparent !important;
}

/* Footer matches */
footer {
  background: rgba(8, 2, 12, 0.95) !important;
  border-top: 1px solid rgba(160, 50, 90, 0.15);
}

/* ================================================================
   CINEMATIC VIGNETTE — fixed overlay
   ================================================================ */
.cinematic-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(
    ellipse 100% 100% at 50% 50%,
    transparent 45%,
    rgba(6, 1, 6, 0.5) 100%
  );
}

/* ================================================================
   TEXT COLOR OVERRIDES FOR DARK BACKGROUND
   ================================================================ */
.hero-eyebrow {
  color: rgba(255, 160, 190, 0.85) !important;
}
.hero-title .line1 {
  color: rgba(255, 235, 240, 0.95) !important;
}
.hero-title .line2 {
  color: rgba(255, 160, 190, 0.9) !important;
}
.hero-sub {
  color: rgba(200, 150, 170, 0.8) !important;
}
.section-eyebrow {
  color: rgba(255, 140, 180, 0.9) !important;
}
.section-title {
  color: rgba(255, 225, 235, 0.95) !important;
}
.section-title em {
  color: rgba(255, 150, 185, 0.9) !important;
}
.scroll-btn {
  color: rgba(180, 120, 150, 0.7) !important;
}

.msg-title {
  color: rgba(255, 235, 240, 0.95) !important;
}
.msg-body {
  color: rgba(200, 160, 175, 0.85) !important;
}

.reason-card h3 {
  color: rgba(255, 225, 235, 0.95) !important;
}
.reason-card p {
  color: rgba(190, 145, 165, 0.8) !important;
}

.section-title.garden-title {
  color: rgba(255, 225, 235, 0.95) !important;
}
.garden-note {
  color: rgba(180, 130, 155, 0.7) !important;
}

.gallery-caption {
  color: rgba(220, 170, 190, 0.9) !important;
  background: rgba(0, 0, 0, 0.25) !important;
}
.gallery-note {
  color: rgba(180, 130, 155, 0.65) !important;
}

/* ================================================================
   GLASS MORPHISM — dark-adapted
   ================================================================ */
.glass {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 150, 180, 0.15) !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 200, 220, 0.08) !important;
}

.message-card {
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: rgba(255, 180, 200, 0.15) !important;
  box-shadow: 0 8px 60px rgba(0, 0, 0, 0.55), 0 0 50px rgba(160, 40, 90, 0.1),
    inset 0 1px 0 rgba(255, 200, 220, 0.1) !important;
}

.reason-card {
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(255, 150, 180, 0.12) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 180, 200, 0.08) !important;
}

/* ================================================================
   GALLERY PLACEHOLDER
   ================================================================ */
.gallery-placeholder {
  background: linear-gradient(
    135deg,
    rgba(70, 15, 35, 0.5),
    rgba(40, 8, 25, 0.45)
  ) !important;
}

/* ================================================================
   AMBIENT ORBS — now flower shapes, so minimal base styles
   ================================================================ */
.orb {
  position: absolute;
  border-radius: 0;
  background: none !important;
}

/* ================================================================
   SCROLLBAR
   ================================================================ */
::-webkit-scrollbar-track {
  background: #0e0208 !important;
}
::-webkit-scrollbar-thumb {
  background: rgba(160, 50, 90, 0.5) !important;
}

/* ================================================================
   SECTION BLEND SEPARATORS — ultra-soft
   ================================================================ */
section + section::before {
  content: "";
  display: block;
  width: 180px;
  height: 1px;
  margin: 0 auto -60px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(180, 60, 100, 0.25),
    transparent
  );
}

/* ================================================================
   GLOBAL AMBIENT CONTINUITY — Ensures cinematic feel EVERYWHERE
   ================================================================ */

/* Soft ambient radial that follows the page (not fixed) — adds warmth below hero */
#main-site::after {
  display: block !important;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
      ellipse 80% 25% at 50% 18%,
      rgba(140, 30, 70, 0.1) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 60% 20% at 20% 45%,
      rgba(100, 20, 55, 0.08) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 60% 20% at 80% 62%,
      rgba(120, 25, 60, 0.08) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 70% 20% at 50% 78%,
      rgba(110, 22, 58, 0.09) 0%,
      transparent 55%
    );
  pointer-events: none;
  z-index: 0;
}

/* Ensure particle-canvas and floral-canvas always stay fixed and visible */
#particle-canvas,
#floral-canvas,
#falling-petals {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
}

/* Sections sit ABOVE canvas layers so content is readable, canvases are z 2-4 */
#main-site section,
#main-site footer {
  position: relative !important;
  z-index: 15 !important;
}

/* BUT section backgrounds stay transparent so canvas shows through */
#hero,
#message,
#reasons,
#garden,
#memories,
#finale {
  background: transparent !important;
}

/* Each section gets a very subtle ambient warmth at its edges */
#message::after,
#reasons::after,
#garden::after,
#memories::after,
#finale::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 100% 40% at 50% 100%,
    rgba(80, 15, 40, 0.12) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* Section inner sits above ambient overlays */
.section-inner,
.message-card,
.reasons-grid,
.flower-garden,
.gallery-grid,
.finale-inner {
  position: relative;
  z-index: 2;
}