:root {
  /* Accent Colors */
  --primary-red: #ff1d42; /* Existing red */
  --secondary-orange: #edf060; /* Golden orange */
  --mint-green: #57A773; /* Mint green */
  --teal-blue: #ffedfb; /* Teal blue */
  --link-blue: #63a9ff; /* Teal blue */
  --hot-pink: #E86A92; /* Hot pink */ 
}

/* body {
  font-family: 'IBM Plex Mono', monospace;
  background-color: black;
  color: var(--primary-red);
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  text-align: center;
} */
* {
  background-color: #211a1e;
}

body {
  font-family: 'IBM Plex Mono', monospace;
  background-color: #211a1e;
  color: var(--teal-blue);
  font-size: 22px; /* Increased from 16px */
  line-height: 1.6; /* Slightly looser spacing for legibility */
  margin: 0;
  padding: 0;
  text-align: center;
}

a {
  color: var(--link-blue);
  /* text-decoration: none; */
  transition: color 0.3s ease;
}

main, .content, .ascii-shows, header, footer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}
  
nav ul {
  list-style: none;
  background: #211a1e;
  margin: 0;
  padding: 0.2rem 10px; /* tight rows: nav is split into 3 stacked <ul> rows */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.4rem; /* row-gap col-gap */
}


nav li a {
  color: var(--primary-red);
  font-weight: bold;
  font-size: 1.85rem; /* 28px roughly */
  transition: color 0.3s ease;
}


/* alternate the nav links through bright palette accents (cycles per row) */
nav li:nth-child(3n+1) a { color: var(--link-blue); }
nav li:nth-child(3n+2) a { color: var(--mint-green); }
nav li:nth-child(3n+3) a { color: var(--hot-pink); }

nav li a:hover {
  color: var(--secondary-orange); /* Hover color */
}

/* site copyright footer */
.site-footer {
  margin-top: 2.5rem;
  padding: 1.5rem 1rem;
  color: var(--secondary-orange);
  font-size: 0.8rem;
  text-align: center;
  opacity: 0.85;
}
.footer-goat {
  width: 120px;
  height: 120px;
  margin: 0 auto 0.5rem;
}
.footer-goat canvas { display: block; }

/* visually hidden but kept for screen readers / SEO (the mask logo is the
   visible title now) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* mask logo above the nav — at most a third of the page width, on any page */
.site-logo {
  display: block;
  max-width: 33.333vw;
  margin: 1rem auto 0.5rem;
}
.site-logo img {
  display: block;
  width: 100%;
  height: auto;
  border: 4px double var(--primary-red);
  box-shadow: 0 0 12px var(--hot-pink);
}
/* keep the logo crisp above the grit overlay, like the other imagery */
.grit .site-logo img { position: relative; z-index: 9999; }

.ascii-shows {
  font-family: 'IBM Plex Mono', monospace;
  background: #111;
  padding: 1rem;
  color: var(--primary-red);
  max-width: 2000px;
  margin: auto;
  white-space: pre-wrap;
  border: 4px double var(--primary-red);
  box-shadow: 0 0 12px var(--hot-pink);
  /* text-indent: 0; */
  text-align: left;
}

.ascii-shows a {
  color: var(--link-blue);
}

.ascii-shows a:hover {
  color: var(--secondary-orange);
  text-decoration: underline;
}

.ascii-shows-border {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--secondary-orange);
  font-size: 1.5rem;
  text-align: center;
  white-space: pre;
  overflow: hidden; /* clip the fixed-length border string so it can't overflow
                       the viewport and push the centered layout off-axis */
  max-width: 100%;
  padding: 0.5rem 0;
}

.ascii-title {
  font-size: 1.75rem;
  color: var(--primary-red);
}

.accent-pink {
  color: var(--hot-pink);
}

.accent-blue {
  color: var(--link-blue);
}

#sketch-container, #top-sketch, #bottom-sketch {
  position: relative;
  flex: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

canvas {
  display: block;
  margin: 0 auto;
}

