/**
 * Retro Hero — "retro" variant
 *
 * A record-store backdrop: framed artist posters flank the crate, a wood
 * floor runs underfoot, and the crate sits spotlit in the center. The only
 * box-shadow in the scene belongs to the crate itself.
 *
 * COLOR + CONTRAST RULE
 * The artist's --template is the pop. Every other hue is derived from it
 * (white/ink overlays via color-mix). Critically, NO body text ever sits
 * directly on a raw --template fill — text lands on neutral paper, ink, or
 * a darkened scrim, so the design stays legible whether the artist picks
 * white, black, or anything between. The brand color pops through borders,
 * edges and fills that carry no text.
 */

.retro-hero[data-variant="retro"] {
  /* Brand-derived palette */
  --r-paper:    #f3ecdb;
  --r-paper-2:  #e7dcc3;
  --r-ink:      #2a2018;
  --r-tint:     color-mix(in srgb, var(--template) 58%, #ffffff);
  --r-tint-2:   color-mix(in srgb, var(--template) 32%, #ffffff);
  --r-shade:    color-mix(in srgb, var(--template) 70%, #1c1206);
  --r-deep:     color-mix(in srgb, var(--template) 38%, #140d05);
  --r-wood:     color-mix(in srgb, var(--template) 34%, #2a1c0c);
  --r-wood-lit: color-mix(in srgb, var(--template) 44%, #3a2812);

  color: var(--r-ink);
  background-color: var(--r-paper);
}

/* ============================================================== BACKDROP */

.retro-hero[data-variant="retro"] .retro-hero__bg {
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.014) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, var(--r-paper-2) 0%, var(--r-paper) 58%);
}

/* ghost of the artist photo filling the empty beige with identity */
.retro-hero[data-variant="retro"] .retro-hero__wash {
  opacity: 0.8;
  filter: sepia(0.3) saturate(1.1);
  mix-blend-mode: multiply;
}

/* framed artist photos on the store wall — paper mat + thin keyline frame
   (no shadow; only the crate gets one) */
.retro-hero[data-variant="retro"] .retro-hero__poster {
  background-color: var(--r-paper);
  border: 0.6rem solid var(--r-paper);
  outline: 2px solid var(--r-ink);
  outline-offset: -0.6rem;
}

/* warm the photos toward the room's palette so they sit in the scene */
.retro-hero[data-variant="retro"] .retro-hero__poster-img {
  filter: sepia(0.18) saturate(1.05) contrast(1.02);
}

/* wood floor */
.retro-hero[data-variant="retro"] .retro-hero__floor {
  background-color: var(--r-wood-lit);
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.2) 0 2px, transparent 2px 11px),
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.05) 28%, rgba(255,255,255,0.05) 100%);
  border-top: 3px solid color-mix(in srgb, var(--template) 40%, #000);
}

/* spotlight on the crate */
.retro-hero[data-variant="retro"] .retro-hero__spotlight {
  background:
    radial-gradient(58% 52% at 50% 44%, rgba(255,255,255,0.18), rgba(255,255,255,0) 62%),
    radial-gradient(130% 80% at 50% 118%, rgba(20,12,4,0.22), transparent 55%);
}

/* ============================================================== MARQUEE */

.retro-hero[data-variant="retro"] .retro-hero__marquee::before {
  background: radial-gradient(115% 100% at 28% 46%,
    var(--r-paper) 0%,
    color-mix(in srgb, var(--r-paper) 72%, transparent) 46%,
    transparent 76%);
}

.retro-hero[data-variant="retro"] .retro-hero__title {
  color: var(--r-ink);
  /* double-printed poster shadow: brand pop + dark register */
  text-shadow: 4px 4px 0 var(--template),
               6px 6px 0 var(--r-deep);
}

.retro-hero[data-variant="retro"] .retro-hero__tagline {
  color: color-mix(in srgb, var(--r-ink) 82%, transparent);
}

/* price-tag CTA — paper plate, ink text, brand pop via the template edge
   + the punched hole. Legible on any --template. */
.retro-hero[data-variant="retro"] .retro-hero__cta {
  background-color: var(--r-paper);
  color: var(--r-ink);
  border: 2px solid var(--r-ink);
  border-left: 0.5rem solid var(--template);
  border-radius: 3px 9px 9px 3px;
}

.retro-hero[data-variant="retro"] .retro-hero__cta-hole {
  background-color: var(--template);
  border: 2px solid var(--r-ink);
}

/* ================================================================ CRATE */

.retro-hero[data-variant="retro"] .retro-hero__crate-back {
  background-color: var(--r-wood);
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.16) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.25));
  border-radius: 6px 6px 3px 3px;
  box-shadow: inset 0 6px 14px rgba(0,0,0,0.4);
}

.retro-hero[data-variant="retro"] .retro-hero__crate-front {
  background-color: var(--r-wood-lit);
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.18) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(0,0,0,0.28));
  border-radius: 4px;
  border-top: 2px solid color-mix(in srgb, var(--template) 50%, #000);
  box-shadow: 0 10px 22px rgba(20,12,4,0.32),
              inset 0 2px 0 rgba(255,255,255,0.12);
}

/* ============================================================== RECORDS */

/* divider tabs — kraft card, always paper + ink (legible on any template) */
.retro-hero[data-variant="retro"] .retro-hero__tab {
  background-color: var(--r-paper);
  color: var(--r-ink);
  border: 2px solid var(--r-shade);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}

/* sleeve base — border only (no shadow; the crate is the only shadow) */
.retro-hero[data-variant="retro"] .retro-hero__sleeve {
  border: 2px solid var(--r-shade);
  border-radius: 3px;
  background-image: linear-gradient(150deg, rgba(255,255,255,0.2), rgba(0,0,0,0.1));
}

/* bottom scrim so the white title reads on any sleeve color or brand */
.retro-hero[data-variant="retro"] .retro-hero__sleeve::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));
}

/* sleeve colorways — all derived from the brand color */
.retro-hero[data-variant="retro"] .retro-hero__record--music .retro-hero__sleeve { background-color: var(--template); }
.retro-hero[data-variant="retro"] .retro-hero__record--shows .retro-hero__sleeve { background-color: var(--r-tint); }
.retro-hero[data-variant="retro"] .retro-hero__record--videos .retro-hero__sleeve { background-color: var(--r-shade); }
.retro-hero[data-variant="retro"] .retro-hero__record--photos .retro-hero__sleeve { background-color: var(--r-tint-2); }
.retro-hero[data-variant="retro"] .retro-hero__record--about .retro-hero__sleeve { background-color: var(--template); }
.retro-hero[data-variant="retro"] .retro-hero__record--newsletter .retro-hero__sleeve { background-color: var(--r-shade); }

/* sleeve title — white screenprint on the sleeve, lifted by the bottom
   scrim above. White on every record, legible on any brand color. */
.retro-hero[data-variant="retro"] .retro-hero__sleeve-title {
  color: #ffffff;
  align-self: flex-start;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

/* vinyl disc peeking out */
.retro-hero[data-variant="retro"] .retro-hero__disc {
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--template) 70%, #fff) 0 16%, transparent 16.5%),
    repeating-radial-gradient(circle at center, #161616 0 2px, #0c0c0c 2px 4px);
}