/* ==========================================================================
   Hero B: "Pull a record from the crate" (gig-poster record sleeve)
   Loaded only by hero-b.html, after theme.css. Reuses theme tokens and fonts.
   Everything is scoped to .section--hero-record so nothing else changes.
   ========================================================================== */

.section--hero-record {
  /* A shade deeper than the logo red so the hero reads as its own block next to the
     red announcement bar, and so white body copy clears AA (5.6:1 vs 4.7:1). */
  --hero-red: #d10411;
  --hero-ink: #141112;
  --sleeve: min(70vw, 330px);
  --pull: 0.28;            /* how far the record sticks out of the sleeve, as a share of the sleeve */
  --flip-dur: 520ms;
  --pulse: 2.4s;           /* one ring leaves the record per pulse; the headline rattles on the same pulse */
  padding: 0;
}

.section--hero-record :focus-visible { outline-color: #fff; }

/* ---------- Poster band ---------- */
.hero-rec {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--hero-red);
  color: #fff;
}
/* Screen-print halftone dots + faint op-art rings behind the record.
   The rings drift outward from the record, one ring per --pulse (--ring-o runs 38px to 76px,
   exactly one 38px ring period, so the loop is seamless). */
@property --ring-o { syntax: "<length>"; inherits: false; initial-value: 38px; }
.hero-rec::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle, rgb(0 0 0 / 0.16) 0 1.3px, transparent 1.8px) 0 0 / 9px 9px,
    repeating-radial-gradient(circle at var(--rings-x, 50%) var(--rings-y, 26%),
      rgb(0 0 0 / 0.1) calc(var(--ring-o) - 38px) calc(var(--ring-o) - 20px), transparent calc(var(--ring-o) - 20px) var(--ring-o));
  animation: ring-drift var(--pulse) linear infinite;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at var(--rings-x, 50%) var(--rings-y, 26%), #000 10%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 80% at var(--rings-x, 50%) var(--rings-y, 26%), #000 10%, transparent 75%);
}
@keyframes ring-drift { to { --ring-o: 76px; } }
/* Paper grain (inline SVG noise, no image file) */
.hero-rec::after {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.22; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-rec__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* stop min-content from widening the phone column */
  gap: var(--sp-6);
  align-items: center;
  padding-block: var(--sp-6) var(--sp-7);
}

/* ---------- Visual: sleeve + record ---------- */
.hero-rec__visual { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--sp-4); }

.deck {
  position: relative;
  width: calc(var(--sleeve) * (1 + var(--pull)));
  height: var(--sleeve);
  margin-top: 14px; /* room for the sticker */
}

/* Record */
.record {
  position: absolute; z-index: 1;
  top: calc(var(--sleeve) * 0.03);
  left: calc(var(--sleeve) * (var(--pull) + 0.06));
  width: calc(var(--sleeve) * 0.94);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.38);
  animation: rec-pull 900ms cubic-bezier(0.16, 0.8, 0.24, 1) 300ms both;
}
@keyframes rec-pull {
  from { transform: translateX(calc(var(--sleeve) * (var(--pull) + 0.06) * -1)); }
  to { transform: translateX(0); }
}
.record__spin, .record__boost, .record__disc { position: absolute; inset: 0; border-radius: 50%; }
.record__spin { animation: rec-spin 7s linear infinite; will-change: transform; }
/* Second, normally paused spinner: hovering the record adds its turn to the base spin, so it speeds up without a jump */
.record__boost { animation: rec-spin 3.2s linear infinite paused; }
.record:hover .record__boost { animation-play-state: running; }
@keyframes rec-spin { to { transform: rotate(360deg); } }