h1, h2, h3 {
  color: var(--secondary-orange);
  text-transform: lowercase;
}
h1 {
  font-size: 4rem; /* Adjust this to make the font much bigger */
  font-weight: 900; /* Optional: Increase font weight for a bolder look */
  letter-spacing: 0.1em; /* Optional: Add some letter spacing for a wider effect */
  color: var(--secondary-orange); /* Retaining the secondary orange color for emphasis */
  text-transform: lowercase;
  margin-bottom: 1rem; /* Optional: Add some space below the h1 */
}

strong, em {
  color: var(--link-blue);
}

.show-note {
  color: #FF6347; /* Tomato red or any color you prefer */
  font-weight: bold; /* Make it bolder for emphasis */
  font-style: italic; /* Optional: italicize the text for more emphasis */
  background-color: #FFF0F0; /* Optional: Add a light background to make it pop */
  padding: 2px 5px; /* Add some padding to give it a "highlighted" effect */
}


.show-date {
  color: var(--teal-blue); 
  font-weight: bold;
}

.show-venue {
  color: var(--teal-blue); 
  font-style: italic;
}

.show-note {
  color: #FF6347; /* Tomato red */
  font-weight: bold;
  font-style: italic;
  background-color: #FFF0F0;
  padding: 2px 5px;
}

/* ===================== STORE ===================== */
.store-intro {
  text-align: center;
  color: var(--teal-blue);
  font-size: 1rem;
}

.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
  max-width: 1100px;
  margin: 1.5rem auto;
  text-align: left;
}

.store-card {
  border: 4px double var(--primary-red);
  box-shadow: 0 0 12px var(--hot-pink);
  background: #111;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.store-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 18px var(--secondary-orange);
}

.store-card--soldout {
  opacity: 0.55;
  filter: grayscale(0.4);
}

.store-card__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #211a1e;
  display: block;
}

.store-card__img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--secondary-orange);
}

.store-card__body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
  background: #111;
}

.store-card__tag {
  align-self: flex-start;
  font-size: 0.7rem;
  text-transform: lowercase;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border: 1px solid var(--secondary-orange);
  color: var(--secondary-orange);
  background: #111;
}
.store-card__tag--vinyl   { color: var(--primary-red);   border-color: var(--primary-red); }
.store-card__tag--digital { color: var(--link-blue);     border-color: var(--link-blue); }
.store-card__tag--merch   { color: var(--mint-green);    border-color: var(--mint-green); }

.store-card__name {
  margin: 0.2rem 0 0;
  font-size: 1.2rem;
  color: var(--secondary-orange);
}

.store-card__desc {
  margin: 0;
  font-size: 0.9rem;
  color: var(--teal-blue);
}

.store-card__price {
  margin: 0.2rem 0;
  font-weight: bold;
  color: var(--teal-blue);
}

.store-card__btn {
  margin-top: auto;
  display: block;
  text-align: center;
  padding: 0.6rem 1rem;
  border: 2px solid var(--link-blue);
  color: var(--link-blue);
  font-weight: bold;
  text-decoration: none;
  background: #111;
  transition: background 0.2s ease, color 0.2s ease;
}

.store-card__btn:hover {
  background: var(--link-blue);
  color: #111;
}

.store-card__btn--soldout {
  border-color: var(--primary-red);
  color: var(--primary-red);
  cursor: not-allowed;
}

.store-card__btn--soon {
  border-color: var(--secondary-orange);
  color: var(--secondary-orange);
  cursor: default;
}

/* ===================== EPK (press kit) =====================
   Built from the site's own language: centered, IBM Plex Mono,
   gold headings, ">>>" listings, and the signature double-red /
   hot-pink-glow #111 boxes used across .ascii-shows + .store-card.
   ========================================================== */
.epk-kicker {
  color: var(--secondary-orange);
  letter-spacing: 0.35em;
  text-transform: lowercase;
  font-size: 0.9rem;
  margin: 0.5rem 0 0;
}
.epk-tagline {
  color: var(--hot-pink);
  font-style: italic;
  font-size: 1.3rem;
  margin: 0.3rem 0 1.5rem;
}

