/* =========================================================================
   Scotti Francesco — scavi e inerti
   Direzione: topografica, terrosa, ferma.
   Idea centrale: la quota. Un filo orizzontale con le sue tacche attraversa
   ogni pagina e ogni volta porta con se' un numero misurato.

   Costruito secondo Vela Studio — The $10K Standard, Field Guide No. 02.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. font */

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/newsreader-italic-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/newsreader-normal-400_700.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/archivo-normal-400_700.woff2') format('woff2');
}
/* "Mono Quota" e' IBM Plex Mono sottoinsiemizzato. La SIL OFL FAQ (2.6) dice
   che il subsetting e' una modifica e che una versione modificata non puo'
   portare il Reserved Font Name: IBM riserva "Plex", quindi la nostra copia
   ridotta cambia nome. Copyright originale e licenza restano dentro al file e
   in assets/fonts/OFL-ibm-plex-mono.txt. */
@font-face {
  font-family: 'Mono Quota';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/mono-quota-normal-600.woff2') format('woff2');
}

/* ------------------------------------------------- 1b. font di ripiego */

/* Fra il primo disegno e l'arrivo del webfont il browser usa un font di
   sistema. Se ha proporzioni diverse, allo scambio le righe si spostano: e' il
   salto che si vede sulle connessioni lente e che il browser conta come CLS.
   Queste tre facce sono gli stessi font di sistema riproporzionati sulle
   metriche reali dei nostri file — larghezza media misurata su un campione di
   testo italiano, altezze prese dalla tabella hhea. Le calcola
   _build/build_fallbacks.py: non sono numeri copiati da una tabella. */

@font-face {
  font-family: 'Newsreader Fallback';
  font-weight: 400;
  src: local('Times New Roman'), local('TimesNewRoman'), local('Liberation Serif');
  size-adjust: 102.71%;
  ascent-override: 71.56%;
  descent-override: 25.80%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: 'Newsreader Fallback';
  font-weight: 500 700;
  src: local('Times New Roman Bold'), local('TimesNewRomanPS-BoldMT'), local('Liberation Serif Bold');
  size-adjust: 102.19%;
  ascent-override: 71.92%;
  descent-override: 25.93%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: 'Archivo Fallback';
  font-weight: 400;
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 98.39%;
  ascent-override: 89.24%;
  descent-override: 21.34%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: 'Archivo Fallback';
  font-weight: 500 700;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold');
  size-adjust: 95.09%;
  ascent-override: 92.33%;
  descent-override: 22.08%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: 'Mono Quota Fallback';
  font-weight: 400 700;
  src: local('Consolas Bold'), local('Consolas'), local('DejaVu Sans Mono Bold');
  size-adjust: 109.13%;
  ascent-override: 93.92%;
  descent-override: 25.20%;
  line-gap-override: 0.00%;
}

/* --------------------------------------------------------------- 2. token */

:root {
  color-scheme: light;

  --c-bg: oklch(96.5% 0.010 82);
  --c-ink: oklch(20% 0.020 60);
  --c-accent: oklch(52% 0.130 48);
  --c-muted: oklch(46% 0.018 65);
  --c-line: oklch(88% 0.012 80);
  --c-paper: color-mix(in oklch, var(--c-bg), var(--c-ink) 4%);
  --c-deep: color-mix(in oklch, var(--c-ink), black 20%);
  --c-on-deep: oklch(93% 0.012 80);
  --c-accent-hover: color-mix(in oklch, var(--c-accent), black 15%);
  --c-accent-soft: color-mix(in oklch, var(--c-accent), var(--c-bg) 88%);
  --c-accent-lit: color-mix(in oklch, var(--c-accent), white 34%);

  --font-display: 'Newsreader', 'Newsreader Fallback', ui-serif, Georgia, serif;
  --font-text: 'Archivo', 'Archivo Fallback', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Mono Quota', 'Mono Quota Fallback', ui-monospace, monospace;

  --step--2: clamp(0.70rem, 0.68rem + 0.09vw, 0.76rem);
  --step--1: clamp(0.81rem, 0.78rem + 0.14vw, 0.90rem);
  --step-0: clamp(1.00rem, 0.97rem + 0.16vw, 1.09rem);
  --step-1: clamp(1.16rem, 1.10rem + 0.30vw, 1.34rem);
  --step-2: clamp(1.36rem, 1.25rem + 0.55vw, 1.68rem);
  --step-3: clamp(1.62rem, 1.42rem + 0.98vw, 2.12rem);
  --step-4: clamp(1.94rem, 1.61rem + 1.62vw, 2.70rem);
  --step-5: clamp(2.32rem, 1.79rem + 2.62vw, 3.44rem);
  /* il gradino dei titoli di pagina parte piu' basso degli altri: a 390px un
     titolo da 62 caratteri a 2,7rem si spezzava in righe di due parole */
  --step-6: clamp(2.15rem, 1.55rem + 3.10vw, 4.40rem);

  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-6: 6rem;
  --sp-7: 8.5rem;

  --wrap: 78rem;
  --gutter: clamp(1.15rem, 4.5vw, 3.5rem);
  --prose: 38rem;
  --rule-w: 1px;
  --header-h: 5.35rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 420ms;
}

