/* ==========================================================================
   COMPETENZE: la libreria dei componenti, strato per strato
   ==========================================================================
   Sette schede, un solo componente. Mentre scorre, ogni scheda passa da
   "ispezionata" (gli strati margine, padding, contenuto, testo separati in
   prospettiva; il testo resta sempre pieno e leggibile) a "selezionata" (richiusa in
   piano al centro dello schermo, col riquadro e le maniglie) a "dipinta"
   (finita; uscendo gli strati si staccano di nuovo, appena). Gli stati li
   racconta lo scorrimento: --p di Moto, scritto da ab.js sulle schede.
   Sulla scrivania il puntatore forza lo stato "puntato", la tastiera le
   fasce del box model. #dj e' lo stesso componente in voce casual.
   Senza ab.js (o con movimento ridotto, o in modalita' leggera) restano
   schede dipinte e in piano.
   ========================================================================== */

.ab-sez { --ab-gap: var(--s-4); }
@media (min-width: 720px) { .ab-sez { --ab-gap: var(--s-5); } }

#dj { scroll-margin-top: var(--s-8); }

.ab-intro {
  display: grid;
  gap: var(--s-4);
  margin-block-end: var(--s-7);
}
.ab-intro .t-lead { max-inline-size: 36em; }

/* ---------- La griglia: le tracce vere, gap uguale a quello delle guide ---------- */
.ab-sez .ab-griglia {
  --s-gutter: var(--ab-gap);
  row-gap: var(--ab-gap);
}
.ab-scheda,
.ab-larga { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .ab-coppia, .ab-terzo { grid-column: span 4; }
  .ab-chiude { grid-column: 1 / -1; }
}
@media (min-width: 1080px) {
  .ab-coppia { grid-column: span 6; }
  .ab-terzo, .ab-chiude { grid-column: span 4; }
}

/* ---------- Il componente ----------
   --ab-h  puntato (0-1)        --ab-f  fuoco da tastiera: le fasce (0-1)
   --ab-k  quanto gli strati sono separati (0 piano, 1 tutto aperto)
   --ab-cen  la scheda e' al centro dello schermo
   --ab-h e --ab-f si registrano per poterli animare. */
@property --ab-h { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --ab-f { syntax: '<number>'; inherits: true; initial-value: 0; }

.ab-scheda {
  --bm-m: calc(var(--ab-gap) / 2);
  --bm-p: var(--s-3);
  --ab-k: 0;
  --ab-cen: 0;
  --sel: var(--ab-h);
  --sel-scarto: 6px;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-inline-size: 0;
  padding: var(--s-5);
  border-radius: var(--r-3);
  background-color: var(--c-superficie);
  outline: var(--bm-m) solid rgb(246 178 107 / calc(var(--ab-f) * 0.55));
  outline-offset: 0;
  translate: 0 calc(var(--ab-h) * -3px);
  box-shadow:
    inset 0 0 0 calc(var(--ab-f) * var(--bm-p)) rgb(147 196 125 / calc(var(--ab-f) * 0.5)),
    0 calc(1px + var(--ab-h) * 1px) calc(1px + var(--ab-h) * 3px) rgb(var(--c-ombra-tinta) / 0.08),
    0 calc(12px + var(--ab-h) * 22px + var(--ab-k) * 18px) calc(28px + var(--ab-h) * 32px + var(--ab-k) * 20px) calc(-14px - var(--ab-h) * 10px)
      rgb(var(--c-ombra-tinta) / calc(0.32 + var(--ab-h) * 0.1 + var(--ab-k) * 0.1));
  transition:
    --ab-h var(--d-250) var(--e-preciso),
    --ab-f var(--d-250) var(--e-uscita),
    translate var(--d-250) var(--e-preciso);
}
@media (min-width: 720px) { .ab-scheda { padding: var(--s-6); } }

.ab-testa { display: flex; align-items: center; gap: var(--s-4); }
.ab-tessera {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--r-2);
  background-color: var(--ab-c, var(--bm-contenuto));
  /* inchiostro fisso: i colori del box model sono pieni, chiari in entrambi i temi */
  color: #14171A;
}
.ab-tessera svg { inline-size: 22px; block-size: 22px; stroke-width: 1.7; }