/* wavy ascii divider, same motif as the animated borders */
.epk-rule {
  color: var(--secondary-orange);
  white-space: pre;
  overflow: hidden;
  font-size: 1.3rem;
  line-height: 1;
  margin: 2.5rem 0 1.5rem;
  text-align: center;
  opacity: 0.9;
}

.epk-section { margin: 1rem auto 2.5rem; max-width: 1100px; }

/* neon card — the site's signature container (double red + pink glow) */
.epk-card {
  border: 4px double var(--primary-red);
  box-shadow: 0 0 12px var(--hot-pink);
  background: #111;
  padding: 1rem;
}

/* video grid of neon cards */
.epk-videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  max-width: 1100px;
  margin: 1.5rem auto;
}
.epk-videos--feature { grid-template-columns: 1fr; max-width: 820px; }
.epk-videos--solo { grid-template-columns: 1fr; max-width: 360px; }
/* pair: a landscape + a portrait clip share a height, widths proportional to
   their aspect ratios (flex-grow ∝ aspect, flex-basis 0) instead of being
   squeezed into equal columns. */
.epk-videos--pair {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: 1100px;
}
.epk-videos--pair .epk-clip { margin: 0; flex-shrink: 1; flex-basis: 0; min-width: 240px; }
.epk-videos--pair .epk-clip video { width: 100%; height: auto; display: block; }
.epk-clip--landscape { flex-grow: 1.78; }
.epk-clip--landscape video { aspect-ratio: 16 / 9; }
.epk-clip--portrait { flex-grow: 0.56; }
.epk-clip--portrait video { aspect-ratio: 9 / 16; }
.epk-clip {
  margin: 0;
  border: 4px double var(--primary-red);
  box-shadow: 0 0 12px var(--hot-pink);
  background: #111;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.epk-clip:hover { transform: translateY(-4px); box-shadow: 0 0 18px var(--secondary-orange); }
.epk-clip video {
  display: block;
  width: 100%;
  background: #000;
}
.epk-clip figcaption {
  padding: 0.6rem;
  color: var(--secondary-orange);
  font-size: 0.8rem;
  text-transform: lowercase;
  letter-spacing: 0.15em;
}

/* selected shows — reuse the homepage ">>>" listing look */
.epk-shows {
  font-family: 'IBM Plex Mono', monospace;
  background: #111;
  padding: 1.2rem 1.5rem;
  color: var(--primary-red);
  max-width: 900px;
  margin: 1.5rem auto;
  border: 4px double var(--primary-red);
  box-shadow: 0 0 12px var(--hot-pink);
  text-align: left;
  list-style: none;
  line-height: 1.9;
}
.epk-shows li::before { content: ">>> "; color: var(--primary-red); }
.epk-shows .v { color: var(--teal-blue); font-weight: bold; }
.epk-shows .n { color: var(--hot-pink); font-style: italic; }

/* bio prose box */
.epk-bio {
  max-width: 760px;
  margin: 1.5rem auto;
  font-size: 1.05rem;
}
.epk-bio em, .epk-bio strong { color: var(--link-blue); }
.epk-flag, .epk-note { color: var(--secondary-orange); font-size: 0.85rem; }

/* press quote */
.epk-quote {
  max-width: 760px;
  margin: 1.5rem auto;
  border: 4px double var(--primary-red);
  box-shadow: 0 0 12px var(--hot-pink);
  background: #111;
  padding: 1.5rem;
  font-size: 1.2rem;
  color: var(--teal-blue);
}
.epk-quote cite {
  display: block;
  margin-top: 0.8rem;
  color: var(--hot-pink);
  font-size: 0.85rem;
  font-style: normal;
  text-transform: lowercase;
  letter-spacing: 0.15em;
}

/* photos */
.epk-photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  max-width: 1100px;
  margin: 1.5rem auto;
}
.epk-photos figure { margin: 0; }
.epk-photos img {
  width: 100%;
  height: auto;
  display: block;
  border: 4px double var(--primary-red);
  box-shadow: 0 0 12px var(--hot-pink);
}
.epk-photos figcaption { color: var(--hot-pink); font-size: 0.8rem; margin-top: 0.5rem; }

