:root {
  --paper: #d8d3c4;
  --paper-soft: #a8a293;
  --accent: #8a8579;
  --accent-strong: #a39d8d;
  --accent-dim: rgba(138, 133, 121, 0.5);
  --ink: #050505;
  --ink-soft: #0a0a0a;
  --card: rgba(5, 5, 5, 0.92);
  --line: rgba(138, 133, 121, 0.24);
  --shadow: rgba(0, 0, 0, 0.8);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Archivo Narrow", "Segoe UI", Tahoma, sans-serif;
  color: var(--paper);
  background:
    radial-gradient(circle at 15% 10%, rgba(255, 255, 255, 0.035), transparent 35%),
    radial-gradient(circle at 85% 6%, rgba(255, 255, 255, 0.02), transparent 30%),
    linear-gradient(160deg, #000000 0%, #050505 50%, #010101 100%);
  min-height: 100vh;
  letter-spacing: 0.01em;
}

.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.23;
  background-image:
    repeating-radial-gradient(
      circle at 20% 20%,
      rgba(0, 0, 0, 0.65) 0 1px,
      transparent 1px 3px
    ),
    repeating-linear-gradient(
      20deg,
      rgba(138, 133, 121, 0.03) 0 3px,
      rgba(0, 0, 0, 0.18) 3px 6px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 0 2px,
      rgba(0, 0, 0, 0.12) 2px 4px
    );
  animation: noiseDrift 12s linear infinite;
}

.crack-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.2;
  background:
    linear-gradient(
      115deg,
      transparent 0 18%,
      rgba(0, 0, 0, 0.35) 18.1% 18.4%,
      transparent 18.6%
    ),
    linear-gradient(
      66deg,
      transparent 0 54%,
      rgba(138, 133, 121, 0.1) 54.1% 54.35%,
      transparent 54.55%
    ),
    linear-gradient(
      132deg,
      transparent 0 73%,
      rgba(0, 0, 0, 0.35) 73.1% 73.35%,
      transparent 73.55%
    ),
    linear-gradient(
      28deg,
      transparent 0 88%,
      rgba(138, 133, 121, 0.08) 88.1% 88.3%,
      transparent 88.5%
    );
  mix-blend-mode: overlay;
  animation: crackPulse 8s ease-in-out infinite;
}

/* damaged-tape scanlines + a slow-rolling tracking glitch band */
.scan-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.05) 0px,
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px,
      transparent 3px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 128px,
      rgba(255, 255, 255, 0.18) 128px,
      rgba(255, 255, 255, 0.18) 130px,
      transparent 130px,
      transparent 260px,
      rgba(255, 255, 255, 0.1) 260px,
      rgba(255, 255, 255, 0.1) 261px,
      transparent 261px,
      transparent 420px
    );
  background-size:
    100% 100%,
    100% 420px;
  animation: scanRoll 12s linear infinite;
}

.site-header,
.section-block,
footer {
  width: min(1100px, calc(100% - 2rem));
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-top: 2rem;
  animation: settleIn 650ms ease-out both;
}

.brand-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  position: relative;
}

.eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: var(--paper-soft);
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.1;
}

h1,
h2 {
  font-family: "Oswald", "Archivo Narrow", "Arial Narrow", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* rigid, straight SILT wordmark, cut out of a real cracked-plaster
   photo texture (drop-shadow, not text-shadow, so the shadow composites
   behind the clipped photo fill instead of painting over it) */
h1 {
  font-size: clamp(2rem, 7vw, 3.6rem);
  letter-spacing: 0.035em;
  animation: none;
  color: #fff;
  background-color: #ffffff;
  background-image: url("https://res.cloudinary.com/dgxgi8bga/image/upload/w_800,q_auto,f_auto/v1787780935/cracked_wall_hqcm5f.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.7))
    drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
}

h2 {
  color: var(--paper-soft);
  animation: titleGlitch 11s steps(1, end) infinite;
}

.tagline {
  margin: 0.6rem auto 0;
  max-width: 60ch;
  font-family: "Special Elite", monospace;
  font-size: 0.95rem;
  line-height: 1.55;
}

.tagline strong {
  color: var(--accent);
}

.hero {
  width: min(1100px, calc(100% - 2rem));
  margin: 1.2rem auto 0;
  padding: 1rem 1.1rem;
  border-left: 6px solid var(--accent);
  background:
    linear-gradient(175deg, rgba(6, 6, 6, 0.92), rgba(0, 0, 0, 0.96)),
    repeating-linear-gradient(
      -14deg,
      rgba(138, 133, 121, 0.06) 0 3px,
      transparent 3px 8px
    );
  backdrop-filter: blur(3px);
  box-shadow: 0 15px 28px rgba(0, 0, 0, 0.32);
}

.hero p {
  margin: 0;
  max-width: 72ch;
  font-size: 1.05rem;
}

.hero-note {
  margin-top: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  font-size: 0.95rem;
}

.section-block {
  margin-top: 2rem;
  background:
    linear-gradient(170deg, rgba(4, 4, 4, 0.95), rgba(0, 0, 0, 0.97)),
    repeating-linear-gradient(
      -21deg,
      rgba(138, 133, 121, 0.05) 0 2px,
      transparent 2px 7px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.035) 0px,
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px,
      transparent 3px
    );
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.38);
  padding: 1.2rem;
  transform: translateY(8px);
  opacity: 0;
  animation: rise 550ms ease-out forwards;
  will-change: transform, opacity;
}

