/* Club Copy — broadcast / phosphor surface kit
   Dark immersive surfaces: hero, after-dark, shop hero, planet.
   Cool white scan + soft VHS edge — not cyan/magenta costume.
   Day-page chrome/bezel/specular live in site.css. */

:root {
  --fx-glass: rgba(255, 255, 255, .08);
  --fx-glass-border: rgba(255, 255, 255, .16);
  --fx-scan: rgba(255, 255, 255, .028);
  --fx-phosphor: rgba(220, 235, 255, .1);
  --fx-chrome: rgba(200, 214, 230, .22);
}

.fx-glass {
  background:
    linear-gradient(135deg, rgba(220,230,242,.12), rgba(255,255,255,.04) 48%, rgba(180,190,210,.08)),
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
  border: 1px solid var(--fx-glass-border);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 0 0 1px rgba(180,198,220,.08) inset,
    0 18px 48px rgba(0,0,0,.28);
}

.fx-phosphor {
  position: relative;
  isolation: isolate;
}
.fx-phosphor::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .42;
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, var(--fx-phosphor), transparent 58%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      var(--fx-scan) 2px,
      var(--fx-scan) 3px
    );
  mix-blend-mode: screen;
  animation: fxDrift 32s linear infinite;
}
.fx-phosphor::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, .35);
  opacity: .55;
}

.fx-grid-horizon {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .32;
  background:
    linear-gradient(180deg, transparent 0%, rgba(8,8,12,.25) 42%, rgba(8,8,12,.88) 100%),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 47px,
      rgba(255, 255, 255, .06) 47px,
      rgba(255, 255, 255, .06) 48px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 47px,
      rgba(255, 255, 255, .04) 47px,
      rgba(255, 255, 255, .04) 48px
    );
  transform: perspective(600px) rotateX(58deg) translateY(-12%) scale(1.35);
  transform-origin: center top;
  animation: fxGridPulse 20s ease-in-out infinite;
}

/* Station callsign / lower-third primitives */
.fx-callsign {
  font-family: var(--callsign, var(--display));
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(255, 255, 255, .55);
}

.fx-lower-third {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border: 1px solid rgba(200, 214, 230, .22);
  background: rgba(0, 0, 0, .35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--callsign, var(--display));
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}

.fx-lower-third__bug {
  letter-spacing: .08em;
  color: #fff;
  opacity: .9;
}

/* Dark-surface chrome hairline (shop hero, wall bridge) */
.fx-chrome-line {
  height: 1px;
  width: 100%;
  border: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(200,214,230,.35) 20%,
    rgba(255,255,255,.55) 50%,
    rgba(200,214,230,.35) 80%,
    transparent 100%);
  opacity: .7;
}

@keyframes fxDrift {
  0% { transform: translateY(0); }
  100% { transform: translateY(18px); }
}
@keyframes fxGridPulse {
  0%, 100% { opacity: .22; }
  50% { opacity: .38; }
}
@keyframes fxIdentIn {
  from { opacity: 0; transform: translateY(8px); letter-spacing: .32em; }
  to { opacity: 1; transform: none; letter-spacing: .22em; }
}
@keyframes fxBumperIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-phosphor::before,
  .fx-grid-horizon {
    animation: none !important;
  }
}