/* streaming / outbound link rows */
.epk-links { font-size: 1.1rem; margin: 1rem 0; }
.epk-links a { margin: 0 0.6rem; }

/* placeholders, in-language (golden dashed, #111) */
.epk-stub {
  border: 2px dashed var(--secondary-orange);
  background: #111;
  color: var(--secondary-orange);
  padding: 1.5rem 1rem;
  max-width: 760px;
  margin: 1.5rem auto;
}

.epk-book { font-size: 1.3rem; }

/* epk cover / hero — the signature double-red + pink-glow frame */
.epk-hero {
  max-width: 550px;
  margin: 1.5rem auto 0;
  border: 4px double var(--primary-red);
  box-shadow: 0 0 14px var(--hot-pink);
  background: #111;
  overflow: hidden;
}
.epk-hero img { width: 100%; height: auto; display: block; }
.epk-hero figcaption {
  color: var(--hot-pink);
  font-size: 0.75rem;
  text-transform: lowercase;
  letter-spacing: 0.15em;
  padding: 0.4rem 0.6rem;
  text-align: right;
}

/* bandcamp embed, framed like the neon cards */
.epk-bandcamp {
  width: fit-content;
  max-width: 100%;
  margin: 1.5rem auto;
  border: 4px double var(--primary-red);
  box-shadow: 0 0 12px var(--hot-pink);
  background: #111;
  padding: 0.4rem;
}
.epk-bandcamp iframe { display: block; max-width: 100%; }

/* press-photos teaser on the epk — three thumbs that open the gallery */
.epk-photo-teaser {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
  max-width: 900px;
  margin: 1.2rem auto 0;
  text-decoration: none;
}
.epk-photo-teaser img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border: 4px double var(--primary-red);
  box-shadow: 0 0 12px var(--hot-pink);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.epk-photo-teaser:hover img { transform: translateY(-4px); box-shadow: 0 0 18px var(--secondary-orange); }
.epk-teaser-cta {
  display: block;
  flex-basis: 100%;
  color: var(--secondary-orange);
  text-transform: lowercase;
  letter-spacing: 0.15em;
  font-size: 0.85rem;
  margin-top: 0.6rem;
}

/* ===================== gallery + photo carousel =====================
   Per-photographer galleries. Centers the photographer credit, then a
   one-at-a-time carousel framed in the site's double-red / pink glow. */
.gallery { max-width: 1100px; margin: 1.5rem auto 2.5rem; }
.gallery-vids { max-width: 1100px; margin: 1.5rem auto 2.5rem; }
.gallery-cred { margin: 0 0 1rem; }
.gallery-photographer {
  color: var(--secondary-orange);
  letter-spacing: 0.18em;
  text-transform: lowercase;
  font-size: 1rem;
  margin: 0;
}
.gallery-photographer a, .gallery-photographer span { color: var(--hot-pink); }
.gallery-event { color: var(--hot-pink); font-style: italic; margin: 0.2rem 0 0; }
.gallery-note {
  color: var(--secondary-orange);
  font-size: 0.85rem;
  max-width: 760px;
  margin: 1.5rem auto 0;
  border: 2px dashed var(--secondary-orange);
  background: #111;
  padding: 1rem;
}

