/**
 * Retro Footer — "retro" variant
 *
 * The receipt you walk out of the store with. The section is the wood floor
 * (bookending the hero floor); the receipt is cream paper that pops on it with
 * the only drop-shadow in the scene, torn top + bottom edges, and a strip of
 * tape pinning it down.
 *
 * COLOR + CONTRAST RULE (same as the rest of the template)
 * No body text sits on a raw --template fill. Printed text is ink on paper.
 * The brand color pops through: the "Now Spinning" stamp (a brand pill that
 * uses the --on-template auto-contrast token), the line-item highlighter swipe,
 * the format-code tags on hover, and the socials on hover. Legible at any brand
 * color — check #ffffff and #111111.
 */

.retro-footer[data-variant="retro"] {
  /* Brand-derived palette (variants are standalone, so redeclare) */
  --r-paper:    #f3ecdb;
  --r-paper-2:  #e7dcc3;
  --r-ink:      #2a2018;
  --r-wood:     color-mix(in srgb, var(--template) 34%, #2a1c0c);
  --r-wood-lit: color-mix(in srgb, var(--template) 44%, #3a2812);
  --r-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  color: var(--r-ink);

  /* the store floor — same planks as the 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.4) 0%, rgba(0,0,0,0.04) 22%, rgba(255,255,255,0.04) 100%);
  border-top: 3px solid color-mix(in srgb, var(--template) 40%, #000);
}

/* ================================================================ RECEIPT */

/* the only shadow in the scene follows the torn silhouette */
.retro-footer[data-variant="retro"] .retro-footer__receipt {
  filter: drop-shadow(2px 5px 7px rgba(20, 12, 4, 0.38));
}

/* printed surface — cream paper with a faint vertical grain */
.retro-footer[data-variant="retro"] .retro-footer__paper {
  background-color: var(--r-paper);
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.014) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #fbf6ea 0%, var(--r-paper) 40%, var(--r-paper-2) 100%);
}

/* torn paper edges — paper-colored sawtooth (see notch analysis below).
   Top edge: teeth point up (flat bottom joins the paper body).
   Bottom edge: teeth point down (flat top joins the paper body). */
.retro-footer[data-variant="retro"] .retro-footer__edge--top {
  background-color: transparent;
  background-image:
    linear-gradient(45deg,  var(--r-paper) 50%, transparent 50%),
    linear-gradient(-45deg, var(--r-paper) 50%, transparent 50%);
  background-size: 0.7rem 0.7rem;
  background-repeat: repeat-x;
}

.retro-footer[data-variant="retro"] .retro-footer__edge--bottom {
  background-color: transparent;
  background-image:
    linear-gradient(135deg,  var(--r-paper) 50%, transparent 50%),
    linear-gradient(-135deg, var(--r-paper) 50%, transparent 50%);
  background-size: 0.7rem 0.7rem;
  background-repeat: repeat-x;
}

/* tape — translucent matte strip with soft brand-tinted edges */
.retro-footer[data-variant="retro"] .retro-footer__tape {
  background-color: rgba(255, 255, 255, 0.34);
  border-left: 1px solid rgba(255, 255, 255, 0.45);
  border-right: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  backdrop-filter: saturate(1.1) brightness(1.04);
}

/* ================================================================= HEADER */

.retro-footer[data-variant="retro"] .retro-footer__store-name {
  color: var(--r-ink);
  /* faint double-print register, echoing the hero title */
  text-shadow: 2px 2px 0 color-mix(in srgb, var(--template) 35%, transparent);
}

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

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

/* perforation lines */
.retro-footer[data-variant="retro"] .retro-footer__rule {
  border-top-color: color-mix(in srgb, var(--r-ink) 35%, transparent);
}

/* ============================================================= LINE-ITEMS */

.retro-footer[data-variant="retro"] .retro-footer__item-name {
  color: var(--r-ink);
  z-index: 0;
}

/* highlighter swipe behind the name, exactly like the nav links */
.retro-footer[data-variant="retro"] .retro-footer__item-name {
  position: relative;
}

.retro-footer[data-variant="retro"] .retro-footer__item-name::before {
  content: "";
  position: absolute;
  left: -0.15em;
  right: -0.15em;
  bottom: 0.04em;
  height: 0.5em;
  background-color: var(--template);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  z-index: -1;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.retro-footer[data-variant="retro"] .retro-footer__item:hover .retro-footer__item-name::before,
.retro-footer[data-variant="retro"] .retro-footer__item:focus-visible .retro-footer__item-name::before {
  transform: scaleX(1);
}

.retro-footer[data-variant="retro"] .retro-footer__leader {
  border-bottom-color: var(--r-ink);
}

/* format-code tag — ink outline chip, fills brand on hover */
.retro-footer[data-variant="retro"] .retro-footer__item-tag {
  color: var(--r-ink);
  border-color: var(--r-ink);
  background-color: transparent;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.retro-footer[data-variant="retro"] .retro-footer__item:hover .retro-footer__item-tag,
.retro-footer[data-variant="retro"] .retro-footer__item:focus-visible .retro-footer__item-tag {
  background-color: var(--template);
  color: var(--on-template);
  border-color: var(--template);
}

/* ================================================================ SOCIALS */

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

/* paper stamps with ink border + brand-derived offset shadow (same language
   as the nav socials) */
.retro-footer[data-variant="retro"] .retro-footer__social {
  background-color: var(--r-paper);
  color: var(--r-ink);
  border: 2px solid var(--r-ink);
  box-shadow: 1px 2px 0 color-mix(in srgb, var(--template) 40%, #160f06);
}

.retro-footer[data-variant="retro"] .retro-footer__social:hover {
  transform: rotate(8deg) scale(1.08);
  background-color: var(--template);
  color: var(--on-template);
}

/* =========================================================== RECEIPT FOOT */

/* CSS barcode — irregular black bars on paper */
.retro-footer[data-variant="retro"] .retro-footer__barcode {
  background-color: var(--r-paper);
  background-image: repeating-linear-gradient(
    90deg,
    #161616 0, #161616 1px,
    transparent 1px, transparent 3px,
    #161616 3px, #161616 6px,
    transparent 6px, transparent 7px,
    #161616 7px, #161616 8px,
    transparent 8px, transparent 11px,
    #161616 11px, #161616 14px,
    transparent 14px, transparent 16px
  );
}

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

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