/* =============================================================================
   crt-effects.css
   Drop-in CRT / old television effect layer for photograph.php
   Targets: #photograph-map  (world map widget)
            #lightbox    (filmstrip lightbox)
   Usage: <link rel="stylesheet" href="css/crt-effects.css">
   ============================================================================= */


/* ── 1. SCANLINES ─────────────────────────────────────────────────────────────
   Fine horizontal lines (1px on / 1px gap) that mimic the phosphor row
   structure of a CRT screen. Overlaid via ::after on both surfaces.
   The existing #photograph-map::after in world-map.js is replaced by the rules
   below — these take over via higher specificity on #lightbox too.
   --------------------------------------------------------------------------- */

/* Map widget scanlines */
#photograph-map::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.0)  0px,
    rgba(0, 0, 0, 0.0)  1px,
    rgba(0, 0, 0, 0.22) 1px,
    rgba(0, 0, 0, 0.22) 2px
  );
  pointer-events: none;
  z-index: 10;
}


/* ── 2. BRIGHTNESS FLICKER ────────────────────────────────────────────────────
   Irregular opacity dips that simulate the warm-up / discharge flicker of an
   aging CRT tube.  Timings are intentionally non-round so they drift out of
   sync with each other over time.
   --------------------------------------------------------------------------- */

@keyframes crt-flicker-map {
  0%,  88% { opacity: 1; }
  89%       { opacity: 0.91; }
  90%       { opacity: 1; }
  93%       { opacity: 0.96; }
  94%       { opacity: 1; }
  97%       { opacity: 0.93; }
  100%      { opacity: 1; }
}

@keyframes crt-flicker-lb {
  0%,  91% { opacity: 1; }
  92%       { opacity: 0.93; }
  93%       { opacity: 1; }
  96%       { opacity: 0.97; }
  97%       { opacity: 1; }
  99%       { opacity: 0.94; }
  100%      { opacity: 1; }
}

#photograph-map {
  animation: crt-flicker-map 5.3s infinite;
}

/* ── 3. VERTICAL HOLD / ROLLING INTERFERENCE ─────────────────────────────────
   Occasionally the image shifts up/down a few pixels, as though the vertical
   hold is slipping.  The clip-path flash gives a brief "picture tearing" glitch
   on the frame of the lightbox image wrap.
   --------------------------------------------------------------------------- */

@keyframes crt-roll-map {
  0%,  90% { transform: translateY(0); }
  91%       { transform: translateY(2px); }
  92%       { transform: translateY(-1px); }
  93%       { transform: translateY(0); }
  /* second smaller slip */
  97%       { transform: translateY(1px); }
  98%       { transform: translateY(0); }
}

@keyframes crt-roll-lb {
  0%,  85% { transform: translateY(0); }
  86%       { transform: translateY(3px); }
  87%       { transform: translateY(-2px); }
  88%       { transform: translateY(1px); }
  89%       { transform: translateY(0); }
  95%       { transform: translateY(2px); }
  96%       { transform: translateY(0); }
}

/* Apply roll to the map's SVG wrapper only — prevents layout reflow */
#photograph-map-svg-wrap {
  animation: crt-roll-map 8.1s infinite;
  will-change: transform;
}


/* ── 4. HORIZONTAL INTERFERENCE SWEEP ────────────────────────────────────────
   A faint bright band drifts slowly downward, like a refresh bar on an old
   monitor being filmed by a camera.  Uses ::before on each container.
   --------------------------------------------------------------------------- */

@keyframes crt-sweep-map {
  0%   { background-position: 0 -150%; }
  100% { background-position: 0 250%; }
}

@keyframes crt-sweep-lb {
  0%   { background-position: 0 -150%; }
  100% { background-position: 0 250%; }
}

/* Map sweep — requires position:relative on #photograph-map (already set) */
#photograph-map::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent              35%,
    rgba(255,255,255,0.028)  48%,
    rgba(255,255,255,0.045)  50%,
    rgba(255,255,255,0.028)  52%,
    transparent              65%
  );
  background-size: 100% 300%;
  animation: crt-sweep-map 7s linear infinite;
  pointer-events: none;
  z-index: 11; /* above scanlines */
}


/* ── 5. SCREEN CURVATURE & PHOSPHOR GLOW ─────────────────────────────────────
   A slight perspective tilt and inner shadow give the filmstrip the look of
   content displayed on curved CRT glass.  The green box-shadow mimics the
   faint phosphor bloom that leaked around edges of green-phosphor monitors.
   --------------------------------------------------------------------------- */


/* ── 6. STATIC BURST ON IMAGE TRANSITION ─────────────────────────────────────
   When the lightbox image is in its "loading" state (class added by lbShow),
   a brief white-noise flash is painted by the JS canvas overlay (see
   crt-effects.js).  This rule fades that canvas in/out in sync with the
   80 ms swap window used in photograph.js.
   --------------------------------------------------------------------------- */

#crt-noise-canvas.active {
  opacity: 1;
}

/* Map noise canvas */
#crt-map-noise-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9;   /* below scanlines (z:10), above SVG */
  opacity: 1;
  width: 100%;
  height: 100%;
}