/* ==========================================================================
   showcase.css — the dark category carousel, used on both storefronts
   --------------------------------------------------------------------------
   A near-black band with the families laid out in a coverflow: the middle one
   large and lit, its neighbours smaller and drained of colour, the outermost
   pair running off the edges. Behind the middle one, a cone of halftone dots
   like a spotlight, tinted to that family's own photograph. Arrows either
   side, and a "view products" pill that follows the pointer.

   Behaviour is in assets/js/showcase.js. Clicking the middle card opens that
   family's page; clicking a side card brings it to the middle instead, so a
   half-aimed click never navigates somewhere you did not choose.

   As with hero.css, nothing here names red or blue — the eyebrow and the
   accents run off --brand, so each company gets its own colour out of one
   stylesheet. The dot cone is the exception: its colour comes from the
   `tint` on each family in categories.js, because it is meant to look like
   light thrown off the photograph rather than brand paint.
   ========================================================================== */

/* ------------------------------- tokens -------------------------------- */
:root {
  --sc-bg: #0d0c0c;
  --sc-bg-2: #171514;
  --sc-ink: #f4f2ef;
  --sc-ink-soft: #a49f99;
}

.showcase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem);
  background: var(--sc-bg);
  color: var(--sc-ink);
}

/*
  A faint speckle over the black. Two very sparse radial-gradient layers, so
  it costs nothing and needs no image — without it a large flat black panel
  looks like a rendering error rather than a design.
*/
.showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(255, 255, 255, 0.055) 0 1px, transparent 1.6px),
    radial-gradient(circle at 74% 68%, rgba(255, 255, 255, 0.045) 0 1px, transparent 1.6px);
  background-size: 137px 121px, 189px 173px;
}

/* a soft lift in the middle so the featured card sits in a pool of light */
.showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(58% 46% at 50% 42%, var(--sc-bg-2), transparent 72%);
}

.showcase__inner { position: relative; z-index: 2; }

/* ------------------------------- heading ------------------------------- */
.showcase__head { text-align: center; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

.showcase__eyebrow {
  font-family: var(--vh-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-3);
  margin-bottom: 0.7rem;
}

.showcase__title {
  font-family: var(--vh-heavy, "Arial Black", sans-serif);
  font-weight: 900;
  font-size: clamp(2rem, 5.6vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--sc-ink);
}

.showcase__sub {
  max-width: 44rem;
  margin: 0.9rem auto 0;
  font-family: var(--vh-text);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--sc-ink-soft);
}

/* =============================== the rail ==============================
   Every card is absolutely centred and then pushed out by its distance from
   the featured one. showcase.js writes that distance onto each card as
   data-pos, and the rules below do the rest — which keeps the maths in one
   place and the look in the stylesheet.
   ===================================================================== */
.showcase__rail {
  position: relative;
  height: clamp(15rem, 34vw, 28rem);
  margin-top: clamp(0.5rem, 2vw, 1.5rem);
  perspective: 1400px;
}

/*
  THE CARD IS 3:2 ON PURPOSE, AND BIG ON PURPOSE.

  These photographs are wide group shots — six or eight parts laid out side by
  side, about 1.57:1. The card used to be 3:4 portrait, which meant object-fit
  threw away FIFTY-TWO PER CENT of every picture's width just to fill the
  frame. All anyone saw was a narrow slice down the middle, which is why the
  products were unreadable.

  At 3:2 the crop costs about 5% instead of 52%, and the card is roughly twice
  the area it was. The photographs are also cut to 3:2 when they are generated
  (see the note in README.txt) so nothing is downloaded only to be discarded.
*/
.sccard {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(18rem, 48vw, 38rem);
  aspect-ratio: 3 / 2;
  margin: 0;
  border: 0;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #1b1918;
  cursor: pointer;
  /* the transform is composed in one place so every state animates together */
  transform: translate(-50%, -50%) translateX(var(--dx, 0)) scale(var(--sk, 1));
  opacity: var(--op, 1);
  filter: grayscale(var(--gs, 0)) brightness(var(--br, 1));
  z-index: var(--z, 1);
  transition: transform 620ms cubic-bezier(0.22, 0.85, 0.24, 1),
              opacity 500ms ease,
              filter 500ms ease;
}

.sccard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* the family name, always legible over the photograph */
.sccard__name {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.6rem 1rem 1.05rem;
  font-family: var(--vh-mono, ui-monospace, monospace);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
}

/* ------------------------- the five rail positions ---------------------
   The offsets are a percentage of the CARD's own width, so the fan keeps its
   proportions as the card grows and shrinks with the viewport.
   --------------------------------------------------------------------- */
/* featured */
.sccard[data-pos="0"]  { --dx: 0;      --sk: 1;    --op: 1;    --gs: 0;    --br: 1;    --z: 5; }
/* immediate neighbours: smaller, drained, dimmer, peeking in from the sides */
.sccard[data-pos="1"]  { --dx: 70%;    --sk: 0.6;  --op: 0.5;  --gs: 1;    --br: 0.48; --z: 4; }
.sccard[data-pos="-1"] { --dx: -70%;   --sk: 0.6;  --op: 0.5;  --gs: 1;    --br: 0.48; --z: 4; }
/* outer pair: mostly past the edge, just enough to say the rail continues */
.sccard[data-pos="2"]  { --dx: 116%;   --sk: 0.46; --op: 0.24; --gs: 1;    --br: 0.3;  --z: 3; }
.sccard[data-pos="-2"] { --dx: -116%;  --sk: 0.46; --op: 0.24; --gs: 1;    --br: 0.3;  --z: 3; }
/* anything further out waits off-stage */
.sccard[data-pos="far"]  { --dx: 150%;  --sk: 0.42; --op: 0; --z: 1; pointer-events: none; }
.sccard[data-pos="-far"] { --dx: -150%; --sk: 0.42; --op: 0; --z: 1; pointer-events: none; }