.carousel { margin: 1.5rem auto 0; outline: none; }
.carousel-stage {
  position: relative;
  border: 4px double var(--primary-red);
  box-shadow: 0 0 12px var(--hot-pink);
  background: #111;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.carousel-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.carousel-slide.is-active { opacity: 1; pointer-events: auto; }
.carousel-slide img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(17, 17, 17, 0.7);
  color: var(--secondary-orange);
  border: 2px solid var(--primary-red);
  font-family: inherit;
  font-size: 2rem;
  line-height: 1;
  width: 2.6rem;
  height: 3.4rem;
  cursor: pointer;
  z-index: 2;
  transition: color 0.2s ease, box-shadow 0.2s ease;
}
.carousel-nav:hover { color: var(--hot-pink); box-shadow: 0 0 12px var(--hot-pink); }
.carousel-prev { left: 0.6rem; }
.carousel-next { right: 0.6rem; }
.carousel-counter {
  position: absolute;
  bottom: 0.6rem;
  right: 0.8rem;
  z-index: 2;
  color: var(--secondary-orange);
  font-size: 0.8rem;
  background: rgba(17, 17, 17, 0.7);
  padding: 0.15rem 0.5rem;
}

.carousel-thumbs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.8rem 0.2rem;
  scrollbar-width: thin;
}
.carousel-thumb {
  flex: 0 0 auto;
  padding: 0;
  background: #111;
  border: 2px solid transparent;
  cursor: pointer;
  line-height: 0;
  opacity: 0.55;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.carousel-thumb img { width: 76px; height: 76px; object-fit: cover; display: block; }
.carousel-thumb:hover { opacity: 0.85; }
.carousel-thumb.is-active { opacity: 1; border-color: var(--primary-red); box-shadow: 0 0 8px var(--hot-pink); }

@media (max-width: 600px) {
  .epk-tagline { font-size: 1.1rem; }
  .carousel-nav { font-size: 1.5rem; width: 2rem; height: 2.8rem; }
  .epk-photo-teaser img { width: 100px; height: 100px; }
}

/* ===================== GRIT =====================
   Degraded-signal / failing-neon texture, scoped to body.grit (main content
   site only — the /game and /chivo-fantasma pages share this stylesheet but
   carry no .grit class, so they stay clean). Subtle patina by design.
   Layers: film grain (::before) + CRT scanlines (::after) overlaying the
   background/frames/text; photos & video are lifted above the overlay so the
   imagery stays pristine. Headings get a chromatic split; glow frames buzz.
   ================================================ */

/* film grain — fixed SVG-noise tile, modulating the page like bad tape */
.grit::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.1;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation: grit-grain 0.7s steps(1) infinite;
}

/* CRT scanlines — faint dark hairlines every 3px, slow vertical roll */
.grit::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.24) 2px,
    rgba(0, 0, 0, 0.24) 3px
  );
  animation: grit-scan 10s linear infinite;
}

/* the grain "boils" — nudge the tile around so it never sits still */
@keyframes grit-grain {
  0%   { background-position: 0 0; }
  25%  { background-position: -40px 30px; }
  50%  { background-position: 60px -20px; }
  75%  { background-position: -30px -50px; }
  100% { background-position: 30px 40px; }
}
@keyframes grit-scan {
  from { background-position-y: 0; }
  to   { background-position-y: 3px; }
}

/* keep photos / video / sketches clean: lift them above the overlay layers */
.grit .carousel-stage,
.grit .carousel-slide img,
.grit .epk-clip video,
.grit .epk-photos img,
.grit .epk-hero img,
.grit .epk-bandcamp iframe,
.grit .epk-photo-teaser img,
.grit .store-card__img,
.grit #top-sketch canvas,
.grit #bottom-sketch canvas,
.grit #sketch canvas {
  position: relative;
  z-index: 9999;
}
/* ...but keep the carousel controls above the lifted slide image, or a wide
   (landscape) photo hides the prev/next buttons on the grit pages */
.grit .carousel-nav,
.grit .carousel-counter { z-index: 10000; }

