/* ==========================================================================
   BROADCASTIFY STUDIO — THEME
   Design language: broadcast HUD / viewfinder chrome.
   Signature element: the viewfinder frame (corner brackets, tally light,
   running timecode, signal meter) that wraps the hero video and echoes
   as a quiet motif on cards throughout the page.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Color: named for what they mean on set, not what they look like ---- */
  --void:        #05070d;   /* deepest background */
  --ink:         #0a0f1c;   /* dark section surface */
  --ink-raised:  #101828;   /* dark card surface */
  --hairline:    rgba(255,255,255,0.09);
  --hairline-strong: rgba(255,255,255,0.16);

  --paper:       #f5f7fb;   /* light section surface */
  --paper-dim:   #e9edf5;   /* light card surface */

  --signal-blue: #0b6eff;   /* primary brand — matches logo swoosh */
  --signal-blue-bright: #3d8bff;
  --cyan:        #34e7ff;   /* secondary glow / tech accent */
  --lens-violet: #9b4dff;   /* lens-glow accent, used sparingly */
  --tally-red:   #ff3b3b;   /* reserved: on-air / recording states only */
  --tally-green: #29e07d;   /* reserved: connected / ready states only */

  --text-hi:     #f3f6fc;   /* headings on dark */
  --text-lo:     #93a0b8;   /* body on dark */
  --text-faint:  #5c6786;   /* captions on dark */

  --text-hi-on-light: #0a0f1c;
  --text-lo-on-light: #4d5771;

  /* ---- Type ---- */
  --font-display: 'Big Shoulders Display', sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* ---- Radius / shadow / glass ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 26px;
  --glass-bg: rgba(16, 24, 40, 0.55);
  --glass-bg-light: rgba(255, 255, 255, 0.6);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glow-blue: 0 0 40px rgba(11, 110, 255, 0.35);
  --glow-cyan: 0 0 40px rgba(52, 231, 255, 0.25);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Adaptive Liquid Glass ----
     Live-updated by main.js from the actual brightness of the video frame
     currently behind the content, so translucency and text legibility
     hold up whether the footage underneath is deep navy or blown-out neon.
     These are safe defaults for the moment before the first frame loads. */
  --adaptive-dark-alpha: 0.42;   /* opacity of dark/void glass surfaces */
  --adaptive-light-alpha: 0.62;  /* opacity of light glass surfaces */
}

/* ==========================================================================
   Required page animations
   ========================================================================== */

@keyframes fade-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-rise {
  animation: fade-rise 0.8s var(--ease-out) both;
}

.fade-rise-delay {
  animation: fade-rise 0.8s var(--ease-out) 0.2s both;
}

.fade-rise-delay-2 {
  animation: fade-rise 0.8s var(--ease-out) 0.4s both;
}

/* Scroll-triggered variant: elements start hidden until .in-view is added by
   the IntersectionObserver in main.js, then play the same fade-rise curve. */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
}
[data-reveal].in-view {
  animation: fade-rise 0.8s var(--ease-out) both;
}
[data-reveal="delay-1"].in-view { animation: fade-rise 0.8s var(--ease-out) 0.2s both; }
[data-reveal="delay-2"].in-view { animation: fade-rise 0.8s var(--ease-out) 0.4s both; }

/* Tally / live pulse — used ONLY on genuine on-air / recording indicators */
@keyframes tally-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,59,59,0.55); }
  50%      { opacity: 0.55; box-shadow: 0 0 0 6px rgba(255,59,59,0); }
}

@keyframes drift {
  0%   { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-50%,0,0); }
}

@media (prefers-reduced-motion: reduce) {
  .fade-rise, .fade-rise-delay, .fade-rise-delay-2,
  [data-reveal].in-view { animation: none !important; opacity: 1 !important; transform: none !important; }
  * { scroll-behavior: auto !important; }
}