/* Tazers Tier 1 atmosphere - shared across every page.
 *
 *   1. Site-wide grain overlay (analog feel)
 *   2. Generalized hero blob system (was home-only, now any page)
 *   3. Cosmic accent strip (animated gradient divider)
 *   4. Vinyl-spin loader (page transitions)
 *
 * All motion gated by prefers-reduced-motion.
 */

/* ============================================================
 * 1. SITE-WIDE GRAIN
 * Fixed full-viewport overlay with SVG noise filter. Painted ABOVE
 * background colors but BELOW page content using a low z-index.
 * ============================================================ */
.tz-site-grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: overlay;
  filter: url(#tz-grain);
}
/* Ensure interactive content sits above grain - DO NOT touch .tz-mobile-nav,
   it relies on its own position:fixed + translateX off-screen state. */
.tz-header,
.tz-footer,
main { position: relative; z-index: 2; }
/* Hero needs the grain to be visible OVER its colors, so amplify locally */
.tz-hero { isolation: isolate; }
.tz-hero .tz-grain { z-index: 4; }

/* ============================================================
 * 2. GENERALIZED HERO BLOBS
 * Was scoped under body.tz-home. Now any hero can drop the
 * <div class="tz-hero-blobs"> markup via tazers_hero_blobs().
 * ============================================================ */