/* ---------------------------------------------------------- 3. fondamenta */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* il focus non deve mai finire sotto la testata sticky — WCAG 2.2 §2.4.11 */
  scroll-padding-top: calc(var(--header-h) + var(--sp-3));
}

body {
  min-height: 100dvh;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

svg.is-solid {
  fill: currentColor;
  stroke: none;
}

::selection {
  background: var(--c-accent);
  color: var(--c-bg);
}

/* ------------------------------------------------------------ 4. tipografia */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-wrap: balance;
  font-optical-sizing: auto;
}

h1 {
  font-size: var(--step-6);
  line-height: 1.02;
  letter-spacing: -0.022em;
}

h2 {
  font-size: var(--step-4);
  letter-spacing: -0.018em;
}

h3 {
  font-size: var(--step-2);
  line-height: 1.16;
}

h4 {
  font-size: var(--step-1);
  line-height: 1.24;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-color: color-mix(in oklch, currentColor, transparent 62%);
  text-underline-offset: 0.22em;
  text-decoration-thickness: from-font;
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}

a:hover {
  color: var(--c-accent);
  text-decoration-color: currentColor;
}

a:active {
  color: var(--c-accent-hover);
}

strong,
b {
  font-weight: 600;
}

/* etichette monospaziate: e' la voce tecnica del sito */
.mono {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-feature-settings: 'tnum' 1;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.52;
  color: color-mix(in oklch, var(--c-ink), var(--c-muted) 30%);
}

.pull {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-3);
  line-height: 1.24;
  letter-spacing: -0.014em;
  text-wrap: balance;
  color: var(--c-ink);
}

/* --------------------------------------------------------------- 5. layout */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.prose {
  max-width: var(--prose);
}

/* Il ritmo del testo si misura in em, non in pixel: cosi' lo spazio fra i
   paragrafi cresce insieme al corpo e l'interlinea resta coerente a ogni
   larghezza. I sottotitoli prendono aria sopra e restano attaccati a cio' che
   introducono: e' quello che fa leggere un blocco lungo senza fatica. */
.prose > * + * {
  margin-block-start: 1.15em;
}

.prose > h3 {
  margin-block-start: var(--sp-4);
}

.prose > h2 + *,
.prose > h3 + * {
  margin-block-start: 0.8em;
}

.prose > .list-work,
.prose > .note {
  margin-block-start: var(--sp-3);
}

.prose > .list-work + p,
.prose > .note + p {
  margin-block-start: var(--sp-3);
}

.section {
  padding-block: clamp(3.5rem, 7.5vw, 6rem);
}

.section--tight {
  padding-block: clamp(2.5rem, 5.5vw, 4rem);
}

.section--flush {
  padding-block-end: clamp(2.5rem, 5.5vw, 4rem);
}

.section--deep {
  background: var(--c-deep);
  color: var(--c-on-deep);
}

.section--paper {
  background: var(--c-paper);
}

/* la griglia editoriale: colonna di etichetta a sinistra, testo a destra.
   E' quello che fa somigliare la pagina a una tavola invece che a una brochure. */
.grid-doc {
  display: grid;
  gap: var(--sp-2) var(--sp-4);
  grid-template-columns: 1fr;
}

.grid-doc__aside {
  align-self: start;
}

@media (min-width: 60rem) {
  .grid-doc {
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: var(--sp-3) var(--sp-5);
  }

  .grid-doc__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-3));
    text-align: right;
  }
}

/* ------------------------------------------------- 6. la linea di quota */

/* Il gesto che si ripete: un filo che attraversa la pagina, con le tacche
   di una stadia, e sopra ogni tacca un dato che e' stato misurato. */
.quota {
  border-block-start: var(--rule-w) solid var(--c-line);
  padding-block-start: var(--sp-3);
  position: relative;
}

.quota::before {
  content: '';
  position: absolute;
  inset-block-start: calc(var(--rule-w) * -1);
  inset-inline-start: 0;
  width: 100%;
  height: var(--rule-w);
  background: var(--c-accent);
  transform-origin: left center;
  transform: scaleX(0);
  animation: rule-draw var(--dur-slow) var(--ease-out) 220ms both;
}

.quota__items {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .quota__items {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
  }
}

/* in colonna stretta le tre tacche non stanno affiancate: la linea resta,
   le voci si impilano */