.record__disc {
  background:
    radial-gradient(circle, transparent 0 34%, #0a0a0a 34.4% 38%, transparent 38.4%),          /* smooth lead-in around the label */
    radial-gradient(circle, transparent 0 62%, rgb(255 255 255 / 0.05) 62.3% 62.8%, transparent 63.2%), /* track gap */
    radial-gradient(circle, transparent 0 96%, #050505 96.4%),                                   /* rim */
    repeating-radial-gradient(circle, #121212 0 1px, #1c1c1c 1px 2px, #0e0e0e 2px 3px);
  box-shadow: inset 0 0 0 2px #262626;
}
.record__label {
  position: absolute; top: 50%; left: 50%;
  width: 33%; height: 33%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  object-fit: cover;
  background: var(--c-red);
}
.record__disc::after { /* spindle hole */
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 3.2%; height: 3.2%; transform: translate(-50%, -50%);
  border-radius: 50%; background: #e8e1d2; box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.6);
}
.record__sheen { /* static light, does not spin */
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 20deg,
    rgb(255 255 255 / 0) 0deg, rgb(255 255 255 / 0.13) 28deg, rgb(255 255 255 / 0) 62deg,
    rgb(255 255 255 / 0) 180deg, rgb(255 255 255 / 0.09) 210deg, rgb(255 255 255 / 0) 245deg);
}

/* Sleeve */
.sleeve {
  position: absolute; z-index: 2; top: 0; left: 0;
  width: var(--sleeve); height: var(--sleeve);
  padding: 3.2%;
  background:
    radial-gradient(ellipse at 15% 90%, rgb(120 90 40 / 0.12), transparent 45%),
    linear-gradient(135deg, #f7f2e7, #ece4d3);
  border-radius: 3px;
  transform: rotate(-3deg);
  box-shadow:
    inset 0 0 0 1px rgb(0 0 0 / 0.08),
    0 2px 0 rgb(0 0 0 / 0.12),
    0 26px 50px rgb(0 0 0 / 0.38);
}
.sleeve__stack {
  position: relative; width: 100%; height: 100%;
  overflow: hidden; border-radius: 2px; background: #222;
  perspective: 1100px;
}
.sleeve__face {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; visibility: hidden;
  transform-origin: 50% 100%;
  backface-visibility: hidden;
}
.sleeve__face img { width: 100%; height: 100%; object-fit: cover; }
.sleeve__face.is-active { opacity: 1; visibility: visible; z-index: 2; }
.sleeve__face.is-under { opacity: 1; visibility: visible; z-index: 1; }
.sleeve__face.is-flip-out { z-index: 3; animation: sleeve-out var(--flip-dur) cubic-bezier(0.5, 0, 0.75, 0) forwards; }
.sleeve__face.is-flip-in { z-index: 3; animation: sleeve-in var(--flip-dur) cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes sleeve-out {
  from { transform: rotateX(0deg); opacity: 1; }
  to { transform: rotateX(-82deg) translateY(4%); opacity: 0.15; }
}
@keyframes sleeve-in {
  from { transform: rotateX(-82deg) translateY(4%); opacity: 0.15; }
  to { transform: rotateX(0deg); opacity: 1; }
}
/* Light printed sheen on the sleeve photo */
.sleeve__stack::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(120deg, rgb(255 255 255 / 0.14), transparent 40%, transparent 70%, rgb(0 0 0 / 0.12));
}

.sticker-b {
  position: absolute; z-index: 5;
  --stk: clamp(92px, 26vw, 124px);
  top: -16px; left: -8px;
  width: var(--stk); height: var(--stk);
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 0 8px;
  background: #fff; color: var(--c-red);
  border-radius: 50%;
  font-family: var(--f-marker); font-size: calc(var(--stk) * 0.125); line-height: 1.1;
  transform: rotate(-11deg);
  box-shadow: 0 6px 14px rgb(0 0 0 / 0.28);
}
.sticker-b span { display: block; width: 100%; }
.sticker-b strong { display: block; white-space: nowrap; font-weight: 400; font-size: 1.3em; color: var(--hero-ink); }

/* ---------- Sleeve style options (for Vish to pick, 28 Oct) ----------
   A, framed (default): photo on cream card with a border.
   B, .hero-rec--full-cover: photo printed edge to edge like a real LP, with the label logo
      in a corner, ring wear, shrink-wrap shine and scuffed corners.
   C, .hero-rec--full-cover.hero-rec--obi: B plus a Japanese-style obi strip on the left edge.
   Shopify: one section setting "Sleeve style" = Framed | Full cover | Full cover + obi. */
.hero-rec--full-cover .sleeve { padding: 0; background: #111; }
.hero-rec--full-cover .sleeve__stack { border-radius: 3px; }
.hero-rec--full-cover .sleeve__face::before { /* label logo printed on each cover */
  content: ""; position: absolute; z-index: 1;
  right: 4.5%; bottom: 4.5%;
  width: 11%; aspect-ratio: 1; border-radius: 50%;
  background: url("../img/logo-160.png") center / cover;
  box-shadow: 0 0 0 2px #fff, 0 3px 8px rgb(0 0 0 / 0.35);
}
.hero-rec--full-cover .sleeve__stack::before { /* ring wear: where the record inside has rubbed the cover */
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    radial-gradient(circle closest-side, transparent 0 87%, rgb(255 255 255 / 0.3) 90%, rgb(255 255 255 / 0.1) 92.5%, transparent 95%),
    radial-gradient(circle closest-side, rgb(255 255 255 / 0.05) 0 89%, transparent 90%);
  mix-blend-mode: screen;
  -webkit-mask-image: conic-gradient(from 20deg, #000 0 12%, rgb(0 0 0 / 0.25) 22% 36%, #000 48% 64%, rgb(0 0 0 / 0.2) 74% 86%, #000 96%);
          mask-image: conic-gradient(from 20deg, #000 0 12%, rgb(0 0 0 / 0.25) 22% 36%, #000 48% 64%, rgb(0 0 0 / 0.2) 74% 86%, #000 96%);
}
.hero-rec--full-cover .sleeve__stack::after { /* scuffed corners, open edge, shrink-wrap glint */
  background:
    radial-gradient(circle at 0 0, rgb(255 255 255 / 0.55), transparent 10px),
    radial-gradient(circle at 100% 0, rgb(255 255 255 / 0.45), transparent 9px),
    radial-gradient(circle at 0 100%, rgb(255 255 255 / 0.45), transparent 9px),
    radial-gradient(circle at 100% 100%, rgb(255 255 255 / 0.55), transparent 10px),
    linear-gradient(to left, rgb(0 0 0 / 0.28), transparent 3.5%),
    linear-gradient(112deg, transparent 16%, rgb(255 255 255 / 0.22) 22%, transparent 29%),
    linear-gradient(120deg, rgb(255 255 255 / 0.12), transparent 40%, transparent 70%, rgb(0 0 0 / 0.12));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.4), inset 0 0 calc(var(--sleeve) * 0.06) rgb(0 0 0 / 0.28);
  border-radius: inherit;
}
.hero-rec--obi .sleeve__face::after { /* obi: paper strip wrapped round the left edge */
  content: "Rhubarb Records";
  position: absolute; z-index: 1; top: 0; bottom: 0; left: 0;
  width: 12%;
  display: flex; align-items: center; justify-content: flex-end;
  padding-bottom: calc(var(--sleeve) * 0.09);
  writing-mode: vertical-rl;
  background: linear-gradient(to bottom, var(--c-red) 0 24%, var(--hero-ink) 24% 25.2%, #f8f3e8 25.2% 92%, var(--hero-ink) 92%);
  color: var(--c-red);
  font-family: var(--f-display); font-size: calc(var(--sleeve) * 0.06); line-height: 1; white-space: nowrap;
  box-shadow: inset 1px 0 0 rgb(255 255 255 / 0.5), 2px 0 5px rgb(0 0 0 / 0.3);
}

/* Track caption + flip controls */
.deck__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: min(100%, calc(var(--sleeve) * (1 + var(--pull))));
}
.deck__track {
  margin: 0; font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: 0.02em;
  color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.deck__track b { font-weight: 500; background: var(--hero-ink); padding: 2px 6px; margin-right: 6px; border-radius: 2px; }
.deck__controls { display: flex; gap: 6px; flex-shrink: 0; }
.deck__controls button {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: transparent; color: #fff; border: 2px solid rgb(255 255 255 / 0.85); border-radius: 50%;
  cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.deck__controls button:hover { background: #fff; color: var(--hero-red); }
.deck__controls .icon { width: 18px; height: 18px; }

/* ---------- Copy ---------- */
.hero-rec__title { font-family: var(--f-display); font-weight: 400; margin: 0; }
.hero-rec__dig {
  display: block;
  font-size: clamp(4.25rem, 2.6rem + 8vw, 8.75rem);
  line-height: 0.92;
  color: var(--hero-ink);
  /* print misregistration: a white plate a touch off the black */
  text-shadow: 0.035em 0.035em 0 rgb(255 255 255 / 0.92);
  letter-spacing: -0.01em;
  animation: print-rattle var(--pulse) infinite;
}
.hero-rec__line {
  display: block;
  margin-top: var(--sp-3);
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.35rem);
  line-height: 1.04;
  max-width: 15ch;
  color: #fff;
}
.hero-rec__line { animation: line-rattle var(--pulse) infinite; }
/* Letters rattle on each pulse, like a speaker shaking a gig poster: the white print plate jumps off
   the black, a faint black ghost kicks the other way, then both settle with a small bounce. */
@keyframes print-rattle {
  0% { text-shadow: 0.07em 0.055em 0 rgb(255 255 255 / 0.92), -0.025em -0.015em 0 rgb(20 17 18 / 0.35); }
  4% { text-shadow: 0.02em 0.03em 0 rgb(255 255 255 / 0.92), 0.015em -0.01em 0 rgb(20 17 18 / 0.2); }
  9% { text-shadow: 0.05em 0.042em 0 rgb(255 255 255 / 0.92), -0.008em 0 0 rgb(20 17 18 / 0.1); }
  16%, 49.9% { text-shadow: 0.035em 0.035em 0 rgb(255 255 255 / 0.92), 0 0 0 rgb(20 17 18 / 0); }
  50% { text-shadow: 0.055em 0.045em 0 rgb(255 255 255 / 0.92), -0.015em -0.01em 0 rgb(20 17 18 / 0.25); }
  55% { text-shadow: 0.028em 0.032em 0 rgb(255 255 255 / 0.92), 0.01em 0 0 rgb(20 17 18 / 0.12); }
  62%, 100% { text-shadow: 0.035em 0.035em 0 rgb(255 255 255 / 0.92), 0 0 0 rgb(20 17 18 / 0); }
}
/* The white line answers on the big hit only, with a dark ghost that shakes and fades */
@keyframes line-rattle {
  0% { text-shadow: 0.035em 0.03em 0 rgb(20 17 18 / 0.45); }
  5% { text-shadow: -0.015em 0.01em 0 rgb(20 17 18 / 0.25); }
  12%, 100% { text-shadow: 0 0 0 rgb(20 17 18 / 0); }
}
.hero-rec__lead { margin-top: var(--sp-4); font-size: var(--fs-md); max-width: 44ch; color: #fff; }
.hero-rec__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.hero-rec__actions .btn { flex: 1 1 200px; }
.hero-rec__actions .btn--ink { --btn-bg: var(--hero-ink); --btn-bd: var(--hero-ink); }
.hero-rec__actions .btn--ink:hover { --btn-bg: #000; --btn-bd: #000; }
.hero-rec__actions .btn--ghost-light:hover { --btn-fg: var(--hero-red); }
.hero-rec__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-5); font-family: var(--f-mono); font-size: var(--fs-xs); color: #fff;
}
.hero-rec__meta .status { color: #fff; }
.hero-rec__meta .status::before { box-shadow: 0 0 0 2px #fff; }
.hero-rec__meta .status.is-open::before { background: #18c45a; box-shadow: 0 0 0 2px #fff; }
.hero-rec__meta .status.is-closed::before { background: var(--hero-ink); }

/* ---------- Marquee strip ---------- */
.marquee {
  background: var(--c-ink); color: #fff;
  overflow: hidden;
  border-top: 3px solid var(--hero-ink);
}
.marquee__track { display: flex; width: max-content; animation: marquee 36s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-33.3333%); } } /* three identical lists */
.marquee__list { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.marquee__list li {
  display: flex; align-items: center; gap: var(--sp-5);
  padding: 15px 0 15px var(--sp-5);
  font-family: var(--f-ui); font-weight: 800; font-stretch: 125%;
  font-size: 0.95rem; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
}
.marquee__list li::after { /* tiny red record */
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 12%, var(--c-ink) 14% 30%, var(--c-red) 32%);
}

/* ---------- Breakpoints ---------- */
@media (min-width: 600px) {
  .section--hero-record { --sleeve: min(56vw, 360px); --pull: 0.4; }
  .hero-rec__actions .btn { flex: 0 0 auto; }
}
@media (min-width: 1024px) {
  .section--hero-record { --sleeve: min(33vw, 440px); --pull: 0.42; }
  .hero-rec { --rings-x: 74%; --rings-y: 50%; }
  .hero-rec__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--sp-7);
    padding-block: var(--sp-8) var(--sp-8);
  }
  .hero-rec__content { order: -1; }
  .hero-rec__visual { justify-items: end; }
  .sticker-b { top: -26px; left: -30px; }
}

/* ---------- Pause button (or hero scrolled off screen): record, rings, headline and marquee stop ---------- */
.section--hero-record.is-paused :is(.record__spin, .record__boost, .marquee__track, .hero-rec__dig, .hero-rec__line),
.section--hero-record.is-paused .hero-rec::before,
.section--hero-record.is-offscreen :is(.record__spin, .record__boost, .marquee__track, .hero-rec__dig, .hero-rec__line),
.section--hero-record.is-offscreen .hero-rec::before { animation-play-state: paused; }

/* ---------- Reduced motion: static record, rings and headline, no flip, no marquee ---------- */
@media (prefers-reduced-motion: reduce) {
  .record, .record__spin, .record__boost, .marquee__track, .hero-rec::before,
  .hero-rec__dig, .hero-rec__line { animation: none !important; }
  /* theme.css zeroes all transitions under reduced motion; a short crossfade is kept on manual change */
  .section--hero-record .sleeve__face { transition: opacity 300ms linear, visibility 0s linear 300ms !important; }
  .section--hero-record .sleeve__face.is-active { transition: opacity 300ms linear !important; }
}

/* Quick links in theme.css has no top padding (it sat under the old hero's bottom padding);
   give it room under the marquee. Only applies on the hero-b page. */
.section--hero-record + .section--quick-links { padding-top: var(--section-y); }