.section-block:nth-of-type(2) {
  animation-delay: 120ms;
}

.section-block:nth-of-type(3) {
  animation-delay: 220ms;
}

.section-title-row {
  display: flex;
  justify-content: center;
  text-align: center;
  border-bottom: 2px dashed rgba(138, 133, 121, 0.25);
  padding-bottom: 0.6rem;
  margin-bottom: 1rem;
}

/* ── VINYL GRID ─────────────────────────────────────────── */
.beat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 2rem;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  overflow: visible;
}

.focus-mode .site-header,
.focus-mode #info,
.focus-mode footer,
.focus-mode .section-title-row {
  filter: brightness(0.62);
  opacity: 0.5;
  transition:
    opacity 180ms ease,
    filter 180ms ease;
}

.focus-mode .beat-grid .vinyl-wrap:not(.active) {
  filter: brightness(0.52);
  opacity: 0.42;
  transform: scale(0.97);
  transition:
    filter 280ms ease,
    opacity 280ms ease,
    transform 280ms ease;
}

/* ── VINYL WRAP ─────────────────────────────────────────── */
.vinyl-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  user-select: none;
  width: 220px;
  z-index: 1;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.vinyl-wrap.active,
.vinyl-wrap.playing {
  transform: translateY(98px);
  z-index: 12;
}

/* ── SLEEVE ─────────────────────────────────────────────── */
.vinyl-sleeve {
  width: 220px;
  height: 220px;
  position: relative;
  overflow: visible;
  background:
    linear-gradient(160deg, #0f0f0f 0%, #090909 60%, #040404 100%),
    repeating-linear-gradient(
      -25deg,
      rgba(138, 133, 121, 0.06) 0 2px,
      transparent 2px 7px
    );
  border: 1px solid rgba(138, 133, 121, 0.34);
  box-shadow:
    4px 4px 0 rgba(0, 0, 0, 0.55),
    0 12px 30px rgba(0, 0, 0, 0.65);
}

/* inner shadow at top edge suggesting the pocket opening */
.vinyl-sleeve::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent);
  z-index: 5;
  pointer-events: none;
}

/* ── DISC MOVER (handles pull-out translation) ──────────── */
.disc-mover {
  position: absolute;
  width: 196px;
  height: 196px;
  left: 12px;
  bottom: 12px;
  z-index: 1;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.vinyl-wrap.active .disc-mover {
  transform: translateY(-110px);
}

/* ── VINYL DISC ─────────────────────────────────────────── */
.disc-visual {
  width: 196px;
  height: 196px;
  border-radius: 50%;
  position: relative;
  background:
    radial-gradient(
      circle at center,
      #141414 0 12%,
      #0b0b0b 12% 18%,
      #050505 18% 100%
    ),
    repeating-radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0.03) 18% 18.35%,
      rgba(0, 0, 0, 0.2) 18.35% 18.7%
    ),
    repeating-radial-gradient(
      circle at center,
      #0f0f0f 0 1.2px,
      #080808 1.2px 2.4px
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 0 10px rgba(255, 255, 255, 0.03),
    inset 0 -10px 20px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 10px 30px rgba(0, 0, 0, 0.9);
}

/* specular highlight */
.disc-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(
      from 210deg,
      transparent 0 12%,
      rgba(255, 255, 255, 0.12) 15% 22%,
      transparent 28% 72%,
      rgba(255, 255, 255, 0.06) 78% 84%,
      transparent 90% 100%
    ),
    radial-gradient(
      circle at 30% 24%,
      rgba(255, 255, 255, 0.08),
      transparent 30%
    );
  mix-blend-mode: screen;
  pointer-events: none;
}

/* center spindle hole */
.disc-visual::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle at 40% 40%, #2a2a2a, #040404);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
}

