/* ============================================================
   ANNA LIES — band site.

   Structure:
     1. Hero        single-viewport, static foreground, breathing fig
     2. Witnesses   pinned section, scroll-scrubbed crossfade of 5 photos
     3. Room        one line of copy + triptych of the same room over time
     4. Closing     philosophy fragment + footer wordmark

   Motion rules:
     - The foreground does not arrive. Content is present at t=0.
     - The substrate (fig) breathes + drifts. The foreground does not.
     - Individual punctuation marks twitch on long, unsynced periods.
     - The witnesses crossfade is the only scroll-scrubbed motion.
     - No easing named ease-out-*, no bounce, no elastic.
   ============================================================ */
@import url('colors_and_type.css?v=13');

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--ink);
}

body {
  color: var(--paper);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body ::selection { background: var(--paper); color: var(--ink); }

/* ============================================================
   Section 1 — Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 5vh, 64px) 24px;
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vh, 40px);
  text-align: center;
  width: 100%;
}

/* ------------------------------------------------------------
   Background fig — breathes + drifts on two unsynced loops.
   ------------------------------------------------------------ */
.bg-fig {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(90vh, 90vw);
  height: min(90vh, 90vw);
  color: #000000;
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  will-change: transform, opacity;
  animation:
    fig-breath 19s cubic-bezier(.4, 0, .5, 1) infinite,
    fig-drift 47s cubic-bezier(.5, 0, .5, 1) infinite;
}
.bg-fig path { fill: currentColor; }

/* ------------------------------------------------------------
   Wordmark — already on the page. No load-in.
   ------------------------------------------------------------ */
.wordmark {
  width: min(380px, 56vw);
  color: var(--paper);
  line-height: 0;
}
.wordmark svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ------------------------------------------------------------
   Editorial fragment
   ------------------------------------------------------------ */
.fragment {
  font-family: var(--font-editorial);
  font-weight: var(--fw-regular);
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: var(--lh-normal);
  color: var(--grey-light);
  max-width: 44ch;
  margin: 0;
  padding: 0 8px;
}

/* ------------------------------------------------------------
   Release card
   ------------------------------------------------------------ */
.release {
  position: relative;
  display: grid;
  grid-template-columns: 120px auto;
  justify-content: center;
  align-items: start;
  gap: 24px;
  width: min(460px, 92vw);
  padding: 18px 22px 18px 18px;
  background: transparent;
  text-align: left;
}

.release::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--dried-blood), var(--dried-blood)),
    linear-gradient(var(--dried-blood), var(--dried-blood)),
    linear-gradient(var(--dried-blood), var(--dried-blood)),
    linear-gradient(var(--dried-blood), var(--dried-blood)),
    linear-gradient(var(--dried-blood), var(--dried-blood)),
    linear-gradient(var(--dried-blood), var(--dried-blood)),
    linear-gradient(var(--dried-blood), var(--dried-blood)),
    linear-gradient(var(--dried-blood), var(--dried-blood));
  background-size:
    1px 14px, 14px 1px,
    1px 14px, 14px 1px,
    1px 14px, 14px 1px,
    1px 14px, 14px 1px;
  background-position:
    left top,    left top,
    right top,   right top,
    left bottom, left bottom,
    right bottom, right bottom;
  background-repeat: no-repeat;
}

.release-cover {
  display: block;
  width: 120px;
  height: 120px;
  outline: none;
}
.release-cover:focus-visible .cover-field {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}
.cover-field {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--dried-blood);
  color: var(--paper);
}
.cover-mark {
  width: 70%;
  height: auto;
  display: block;
}

.release-meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  height: 120px;
  justify-content: space-between;
}

.release-title {
  margin: 0;
  font-family: var(--font-editorial);
  font-weight: var(--fw-regular);
  font-size: clamp(18px, 1.7vw, 22px);
  letter-spacing: var(--tr-wide);
  color: var(--paper);
  line-height: 1.15;
}

.release-avail {
  margin: 0;
  font-size: var(--fs-13);
  line-height: var(--lh-reading);
  color: var(--grey-light);
  font-weight: var(--fw-regular);
}