.tz-hero-blobs {
  position: absolute;
  inset: -10%;
  z-index: 2;
  filter: url(#tz-goo) blur(28px);
  pointer-events: none;
  overflow: hidden;
}
/* Subtle variant for non-home heroes - lighter, less intense */
.tz-hero-blobs--subtle {
  filter: url(#tz-goo) blur(40px);
  opacity: 0.6;
}

.tz-hero-blobs .tz-blob {
  position: absolute;
  width: 60vmin;
  height: 60vmin;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
  opacity: 0.85;
  animation-duration: 55s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.5, 0.2, 0.5, 0.8);
  display: block;
}
.tz-hero-blobs--subtle .tz-blob { opacity: 0.6; width: 50vmin; height: 50vmin; }

.tz-hero-blobs .tz-blob--red-a { background: radial-gradient(circle, #E51A1A 0%, transparent 65%); top: -10%; left: -5%;   animation-name: tz-blob-a; }
.tz-hero-blobs .tz-blob--red-b { background: radial-gradient(circle, #FF3D00 0%, transparent 65%); top: 35%; right: -10%; animation-name: tz-blob-b; animation-duration: 65s; }
.tz-hero-blobs .tz-blob--coral { background: radial-gradient(circle, #E64A2E 0%, transparent 70%); bottom: -10%; left: 25%; animation-name: tz-blob-c; }
.tz-hero-blobs .tz-blob--gold  { background: radial-gradient(circle, #F2C94C 0%, transparent 75%); top: 20%; left: 50%;    animation-name: tz-blob-d; animation-duration: 72s; opacity: 0.55; }

@media (prefers-reduced-motion: reduce) {
  .tz-hero-blobs .tz-blob { animation: none; }
}

/* Position the blob layer inside hero sections that opt in */
.tz-about-hero,
.tz-music-hero,
.tz-shows-hero,
.tz-gallery-hero,
.tz-contact-hero,
.tz-press-hero,
.tz-music.tz-release .tz-release-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.tz-about-hero > .tz-container,
.tz-music-hero > .tz-container,
.tz-shows-hero > .tz-container,
.tz-gallery-hero > .tz-container,
.tz-contact-hero > .tz-container,
.tz-press-hero > .tz-container { position: relative; z-index: 3; }

/* ============================================================
 * 3. COSMIC ACCENT STRIP
 * Drop between sections via tazers_accent_strip(). Animated gradient
 * slides red -> magenta -> cobalt -> red on a long loop.
 * ============================================================ */
.tz-accent-strip {
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--tz-red) 0%,
    var(--tz-magenta) 25%,
    var(--tz-cobalt) 50%,
    var(--tz-magenta) 75%,
    var(--tz-red) 100%
  );
  background-size: 300% 100%;
  animation: tz-accent-flow 14s linear infinite;
  width: 100%;
}
@keyframes tz-accent-flow {
  from { background-position: 0% 50%; }
  to   { background-position: 300% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .tz-accent-strip { animation: none; }
}

/* ============================================================
 * 4. VINYL-SPIN PAGE-TRANSITION LOADER
 * Hidden by default. JS adds .is-visible on link click before nav.
 * ============================================================ */
.tz-vinyl-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms var(--ease-out), visibility 0s linear 180ms;
}
.tz-vinyl-loader.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 120ms var(--ease-out);
}

.tz-vinyl-loader__disc {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--tz-red) 0 11%, transparent 11% 14%, var(--tz-black) 14% 100%),
    repeating-radial-gradient(circle at 50% 50%, #1a1a1a 0 1px, #0a0a0a 1px 3px);
  position: relative;
  animation: tz-vinyl-spin 1.5s linear infinite;
  box-shadow: 0 0 0 1px rgba(229,26,26,0.4), 0 12px 32px rgba(0,0,0,0.6);
}
.tz-vinyl-loader__disc::after {
  content: "";
  position: absolute;
  inset: 44%;
  border-radius: 50%;
  background: var(--tz-black);
  box-shadow: 0 0 0 1px var(--tz-red);
}
@keyframes tz-vinyl-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .tz-vinyl-loader__disc { animation: none; }
}

/* ============================================================
 * 6. HEADLINE FUZZ-JITTER ON HOVER
 * Letters wobble via SVG displacement on hover - matches the fuzzed-out
 * logo aesthetic. Opt in by adding class .tz-fuzzable to headings.
 * For maximum impact we apply to all major page-hero titles by default.
 * ============================================================ */
.tz-fuzzable,
.tz-hero__slogan,
.tz-about-hero__quote,
.tz-music-hero__title,
.tz-shows-hero__title,
.tz-gallery-hero__title,
.tz-contact-hero__title,
.tz-press-hero__title,
.tz-section__title,
.tz-press__section-h,
.tz-shows__section-h {
  transition: filter 220ms var(--ease-out);
  cursor: default;
}
.tz-fuzzable:hover,
.tz-hero__slogan:hover,
.tz-about-hero__quote:hover,
.tz-music-hero__title:hover,
.tz-shows-hero__title:hover,
.tz-gallery-hero__title:hover,
.tz-contact-hero__title:hover,
.tz-press-hero__title:hover,
.tz-section__title:hover,
.tz-press__section-h:hover,
.tz-shows__section-h:hover {
  filter: url(#tz-fuzz);
}
@media (prefers-reduced-motion: reduce) {
  *:hover { filter: none !important; }
}

/* ============================================================
 * 7. VIEW TRANSITIONS API - one-liner cross-document
 * Browsers that support it (Chrome 126+, Safari 18+) get smooth fade
 * transitions on internal navigation. Others fall back to normal.
 * ============================================================ */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: tz-page-out 220ms var(--ease-out) forwards;
}
::view-transition-new(root) {
  animation: tz-page-in 280ms var(--ease-out) forwards;
}
@keyframes tz-page-out {
  to { opacity: 0; transform: scale(0.98); filter: blur(4px); }
}
@keyframes tz-page-in {
  from { opacity: 0; transform: scale(1.02); filter: blur(6px); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 0.01ms; }
}

/* ============================================================
 * 8. TILT-ON-HOVER CARDS (JS adds .is-tilted + sets CSS vars)
 * Subtle 3D perspective tilt for product/release/member/gig cards.
 * ============================================================ */
.tz-release-card,
.tz-member,
.tz-shop__card,
.tz-press-download__link,
.tz-gig,
.tz-shop-card {
  transform-style: preserve-3d;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
  will-change: transform;
}
.tz-release-card.is-tilted,
.tz-member.is-tilted,
.tz-shop__card.is-tilted,
.tz-press-download__link.is-tilted {
  transform: perspective(800px)
    rotateX(var(--tz-tilt-x, 0deg))
    rotateY(var(--tz-tilt-y, 0deg))
    translateZ(0);
}
@media (hover: none) or (prefers-reduced-motion: reduce) {
  .tz-release-card.is-tilted,
  .tz-member.is-tilted,
  .tz-shop__card.is-tilted,
  .tz-press-download__link.is-tilted { transform: none; }
}

/* ============================================================
 * 9. AUDIO-PULSE THEATRE
 * Fired when user clicks any "listen" CTA (Spotify, Bandcamp,
 * /music/ etc.). Body gets .tz-audio-pulse for ~1.8s, driving:
 *   - a brief brightness/saturation lift on accent strips and blobs
 *   - a localized ripple span injected into the clicked element
 * Gated entirely by JS (skipped on prefers-reduced-motion).
 * ============================================================ */
body.tz-audio-pulse .tz-accent-strip {
  animation-duration: 3s;
  filter: brightness(1.4) saturate(1.5) drop-shadow(0 0 12px rgba(230, 48, 125, 0.6));
  transition: filter 200ms var(--ease-out);
}
body.tz-audio-pulse .tz-hero-blobs,
body.tz-audio-pulse .tz-blob {
  filter: brightness(1.25) saturate(1.35);
  transition: filter 220ms var(--ease-out);
}
body.tz-audio-pulse .tz-vinyl-loader__disc {
  animation-duration: 0.8s; /* spin faster briefly if visible */
}

/* The injected ripple element */
.tz-audio-ripple {
  position: absolute;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  margin-top: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229, 26, 26, 0.85) 0%, rgba(230, 48, 125, 0.45) 40%, transparent 70%);
  pointer-events: none;
  transform: scale(0);
  animation: tz-audio-ripple-out 850ms ease-out forwards;
  z-index: 1;
}
@keyframes tz-audio-ripple-out {
  0%   { transform: scale(0);  opacity: 0.95; }
  60%  { opacity: 0.55; }
  100% { transform: scale(28); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tz-audio-ripple,
  body.tz-audio-pulse .tz-accent-strip,
  body.tz-audio-pulse .tz-hero-blobs,
  body.tz-audio-pulse .tz-blob,
  body.tz-audio-pulse .tz-vinyl-loader__disc {
    animation: none !important;
    filter: none !important;
  }
}