.quota--col .quota__items {
  grid-template-columns: 1fr;
  gap: var(--sp-2);
}

/* impilate, solo la prima voce tocca il filo: le altre avrebbero una tacca
   sospesa nel vuoto, quindi diventano trattini di elenco */
.quota--col .quota__item::before {
  inset-block-start: 0.42em;
  width: 0.6rem;
  height: 2px;
}

.quota__item {
  position: relative;
  padding-inline-start: var(--sp-3);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--c-muted);
}

/* la tacca: sale fino a toccare il filo, e scende dopo che il filo e' passato */
.quota__item::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(var(--sp-3) * -1 - var(--rule-w));
  width: 2px;
  height: var(--sp-3);
  background: var(--c-accent);
  transform-origin: top center;
}

@media (prefers-reduced-motion: no-preference) {
  .quota__item::before {
    animation: tick-drop var(--dur-base) var(--ease-out) both;
  }

  .quota__item:nth-child(1)::before { animation-delay: 420ms; }
  .quota__item:nth-child(2)::before { animation-delay: 500ms; }
  .quota__item:nth-child(3)::before { animation-delay: 580ms; }
}

@keyframes tick-drop {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

.quota__k {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

.section--deep .quota {
  border-block-start-color: color-mix(in oklch, var(--c-on-deep), transparent 78%);
}

.section--deep .quota__item {
  color: color-mix(in oklch, var(--c-on-deep), transparent 25%);
}

.section--deep .quota__k {
  color: var(--c-on-deep);
}

@keyframes rule-draw {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* filo autonomo, usato per chiudere i titoli di sezione */
.rule {
  border: 0;
  border-block-start: var(--rule-w) solid var(--c-line);
  margin-block: var(--sp-4);
}

.rule--accent {
  border-block-start-color: var(--c-accent);
  width: 3.5rem;
  margin-block: var(--sp-3) var(--sp-3);
}

/* --------------------------------------------------------------- 7. testata */

.masthead {
  position: sticky;
  inset-block-start: 0;
  z-index: 60;
  background: color-mix(in oklch, var(--c-bg), transparent 4%);
  backdrop-filter: blur(10px);
  border-block-end: var(--rule-w) solid var(--c-line);
}

.masthead__inner {
  position: relative;
}

.masthead__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--header-h);
}

/* L'avanzamento nella pagina e' un'altra quota: lo stesso filo, che invece di
   attraversare la sezione attraversa il documento. Costa zero JavaScript. */
.progress {
  position: absolute;
  inset-block-end: calc(var(--rule-w) * -1);
  inset-inline: 0;
  height: 2px;
  background: var(--c-accent);
  transform-origin: left center;
  transform: scaleX(0);
}

@supports (animation-timeline: scroll()) {
  .progress {
    animation: rule-draw linear both;
    animation-timeline: scroll(root);
  }
}

.logo {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
  text-decoration: none;
  line-height: 1;
  padding-block: 0.35rem;
}

.logo__name {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.30rem + 0.60vw, 1.78rem);
  font-weight: 600;
  letter-spacing: 0.004em;
}

.logo__kind {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.logo:hover .logo__name {
  color: var(--c-accent);
}

.nav {
  display: none;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 1.4vw, 1.4rem);
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav__link {
  display: inline-block;
  padding-block: 0.75rem;
  font-size: 0.83rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-decoration: none;
  color: var(--c-muted);
  position: relative;
}

.nav__link:hover {
  color: var(--c-ink);
}

.nav__link::after {
  content: '';
  position: absolute;
  inset-block-end: 0.45rem;
  inset-inline: 0;
  height: 2px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-fast) var(--ease-out);
}

.nav__link:hover::after,
.nav__link[aria-current='page']::after {
  transform: scaleX(1);
}

.nav__link[aria-current='page'] {
  color: var(--c-ink);
}

/* .btn e .masthead__cta hanno la stessa specificita': senza il doppio selettore
   vince l'ultima regola scritta, il pulsante resta visibile a 390px e trascina
   l'intera pagina oltre il viewport */
.btn.masthead__cta {
  display: none;
}

@media (min-width: 72rem) {
  .nav {
    display: block;
  }

  .btn.masthead__cta {
    display: inline-flex;
  }
}

/* pulsante menu: esiste solo dove la navigazione estesa non ci sta */
.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  min-width: 44px;
  padding-inline: 0.7rem;
  border: var(--rule-w) solid var(--c-line);
  background: transparent;
  color: var(--c-ink);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.menu-btn:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.menu-btn:active {
  transform: translateY(1px);
}

@media (min-width: 72rem) {
  .menu-btn {
    display: none;
  }
}

.menu-btn__glyph {
  width: 18px;
  height: 14px;
  position: relative;
}