/* occasional neon buzz on the signature double-red / glow frames */
@keyframes neon-buzz {
  0%, 86%, 100% { box-shadow: 0 0 12px var(--hot-pink); }
  87% { box-shadow: 0 0 3px var(--hot-pink); }
  88% { box-shadow: 0 0 13px var(--hot-pink); }
  89% { box-shadow: 0 0 2px var(--hot-pink); }
  90% { box-shadow: 0 0 14px var(--hot-pink); }
  91% { box-shadow: 0 0 6px var(--hot-pink); }
}
.grit .ascii-shows,
.grit .store-card,
.grit .epk-card,
.grit .epk-clip,
.grit .epk-shows,
.grit .epk-quote,
.grit .epk-photos img,
.grit .epk-hero,
.grit .epk-bandcamp,
.grit .carousel-stage,
.grit .epk-photo-teaser img {
  animation: neon-buzz 7s infinite;
}
/* desync the frames so they don't all flicker in unison */
.grit .store-card    { animation-duration: 8.5s; animation-delay: -2s; }
.grit .epk-clip      { animation-duration: 6.5s; animation-delay: -4s; }
.grit .epk-shows     { animation-duration: 9s;   animation-delay: -1s; }
.grit .carousel-stage{ animation-duration: 7.5s; animation-delay: -3s; }
.grit .epk-photos img{ animation-duration: 8s;   animation-delay: -5s; }
.grit .store-card:nth-child(2n) { animation-delay: -3.5s; }
.grit .store-card:nth-child(3n) { animation-delay: -6s; }

/* proximity flicker: grit.js toggles .is-near on the frame nearest the cursor.
   A faster, harder zap takes over the ambient buzz while you hover nearby. */
@keyframes neon-zap {
  0%   { box-shadow: 0 0 19px var(--hot-pink); }
  18%  { box-shadow: 0 0 3px  var(--hot-pink); }
  36%  { box-shadow: 0 0 21px var(--hot-pink); }
  52%  { box-shadow: 0 0 2px  var(--hot-pink); }
  68%  { box-shadow: 0 0 17px var(--hot-pink); }
  84%  { box-shadow: 0 0 5px  var(--hot-pink); }
  100% { box-shadow: 0 0 14px var(--hot-pink); }
}
.grit .zap {
  /* one quick 300ms burst on approach, then settle back to the ambient buzz */
  animation: neon-zap 0.3s steps(1) 1;
}

/* chromatic split on headings — constant faint offset + periodic burst */
@keyframes glitch-burst {
  0%, 92%, 100% {
    text-shadow: -0.6px 0 rgba(255, 40, 120, 0.5), 0.6px 0 rgba(0, 225, 255, 0.4);
    transform: translateX(0);
  }
  93% { text-shadow: -2px 0 rgba(255, 40, 120, 0.8), 2px 0 rgba(0, 225, 255, 0.7); transform: translateX(1px); }
  94% { text-shadow:  2px 0 rgba(255, 40, 120, 0.8), -2px 0 rgba(0, 225, 255, 0.7); transform: translateX(-1px); }
  95% { text-shadow: -2px 0 rgba(255, 40, 120, 0.8), 2px 0 rgba(0, 225, 255, 0.7); transform: translateX(1px); }
}
.grit h1,
.grit h2,
.grit h3,
.grit .ascii-title {
  text-shadow: -0.6px 0 rgba(255, 40, 120, 0.5), 0.6px 0 rgba(0, 225, 255, 0.4);
  animation: glitch-burst 7s steps(1) infinite;
}
.grit h2 { animation-delay: -2.5s; }
.grit h3 { animation-delay: -4.5s; }
.grit .ascii-title { animation-delay: -1.5s; }

/* honor reduced motion: keep the static texture, drop every animation */
@media (prefers-reduced-motion: reduce) {
  .grit::before,
  .grit::after,
  .grit .ascii-shows,
  .grit .store-card,
  .grit .epk-card,
  .grit .epk-clip,
  .grit .epk-shows,
  .grit .epk-quote,
  .grit .epk-photos img,
  .grit .epk-hero,
  .grit .epk-bandcamp,
  .grit .carousel-stage,
  .grit .epk-photo-teaser img,
  .grit h1,
  .grit h2,
  .grit h3,
  .grit .ascii-title {
    animation: none;
  }
}