/* ============================================================
   ButtonCarousel — Originkit, vanilla port
   ============================================================
   Companion to js/button-carousel.js. Two halves:

   1. .button-carousel*  the component's own layout. Every length here reads a
      custom property the script publishes on the host (--bc-card-w, --bc-button,
      --bc-strip-h, …), all of which are one scale factor k away from their
      natural size. Nothing in this file hard-codes a pixel that could outgrow
      the container — that is the whole point of the port.

   2. .results-*  this site's content inside it: the four figures from the
      Risultati section. That markup lives in index.html and is MOVED into the
      slides by js/main.js, so with JS off it is still a readable ordered list —
      which is the layout the .results-list rules at the bottom describe.

   Loaded after css/liquid-glass.css so the card can retune the panel radius
   (--lg-radius) without fighting it. */


/* ============================================================
   1. Component
   ============================================================ */

.button-carousel {
  /* Fallbacks matter: they are what renders in the frame between the host
     being classed and the script publishing its first measurement. */
  --bc-k: 1;
  --bc-card-w: 300px;
  --bc-card-h: 300px;
  --bc-card-radius: 26px;
  --bc-gap-y: 24px;
  --bc-label-h: 34px;
  --bc-strip-h: 150px;
  --bc-button: 52px;
  --bc-button-radius: 26px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bc-gap-y);
  /* Never wider than the column it was dropped into — the script sizes itself
     to fit, this is the belt to that pair of braces. */
  width: 100%;
  max-width: 100%;
}

/* The card. One box, every slide stacked inside it. */
.button-carousel__stage {
  position: relative;
  flex: 0 0 auto;
  width: var(--bc-card-w);
  height: var(--bc-card-h);
  max-width: 100%;
}

.button-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* Only the active slide is hit-testable; the others are stacked underneath
     it at zero opacity waiting for their turn. */
  pointer-events: none;
  will-change: transform, opacity;
}
.button-carousel__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.button-carousel__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--bc-card-radius);
}

.button-carousel__label {
  flex: 0 0 auto;
  min-height: var(--bc-label-h);
  max-width: 100%;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: calc(26px * var(--bc-k));
  line-height: 1.3;
  color: var(--text);
}

/* The chip arc. Clipped, because slots outside the fan are parked well beyond
   the visible span rather than removed from the DOM. */
.button-carousel__strip {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: var(--bc-strip-h);
  overflow: hidden;
}

.button-carousel__seat {
  position: absolute;
  left: 50%;
  top: var(--bc-base-top, 47px);
  transform-origin: center;
  will-change: transform, opacity;
}

/* ===== I numeri non scelti: anelli, non fantasmi =====
   Erano un filo bianco al 14% su un fondo bianco al 5%, con il numero al
   50%. Sembra poco ma e' molto meno di cosi': il componente tiene i due
   vicini a opacita' 0.6, e quel fattore moltiplica tutto — il bordo
   arrivava all'occhio all'8% e il numero al 30%, su nero. Su un telefono, poi,
   il :hover ambra qui sotto non esiste: non c'e' un puntatore che possa farlo
   scattare, quindi quel filo bianco era tutto quello che c'era.

   Ora sono anelli ambra con un accenno di fondo caldo. Nessuno e' piu'
   grande di prima e la fila e' quella di prima: cambia solo il contrasto.
   E la famiglia si legge meglio proprio perche' i due stati ora si
   distinguono per FORMA e non per presenza — quello scelto e' un disco
   pieno, gli altri sono cerchi vuoti — invece che 'uno c'e' e gli altri
   quasi no'. */
.button-carousel__button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 1px solid rgba(219, 107, 43, 0.5);
  border-radius: var(--bc-button-radius);
  overflow: hidden;
  background: rgba(219, 107, 43, 0.09);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(246, 214, 194, 0.9);
  cursor: pointer;
  transform-origin: center;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.button-carousel__button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.button-carousel__button svg {
  width: 46%;
  height: 46%;
  margin: auto;
}

.button-carousel__button:hover {
  border-color: rgba(219, 107, 43, 0.5);
  color: var(--accent);
}

/* The selected chip is the one lit from inside — the same amber the numbers,
   the lightning and the footer laser use. */
.button-carousel__seat [aria-selected="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #0b0b0b;
  box-shadow: 0 6px 22px -6px rgba(219, 107, 43, 0.75);
}

.button-carousel__button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}


/* ============================================================
   2. Risultati — the content that rides in it
   ============================================================ */

/* Notes beside the reel. The carousel column is given a definite width on
   purpose: the component sizes itself from its host's clientWidth, so an
   `auto` track would make that measurement depend on the very thing it
   determines. 420px is comfortably above the card's natural 300px, which
   leaves the height budget as the only thing deciding the scale — exactly as
   it was when the carousel had the row to itself. */
.results-layout {
  display: grid;
  /* 300px is the card's natural width, so the reel column hugs it instead of
     centring a 269px card inside a much wider track — that slack was adding to
     the gap on top of the gap. Kept AT the natural width, never below: the
     component scales itself from this track's clientWidth, and squeezing it
     would start shrinking the card for no reason. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  width: 100%;
  /* Capped and centred so the text track lands on the copy's own 34ch measure.
     Left to fill the scene it ran far wider, opening a space between copy and
     reel that read as two separate things under one centred heading. */
  max-width: 810px;
  margin-inline: auto;
}