.menu-btn__glyph span {
  position: absolute;
  inset-inline: 0;
  height: 1.6px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}

.menu-btn__glyph span:nth-child(1) { inset-block-start: 0; }
.menu-btn__glyph span:nth-child(2) { inset-block-start: 6.2px; }
.menu-btn__glyph span:nth-child(3) { inset-block-start: 12.4px; }

.menu-btn[aria-expanded='true'] .menu-btn__glyph span:nth-child(1) {
  transform: translateY(6.2px) rotate(45deg);
}

.menu-btn[aria-expanded='true'] .menu-btn__glyph span:nth-child(2) {
  opacity: 0;
}

.menu-btn[aria-expanded='true'] .menu-btn__glyph span:nth-child(3) {
  transform: translateY(-6.2px) rotate(-45deg);
}

/* pannello del menu mobile */
.menu {
  display: none;
  border-block-start: var(--rule-w) solid var(--c-line);
  background: var(--c-bg);
}

.menu[data-open='true'] {
  display: block;
}

@media (min-width: 72rem) {
  .menu[data-open='true'] {
    display: none;
  }
}

.menu__list {
  list-style: none;
  padding: 0;
  margin: 0;
  padding-block: var(--sp-2) var(--sp-3);
}

.menu__link {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  min-height: 48px;
  padding-block: 0.65rem;
  border-block-end: var(--rule-w) solid var(--c-line);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  text-decoration: none;
}

.menu__link .mono {
  color: var(--c-accent);
}

.menu__link[aria-current='page'] {
  color: var(--c-accent);
}

/* ----------------------------------------------------------- 8. pulsanti */

.btn {
  --btn-bg: var(--c-accent);
  --btn-fg: oklch(98% 0.006 82);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  min-width: 48px;
  padding: 0.75rem 1.35rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: var(--rule-w) solid transparent;
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.012em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

/* L'hover non cambia colore di scatto: lo riempie da sinistra, nella stessa
   direzione in cui si traccia il filo di quota. E' una scala su un pseudo-
   elemento, quindi resta transform e opacity. */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-fill, var(--c-accent-hover));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}

.btn:hover::before,
.btn:focus-visible::before {
  transform: scaleX(1);
}

.btn:active {
  transform: translateY(1px);
}

.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-ink);
  --btn-fill: var(--c-ink);
  border-color: var(--c-ink);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  --btn-fg: var(--c-bg);
}

.btn--small {
  min-height: 44px;
  padding: 0.5rem 1rem;
  font-size: var(--step--2);
}

.section--deep .btn--ghost,
.footer .btn--ghost {
  --btn-fg: var(--c-on-deep);
  --btn-fill: var(--c-on-deep);
  border-color: color-mix(in oklch, var(--c-on-deep), transparent 55%);
}

.section--deep .btn--ghost:hover,
.section--deep .btn--ghost:focus-visible,
.footer .btn--ghost:hover,
.footer .btn--ghost:focus-visible {
  --btn-fg: var(--c-deep);
  border-color: var(--c-on-deep);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}

/* link testuale con freccia: sostituisce il "→" scritto a mano */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  color: var(--c-accent);
}

/* l'accento pieno sul fondo scuro si ferma a 3,36:1 */
.section--deep .link-arrow {
  color: var(--c-accent-lit);
}

.link-arrow svg {
  width: 17px;
  height: 17px;
  flex: none;
  transition: transform var(--dur-base) var(--ease-out);
}

.link-arrow:hover svg {
  transform: translateX(5px);
}

.link-arrow:active svg {
  transform: translateX(2px);
}

/* il filo si traccia sotto la parola nella stessa direzione della freccia */
.link-arrow > span {
  position: relative;
}

.link-arrow > span::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: -0.22em;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}

.link-arrow:hover > span::after,
.link-arrow:focus-visible > span::after {
  transform: scaleX(1);
}

/* ---------------------------------------------------------------- 9. hero */

.hero {
  padding-block: var(--sp-5) 0;
}

/* Titolo grande a sinistra, testo di supporto e CTA a destra, entrambi
   appoggiati sulla linea di quota: e' l'impaginazione di una tavola, non di
   una brochure. */
.hero__grid {
  display: grid;
  gap: var(--sp-3);
  align-items: end;
}

@media (min-width: 62rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: var(--sp-5);
  }
}

/* Il limite in ch serve solo dove c'e' larghezza da buttare: a 390px la
   colonna e' gia' stretta e il cap produceva righe di due parole. */
@media (min-width: 62rem) {
  .hero h1 {
    max-width: 15ch;
  }
}

.hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  margin-block-end: var(--sp-3);
}

.hero h1 {
  margin-block-end: var(--sp-3);
}