/* ------------------------------------------------------------
   Buttons (solid only — outline button removed per brief)
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 18px;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-11);
  line-height: 1;
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background var(--dur-slow) var(--ease-quiet),
    color var(--dur-slow) var(--ease-quiet),
    border-color var(--dur-slow) var(--ease-quiet);
}

.btn-solid {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
  align-self: flex-start;
  margin-top: 0;
}
.btn-solid:hover { background: var(--grey-light); border-color: var(--grey-light); }
.btn-solid:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}

/* ============================================================
   Section 2 — Witnesses (scroll-scrubbed crossfade)
   Carousel: one viewport-tall section, photos crossfade on
   prev/next/dot interaction. No scroll scrubbing.
   ============================================================ */
.witnesses {
  position: relative;
  height: 100vh;
  height: 100svh;
  background: var(--ink);
}

.witnesses-pin {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.witness {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  z-index: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}
.witness.is-leaving {
  opacity: 1;
  z-index: 1;
}
.witness.is-active {
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
}
.witness img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.02);
}

/* Carousel nav arrows */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--paper);
  opacity: 0.5;
  padding: 16px;
  transition: opacity 0.2s;
  line-height: 0;
}
.carousel-btn:hover,
.carousel-btn:focus-visible { opacity: 1; outline: none; }
.carousel-btn--prev { left: 12px; }
.carousel-btn--next { right: 12px; }

/* Carousel dot indicators */
.carousel-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}
.carousel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--paper);
  opacity: 0.3;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.25s;
}
.carousel-dot.is-active { opacity: 1; }
.carousel-dot:focus-visible { outline: 1px solid var(--paper); outline-offset: 3px; }

/* ------------------------------------------------------------
   Photo credit — a thin band between the plates and the room.
   Editorial italic, right-aligned, one line. The name is the
   link; an arrow glyph is the only extra affordance.
   ------------------------------------------------------------ */
.photo-credit {
  background: var(--ink);
  padding: 22px clamp(24px, 6vw, 72px);
  text-align: right;
  border-top: 1px solid rgba(238, 233, 223, 0.08);
}
.photo-credit p {
  margin: 0;
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: var(--fs-13);
  line-height: var(--lh-reading);
  letter-spacing: var(--tr-loose);
  color: var(--grey-cool);
}
.photo-credit a {
  color: var(--grey-light);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    color var(--dur-slow) var(--ease-quiet),
    border-color var(--dur-slow) var(--ease-quiet);
}
.photo-credit a:hover,
.photo-credit a:focus-visible {
  color: var(--paper);
  border-bottom-color: var(--dried-blood);
  outline: none;
}
.credit-arrow {
  display: inline-block;
  margin-left: 0.3em;
  opacity: 0.55;
  font-style: normal;
  transition: opacity var(--dur-slow) var(--ease-quiet), transform var(--dur-slow) var(--ease-quiet);
}
.photo-credit a:hover .credit-arrow,
.photo-credit a:focus-visible .credit-arrow {
  opacity: 1;
  transform: translate(1px, -1px);
}

/* ------------------------------------------------------------
   Contact links — same quiet-link family as the photo credit.
   Two placements: one in the hero (bottom-right, discoverable)
   and one in the closing section (after the philosophy line,
   before the wordmark — a committed offer of reach).
   ------------------------------------------------------------ */
.hero-contact,
.closing-contact {
  margin: 0;
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: var(--fs-13);
  line-height: var(--lh-reading);
  letter-spacing: var(--tr-loose);
  color: var(--grey-cool);
}
.hero-contact a,
.closing-contact a {
  color: var(--grey-light);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  margin-left: 0.6em;
  transition:
    color var(--dur-slow) var(--ease-quiet),
    border-color var(--dur-slow) var(--ease-quiet);
}
.hero-contact a:hover,
.hero-contact a:focus-visible,
.closing-contact a:hover,
.closing-contact a:focus-visible {
  color: var(--paper);
  border-bottom-color: var(--dried-blood);
  outline: none;
}
.credit-prefix {
  /* Small-caps label in front of the email — e.g. "Contact" / "Reach us" */
  font-style: normal;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-caption);
  text-transform: uppercase;
  color: var(--grey-cool);
}

/* Hero contact — bottom-center, a whisper at the floor of the
   first viewport. No prefix label; the word "Contact" is the link. */