.brand-notes {
  display: grid;
  gap: 30px;
}
/* Added by js/main.js. Until then the notes are a plain readable stack — with
   no carousel there is nothing to be "current", so all four stand. */
.brand-notes--live {
  gap: 0;
}
.brand-notes--live .brand-note {
  /* All four share one cell, so the column is as tall as the longest note and
     never resizes as they swap. */
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.45s var(--ease), transform 0.55s var(--ease),
    visibility 0s linear 0.45s;
}
.brand-notes--live .brand-note.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.5s var(--ease) 0.08s, transform 0.6s var(--ease) 0.08s,
    visibility 0s;
}

.brand-note__brand {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.brand-note__text {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(19px, 1.7vw, 25px);
  line-height: 1.45;
  color: var(--text-50);
  max-width: 34ch;
}

@media (max-width: 900px) {
  .results-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  .brand-note__text { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-notes--live .brand-note { transition: opacity 0.2s linear, visibility 0s linear 0.2s; transform: none; }
  .brand-notes--live .brand-note.is-active { transition: opacity 0.2s linear, visibility 0s; }
}

.results-carousel {
  width: 100%;
  /* Before the script runs, the host is an ordered list; centring it here is
     what keeps the no-JS layout from hugging the left edge. */
  display: flex;
  justify-content: center;
}

.result-item {
  /* .liquid-glass ships a 26px radius; the carousel's card radius is scaled
     with everything else, so hand it over. */
  --lg-radius: var(--bc-card-radius, 26px);

  /* The card is the reel: full-bleed 9:16 media with the controls layered on
     top. The stat card this replaced was a padded column of text, which is why
     padding goes to zero rather than being tuned. */
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
}

.brand-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Poster and video obey the same fit, so the 9:16 pair stays registered:
     the cover was rebuilt onto a 9:16 canvas for exactly this reason. */
  object-fit: cover;
  border-radius: inherit;
  /* .liquid-glass draws itself as a squircle — continuous curvature, which
     runs fuller at the corner than the arc `border-radius` alone produces.
     Without inheriting the shape too, the video was clipped a hair inside the
     panel and its lit rim showed through as a pale sliver on each corner. */
  corner-shape: inherit;
  background: #000;
  display: block;
}

/* Profile link. A bare mark at rest so it never competes with the reel, and it
   grows into the handle on hover — the brand is named on demand rather than
   labelled permanently. Collapsing `max-width` rather than toggling display is
   what lets that be a transition at all. */
.brand-link {
  position: absolute;
  top: calc(12px * var(--bc-k, 1));
  right: calc(12px * var(--bc-k, 1));
  z-index: 4;
  display: flex;
  align-items: center;
  height: calc(34px * var(--bc-k, 1));
  padding: 0 calc(6px * var(--bc-k, 1));
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.45s var(--ease), border-color 0.45s var(--ease),
    color 0.45s var(--ease);
}
.brand-link__mark {
  flex: none;
  width: calc(21px * var(--bc-k, 1));
  height: calc(21px * var(--bc-k, 1));
}
.brand-link__handle {
  font-family: var(--font-mono);
  font-size: calc(10px * var(--bc-k, 1));
  letter-spacing: 0.06em;
  white-space: nowrap;
  max-width: 0;
  opacity: 0;
  transition: max-width 0.55s var(--ease), opacity 0.35s var(--ease),
    margin 0.55s var(--ease);
}
.brand-link:hover,
.brand-link:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0a0a;
}
.brand-link:hover .brand-link__handle,
.brand-link:focus-visible .brand-link__handle {
  max-width: calc(200px * var(--bc-k, 1));
  opacity: 1;
  margin-left: calc(7px * var(--bc-k, 1));
  margin-right: calc(5px * var(--bc-k, 1));
}

/* Hidden until js/main.js has wired its handler — without JS the reels fall
   back to the browser's own controls and a dead button would only mislead. */
.brand-play {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: calc(74px * var(--bc-k, 1));
  height: calc(74px * var(--bc-k, 1));
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease),
    border-color 0.4s var(--ease), color 0.4s var(--ease), opacity 0.3s var(--ease);
}
.brand-play svg {
  width: 40%;
  height: 40%;
  /* Optical centring: a triangle's bounding box sits left of its visual mass. */
  margin-left: 8%;
}
.result-item.brand-ready .brand-play { display: grid; }

.brand-play:hover,
.brand-play:focus-visible {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0a0a;
}

/* Once it is running the card is just the video, with the browser's own
   controls; the play button would only be in the way. The profile link stays:
   it is small, out of the controls' path, and still the way to the brand. */
.result-item.is-playing .brand-play {
  opacity: 0;
  pointer-events: none;
}

