/**
 * 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 always lands on a neutral paper
 * or ink plate, so the design stays legible whether the artist picks white,
 * black, or anything between. The brand color pops through borders, offset
 * shadows 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);

  /* Auto-contrast ink for the rare bit of text on a raw template fill.
     Falls back to ink on browsers without relative color syntax. */
  --r-on-template: var(--r-ink);
  --r-on-template: oklch(from var(--template) clamp(0, (0.62 - l) * 1000, 1) 0 0);

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

/* ============================================================ AISLE BG */

.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%);
}

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

/* a slip of tape at the top, in the brand color */
.retro-hero[data-variant="retro"] .retro-hero__poster::before {
  content: "";
  position: absolute;
  top: -0.9rem;
  left: 50%;
  width: 3.5rem;
  height: 1.6rem;
  transform: translateX(-50%) rotate(-3deg);
  background-color: color-mix(in srgb, var(--template) 45%, #fff);
  opacity: 0.85;
  z-index: 2;
}

/* 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);
}

.retro-hero[data-variant="retro"] .retro-hero__hint {
  color: var(--r-ink);
}

/* price-tag CTA — paper plate, ink text, brand pop via the colored
   offset shadow + 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).
   A faint light keyline keeps dark sleeves separated on near-black brands. */
.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);
}