/*
 * Nova Static's skin: loaded after everything else, on this artist's site
 * only. The rest of the site picks up the hero's world: a broadcast monitor,
 * scanlines, a teletext ticker, headings that lose sync now and then.
 */

/* Section order: the mailing list straight under the ticker, the track last. */
main > [data-section="hero"] { order: 0; }
main > [data-section="ticker"] { order: 1; margin-top: 0; }
main > [data-section="list"] { order: 2; }
main > [data-section="next-gig"] { order: 3; }
main > [data-section="dates"] { order: 4; }
main > [data-section="track"] { order: 5; }
main > [data-section="credits"] { order: 6; }
main > [data-section="cta"] { order: 7; }

/* Scanlines over the whole site, faint enough to read through. */
.theme-bigroom::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.025) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

/* The ticker as a teletext row. */
main > [data-section="ticker"] {
  background: var(--br-red);
  border: 0;
}
main > [data-section="ticker"] .marquee-track,
main > [data-section="ticker"] .marquee-track * {
  color: var(--br-space);
  font-weight: 700;
}

/* Headings out of sync: lime and violet ghosts, and a tear every few seconds. */
.theme-bigroom h2 {
  text-shadow:
    2px 0 color-mix(in srgb, var(--br-red) 75%, transparent),
    -2px 0 color-mix(in srgb, var(--br-teal) 75%, transparent);
  animation: nova-tear 7s steps(1) infinite;
}
.theme-bigroom section:nth-of-type(2n) h2 { animation-delay: -3.1s; }
.theme-bigroom section:nth-of-type(3n) h2 { animation-delay: -5.4s; }

@keyframes nova-tear {
  0%, 93%, 100% { transform: none; clip-path: none; }
  94% { transform: translateX(-6px); clip-path: inset(0 0 55% 0); }
  95% { transform: translateX(9px); clip-path: inset(40% 0 10% 0); }
  96% { transform: translateX(-3px); clip-path: inset(70% 0 0 0); }
  97% { transform: translateX(4px); clip-path: none; }
}

/* Hard monitor edges instead of soft glass. */
.glass-panel {
  border-radius: 0 !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: color-mix(in srgb, var(--br-space) 80%, black);
  border: 1px solid color-mix(in srgb, var(--br-red) 35%, transparent);
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--br-teal) 35%, transparent);
}
.glass-panel .rounded-xl,
.glass-panel .rounded-2xl {
  border-radius: 0;
}

.beam-line {
  height: 1px;
  background: repeating-linear-gradient(to right, var(--br-red) 0 8px, transparent 8px 14px);
  box-shadow: none;
  opacity: 1;
}

/* The haze stays dark: the hero is the only light source. */
.ambient-haze {
  opacity: 0.35;
}

::selection {
  background: var(--br-red);
  color: var(--br-space);
}

@media (prefers-reduced-motion: reduce) {
  .theme-bigroom h2 { animation: none; }
}