/* AP: testata, navigazione, apertura, piede (DIREZIONE.md §7.0, §7.1).
   La finestra dello strumento: nome del documento e lingua in alto, pannello
   dei livelli a sinistra (scrivania) o in basso (telefono) con la selezione
   che segue la lettura; l'apertura e' la pagina esplosa in strati (ap.js);
   il piede e' la stessa pila vista di taglio.
   Esposte su :root: --ap-testata (56/64), --ap-barra (barra in basso sul
   telefono, 0 da 1080), --ap-rail (pannello a sinistra da 1080, 0 sotto).
   Il <body> riceve gia' lo spazio per entrambi. */

:root {
  --ap-testata: 56px;
  --ap-barra: 60px;
  --ap-rail: 0px;
}
@media (min-width: 1080px) {
  :root { --ap-testata: 64px; --ap-barra: 0px; --ap-rail: 212px; }
}

body { padding-block-end: calc(var(--ap-barra) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1080px) {
  body { padding-block-end: 0; padding-inline-start: var(--ap-rail); }
}

/* Residui del sito di prima (§9.6): dopo l'integrazione non fanno nulla */
.foglio:has(> .ap) { max-width: none; padding: 0; }

/* == TESTATA == */

.mondo.ap-testata {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-testata);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  block-size: var(--ap-testata);
  padding: 0 var(--s-gutter);
  background-color: var(--c-superficie);
  box-shadow: inset 0 -1px 0 var(--c-filo);
  transition: background-color var(--d-250) var(--e-uscita), box-shadow var(--d-250) var(--e-uscita);
}
/* In cima trasparente; foglio e filo al primo scorrimento (.compatta) */
.mondo.ap-testata:has(#targhetta:not(.compatta)) {
  background-color: transparent;
  box-shadow: inset 0 -1px 0 transparent;
}

.mondo .ap-targhetta {
  font-family: var(--f);
  font-size: var(--t-1);
  font-weight: 760;
  letter-spacing: -0.01em;
  text-transform: none;
  white-space: nowrap;
  color: var(--c-ink);
  text-decoration: none;
  transition:
    font-variation-settings var(--d-250) var(--e-preciso),
    font-weight var(--d-250) var(--e-preciso),
    opacity var(--d-250) var(--e-uscita),
    transform var(--d-250) var(--e-uscita);
}
.mondo .ap-targhetta:hover { color: var(--c-ink); }
/* Compatta: lo stato si vede nella voce (monospazio) */
.mondo .ap-targhetta.compatta { --mono: 1; font-weight: 560; }

/* Telefono: in cima il nome e' gia' l'apertura; quello della testata arriva dopo */
@media (max-width: 1079.98px) {
  .mo-pronto .mondo .ap-targhetta:not(.compatta):not(:focus-visible) { opacity: 0; transform: translateY(6px); }
}

/* IT/EN: controllo segmentato, la selezione scivola sotto la lingua attiva */
.mondo .ap-lingua {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 3px;
  border: 0;
  border-radius: var(--r-2);
  background-color: var(--c-incavo);
}
.mondo .ap-lingua .ap-lingua-sel {
  --sel-scarto: 0px;
  position: absolute;
  inset-block: 3px;
  inset-inline-start: 3px;
  inline-size: calc(50% - 3px);
  border-radius: var(--r-1);
  background-color: var(--c-superficie);
  box-shadow: 0 1px 2px rgb(var(--c-ombra-tinta) / 0.16);
  transform: translateX(calc(var(--ap-l, 0) * 100%));
  transition: transform var(--d-250) var(--e-preciso);
}
.mondo .ap-lingua[data-attiva="en"] .ap-lingua-sel { --ap-l: 1; }
.mondo .ap-lingua .btn-lang {
  --mono: 1;
  position: relative;
  z-index: 1;
  min-inline-size: 44px;
  block-size: 34px;
  padding: 0 var(--s-3);
  border: 0;
  border-radius: var(--r-1);
  background: transparent;
  font-family: var(--f);
  font-size: var(--t-etichetta);
  font-weight: 640;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--c-ink-3);
  transition: color var(--d-250) var(--e-uscita);
}
.mondo .ap-lingua .btn-lang:hover { color: var(--c-ink); }
.mondo .ap-lingua .btn-lang.attiva { color: var(--c-ink); background: transparent; }

