/*
 * ==========================================================================
 * SCRIPTOR HOUSE — CINEMATIC LIVE BACKGROUND
 * Film grain, projector light beams, floating bokeh particles
 * ==========================================================================
 */

/* ─── Canvas Layer (film grain + beams) ─── */
#cinematic-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 1;
}

/* ─── Film strip edges ─── */
#cinematic-filmstrip-left,
#cinematic-filmstrip-right {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 18px;
  z-index: 10;
  pointer-events: none;
  overflow: hidden;
}

#cinematic-filmstrip-left  { left: 0; }
#cinematic-filmstrip-right { right: 0; }

.filmstrip-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(10, 5, 2, 0.75);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 18px,
    rgba(255,255,255,0.055) 18px,
    rgba(255,255,255,0.055) 20px,
    transparent 20px,
    transparent 22px,
    rgba(0,0,0,0.4) 22px,
    rgba(0,0,0,0.4) 40px
  );
  animation: filmstrip-scroll 3s linear infinite;
}

@keyframes filmstrip-scroll {
  from { background-position: 0 0; }
  to   { background-position: 0 40px; }
}

#cinematic-filmstrip-right .filmstrip-inner {
  animation-direction: reverse;
}

/* ─── Projector vignette overlay ─── */
#cinematic-vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 85% 75% at 50% 42%,
    transparent 35%,
    rgba(10, 4, 1, 0.45) 70%,
    rgba(5, 2, 0, 0.80) 100%
  );
}

/* ─── Dust particles ─── */
.cinematic-dust {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  animation: dust-float linear infinite;
  will-change: transform, opacity;
}

@keyframes dust-float {
  0%   { transform: translateY(110vh) translateX(0px); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(-10vh) translateX(var(--drift, 60px)); opacity: 0; }
}