/* ============================================================
   MINALE BARLOW — Effects: atmosphere, motion, signal
   The "broadcast" layer: film grain, scanlines, neon glow,
   viewfinder brackets, blink/equaliser animations, easing.
   ============================================================ */
:root{
  /* ---- Elevation / shadow (dark UI: shadows are subtle, glow does the lifting) ---- */
  --shadow-panel:  0 1px 4px rgba(0,0,0,0.4);
  --shadow-deep:   inset 0 0 120px #0009;         /* vignette inside media */

  /* ---- Neon glow (signal, not decoration — use on live/active only) ---- */
  --glow-neon-sm:  0 0 12px var(--neon);
  --glow-neon-md:  0 0 24px -6px var(--neon);
  --glow-neon-lg:  0 0 30px -4px var(--neon);

  /* ---- Backdrop blur ---- */
  --blur-bar:      blur(8px);    /* @kind other */
  --blur-soft:     blur(4px);    /* @kind other */

  /* ---- Easing ---- */
  --ease-out:    cubic-bezier(.2,.8,.2,1);   /* @kind other */
  --ease-inout:  cubic-bezier(.4,0,.2,1);    /* @kind other */
  --dur-fast:    .18s; /* @kind other */
  --dur-base:    .25s; /* @kind other */
  --dur-slow:    .5s;  /* @kind other */

  /* ---- Atmosphere strengths ---- */
  --grain-opacity:    0.5;        /* @kind other */
  --scanline-color:   #b9d1360a;   /* neon @ ~4% — the green scanline veil */
}

/* ---- Film-grain + scanline overlay (apply to a full-bleed ::before) ---- */
.mb-grain::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:repeating-linear-gradient(0deg, #0000 0 3px, #00000010 3px 4px);
  mix-blend-mode:overlay; opacity:var(--grain-opacity);
}
.mb-grain::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% -10%, #ffffff0a, #0000 55%),
    radial-gradient(140% 120% at 50% 120%, #00000055, #0000 60%);
}

/* ---- Viewfinder corner brackets (wrap media in .mb-frame) ---- */
.mb-frame{ position:relative; }
.mb-frame::before,.mb-frame::after{
  content:""; position:absolute; width:26px; height:26px; pointer-events:none; z-index:3;
  border:2px solid var(--neon);
}
.mb-frame::before{ top:12px; left:12px; border-right:0; border-bottom:0; }
.mb-frame::after{ bottom:12px; right:12px; border-left:0; border-top:0; }

/* ---- Signature animations ---- */
@keyframes mb-blink{ 50%{ opacity:.25; box-shadow:none; } }
@keyframes mb-eq{ 50%{ transform:scaleY(.4); } }
@keyframes mb-nudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(8px); } }
@keyframes mb-scan{ to{ background-position:0 60px; } }

/* live status dot — the blinking "filming now" tally light */
.mb-tally{
  width:9px; height:9px; border-radius:var(--radius-pill);
  background:var(--neon); box-shadow:var(--glow-neon-sm);
  animation:mb-blink 1.1s steps(1,end) infinite;
}
@media (prefers-reduced-motion:reduce){
  .mb-tally{ animation:none; }
}