/* == NAVIGAZIONE: il pannello dei livelli == */

.mondo.ap-nav {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-nav);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  block-size: calc(var(--ap-barra) + env(safe-area-inset-bottom, 0px));
  padding: var(--s-1) max(var(--s-2), env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(var(--s-2), env(safe-area-inset-left, 0px));
  transform: none;
  background-color: var(--c-superficie);
  box-shadow: inset 0 1px 0 var(--c-filo);
}

.mondo.ap-nav .rail-voce[data-sez="chi-sono"]   { --strato: var(--bm-contenuto); }
.mondo.ap-nav .rail-voce[data-sez="progetti"]   { --strato: var(--bm-padding); }
.mondo.ap-nav .rail-voce[data-sez="competenze"] { --strato: var(--bm-margine); }
.mondo.ap-nav .rail-voce[data-sez="squadra"]    { --strato: var(--bm-bordo); }
.mondo.ap-nav .rail-voce[data-sez="contatti"]   { --strato: var(--c-sel); }
.mondo.ap-nav[data-ap-sez="chi-sono"]   { --ap-strato: var(--bm-contenuto); }
.mondo.ap-nav[data-ap-sez="progetti"]   { --ap-strato: var(--bm-padding); }
.mondo.ap-nav[data-ap-sez="competenze"] { --ap-strato: var(--bm-margine); }
.mondo.ap-nav[data-ap-sez="squadra"]    { --ap-strato: var(--bm-bordo); }
.mondo.ap-nav[data-ap-sez="contatti"]   { --ap-strato: var(--c-sel); }

.mondo.ap-nav .rail-voce {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  min-inline-size: 0;
  padding: var(--s-1) 2px;
  border-radius: var(--r-1);
  text-decoration: none;
  color: var(--c-ink-2);
}
.mondo.ap-nav .rail-voce.attiva::after { content: none; }

.mondo.ap-nav .rail-num {
  --mono: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--f);
  font-size: var(--t-etichetta);
  font-weight: 560;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums slashed-zero;
  color: var(--c-ink-3);
  transition: color var(--d-250) var(--e-uscita);
}
/* Campione del colore di strato */
.mondo.ap-nav .rail-num::before {
  content: '';
  inline-size: 7px;
  block-size: 7px;
  border-radius: 1px;
  background-color: var(--strato);
  box-shadow: inset 0 0 0 1px var(--c-filo);
}
.mondo.ap-nav .rail-nome {
  max-inline-size: 100%;
  overflow: hidden;
  font-family: var(--f);
  font-size: var(--t-etichetta);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-ink-2);
  transition: color var(--d-250) var(--e-uscita);
}
.mondo.ap-nav .rail-voce.attiva .rail-nome { color: var(--c-ink); }
.mondo.ap-nav .rail-voce.attiva .rail-num { color: var(--c-ink-2); }
@media (hover: hover) {
  .mondo.ap-nav .rail-voce:hover .rail-nome,
  .mondo.ap-nav .rail-voce:hover .rail-num { color: var(--c-ink); }
  .mondo.ap-nav .rail-voce:not(.attiva):hover { background-color: var(--c-incavo); }
}

/* Il riquadro di selezione (misure da ap.js), maniglie come .t-selezione */
.mondo.ap-nav .ap-nav-sel {
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 0;
  inline-size: var(--ap-w, 0px);
  block-size: var(--ap-h, 0px);
  border: 1.5px solid var(--c-sel);
  border-radius: var(--r-1);
  background:
    linear-gradient(var(--c-superficie) 0 0) 2px 2px / 3px 3px no-repeat,
    linear-gradient(var(--c-superficie) 0 0) right 2px top 2px / 3px 3px no-repeat,
    linear-gradient(var(--c-superficie) 0 0) left 2px bottom 2px / 3px 3px no-repeat,
    linear-gradient(var(--c-superficie) 0 0) right 2px bottom 2px / 3px 3px no-repeat,
    linear-gradient(var(--c-sel) 0 0) -1.5px -1.5px / 7px 7px no-repeat,
    linear-gradient(var(--c-sel) 0 0) right -1.5px top -1.5px / 7px 7px no-repeat,
    linear-gradient(var(--c-sel) 0 0) left -1.5px bottom -1.5px / 7px 7px no-repeat,
    linear-gradient(var(--c-sel) 0 0) right -1.5px bottom -1.5px / 7px 7px no-repeat;
  background-origin: border-box;
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--ap-x, 0px), var(--ap-y, 0px));
  transition:
    transform var(--d-250) var(--e-preciso),
    inline-size var(--d-250) var(--e-preciso),
    block-size var(--d-250) var(--e-preciso),
    opacity var(--d-250) var(--e-uscita);
}
.mondo.ap-nav.ap-con-sel .ap-nav-sel { opacity: 1; }
.mondo.ap-nav.ap-sel-salta .ap-nav-sel { transition: opacity var(--d-250) var(--e-uscita); }