.hero__sub {
  max-width: 34rem;
  font-size: var(--step-1);
  line-height: 1.5;
  color: color-mix(in oklch, var(--c-ink), var(--c-muted) 26%);
  margin-block-end: var(--sp-3);
}

.hero__micro {
  max-width: 32rem;
  margin-block-start: var(--sp-2);
  font-size: var(--step--1);
  color: var(--c-muted);
}

.hero__quota {
  margin-block-start: var(--sp-4);
}

.hero__plate {
  margin-block-start: var(--sp-4);
}

/* -------------------------------------------------------- 10. fotografie */

/* tutte le foto sono "tavole": stesso trattamento, stessa didascalia tecnica */
.plate {
  position: relative;
  /* la rivelazione parte da scale(1.03): senza clip quel 3% diventa una barra
     di scorrimento orizzontale su desktop */
  overflow: hidden;
}

.plate img {
  width: 100%;
  object-fit: cover;
}

.plate figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem var(--sp-3);
  padding-block-start: 0.85rem;
  border-block-start: var(--rule-w) solid var(--c-line);
  margin-block-start: 0.85rem;
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--c-muted);
}

.plate figcaption .mono {
  font-size: var(--step--2);
  color: var(--c-accent);
}

/* fiato fra il testo e la tavola che lo segue: attaccate, la fotografia
   sembrava la continuazione del paragrafo invece di una figura */
.section > .plate {
  margin-block-start: var(--sp-5);
}

/* la tavola a tutta pagina non usa 100vw — su desktop la barra di scorrimento
   la farebbe sbordare — ma sta semplicemente fuori dal contenitore .wrap */
.plate--bleed figcaption {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section--deep .plate figcaption {
  border-block-start-color: color-mix(in oklch, var(--c-on-deep), transparent 78%);
  color: color-mix(in oklch, var(--c-on-deep), transparent 30%);
}

.section--deep .plate figcaption .mono {
  color: var(--c-accent-lit);
}

/* Rivelazione e parallasse: solo sulle tavole, mai su ogni sezione.
   Due animazioni sulla stessa immagine, ciascuna con il suo intervallo: la
   prima la porta a fuoco mentre entra, la seconda le fa scorrere il contenuto
   dentro alla cornice per tutta la durata del passaggio. Entrambe solo su
   transform e opacity, quindi non toccano il layout. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .plate img {
      animation: plate-in linear both, plate-drift linear both;
      animation-timeline: view(), view();
      animation-range: entry 6% entry 58%, cover 0% cover 100%;
    }

    /* le tavole dentro alle card sono piccole: niente parallasse, solo fuoco */
    .card .plate img,
    .cards .plate img {
      animation: plate-in linear both;
      animation-timeline: view();
      animation-range: entry 6% entry 58%;
    }
  }
}

@keyframes plate-in {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}

@keyframes plate-drift {
  from {
    transform: scale(1.06) translateY(-1.6%);
  }
  to {
    transform: scale(1.06) translateY(1.6%);
  }
}

/* ------------------------------------------- 10b. righe dei titoli */

/* Le righe le taglia main.js, perche' solo il browser sa dove ha mandato a
   capo. Qui c'e' la mascherina: il padding negativo evita che le lettere con
   discendenti finiscano tagliate dall'overflow. */
.ln {
  display: block;
  overflow: hidden;
  padding-block-end: 0.14em;
  margin-block-end: -0.14em;
}