.hero-contact {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 4vh, 40px);
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
}
.hero-contact a {
  margin-left: 0;
}

/* Closing contact — centered, paired with the closing line. */
.closing-contact {
  text-align: center;
}

/* Closing socials — two quiet links, centered, below the contact.
   Same editorial italic register as the photo credit and contact. */
.closing-socials {
  margin: 0;
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: var(--fs-13);
  line-height: var(--lh-reading);
  letter-spacing: var(--tr-loose);
  color: var(--grey-cool);
  text-align: center;
}
.closing-socials a {
  color: var(--grey-light);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  margin: 0 0.1em;
  transition:
    color var(--dur-slow) var(--ease-quiet),
    border-color var(--dur-slow) var(--ease-quiet);
}
.closing-socials a:hover,
.closing-socials a:focus-visible {
  color: var(--paper);
  border-bottom-color: var(--dried-blood);
  outline: none;
}
.closing-socials .sep {
  display: inline-block;
  margin: 0 0.35em;
  color: var(--grey-cool);
  opacity: 0.55;
}

/* Closing passage — multi-part replacement for .closing-line.
   Questions sit lighter; the tail carries the weight. */
.closing-passage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2.5vh, 28px);
  max-width: 42ch;
  margin: 0;
}
.closing-passage p {
  margin: 0;
  color: var(--paper);
  font-family: var(--font-editorial);
  font-weight: var(--fw-regular);
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: var(--lh-editorial);
  text-wrap: pretty;
}
.closing-q { color: var(--grey-light); }
.closing-tail {
  margin-top: clamp(6px, 1vh, 14px) !important;
}

/* ============================================================
   Section 3 — The room
   ============================================================ */
.room {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(80px, 12vh, 160px) 24px;
  background: var(--ink);
}

.room-inner {
  width: 100%;
  max-width: 1280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(48px, 8vh, 96px);
  text-align: center;
}

.room-line {
  color: var(--paper);
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: var(--lh-editorial);
  margin: 0;
}

.room-triptych {
  margin: 0;
  width: 100%;
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, black 12%, black 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
  -webkit-mask-composite: destination-in;
  mask-image:
    linear-gradient(to right,  transparent 0%, black 12%, black 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
  mask-composite: intersect;
}
.room-triptych img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.72;
  filter: brightness(0.88) contrast(1.04);
}

/* ============================================================
   Section 4 — Return (tour history, hiatus, the ask)
   Three short paragraphs, stacked, centered. No heading.
   The "write to us" link is the only affordance.
   ============================================================ */
.return {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(80px, 14vh, 160px) 24px;
  background: var(--ink);
  overflow: hidden;
}

/* Faded crowd photograph — sits inside the section, not
   full-bleed. Heavy vignette so the edges dissolve into
   ink and the copy reads clean on top. */
.return-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(78vw, 1100px);
  height: min(72vh, 620px);
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 78%);
          mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 78%);
}
.return-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
  filter: grayscale(1) contrast(1.05) brightness(0.85);
}

.return-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 4.5vh, 48px);
  text-align: center;
  max-width: 42ch;
}

.return-line {
  margin: 0;
  color: var(--paper);
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: var(--lh-editorial);
}

/* Upcoming shows — typographic, zine-style list. No cards,
   no pills, no logos. Each row: date | sep | venue, city.
   Tabular numbers so the dates align vertically. */