/* ── DISC CENTER LABEL (non-rotating) ───────────────────── */
.disc-center-label {
  position: absolute;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: radial-gradient(circle at 38% 38%, #c9c3b0, #7a756a);
  padding: 6px;
  pointer-events: none;
}

.dl-brand {
  font-family: "Anton", Georgia, serif;
  font-size: 0.42rem;
  letter-spacing: 0.1em;
  color: #111;
  text-transform: uppercase;
  line-height: 1;
}

.dl-name {
  font-size: 0.52rem;
  font-weight: 700;
  color: #0a0a0a;
  line-height: 1.15;
  margin-top: 2px;
}

.dl-bpm {
  font-size: 0.44rem;
  color: #2b2a26;
  margin-top: 1px;
}

/* ── SPIN ANIMATION ─────────────────────────────────────── */
@keyframes spinDisc {
  to {
    transform: rotate(360deg);
  }
}

.vinyl-wrap.playing .disc-visual {
  animation: spinDisc 2.4s linear infinite;
  will-change: transform;
}

/* ── SLEEVE FACE (z-index above disc, hides it inside) ──── */
.sleeve-face {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  gap: 0.25rem;
  background: linear-gradient(
    160deg,
    rgba(8, 8, 8, 0.98) 0%,
    rgba(0, 0, 0, 0.99) 100%
  );
  isolation: isolate;
}

.cover-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  background: var(--cover-base, #2f363f);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 0 22px rgba(0, 0, 0, 0.28),
    inset 0 -12px 22px rgba(0, 0, 0, 0.32);
  pointer-events: none;
}

/* real worn-sleeve photo, tinted per beat via filter so each cover reads distinct */
.cover-photo {
  position: absolute;
  inset: 0;
  background-image: url("https://res.cloudinary.com/dgxgi8bga/image/upload/c_crop,w_1900,h_1900,g_center/w_440,f_auto,q_auto/v1787772131/Texturelabs_Paper_322S_da0wcf.jpg");
  background-size: cover;
  background-position: center;
  filter: sepia(1) hue-rotate(var(--cover-hue, 200deg))
    saturate(var(--cover-sat, 2.6)) brightness(var(--cover-bright, 1.5))
    contrast(1.12);
  pointer-events: none;
}

/* a single soft gloss sweep, like light catching the sleeve under the shelf lights */
.cover-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from var(--wear-angle, 34deg) at 78% 22%,
    transparent 0deg,
    rgba(255, 255, 255, 0.1) 44deg,
    transparent 75deg,
    transparent 360deg
  );
  opacity: 0.3;
  pointer-events: none;
}

/* thrift-store price sticker, present on roughly half the sleeves */
.cover-sticker {
  display: none;
  position: absolute;
  right: var(--sticker-right, 12px);
  bottom: var(--sticker-bottom, 12px);
  width: 30px;
  height: 19px;
  background:
    repeating-linear-gradient(
        90deg,
        #161514 0 1px,
        transparent 1px 2.4px
      )
      3px 8px / 24px 8px no-repeat,
    #e6dfc9;
  border: 1px solid rgba(0, 0, 0, 0.32);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
  transform: rotate(var(--sticker-rot, -4deg));
  z-index: 3;
  pointer-events: none;
}

.cover-art.has-sticker .cover-sticker {
  display: block;
}

.sf-name {
  font-family: "Special Elite", monospace;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  line-height: 1.1;
  z-index: 1;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 2px 10px rgba(0, 0, 0, 0.8),
    0 0 18px rgba(0, 0, 0, 0.6);
}

/* ── VINYL PANEL (slides in below sleeve on click) ──────── */
.vinyl-panel {
  width: 220px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateX(-10px) scale(0.985);
  pointer-events: none;
  transition:
    max-height 240ms ease,
    opacity 180ms ease,
    transform 220ms ease;
  background: rgba(2, 2, 2, 0.96);
  border: 1px solid rgba(138, 133, 121, 0.24);
  border-top: none;
}

.vinyl-wrap.active .vinyl-panel {
  position: absolute;
  top: 18px;
  left: calc(100% + 1rem);
  width: 310px;
  max-height: 420px;
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
  overflow: visible;
  border-top: 1px solid rgba(138, 133, 121, 0.24);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.62);
}

.vinyl-panel-inner {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* ── TIER SELECT ────────────────────────────────────────── */
.tier-select {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.28rem;
}

.tier-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--paper);
  border: 1px solid rgba(138, 133, 121, 0.2);
  background: rgba(138, 133, 121, 0.06);
  padding: 0.32rem 0.5rem;
  cursor: pointer;
  text-align: left;
  transition:
    background 160ms ease,
    border-color 160ms ease;
}