.ab-scheda h3 {
  font-size: var(--t-3);
  font-weight: 760;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.ab-larga h3 { font-size: var(--t-4); line-height: 1.08; }
.ab-scheda p { color: var(--c-ink-2); }
.ab-scheda p strong { color: var(--c-ink); }

/* La vecchia fila di quattro segni (nel markup, senza testo): non dice nulla,
   la tolgo alla vista. Gli stati ora li racconta lo scorrimento. */
.ab-stati { display: none; }

/* ---------- Gli stati ---------- */
@media (hover: hover) {
  .ab-scheda:hover { --ab-h: 1; }
}
/* Fuoco da tastiera: le fasce del box model, come "ispeziona" */
.ab-scheda:has(:focus-visible) {
  --ab-f: 1;
  --ab-h: 0;
}
/* Premuto: un pixel piu' in basso, l'ombra si ritira */
.ab-scheda:active {
  --ab-h: 0;
  translate: 0 1px;
  transition-duration: 40ms;
}

/* ---------- Gli strati: margine, padding, contenuto (creati da ab.js) ----------
   Fuori da .ab-vivo non esistono alla vista. */
.ab-piano { display: none; }

/* ---------- Strato per strato, legato allo scorrimento ----------
   --p: 0 la scheda entra dal basso, 0.5 e' al centro, 1 esce dall'alto.
   --ab-in  vale 1 fino a p .12 e scende a 0 a p .46 (si costruisce)
   --ab-out vale 0 fino a p .66 e sale a 1 (si stacca, appena)
   Le curve sono lineari: e' lo scorrimento a dare il ritmo. */
.ab-vivo .ab-scheda {
  --ab-in: clamp(0, (0.46 - var(--p, 0.5)) / 0.34, 1);
  --ab-out: clamp(0, (var(--p, 0.5) - 0.66) / 0.34, 1);
  --ab-k: max(var(--ab-in), var(--ab-out) * 0.4);
  --ab-cen: max(0, 1 - max(var(--p, 0.5) - 0.5, 0.5 - var(--p, 0.5)) * 7);
  --sel: max(var(--ab-h), var(--ab-cen));
  transform-style: preserve-3d;
  transform-origin: 50% 55%;
  transform: perspective(1000px) rotateX(calc((var(--ab-in) * 21 - var(--ab-out) * 8) * 1deg));
}
.ab-vivo .ab-scheda.ab-piatta {
  transform: none;
  transform-style: flat;
}
.ab-vivo .ab-scheda:has(:focus-visible) { --sel: 0; }

.ab-vivo .ab-piano {
  display: block;
  position: absolute;
  pointer-events: none;
  opacity: var(--ab-k);
  border-radius: var(--r-3);
}
.ab-vivo .ab-piatta .ab-piano { visibility: hidden; }
/* margine: l'anello fuori dalla scheda, il piu' vicino al piano */
.ab-vivo .ab-pm {
  inset: calc(var(--bm-m) * -1);
  border-radius: calc(var(--r-3) + var(--bm-m));
  box-shadow: inset 0 0 0 var(--bm-m) var(--bm-margine-velo);
  transform: translateZ(calc(var(--ab-k) * 30px)) translateY(calc(var(--ab-k) * -14px));
}
/* padding: l'anello dentro il bordo */
.ab-vivo .ab-pp {
  inset: 0;
  box-shadow: inset 0 0 0 var(--bm-p) var(--bm-padding-velo);
  transform: translateZ(calc(var(--ab-k) * 56px)) translateY(calc(var(--ab-k) * -7px));
}
/* contenuto: il riquadro velato sotto il testo */
.ab-vivo .ab-pc {
  inset: var(--bm-p);
  border-radius: var(--r-2);
  background-color: var(--bm-contenuto-velo);
  opacity: calc(var(--ab-k) * var(--ab-vel, 0.7));
  transform: translateZ(calc(var(--ab-k) * 82px));
}
/* il testo e' lo strato piu' alto e resta sempre pieno: lo scorrimento
   muove gli strati, non lo vela */
.ab-vivo .ab-scheda > :where(.ab-testa, p, .ab-link) {
  transform: translateZ(calc(var(--ab-k) * 96px));
}
.ab-vivo .ab-piatta > :where(.ab-testa, p, .ab-link) { transform: none; }

/* ---------- #dj: la variante casual ---------- */
.ab-dj {
  --casl: 1;
  --ab-dj-tinta: 20%;
  background-color: color-mix(in srgb, var(--bm-bordo) var(--ab-dj-tinta), var(--c-superficie));
}
@media (prefers-color-scheme: dark) { .ab-dj { --ab-dj-tinta: 13%; } .ab-vivo .ab-scheda { --ab-vel: 0.4; } }
.ab-dj .ab-tessera { background-color: var(--bm-bordo); }
.ab-link {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.ab-bottone { flex: 1 1 100%; }
.ab-bottone span { white-space: nowrap; }
@media (min-width: 560px) { .ab-bottone { flex: 1 1 auto; } }

/* ---------- Scrivania: le schede larghe si dividono in due piani ---------- */
@media (min-width: 1080px) {
  .ab-larga {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--s-8);
    row-gap: var(--s-5);
    grid-template-areas: "testa testo";
    align-items: start;
  }
  .ab-larga > .ab-testa { grid-area: testa; }
  .ab-larga > p { grid-area: testo; }
    .ab-dj { grid-template-areas: "testa testo" ". link"; }
  .ab-dj > .ab-link { grid-area: link; }
  .ab-larga > .ab-testa { flex-direction: column; align-items: flex-start; gap: var(--s-5); }
}

/* ---------- Meno movimento, meno carico ---------- */
body.leggero .ab-griglia::before { display: none; }