.shows {
  list-style: none;
  margin: clamp(8px, 2vh, 20px) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(56ch, 92vw);
}
.show {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: 0 14px;
  padding: 8px 0;
  border-top: 1px solid rgba(238, 233, 223, 0.12);
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--grey-light);
  text-align: left;
}
.show:last-child {
  border-bottom: 1px solid rgba(238, 233, 223, 0.12);
}
.show-date {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  white-space: nowrap;
}
.show-day  { font-size: var(--fs-sm); }
.show-mon  { font-size: var(--fs-11); letter-spacing: var(--tr-widest); color: var(--grey-light); }
.show-year { font-size: var(--fs-11); color: var(--grey-cool); letter-spacing: var(--tr-wider); }
.show-sep {
  color: var(--grey-cool);
  opacity: 0.6;
}
.show-place {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.show-venue {
  color: var(--paper);
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 15px;
  letter-spacing: var(--tr-loose);
}
.show-city {
  color: var(--grey-cool);
  font-size: var(--fs-11);
  letter-spacing: var(--tr-caption);
  text-transform: uppercase;
}

/* The ask line sits after the shows list. */
.return-ask-line {
  margin-top: clamp(8px, 2vh, 20px) !important;
}

/* The ask — styled as a quiet link, same family as the photo
   credit and the closing contact. Grey-light resting, paper on
   hover, dried-blood underline. */
.return-ask {
  color: var(--grey-light);
  text-decoration: none;
  border-bottom: 1px solid var(--dried-blood);
  padding-bottom: 1px;
  transition:
    color var(--dur-slow) var(--ease-quiet),
    border-color var(--dur-slow) var(--ease-quiet);
}
.return-ask:hover,
.return-ask:focus-visible {
  color: var(--paper);
  border-bottom-color: var(--paper);
  outline: none;
}

/* ============================================================
   Section 5 — Merch
   Two items, quiet. Hover fades in "sold out" over a dimmed
   image. On touch/no-hover devices the sold-out state is
   always visible.
   ============================================================ */
.merch {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 6vh, 80px) 24px;
  background: var(--ink);
}

.merch-inner {
  width: 100%;
  max-width: 560px;
}

.merch-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
}

.merch-item {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--ink);
}

.merch-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  filter: brightness(0.75) saturate(0.6);
  transition: opacity 500ms ease, filter 500ms ease;
}

.merch-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(14, 14, 13, 0.55);
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
  z-index: 1;
}

.merch-sold {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--paper);
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: var(--lh-editorial);
  letter-spacing: 0.01em;
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
  z-index: 2;
}

@media (hover: hover) {
  .merch-item:hover img         { opacity: 0.55; filter: brightness(0.72); }
  .merch-item:hover::before     { opacity: 1; }
  .merch-item:hover .merch-sold { opacity: 1; }
}

@media (hover: none) {
  .merch-item img     { opacity: 0.55; filter: brightness(0.72); }
  .merch-item::before { opacity: 1; }
  .merch-sold         { opacity: 1; }
}

@media (max-width: 640px) {
  .merch-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Section 6 — Closing line + footer
   ============================================================ */
.closing {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: clamp(80px, 14vh, 160px) 24px 48px;
  background: var(--ink);
  text-align: center;
}

/* Closing body — groups the philosophy line + contact so they sit
   as one block with the footer pushed to the bottom. */
.closing-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 5vh, 56px);
  margin: auto 0;
}

.closing-line {
  color: var(--paper);
  font-family: var(--font-editorial);
  font-weight: var(--fw-regular);
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: var(--lh-editorial);
  max-width: 38ch;
  margin: auto 0;
}
.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 64px;
}
.footer-mark {
  width: 160px;
  color: var(--grey-cool);
  line-height: 0;
}
.footer-mark svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   Motion keyframes
   ============================================================ */

@keyframes fig-breath {
  0%   { opacity: 0.38; transform: translate(-50%, -50%) scale(0.96); }
  42%  { opacity: 0.62; transform: translate(-50%, -50%) scale(1.05); }
  100% { opacity: 0.38; transform: translate(-50%, -50%) scale(0.96); }
}

@keyframes fig-drift {
  0%   { margin-left: -14px; margin-top:   8px; }
  37%  { margin-left:  10px; margin-top: -12px; }
  68%  { margin-left:  16px; margin-top:   6px; }
  100% { margin-left: -14px; margin-top:   8px; }
}

/* ------------------------------------------------------------
   Punctuation twitches
   ------------------------------------------------------------ */
.p {
  display: inline-block;
  transform-origin: center;
  will-change: transform, opacity;
}