.tier-option:hover,
.tier-option:focus-visible {
  background: rgba(138, 133, 121, 0.16);
  border-color: rgba(138, 133, 121, 0.45);
}

.tier-option-name {
  font-weight: 700;
}

.tier-option-price {
  font-family: "Special Elite", monospace;
  color: var(--paper-soft);
}

.tier-option.tier-exclusive {
  border-color: var(--accent-strong);
  background: rgba(163, 157, 141, 0.14);
}

.tier-option.tier-exclusive .tier-option-price {
  color: var(--accent-strong);
}

.tier-option:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ── STATUS ─────────────────────────────────────────────── */
.status {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
  display: inline-block;
  padding: 0.24rem 0.55rem;
  border: 1px solid var(--paper-soft);
  width: fit-content;
}

.status.cleared {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.status.uncleared {
  color: var(--paper-soft);
  border-style: dashed;
}

.status.original {
  color: var(--paper-soft);
}

/* ── STOP BUTTON ────────────────────────────────────────── */
.vinyl-stop-btn {
  width: 100%;
  border: 1px solid rgba(138, 133, 121, 0.35);
  background: rgba(138, 133, 121, 0.1);
  color: var(--paper);
  padding: 0.42rem;
  font-weight: 700;
  font-family: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 180ms ease;
}

.vinyl-stop-btn:hover {
  background: rgba(138, 133, 121, 0.22);
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.details article {
  background: rgba(138, 133, 121, 0.08);
  border: 1px solid rgba(138, 133, 121, 0.19);
  padding: 0.8rem;
}

ul {
  margin: 0.55rem 0 0;
  padding-left: 1.2rem;
}

li {
  margin-bottom: 0.35rem;
}

.terms-box {
  border: 1px solid rgba(138, 133, 121, 0.22);
  background: rgba(138, 133, 121, 0.08);
  padding: 0.95rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.65rem;
}

th,
td {
  border: 1px solid rgba(138, 133, 121, 0.3);
  text-align: left;
  padding: 0.5rem;
}

th {
  background: rgba(138, 133, 121, 0.14);
}

.legal-note {
  font-size: 0.9rem;
  font-style: italic;
  margin-top: 0.8rem;
}

/* ── ACCORDION ──────────────────────────────────────────── */
.info-accordion {
  padding: 0;
}

.info-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  cursor: pointer;
  list-style: none;
  border-bottom: 2px dashed transparent;
  transition: border-color 200ms ease;
}

.info-accordion summary::-webkit-details-marker {
  display: none;
}

.info-accordion[open] summary {
  border-bottom-color: rgba(138, 133, 121, 0.25);
}

.accordion-label {
  font-family: "Oswald", Georgia, serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  color: var(--paper-soft);
}

.accordion-hint {
  font-family: "Special Elite", monospace;
  font-size: 0.82rem;
  color: rgba(138, 133, 121, 0.45);
  transition: color 200ms ease;
}

.info-accordion[open] .accordion-hint {
  color: rgba(138, 133, 121, 0.25);
}

.details-content,
.terms-content {
  margin-top: 1.2rem;
}

.info-accordion > .details-grid,
.info-accordion > .terms-box {
  padding: 0 1.2rem;
}

.info-accordion > .terms-box {
  padding-bottom: 1.2rem;
}

/* ── REEL / TAPE DECK PLACEHOLDER ───────────────────────── */
.reel-slot {
  border: 1px dashed rgba(138, 133, 121, 0.35);
  background: rgba(138, 133, 121, 0.05);
  padding: 1.6rem 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  min-height: 180px;
}

.reel-slot .reel-tag {
  font-family: "Special Elite", monospace;
  font-size: 0.85rem;
  color: var(--accent-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── CONNECT ────────────────────────────────────────────── */
.connect-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.connect-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--paper);
  border: 1px solid rgba(138, 133, 121, 0.3);
  background: rgba(138, 133, 121, 0.06);
  padding: 0.55rem 0.9rem;
  font-size: 0.9rem;
  transition:
    background 180ms ease,
    border-color 180ms ease;
}

.connect-link:hover,
.connect-link:focus-visible {
  background: rgba(138, 133, 121, 0.16);
  border-color: rgba(138, 133, 121, 0.55);
}

.connect-link .connect-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

footer {
  margin-top: 1.5rem;
  padding: 1.2rem 0 2.2rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--paper);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

@keyframes titleGlitch {
  0%,
  92%,
  100% {
    transform: translateX(0);
    text-shadow: 0 0 0 transparent;
  }
  93% {
    transform: translateX(-1px);
    text-shadow: 1px 0 0 rgba(255, 237, 170, 0.45);
  }
  94% {
    transform: translateX(1px);
    text-shadow: -1px 0 0 rgba(245, 197, 84, 0.45);
  }
}

@keyframes crackPulse {
  0%,
  100% {
    opacity: 0.15;
  }
  50% {
    opacity: 0.24;
  }
}

@keyframes scanRoll {
  from {
    background-position:
      0 0,
      0 0;
  }
  to {
    background-position:
      0 0,
      0 420px;
  }
}

@keyframes noiseDrift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(1.2%, -1.4%, 0);
  }
}

