/* ---------- Background + overlays ---------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 22% 78%, rgba(255, 60, 70, .12), transparent 18%),
    radial-gradient(circle at 70% 70%, rgba(255, 170, 90, .1), transparent 16%),
    linear-gradient(to top, #120a0d, var(--bg) 60%);
}

.fx-flash, .fx-vignette, .fx-scan, .fx-grain {
  position: fixed;
  pointer-events: none;
}

.fx-flash {
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at 50% 42%, rgba(var(--red-rgb), .2), transparent 62%);
  opacity: 0;
  will-change: opacity;
}

.fx-vignette {
  inset: 0;
  z-index: 20;
  background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(0, 0, 0, .72) 100%);
}
@media (max-width: 720px) {
  .fx-vignette { background: radial-gradient(ellipse at 50% 45%, transparent 60%, rgba(0, 0, 0, .5) 100%); }
}

.fx-scan {
  inset: 0;
  z-index: 21;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px);
  opacity: .4;
  will-change: opacity;
}

.fx-grain {
  inset: -8%;
  z-index: 22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .07;
  animation: grain .9s steps(5) infinite;
  will-change: transform, opacity;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-5%, 3%); }
  40% { transform: translate(4%, -3%); }
  60% { transform: translate(-3%, -5%); }
  80% { transform: translate(5%, 4%); }
  100% { transform: translate(0, 0); }
}

/* ---------- Reveal on scroll (only when JS is running) ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 48px, 0) scale(.985);
  transition:
    opacity .9s ease,
    transform 1.1s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Mono easter egg ---------- */
body.is-mono .hero__name { text-shadow: calc(var(--ab) * -1px) 0 rgba(255, 255, 255, .6), calc(var(--ab) * 1px) 0 rgba(120, 120, 120, .6); }
body.is-mono .btn--solid, body.is-mono .hud__play { color: #050507; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fx-grain { animation: none; }
  .fx-flash { display: none; }
  .intro__line path { animation-duration: .01s; animation-delay: 0s; }
  .intro__btn, .intro__alt { animation-duration: .01s; animation-delay: 0s; }
  .intro__btn-ring, .intro__btn-ring::after { animation: none; }
  .hero__name span { transform: none !important; }
  .js [data-reveal] { transform: none; transition: opacity .4s ease; }
}

/* ---------- Section heads draw their rule on reveal ---------- */
.js .section__head[data-reveal] { border-bottom-color: transparent; position: relative; }
.js .section__head[data-reveal]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--red), rgba(242, 238, 233, .1) 40%);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.4s var(--ease) .2s;
}
.js .section__head[data-reveal].is-in::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .concert__title { transform: none; }
  .call.is-ringing .call__icon { animation: none; }
}