.p-q {
  animation: p-question 13s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes p-question {
  0%, 78%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  86%           { transform: translate(0.5px, -1px) rotate(-1.5deg); opacity: 0.85; }
  92%           { transform: translate(-0.5px, 0) rotate(0.5deg); opacity: 1; }
}

.p-dot {
  animation: p-fade 17s steps(1, end) infinite;
}
@keyframes p-fade {
  0%, 88%, 100% { opacity: 1; }
  89%, 97%      { opacity: 0; }
}

.p-em {
  margin-left: 0.15em;
  animation: p-extend 23s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes p-extend {
  0%, 62%, 100% { transform: scaleX(1) translateX(0); }
  72%           { transform: scaleX(1.25) translateX(1px); }
  82%           { transform: scaleX(1) translateX(0); }
}

/* ============================================================
   Glitch effects
   ============================================================ */

/* 1 — Hero grain overlay */
.grain-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  animation: grain-shift 0.1s steps(1) infinite;
}
@keyframes grain-shift {
  0%   { background-position:   0px   0px; }
  10%  { background-position: -40px -60px; }
  20%  { background-position:  80px  20px; }
  30%  { background-position: -20px 100px; }
  40%  { background-position:  60px -80px; }
  50%  { background-position: -80px  40px; }
  60%  { background-position:  30px -30px; }
  70%  { background-position: -60px  70px; }
  80%  { background-position: 100px -10px; }
  90%  { background-position: -10px -90px; }
  100% { background-position:  40px  60px; }
}

/* 5 — Album cover hover RGB split */
.release-cover:hover .cover-field {
  animation: cover-rgb 0.28s steps(1) forwards;
}
@keyframes cover-rgb {
  0%   { filter: drop-shadow(-5px 0 0 rgba(255,60,60,0.65)) drop-shadow(5px 0 0 rgba(60,120,255,0.65)); }
  33%  { filter: drop-shadow(4px 0 0 rgba(255,60,60,0.65)) drop-shadow(-4px 0 0 rgba(60,120,255,0.65)); }
  70%  { filter: drop-shadow(-2px 0 0 rgba(255,60,60,0.4)) drop-shadow(2px 0 0 rgba(60,120,255,0.4)); }
  100% { filter: none; }
}

/* 6 — Bracket flicker */
.release::before {
  animation: bracket-flicker 8s steps(1) infinite;
}
@keyframes bracket-flicker {
  0%, 87%, 89%, 100% { opacity: 1; }
  88% { opacity: 0; }
}

/* 7 — Scan-line tear (carousel) */
.scan-tear {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(238,233,223,0.18) 2px,
    rgba(238,233,223,0.18) 3px
  );
}
.scan-tear.is-tearing {
  animation: tear-sweep 0.3s ease-out forwards;
}
@keyframes tear-sweep {
  0%   { opacity: 1; clip-path: inset(0 0 100% 0); transform: translateX(0); }
  25%  { opacity: 1; clip-path: inset(0 0 50% 0);  transform: translateX(-5px); }
  50%  { opacity: 1; clip-path: inset(0 0 10% 0);  transform: translateX(4px); }
  75%  { opacity: 0.8; clip-path: inset(0 0 0 0);  transform: translateX(-2px); }
  100% { opacity: 0; transform: translateX(0); }
}

/* 8 — Dark flash (scroll-triggered, replaces full invert) */
body.invert-flash {
  animation: page-dark-flash 0.35s steps(1) forwards;
}
@keyframes page-dark-flash {
  0%   { filter: brightness(1); }
  14%  { filter: brightness(0.05); }
  28%  { filter: brightness(1); }
  57%  { filter: brightness(0.12); }
  71%  { filter: brightness(1); }
  100% { filter: brightness(1); }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .bg-fig,
  .grain-layer,
  .p, .p-q, .p-dot, .p-em {
    animation: none;
  }
  .bg-fig { transform: translate(-50%, -50%); }
  .p, .p-q, .p-dot, .p-em { transform: none; }
  .release-cover:hover .cover-field { animation: none; }
  .release::before { animation: none; }
  .scan-tear.is-tearing { animation: none; opacity: 0; }
  body.invert-flash { animation: none; }
}

/* ============================================================
   Small viewports
   ============================================================ */
@media (max-width: 480px) {
  .release {
    grid-template-columns: 96px auto;
    gap: 16px;
    padding: 14px 16px 14px 14px;
  }
  .release-cover { width: 96px; height: 96px; }
  .release-meta { height: 96px; }

  .room-line,
  .closing-line {
    font-size: 20px;
  }

}