.ln__i {
  display: block;
  transform: none;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* i titoli di sezione salgono mentre lo scroll li attraversa, una riga
       dopo l'altra: lo sfalsamento e' legato alla posizione, non a un timer */
    h2 .ln__i {
      animation: line-rise linear both;
      animation-timeline: view();
      animation-range: entry calc(2% + var(--i) * 5%) entry calc(48% + var(--i) * 5%);
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* il titolo dell'hero e' gia' a schermo: parte al caricamento */
  h1 .ln__i {
    animation: line-rise var(--dur-slow) var(--ease-out) both;
    animation-delay: calc(90ms + var(--i) * 70ms);
  }

  /* dopo un ridimensionamento le righe vengono ritagliate: non si rianima */
  [data-resplit] h1 .ln__i,
  [data-resplit] h2 .ln__i {
    animation: none;
  }
}

@keyframes line-rise {
  from {
    transform: translateY(102%);
  }
  to {
    transform: translateY(0);
  }
}

/* ------------------------------------------- 10c. rivelazioni allo scroll */

/* Tutto quello che sale e' legato alla posizione nella pagina, non a un timer:
   il ritmo lo detta chi scorre. L'ampiezza resta bassa di proposito — 12px e
   nient'altro — perche' un movimento che si nota e' un movimento che disturba
   la seconda volta che passi sulla stessa pagina.

   Il fill "both" e' la rete di sicurezza: un elemento gia' interamente a
   schermo al caricamento e' oltre la fine del suo intervallo, quindi si trova
   direttamente allo stato finale invece di restare invisibile. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .head__label,
    .lede,
    .pull,
    .note,
    /* .grid-doc__aside resta fermo di proposito: e' position: sticky, e una
       view timeline su un elemento che si incolla misura una posizione che
       cambia mentre scorri — l'etichetta finirebbe per pulsare */
    .card,
    .cards > .plate,
    .list-work > li,
    .spec > div,
    .quota__item,
    .faq details,
    .btn-row > *,
    .links-row ul > li {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry calc(3% + var(--i, 0) * 3.5%) entry calc(52% + var(--i, 0) * 3.5%);
    }

    /* le voci affiancate entrano insieme: lo sfalsamento glielo do io, perche'
       una griglia orizzontale attraversa la soglia tutta nello stesso istante */
    .cards > :nth-child(2),
    .quota__item:nth-child(2),
    .btn-row > :nth-child(2),
    .links-row ul > li:nth-child(2) { --i: 1; }

    .cards > :nth-child(3),
    .quota__item:nth-child(3),
    .btn-row > :nth-child(3),
    .links-row ul > li:nth-child(3) { --i: 2; }

    .cards > :nth-child(4) { --i: 3; }

    /* Le immagini piccole delle card: oltre alla messa a fuoco, un respiro.
       L'animazione sta sul contenitore e non sull'immagine, altrimenti il suo
       fill "forwards" avrebbe la precedenza sulla transizione dell'hover e lo
       zoom al passaggio del mouse avrebbe smesso di funzionare. */
    .card__media {
      animation: card-in linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 56%;
    }
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes card-in {
  from {
    opacity: 0.2;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------- 11. intestazioni */

.head {
  margin-block-end: var(--sp-4);
}

.head__label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block-end: var(--sp-2);
}

.head__label::after {
  content: '';
  flex: 1;
  height: var(--rule-w);
  background: var(--c-line);
}

.section--deep .head__label::after {
  background: color-mix(in oklch, var(--c-on-deep), transparent 78%);
}

.section--deep .mono {
  color: color-mix(in oklch, var(--c-on-deep), transparent 38%);
}

/* --------------------------------------------------------------- 12. card */

.cards {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 46rem) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 70rem) {
  .cards--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.card__media {
  overflow: hidden;
}

.card__media img {
  width: 100%;
  object-fit: cover;
  transform-origin: center;
  transition: transform var(--dur-slow) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .card:hover .card__media img {
    transform: scale(1.028);
  }
}

.card__idx {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.card__idx::after {
  content: '';
  flex: 1;
  height: var(--rule-w);
  background: var(--c-line);
}

.card h3 {
  font-size: var(--step-2);
}

.card p {
  color: var(--c-muted);
  font-size: var(--step--1);
  line-height: 1.58;
}

/* sul fondo scuro il grigio-terra del testo secondario scende a 2,6:1: qui il
   colore non e' una preferenza, e' un requisito */
.section--deep .card p {
  color: color-mix(in oklch, var(--c-on-deep), transparent 18%);
}

.card .link-arrow {
  margin-block-start: auto;
  padding-block-start: var(--sp-1);
}

/* il titolo della card cresce solo se la card stessa e' larga,
   non se lo e' la finestra: cosi' la stessa card regge in griglie diverse */
@container (min-width: 26rem) {
  .card h3 {
    font-size: var(--step-3);
  }
}

/* ------------------------------------------------------------- 13. elenchi */

/* le lavorazioni non sono pallini: sono voci di un elenco tecnico, numerate,
   separate da un filo. E' la stessa logica della linea di quota. */
.list-work {
  list-style: none;
  padding: 0;
  margin: 0;
  border-block-start: var(--rule-w) solid var(--c-line);
}

.list-work > li {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  column-gap: var(--sp-2);
  row-gap: 0.2rem;
  padding-block: 0.95rem;
  border-block-end: var(--rule-w) solid var(--c-line);
}

/* Il numero sta nella prima colonna e nella prima riga; tutto il resto della
   voce sta nella seconda. Senza queste due righe la descrizione finiva
   nell'auto-placement sotto al numero, in una colonna larga 2,6rem. */
.list-work > li::before {
  content: counter(work-item, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
  color: var(--c-accent);
  letter-spacing: 0.06em;
  padding-block-start: 0.42em;
}

.list-work > li > * {
  grid-column: 2;
}

.list-work {
  counter-reset: work-item;
}

.list-work > li {
  counter-increment: work-item;
}

.list-work strong {
  display: block;
  font-weight: 600;
  line-height: 1.4;
}

/* nell'elenco tecnico il link e' la voce intera, non una parola dentro a una
   frase: qui l'eccezione "inline" di WCAG 2.5.8 non vale e serve un bersaglio */
.list-work a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.list-work span {
  color: var(--c-muted);
  font-size: var(--step--1);
}

.section--deep .list-work {
  border-block-start-color: color-mix(in oklch, var(--c-on-deep), transparent 78%);
}

.section--deep .list-work > li {
  border-block-end-color: color-mix(in oklch, var(--c-on-deep), transparent 82%);
}

.section--deep .list-work > li::before {
  color: var(--c-accent-lit);
}

.section--deep .list-work span {
  color: color-mix(in oklch, var(--c-on-deep), transparent 32%);
}

/* elenco puntato semplice, per i valori e le note brevi */
.list-plain {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-2);
}

.list-plain > li {
  position: relative;
  padding-inline-start: var(--sp-3);
}

.list-plain > li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.62em;
  width: 0.6rem;
  height: var(--rule-w);
  background: var(--c-accent);
}

/* riga di link interni fra pagine sorelle */
.links-row {
  border-block-start: var(--rule-w) solid var(--c-line);
  padding-block-start: var(--sp-2);
}

.links-row ul {
  list-style: none;
  padding: 0;
  margin-block-start: var(--sp-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
}

/* ------------------------------------------------------- 14. schede tecniche */

.spec {
  border-block-start: var(--rule-w) solid var(--c-line);
  width: 100%;
}

.spec > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.1rem;
  padding-block: 0.7rem;
  border-block-end: var(--rule-w) solid var(--c-line);
}

@media (min-width: 34rem) {
  .spec > div {
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: var(--sp-2);
    align-items: baseline;
  }
}

.spec dt {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.spec dd {
  margin: 0;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

.spec dd strong {
  font-family: var(--font-mono);
  font-weight: 600;
}

/* Riquadro "cosa significa per te": e' la traduzione della scheda tecnica in
   conseguenze per il cliente, quindi deve leggersi come un blocco a se' e non
   come un paragrafo colorato. Il padding gira su tutti e quattro i lati —
   prima il testo arrivava a filo del bordo destro — e il fondo e' un filo piu'
   fitto, cosi' il riquadro si stacca dalla carta senza gridare. */
.note {
  border-inline-start: 3px solid var(--c-accent);
  padding: var(--sp-3);
  background: color-mix(in oklch, var(--c-accent), var(--c-bg) 84%);
  color: var(--c-ink);
}

.note p {
  font-size: var(--step--1);
  line-height: 1.62;
  max-width: 36rem;
}

.note ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
  max-width: 36rem;
}

.note li {
  position: relative;
  padding-inline-start: 1.35rem;
  font-size: var(--step--1);
  line-height: 1.55;
}

.note li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.72em;
  width: 0.7rem;
  height: 2px;
  background: var(--c-accent);
}

/* il riquadro ha fondo chiaro anche dentro a una banda scura: senza questo il
   testo resta color panna su panna e diventa illeggibile */
.section--deep .note,
.section--deep .note p {
  color: var(--c-ink);
}

.note .mono {
  display: block;
  margin-block-end: 0.6rem;
  /* sul fondo tenue l'accento pieno si ferma a 4,44:1 — un soffio sotto AA */
  color: color-mix(in oklch, var(--c-accent), black 16%);
}

/* --------------------------------------------------------------- 15. FAQ */

.faq {
  border-block-start: var(--rule-w) solid var(--c-line);
}

.faq details {
  border-block-end: var(--rule-w) solid var(--c-line);
}

.faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: 48px;
  padding-block: 1rem;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:hover {
  color: var(--c-accent);
}

.faq summary:active {
  color: var(--c-accent-hover);
}

.faq summary h3 {
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.28;
}

.faq__sign {
  flex: none;
  width: 16px;
  height: 16px;
  position: relative;
  align-self: center;
  color: var(--c-accent);
}

.faq__sign::before,
.faq__sign::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 16px;
  height: 1.8px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-out);
}