@keyframes settleIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .focus-mode .site-header,
  .focus-mode #info,
  .focus-mode footer,
  .focus-mode .section-title-row {
    filter: none;
  }

  .vinyl-wrap.active .vinyl-panel {
    position: static;
    width: 220px;
    max-height: 420px;
    border-top: none;
  }

  .section-title-row {
    flex-direction: column;
    align-items: flex-start;
  }

  footer {
    flex-direction: column;
  }
}

/* ── CHECKOUT MODAL ─────────────────────────────────────── */
.checkout-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(3px);
}

.checkout-overlay[hidden] {
  display: none;
}

body.checkout-open {
  overflow: hidden;
}

.checkout-modal {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100vh - 2.4rem);
  overflow-y: auto;
  padding: 1.6rem 1.4rem 1.4rem;
  background:
    linear-gradient(170deg, rgba(6, 6, 6, 0.98), rgba(0, 0, 0, 0.99)),
    repeating-linear-gradient(
      -21deg,
      rgba(138, 133, 121, 0.05) 0 2px,
      transparent 2px 7px
    );
  border: 1px solid rgba(138, 133, 121, 0.3);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
  animation: rise 220ms ease-out both;
}

.checkout-close {
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
  border: none;
  background: none;
  color: var(--paper-soft);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
}

.checkout-close:hover {
  color: var(--paper);
}

.checkout-head {
  border-bottom: 2px dashed rgba(138, 133, 121, 0.25);
  padding-bottom: 0.8rem;
  margin-bottom: 1rem;
}

.checkout-eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  color: var(--paper-soft);
}

.checkout-beat-name {
  margin: 0.15rem 0 0;
  font-size: 1.5rem;
}

.checkout-tier-name {
  margin: 0.3rem 0 0;
  font-family: "Special Elite", monospace;
  color: var(--accent-strong);
}

.checkout-price {
  margin: 0.2rem 0 0;
  font-size: 1.6rem;
  font-weight: 800;
}

#checkout-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.checkout-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--paper-soft);
}

.checkout-field input {
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--paper);
  background: rgba(138, 133, 121, 0.06);
  border: 1px solid rgba(138, 133, 121, 0.35);
  padding: 0.55rem 0.6rem;
}

.checkout-field input:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 1px;
}

.checkout-terms-summary {
  border: 1px dashed rgba(138, 133, 121, 0.35);
  background: rgba(138, 133, 121, 0.05);
  padding: 0.6rem 0.7rem;
  font-size: 0.78rem;
  color: var(--paper-soft);
  line-height: 1.5;
}

.checkout-terms-summary .cts-title {
  margin: 0 0 0.3rem;
  font-family: "Special Elite", monospace;
  color: var(--accent-strong);
}

.checkout-terms-summary ul {
  margin: 0;
  padding-left: 1.1rem;
}

.checkout-agree {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--paper-soft);
  cursor: pointer;
}

.checkout-agree input {
  margin-top: 0.2rem;
  accent-color: var(--accent-strong);
  cursor: pointer;
}

.checkout-error {
  margin: 0;
  min-height: 1em;
  font-size: 0.82rem;
  color: #c96a54;
}

.checkout-submit {
  width: 100%;
  border: 1px solid rgba(138, 133, 121, 0.38);
  background: linear-gradient(130deg, #c9c3b0, #8a8579 62%, #625d52);
  color: #0a0a0a;
  padding: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.checkout-submit:hover:not(:disabled) {
  filter: brightness(1.07);
}

.checkout-submit:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.checkout-status {
  margin: 0;
  padding: 0.9rem;
  border: 1px solid var(--paper-soft);
  background: rgba(138, 133, 121, 0.08);
  font-size: 0.9rem;
  line-height: 1.5;
}

.checkout-note {
  margin: 1rem 0 0;
  font-size: 0.75rem;
  color: var(--paper-soft);
  text-align: center;
}