:root {
  --cinema-ambient-a: 32, 126, 255;
  --cinema-ambient-b: 210, 24, 62;
  --cinema-depth-x: 0px;
  --cinema-depth-y: 0px;
  --cinema-depth-rx: 0deg;
  --cinema-depth-ry: 0deg;
  --cinema-intensity: 0.72;
  --cinema-scale: 1;
}

.cinema-enhanced {
  isolation: isolate;
}

.cinema-enhanced .player-panel,
.cinema-enhanced .trailer-panel {
  position: relative;
  z-index: 1;
  overflow: visible;
}

.cinema-enhanced .player-stage,
.cinema-enhanced .trailer-stage,
.cinema-enhanced .player-stage-shell {
  position: relative;
  z-index: 2;
}

.cinema-env,
.cinema-frame-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  contain: layout paint style;
}

.cinema-env {
  z-index: 0;
  overflow: hidden;
  opacity: var(--cinema-intensity);
}

.player-overlay > .cinema-env,
.trailer-overlay > .cinema-env {
  position: fixed;
}

.cinema-frame-light {
  z-index: -1;
  inset: -18px;
  border-radius: inherit;
  opacity: calc(var(--cinema-intensity) * 0.74);
  transform: translate3d(var(--cinema-depth-x), var(--cinema-depth-y), 0) scale(var(--cinema-scale));
  background:
    radial-gradient(circle at 18% 20%, rgba(var(--cinema-ambient-a), 0.42), transparent 34%),
    radial-gradient(circle at 82% 74%, rgba(var(--cinema-ambient-b), 0.34), transparent 36%),
    linear-gradient(135deg, rgba(var(--cinema-ambient-a), 0.18), rgba(var(--cinema-ambient-b), 0.12));
  filter: blur(24px) saturate(1.2);
  will-change: transform, opacity;
}

.cinema-env__ambient,
.cinema-env__depth,
.cinema-env__haze,
.cinema-env__particles,
.cinema-env__vignette {
  position: absolute;
  inset: -18%;
  will-change: transform, opacity;
}

.cinema-env__ambient {
  opacity: 0.78;
  transform: translate3d(calc(var(--cinema-depth-x) * -0.55), calc(var(--cinema-depth-y) * -0.55), 0) scale(1.08);
  background:
    radial-gradient(circle at 20% 22%, rgba(var(--cinema-ambient-a), 0.34), transparent 34%),
    radial-gradient(circle at 78% 68%, rgba(var(--cinema-ambient-b), 0.3), transparent 38%),
    radial-gradient(circle at 52% 46%, rgba(255, 255, 255, 0.055), transparent 32%);
  filter: blur(42px) saturate(1.24);
}

.cinema-env__depth {
  opacity: 0.46;
  transform: translate3d(calc(var(--cinema-depth-x) * 0.8), calc(var(--cinema-depth-y) * 0.8), 0);
  background:
    linear-gradient(115deg, rgba(var(--cinema-ambient-a), 0.16), transparent 38%),
    linear-gradient(295deg, rgba(var(--cinema-ambient-b), 0.13), transparent 42%);
  filter: blur(28px);
}

.cinema-env__haze {
  opacity: 0.36;
  transform: translate3d(calc(var(--cinema-depth-x) * 0.28), calc(var(--cinema-depth-y) * 0.28), 0);
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, 0.07), transparent 44%),
    linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.035) 46%, transparent 100%);
  filter: blur(18px);
}

.cinema-env__particles {
  opacity: 0.34;
  transform: translate3d(calc(var(--cinema-depth-x) * -0.18), calc(var(--cinema-depth-y) * -0.18), 0);
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.32) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(var(--cinema-ambient-a), 0.26) 0 1px, transparent 2px);
  background-size: 120px 120px, 180px 180px;
  background-position: 0 0, 38px 62px;
  animation: cinemaParticleDrift 22s linear infinite;
}

.cinema-env__vignette {
  inset: 0;
  opacity: 0.76;
  background:
    radial-gradient(ellipse at center, transparent 0%, transparent 46%, rgba(0, 0, 0, 0.62) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.5));
}

.cinema-enhanced .player-panel,
.cinema-enhanced .trailer-panel {
  transform: perspective(1200px) rotateX(var(--cinema-depth-rx)) rotateY(var(--cinema-depth-ry));
  transform-style: preserve-3d;
  will-change: transform;
}

.cinema-enhanced .player-stage-shell::after,
.cinema-enhanced .trailer-stage::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    0 0 32px rgba(var(--cinema-ambient-a), 0.22),
    0 0 68px rgba(var(--cinema-ambient-b), 0.18),
    inset 0 0 24px rgba(255, 255, 255, 0.045);
  opacity: calc(var(--cinema-intensity) * 0.82);
}

.cinema-enhanced.is-cinema-fullscreen {
  --cinema-intensity: 0.88;
  --cinema-scale: 1.06;
}

.cinema-quality-low .cinema-env__particles,
.cinema-quality-low .cinema-env__haze,
.cinema-quality-low .cinema-frame-light {
  display: none;
}

.cinema-quality-low .cinema-env {
  display: none;
}

.cinema-quality-low .cinema-env__ambient,
.cinema-quality-low .cinema-env__depth {
  filter: blur(28px);
}

@keyframes cinemaParticleDrift {
  from {
    background-position: 0 0, 38px 62px;
  }
  to {
    background-position: 120px -120px, 218px -118px;
  }
}

@media (max-width: 900px), (pointer: coarse) {
  :root {
    --cinema-intensity: 0.5;
  }

  .cinema-frame-light {
    inset: -10px;
    filter: blur(18px) saturate(1.12);
  }

  .cinema-env__particles {
    display: none;
  }

  .cinema-enhanced .player-panel,
  .cinema-enhanced .trailer-panel {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cinema-env__particles {
    animation: none;
  }

  .cinema-enhanced .player-panel,
  .cinema-enhanced .trailer-panel,
  .cinema-frame-light,
  .cinema-env__ambient,
  .cinema-env__depth,
  .cinema-env__haze {
    transform: none;
  }
}