.faq__sign::after {
  transform: rotate(90deg);
}

.faq details[open] .faq__sign::after {
  transform: rotate(0deg);
}

.faq__body {
  padding-block-end: 1.1rem;
  max-width: var(--prose);
  color: var(--c-muted);
  font-size: var(--step--1);
}

/* ------------------------------------------------------- 16. barra mobile */

/* Nel settore quasi tutto il traffico arriva da uno smartphone, spesso da
   qualcuno che e' in cantiere. Questa barra e' l'elemento che pesera' di piu'
   sul numero di contatti, quindi resta visibile e non copre mai il contenuto. */
.dock {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-block-start: var(--rule-w) solid color-mix(in oklch, var(--c-ink), transparent 82%);
  background: color-mix(in oklch, var(--c-bg), transparent 3%);
  backdrop-filter: blur(12px);
  padding-block-end: env(safe-area-inset-bottom);
}

.dock a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 56px;
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.dock a svg {
  width: 19px;
  height: 19px;
  flex: none;
}

.dock__call {
  background: var(--c-accent);
  color: oklch(98% 0.006 82);
}

.dock__call:hover {
  background: var(--c-accent-hover);
  color: oklch(98% 0.006 82);
}

.dock__wa {
  background: var(--c-ink);
  color: var(--c-bg);
}