/* Fascia di lettura; sul chiaro la tinta scende verso l'inchiostro per reggere */
.mondo.ap-nav .ap-nav-letto {
  position: absolute;
  inset: auto 6px 4px 6px;
  block-size: 3px;
  border-radius: 1px;
  background-color: color-mix(in oklab, var(--ap-strato, var(--c-sel)) 62%, var(--c-ink));
  transform: scaleX(var(--ap-letto, 0));
  transform-origin: left center;
}
@media (prefers-color-scheme: dark) {
  .mondo.ap-nav .ap-nav-letto { background-color: var(--ap-strato, var(--c-sel)); }
}

/* Scrivania: pannello sul bordo sinistro */
@media (min-width: 1080px) {
  .mondo.ap-testata { padding-inline: var(--s-6) var(--s-gutter); }
  .mondo .ap-targhetta { inline-size: calc(var(--ap-rail) - var(--s-6) - var(--s-4)); overflow: hidden; text-overflow: ellipsis; }

  .mondo.ap-nav {
    inset: 0 auto 0 0;
    inline-size: var(--ap-rail);
    block-size: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: min-content;
    align-content: start;
    gap: var(--s-1);
    padding: calc(var(--ap-testata) + var(--s-6)) var(--s-4) var(--s-6);
    box-shadow: inset -1px 0 0 var(--c-filo);
  }
  .mondo.ap-nav .rail-voce {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    column-gap: var(--s-3);
    min-block-size: 44px;
    padding: var(--s-2) var(--s-3) var(--s-2) var(--s-4);
  }
  .mondo.ap-nav .rail-num { gap: var(--s-2); }
  .mondo.ap-nav .rail-nome { font-size: var(--t-1); font-weight: 560; }
  .mondo.ap-nav .ap-nav-letto { inset: 6px auto 6px 4px; block-size: auto; inline-size: 3px; transform: scaleY(var(--ap-letto, 0)); transform-origin: center top; }
}

/* == APERTURA: la pagina esplosa nei suoi strati == */

.mondo.ap {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto minmax(0, 1fr);
  grid-template-areas: "nome" "frase" "azioni" "scena";
  justify-content: stretch;
  min-block-size: calc(100vh - var(--ap-barra));
  min-block-size: calc(100svh - var(--ap-barra) - env(safe-area-inset-bottom, 0px));
  padding: calc(var(--ap-testata) + var(--s-5)) var(--s-gutter) 0;
}

.mondo .ap-nome {
  grid-area: nome;
  margin: 0;
  font-family: var(--f);
  font-size: var(--t-6);
  font-weight: 880;
  line-height: 0.94;
  letter-spacing: -0.045em;
  text-transform: none;
  color: var(--c-ink);
}
.mondo .ap-nome span {
  display: block;
  transition: font-variation-settings var(--d-500) var(--e-scambio);
}
/* Il cognome in voce casual, inclinata */
.mondo .ap-nome span + span {
  --casl: 1;
  font-style: oblique 10deg;
  font-weight: 780;
  letter-spacing: -0.035em;
  padding-inline-end: 0.06em;
}
/* Il nome entra in monospazio e diventa proporzionale a 100 (.ap-finito) */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .mondo.ap:not(.ap-finito, :has(.finito)) .ap-nome { --mono: 1; }
}

.mondo .ap-frase {
  grid-area: frase;
  max-inline-size: 30ch;
  margin-block-start: var(--s-5);
  font-family: var(--f);
  font-size: var(--t-3);
  font-weight: 420;
  line-height: 1.42;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--c-ink-2);
}
.mondo .ap-frase b { color: var(--c-ink); font-weight: 680; }

