/* =========================================================
   atmosphere.css — cursor, film grain, light beams, particles
   ========================================================= */

/* =========================================================
   CUSTOM CURSOR — reticle
   ========================================================= */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 40px; height: 40px;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  transition: width 0.3s var(--ease), height 0.3s var(--ease);
}
.cursor svg {
  width: 100%; height: 100%;
  stroke: var(--ember);
  fill: none;
  stroke-width: 1;
}
.cursor.hover { width: 80px; height: 80px; }
.cursor.click { width: 24px; height: 24px; }
.cursor-dot {
  position: fixed;
  width: 4px; height: 4px;
  background: var(--ember);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px var(--ember);
}
@media (hover: none) { .cursor, .cursor-dot { display: none; } body, a, button { cursor: auto; } }


/* =========================================================
   GLOBAL FILM GRAIN + VIGNETTE
   ========================================================= */
.grain {
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>");
  pointer-events: none;
  z-index: 9000;
  opacity: 0.45;
  mix-blend-mode: overlay;
  animation: grainShift 0.8s steps(6) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-3%, 1%); }
  40%  { transform: translate(2%, -2%); }
  60%  { transform: translate(-1%, 2%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0,0); }
}

.vignette {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
  z-index: 8999;
}

.scanlines {
  position: fixed; inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0, transparent 2px, rgba(0,0,0,0.08) 3px, transparent 4px);
  pointer-events: none;
  z-index: 8998;
  opacity: 0.4;
}


/* =========================================================
   PARTICLE CANVAS — dust in projector light
   ========================================================= */
#particles {
  position: fixed; inset: 0;
  z-index: 1;
  pointer-events: none;
}


/* =========================================================
   LIGHT BEAMS — volumetric shafts (inside the canvas,
   scale with the film frame)
   ========================================================= */
.beams {
  position: absolute;
  top: 0; left: 0;
  width: 1920px;
  height: 1080px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.beam {
  position: absolute;
  top: -20%;
  width: 120px;
  height: 140%;
  background: linear-gradient(180deg, rgba(232,180,117,0.12) 0%, rgba(232,180,117,0.04) 40%, transparent 80%);
  transform-origin: top center;
  filter: blur(20px);
}
.beam-1 { left: 10%; transform: rotate(8deg); animation: beamDrift 14s ease-in-out infinite; }
.beam-2 { left: 45%; transform: rotate(-5deg); width: 180px; animation: beamDrift 18s ease-in-out infinite reverse; }
.beam-3 { right: 15%; transform: rotate(6deg); animation: beamDrift 16s ease-in-out infinite; animation-delay: -4s; }
@keyframes beamDrift {
  0%, 100% { transform: rotate(var(--r, 8deg)) translateX(0); opacity: 0.9; }
  50%      { transform: rotate(calc(var(--r, 8deg) + 3deg)) translateX(40px); opacity: 0.5; }
}


/* =========================================================
   MEDIA SCENE OVERRIDE
   When the active scene contains video or photo content
   (body.scene-has-media), the canvas-wide atmosphere layers
   are suppressed so the media displays bright and true to
   source. Atmosphere returns when navigating away from the
   media scene.
   ========================================================= */
body.scene-has-media #particles,
body.scene-has-media .vignette,
body.scene-has-media .grain,
body.scene-has-media .beams {
  display: none;
}