.dock__wa:hover {
  background: var(--c-deep);
  color: var(--c-bg);
}

.dock a:active {
  transform: translateY(1px);
}

/* 56px del pulsante + il filo superiore: senza quel pixel la barra copre
   l'ultima riga del piede di pagina */
body {
  padding-block-end: calc(56px + var(--rule-w) + env(safe-area-inset-bottom));
}

@media (min-width: 72rem) {
  .dock {
    display: none;
  }

  body {
    padding-block-end: 0;
  }
}

/* ------------------------------------------------------------- 17. footer */

.footer {
  background: var(--c-deep);
  color: var(--c-on-deep);
  padding-block: var(--sp-5) var(--sp-4);
  /* quando sopra c'e' gia' una banda scura, senza questo filo le due superfici
     si fondono e il vuoto in mezzo sembra un errore invece di una pausa */
  border-block-start: var(--rule-w) solid color-mix(in oklch, var(--c-on-deep), transparent 86%);
}

.footer a {
  color: inherit;
}

.footer a:hover {
  color: var(--c-accent-lit);
}

.footer__grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 46rem) {
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 70rem) {
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--sp-5);
  }
}

.footer h2,
.footer h3 {
  font-size: var(--step-1);
  font-weight: 500;
  margin-block-end: var(--sp-2);
}

.footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.1rem;
  font-size: var(--step--1);
}

/* le voci del piede erano alte 16px: sopra il minimo WCAG solo grazie
   all'eccezione di spaziatura. Questo sito si usa con una mano sola in
   cantiere, quindi la riga diventa un bersaglio vero. */
.footer__list li {
  display: flex;
  align-items: center;
  min-height: 40px;
}

.footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  text-decoration: none;
}

.footer__legal {
  margin-block-start: var(--sp-4);
  padding-block-start: var(--sp-3);
  border-block-start: var(--rule-w) solid color-mix(in oklch, var(--c-on-deep), transparent 82%);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem var(--sp-3);
  justify-content: space-between;
  font-size: var(--step--2);
  color: color-mix(in oklch, var(--c-on-deep), transparent 32%);
}

.footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  text-decoration-color: color-mix(in oklch, currentColor, transparent 60%);
}

.footer__legal p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.4rem;
}

/* ------------------------------------------------ 18. stati, focus, utility */

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 1px;
}

.section--deep :focus-visible,
.footer :focus-visible,
.dock a:focus-visible {
  outline-color: var(--c-accent-lit);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* fixed e non absolute: con absolute il link e' ancorato al documento, quindi
   arrivando a meta' pagina da un'ancora e premendo Tab comparirebbe centinaia
   di pixel sopra il viewport, cioe' da nessuna parte */
.skip {
  position: fixed;
  inset-inline-start: -9999px;
  z-index: 100;
}

.skip:focus {
  inset-inline-start: var(--sp-2);
  inset-block-start: var(--sp-2);
  padding: 0.7rem 1rem;
  background: var(--c-ink);
  color: var(--c-bg);
  text-decoration: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* .stack distanzia i figli fra loro; .push distanzia il blocco da cio' che sta
   sopra. Confonderli su una griglia significa spingere giu' una colonna sola —
   e' esattamente l'errore che sfalsava le tre card della home. */
.stack > * + * {
  margin-block-start: var(--sp-2);
}

.stack-lg > * + * {
  margin-block-start: var(--sp-4);
}

.push {
  margin-block-start: var(--sp-4);
}

.push-lg {
  margin-block-start: var(--sp-5);
}

/* ------------------------------------------------------- 19. pagine legali */

.legal {
  max-width: 44rem;
}

.legal h2 {
  font-size: var(--step-2);
  margin-block-start: var(--sp-4);
}

.legal h3 {
  font-size: var(--step-1);
  margin-block-start: var(--sp-3);
}

.legal p,
.legal li {
  font-size: var(--step--1);
  color: color-mix(in oklch, var(--c-ink), var(--c-muted) 40%);
}

.legal ul {
  padding-inline-start: 1.1rem;
  display: grid;
  gap: 0.4rem;
}

/* -------------------------------------------------- 20. transizioni pagina */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation-duration: 180ms;
}

::view-transition-new(root) {
  animation-duration: 240ms;
}

/* --------------------------------------------------- 21. meno movimento */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .quota::before {
    transform: scaleX(1);
  }
}