/* ================================================================
   JIL CINEMATIC BACKGROUND SYSTEM
   Multi-layer premium background for Apple/Stripe-level visual feel.
   Reads --cinematic-* tokens from jil-tokens.css per theme.
   ================================================================

   Layer stack:
     body          - radial glows + base gradient (fixed)
     body::before  - CSS grid pattern (z-index: -2)
     body::after   - dark readability overlay (z-index: -1)
     .jil-cinematic-hero   - opt-in hero glow
     .jil-cinematic-glass  - glass morphism card
   ================================================================ */

/* -- Layer 1: Base gradient on body ----------------------------- */
body {
  background: var(--cinematic-base, var(--bg-page));
  background-attachment: fixed;
  min-height: 100vh;
}

/* -- Layer 2: CSS grid pattern ---------------------------------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(var(--cinematic-grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--cinematic-grid-color) 1px, transparent 1px);
  background-size: var(--cinematic-grid-size) var(--cinematic-grid-size);
  opacity: 0.3;
}

/* -- Layer 3: Dark readability overlay -------------------------- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--cinematic-overlay);
}

/* -- Disable pseudo-layers on light theme ----------------------- */
[data-theme="sovereign-light"] body::before,
[data-theme="sovereign-light"] body::after {
  display: none;
}

/* -- Layer 4: Hero glow (opt-in class) -------------------------- */
.jil-cinematic-hero {
  position: relative;
}
.jil-cinematic-hero::before {
  content: '';
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 140%;
  height: 500px;
  background: var(--cinematic-hero-glow);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.jil-cinematic-hero > * {
  position: relative;
  z-index: 1;
}

/* -- Layer 5: Glass morphism card ------------------------------- */
.jil-cinematic-glass {
  background: var(--cinematic-glass-bg);
  backdrop-filter: var(--cinematic-glass-blur);
  -webkit-backdrop-filter: var(--cinematic-glass-blur);
  border: 1px solid var(--cinematic-glass-border);
  border-radius: var(--radius-lg, 16px);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.jil-cinematic-glass:hover {
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* -- Respect reduced motion ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .jil-cinematic-hero::before {
    filter: none;
  }
}