.mondo .ap-azioni {
  grid-area: azioni;
  display: grid;
  gap: var(--s-3);
  margin-block-start: var(--s-6);
}
.mondo .ap-azioni .ap-cta { inline-size: 100%; }
@media (min-width: 560px) {
  .mondo .ap-azioni { display: flex; flex-wrap: wrap; }
  .mondo .ap-azioni .ap-cta { inline-size: auto; }
}


.mondo .ap-scena {
  grid-area: scena;
  z-index: var(--z-scena);
  min-block-size: 240px;
  margin-inline: calc(var(--s-gutter) * -1) calc(var(--s-gutter) * -1 - 22vw);
}

/* Ripiego: la pila in CSS 3D, ferma. Con gli script la scena parte vuota
   (tappa 20) fino alla tela o al ripiego; se nessuna scena arriva, il
   contatore chiuso (.finito, script.js) la riaccende. */
@media (scripting: enabled) {
  .mondo .ap-scena:not(.tela-ripiego) > .ap-pila-css { opacity: 0; }
  .mondo.ap:has(.finito) .ap-scena:not(.tela-accesa) > .ap-pila-css { opacity: 1; }
}
.mondo .ap-pila-css {
  display: grid;
  place-items: center;
  perspective: 1100px;
  overflow: clip;
}
.mondo .ap-pila-css i {
  grid-area: 1 / 1;
  inline-size: min(56%, 440px);
  aspect-ratio: 1 / 1.12;
  border-radius: var(--r-3);
  background: linear-gradient(var(--ap-velo, transparent) 0 0), var(--c-superficie);
  box-shadow: var(--o-strato), inset 0 0 0 1.5px var(--ap-bordo, var(--c-sel));
  transform: rotateX(56deg) rotateZ(-34deg) translateZ(calc(var(--k) * 30px));
}
.mondo .ap-pila-css i:nth-child(1) { --k: -2.5; --ap-velo: var(--c-incavo); --ap-bordo: var(--c-filo-forte); }
.mondo .ap-pila-css i:nth-child(2) { --k: -1.5; --ap-velo: color-mix(in srgb, var(--c-sel) 16%, transparent); --ap-bordo: var(--c-sel); }
.mondo .ap-pila-css i:nth-child(3) { --k: -0.5; --ap-velo: var(--bm-bordo-velo); --ap-bordo: var(--bm-bordo); }
.mondo .ap-pila-css i:nth-child(4) { --k: 0.5; --ap-velo: var(--bm-margine-velo); --ap-bordo: var(--bm-margine); }
.mondo .ap-pila-css i:nth-child(5) { --k: 1.5; --ap-velo: var(--bm-padding-velo); --ap-bordo: var(--bm-padding); }
.mondo .ap-pila-css i:nth-child(6) {
  --k: 2.5;
  --ap-bordo: var(--bm-contenuto);
  background:
    linear-gradient(var(--bm-contenuto) 0 0) 10% 12% / 58% 8% no-repeat,
    linear-gradient(var(--c-filo-forte) 0 0) 10% 30% / 76% 3.5% no-repeat,
    linear-gradient(var(--c-filo-forte) 0 0) 10% 38% / 70% 3.5% no-repeat,
    linear-gradient(var(--c-filo-forte) 0 0) 10% 46% / 48% 3.5% no-repeat,
    linear-gradient(var(--c-sel) 0 0) 10% 62% / 36% 9% no-repeat,
    var(--c-superficie);
}