/* only the featured card carries a name label */
.sccard:not([data-pos="0"]) .sccard__name { opacity: 0; }
.sccard[data-pos="0"] .sccard__name { opacity: 1; transition: opacity 400ms ease 180ms; }

/* a neighbour brightens a little under the pointer, to say it is clickable */
.sccard:not([data-pos="0"]):hover { --op: 0.8; --br: 0.72; }

.sccard[data-pos="0"] {
  box-shadow: 0 26px 60px -18px rgba(0, 0, 0, 0.85);
}

/* --------------------------- the halftone cone -------------------------
   A downward-widening trapezoid filled with dots, clipped to shape and faded
   out at the bottom. It sits behind the cards and takes its colour from the
   featured family.
   --------------------------------------------------------------------- */
.showcase__beam {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: -1%;
  width: clamp(15rem, 30vw, 25rem);
  height: 116%;
  transform: translateX(-50%);
  pointer-events: none;
  color: var(--beam, #8fa0ad);
  background-image: radial-gradient(currentColor 1.5px, transparent 1.7px);
  background-size: 9px 9px;
  clip-path: polygon(32% 0, 68% 0, 100% 84%, 88% 96%, 62% 100%, 38% 100%, 12% 96%, 0 84%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 48%, rgba(0, 0, 0, 0.35) 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 48%, rgba(0, 0, 0, 0.35) 82%, transparent 100%);
  opacity: 0.62;
  transition: color 620ms ease;
}

/* ------------------------------ price tag ------------------------------
   The little rotated paper label pinned to the top-left of the featured card.
   --------------------------------------------------------------------- */
.showcase__tag {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 6%;
  transform: translateX(-190%) rotate(-4deg);
  padding: 0.5rem 0.9rem 0.55rem;
  border-radius: 5px;
  background: #f7f5f1;
  color: #1d1d1d;
  text-align: center;
  box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

.showcase__tag small {
  display: block;
  font-family: var(--vh-mono, ui-monospace, monospace);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b6b6b;
}

.showcase__tag b {
  font-family: var(--vh-heavy, "Arial Black", sans-serif);
  font-size: 1rem;
  letter-spacing: -0.01em;
}

@media (max-width: 720px) { .showcase__tag { display: none; } }

/* ------------------------------- the pill ------------------------------ */
.showcase__pill {
  position: absolute;
  z-index: 7;
  left: 0; top: 0;
  padding: 0.7rem 1.15rem;
  border-radius: 999px;
  background: #f7f5f1;
  color: #1d1d1d;
  font-family: var(--vh-mono, ui-monospace, monospace);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.94);
  transition: opacity 170ms ease, transform 220ms cubic-bezier(0.2, 0.9, 0.25, 1);
}

.showcase__pill.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ------------------------------- arrows -------------------------------- */
.showcase__arrow {
  position: absolute;
  z-index: 8;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(4px);
  color: #fff;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.showcase__arrow svg { width: 19px; height: 19px; }
.showcase__arrow--prev { left: clamp(0.5rem, 3vw, 2.5rem); }
.showcase__arrow--next { right: clamp(0.5rem, 3vw, 2.5rem); }

.showcase__arrow:hover {
  background: var(--brand);
  border-color: var(--brand);
}

.showcase__arrow--prev:hover { transform: translateY(-50%) translateX(-3px); }
.showcase__arrow--next:hover { transform: translateY(-50%) translateX(3px); }

/* ------------------------------- the dots ------------------------------ */
.showcase__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: clamp(1.25rem, 3vw, 2rem);
}

.showcase__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  cursor: pointer;
  transition: background 220ms ease, width 260ms cubic-bezier(0.2, 0.9, 0.25, 1);
}

.showcase__dot:hover { background: rgba(255, 255, 255, 0.45); }
.showcase__dot.is-on { width: 26px; background: var(--brand); }

/* ------------------------------ the footer ----------------------------- */
.showcase__foot {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.showcase__all {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.9rem 1.5rem;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  font-family: var(--vh-mono, ui-monospace, monospace);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sc-ink);
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.showcase__all:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* ============================== responsive ============================= */
@media (max-width: 900px) {
  /* the outer pair costs more than it gives once the rail is this narrow */
  .sccard[data-pos="2"], .sccard[data-pos="-2"] { --op: 0; pointer-events: none; }
  /* the card takes most of the width, so the neighbours only just show */
  .sccard { width: min(78vw, 30rem); }
  .sccard[data-pos="1"]  { --dx: 62%; --sk: 0.62; }
  .sccard[data-pos="-1"] { --dx: -62%; --sk: 0.62; }
  .showcase__rail { height: min(56vw, 21rem); }
  .sccard__name { font-size: 0.74rem; padding: 2rem 0.75rem 0.85rem; }
}

@media (max-width: 560px) {
  .showcase__arrow { width: 40px; height: 40px; }
  /* On a phone the neighbours are so small they read as noise. Show the
     featured card almost full width and let the arrows and dots do the
     navigating instead. */
  .sccard { width: 86vw; }
  .sccard[data-pos="1"]  { --dx: 56%; --sk: 0.5; --op: 0.32; }
  .sccard[data-pos="-1"] { --dx: -56%; --sk: 0.5; --op: 0.32; }
  .showcase__rail { height: 62vw; }
}

/* ============================ reduced motion ==========================
   The carousel stops advancing on its own. The arrows and dots still work, so
   nothing becomes unreachable — it just never moves unless asked.
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sccard { transition: none; }
  .showcase__beam { transition: none; }
}