/* ============================================================
   2b. Metodo — the numbered plate that replaced the reel
   ============================================================
   Same component, same hooks; only what rides in it changed. The reel is
   archived in index.html and the card is now a typographic plate: the step's
   numeral, the total beside it like a page number, and along the foot the bar
   that says how far along the path this step sits.

   Every size below is multiplied by --bc-k, the single scale the component
   publishes on its host. That is the whole contract for living inside it: use
   the variable and the plate shrinks with the card on a short laptop; write a
   bare px and it will burst out of the frame at the first breakpoint. */

/* The step's heading. The brand name's mono label, one size up: here it is a
   real title with its number in front, not a byline over a pull quote. */
.step-note__title {
  font-size: 12.5px;
  letter-spacing: 0.16em;
  margin-bottom: 16px;
}

.step-item {
  display: flex;
  flex-direction: column;
  padding: calc(26px * var(--bc-k, 1));
}

/* Auto margins top AND bottom: the free space splits above and below the
   numeral, which centres it in whatever the card has left over, and the foot
   is pinned to the bottom edge without a second rule to do it. */
.step-card__figure {
  margin-top: auto;
  margin-bottom: auto;
  display: flex;
  align-items: baseline;
  gap: calc(9px * var(--bc-k, 1));
}

.step-card__num {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: calc(148px * var(--bc-k, 1));
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: var(--accent);
}
/* Hollow rather than solid. Filled, a numeral this size is the loudest thing
   in the scene and the reader's eye never leaves it for the text beside it;
   drawn as an outline it still anchors the card but stops shouting. The
   fallback above is a live one: without text-stroke the numeral simply stays
   solid amber, which is worse but never invisible — a `color: transparent`
   written outside this guard would erase it on any browser that lacks the
   property. */
@supports (-webkit-text-stroke: 1px currentColor) {
  .step-card__num {
    color: transparent;
    -webkit-text-stroke: calc(1.4px * var(--bc-k, 1)) var(--accent);
  }
}

.step-card__total {
  font-family: var(--font-mono);
  /* Floored, unlike the numeral beside it. --bc-k bottoms out around 0.65 on
     a phone, which takes 14px to 9 and this caption to 7 — small enough to be
     a texture rather than a word. The numeral can afford to scale freely
     because it stays enormous either way; type this size cannot. */
  font-size: max(11px, calc(14px * var(--bc-k, 1)));
  letter-spacing: 0.1em;
  color: var(--text-50);
}

.step-card__foot {
  display: grid;
  gap: calc(13px * var(--bc-k, 1));
}

.step-card__track {
  position: relative;
  height: calc(2px * var(--bc-k, 1));
  border-radius: 999px;
  background: rgba(235, 235, 235, 0.16);
  overflow: hidden;
}
.step-card__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--accent);
}
/* Read off data-chip rather than written into the markup: a sixth step is a
   sixth <li> plus a sixth line here, instead of five progress bars to walk
   through and renumber by hand. */
.step-item[data-chip="1"] .step-card__fill { width: 20%; }
.step-item[data-chip="2"] .step-card__fill { width: 40%; }
.step-item[data-chip="3"] .step-card__fill { width: 60%; }
.step-item[data-chip="4"] .step-card__fill { width: 80%; }
.step-item[data-chip="5"] .step-card__fill { width: 100%; }

.step-card__name {
  font-family: var(--font-mono);
  font-size: max(9.5px, calc(11px * var(--bc-k, 1)));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-50);
}

/* The digit in the ring's chip, where the brand logo used to be. It inherits
   the button's colour on purpose: muted at rest, amber on hover, near-black on
   the selected chip — so the lit pastille reads as lit without a rule of its
   own. One digit and not "03": at the smallest scale the chip is barely 20px
   across, and two figures there are a smudge. The long form is on the card. */
.button-carousel__button .chip-num {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: calc(21px * var(--bc-k, 1));
  line-height: 1;
  color: inherit;
}


/* ============================================================
   3. No-JS / pre-mount fallback
   ============================================================
   Everything above assumes js/button-carousel.js took the list apart. Until
   (or unless) it does, .results-list is a plain grid of the same four cards —
   the layout the old benchmark table used to occupy. */

.results-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.results-list .result-item {
  height: auto;
  aspect-ratio: 9 / 16;
  padding: 0;
}

/* Pre-mount there is no chip ring naming the brands and, on a touch device, no
   hover to open the link with — so the handle is simply shown. */
.results-list .brand-link__handle {
  max-width: none;
  opacity: 1;
  margin-left: calc(7px * var(--bc-k, 1));
  margin-right: calc(5px * var(--bc-k, 1));
}

/* Once mounted, the list wrapper is gone entirely — the script replaces the
   host's contents — so these rules simply stop applying. */

/* The method's five plates, same list, different shape: 5:7 rather than 9:16,
   because there is no video deciding the frame any more. --bc-k is the
   component's own scale variable, and pre-mount nobody has set it — so the
   plate would draw its 148px numeral inside a 150px cell. Naming it here is
   how the un-mounted card is told what size to be. */
.steps-list {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.steps-list .result-item { aspect-ratio: 5 / 7; }
.results-list .step-item { --bc-k: 0.6; }

@media (max-width: 900px) {
  .results-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .results-list { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .button-carousel__button { transition: none; }
}