/* Il contatore: le tacche cadono sulle tappe vere (20, 55, 80); senza JS non misura nulla e non si mostra */
html:not(.mo-pronto, .mo-ridotto) .ap-caricamento { display: none; }
.mondo .ap-caricamento {
  grid-area: scena;
  position: relative;
  inset: auto;
  z-index: 2;
  align-self: end;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-block-end: var(--s-5);
  transition: opacity var(--d-500) var(--e-uscita);
}
.mondo .ap-caricamento .caricamento-num {
  min-inline-size: 3ch;
  font-family: var(--f);
  font-size: var(--t-4);
  font-weight: 640;
  line-height: 1;
  text-align: end;
  color: var(--c-ink);
}
.mondo .ap-caricamento .etichetta {
  font-family: var(--f);
  font-size: var(--t-etichetta);
  font-weight: 560;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-ink-3);
}
.mondo .ap-caricamento .caricamento-barra {
  position: relative;
  inline-size: 96px;
  block-size: 2px;
  margin-inline-start: var(--s-2);
  background:
    linear-gradient(var(--c-ink-3) 0 0) 20% 50% / 1px 8px no-repeat,
    linear-gradient(var(--c-ink-3) 0 0) 55% 50% / 1px 8px no-repeat,
    linear-gradient(var(--c-ink-3) 0 0) 80% 50% / 1px 8px no-repeat,
    linear-gradient(var(--c-filo-forte) 0 0) 0 50% / 100% 1px no-repeat;
  overflow: visible;
}
.mondo .ap-caricamento .caricamento-barra i {
  display: block;
  block-size: 100%;
  inline-size: 100%;
  background-color: var(--c-sel);
  transform-origin: left center;
  transition: transform var(--d-500) var(--e-uscita);
}


@media (min-width: 720px) {
  .mondo .ap-scena { min-block-size: 340px; margin-inline-end: calc(var(--s-gutter) * -1 - 12vw); }
}

/* Scrivania: pila a destra che sborda in alto */
@media (min-width: 1080px) {
  .mondo.ap {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: minmax(var(--s-6), 1fr) auto auto auto minmax(var(--s-9), 1fr);
    grid-template-areas: ". scena" "nome scena" "frase scena" "azioni scena" ". scena";
    column-gap: var(--s-6);
    min-block-size: 100vh;
    min-block-size: 100svh;
    padding: var(--ap-testata) 0 0 var(--s-8);
  }
  .mondo .ap-scena {
    min-block-size: 0;
    margin: calc(var(--ap-testata) * -1) calc(-6vw) 0 calc(var(--s-8) * -1);
  }
  .mondo .ap-pila-css i { inline-size: min(52%, 480px); }
  .mondo .ap-caricamento { grid-area: 5 / 1; align-self: end; margin-block-end: var(--s-7); }
}

/* == PIEDE: la pila vista di taglio == */

.mondo.ap-piede {
  position: relative;
  display: block;
  margin: 0;
  padding: var(--s-9) var(--s-gutter) var(--s-6);
  border: 0;
  font-family: var(--f);
  font-size: var(--t-1);
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-ink-2);
}
.mondo .ap-piede-righe {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2) var(--s-5);
  max-inline-size: var(--gabbia);
  margin-inline: auto;
}
.mondo .ap-piede-righe > span + span { --mono: 1; color: var(--c-ink-3); }

/* Sei strati di profilo; si accostano mentre il piede entra (--ap-chiude da ap.js) */
.mondo .ap-taglio {
  position: relative;
  block-size: calc(6 * 4px + 5 * 14px);
  max-inline-size: var(--gabbia);
  margin: var(--s-5) auto 0;
}
.mondo .ap-taglio i {
  position: absolute;
  inset: 0 0 auto 0;
  block-size: 4px;
  border-radius: 1px;
  background-color: var(--ap-tinta);
  box-shadow: 0 1px 2px rgb(var(--c-ombra-tinta) / 0.18);
  transform: translateY(calc(var(--i) * 4px + (1 - var(--ap-chiude, 1)) * var(--i) * 14px * var(--moto)));
}
.mondo .ap-taglio i:nth-child(1) { --i: 0; --ap-tinta: var(--bm-contenuto); }
.mondo .ap-taglio i:nth-child(2) { --i: 1; --ap-tinta: var(--bm-padding); }
.mondo .ap-taglio i:nth-child(3) { --i: 2; --ap-tinta: var(--bm-margine); }
.mondo .ap-taglio i:nth-child(4) { --i: 3; --ap-tinta: var(--bm-bordo); }
.mondo .ap-taglio i:nth-child(5) { --i: 4; --ap-tinta: var(--bm-bordo); }
.mondo .ap-taglio i:nth-child(6) { --i: 5; --ap-tinta: var(--c-sel); }
.mondo .ap-taglio i:nth-child(5) { box-shadow: 0 1px 2px rgb(var(--c-ombra-tinta) / 0.18), inset 0 1px 0 rgb(var(--c-ombra-tinta) / 0.22); }

@media (min-width: 1080px) {
  .mondo.ap-piede { padding-inline: var(--s-8); }
}