/* =====================================================
   PIXEL-stream — CINEMATIC ENTERPRISE LAYER (FIXED)
   Visual Enhancement Only • No Layout Logic
===================================================== */

:root {
  --cin-bg: #020014;
  --cin-panel: rgba(20, 14, 40, 0.55);
  --cin-border: rgba(255, 255, 255, 0.08);

  --cin-violet: #8a2be2;
  --cin-soft: rgba(138, 43, 226, 0.25);
}

/* =====================================================
   GLOBAL CINEMATIC DEPTH (SAFE)
===================================================== */

body {
  background:
    radial-gradient(
      circle at 20% 0%,
      rgba(138, 43, 226, 0.22),
      transparent 55%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(88, 64, 180, 0.18),
      transparent 60%
    ),
    var(--cin-bg);
}

/* =====================================================
   HEADER — DEPTH ONLY (NO SIZE CHANGE)
===================================================== */

header {
  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

/* Search refinement */
.search-bar:focus {
  box-shadow:
    0 0 0 3px var(--cin-soft),
    0 0 24px rgba(138, 43, 226, 0.35);
}

/* =====================================================
   HERO — CINEMATIC DEPTH (NO FIXED BG)
===================================================== */

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background: linear-gradient(
    to top,
    rgba(2, 0, 20, 0.95),
    rgba(2, 0, 20, 0.4) 45%,
    transparent 70%
  );
}

/* =====================================================
   SECTION STABILITY
===================================================== */

.section {
  position: relative;
  z-index: 2;
}

/* =====================================================
   CARDS — DEPTH WITHOUT DARKENING
===================================================== */

.card,
.media-card {
  box-shadow:
    0 20px 55px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* Hover polish */
.card:hover,
.media-card:hover {
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* =====================================================
   TITLES — READABLE BUT CLEAN
===================================================== */

.card p,
.media-card .title {
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.9);
}

/* =====================================================
   AD CONTAINERS — SOFT SEPARATION
===================================================== */

.sv-hero-native {
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.75),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* =====================================================
   FOOTER — CINEMATIC FADE
===================================================== */

.site-footer {
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.45));
}