/* Hallmark · shape: una porta (la parola che si apre e fa entrare nella ō), poi il nome, le tre voci, l'anello che si chiude · genre: editorial · theme: custom · job: hire · idea: "Si entra in Echìōn attraverso la sua ō: il serpente che si morde la coda è la porta, e dentro ci sono il nome e le tre voci" · vibe: "nero su calce, lapidario, un tuffo nella ō"
 * paper: oklch(96.4% 0.006 100) calce · accent: oklch(18.5% 0.010 70) nero, nessun colore proprio · display: Piazzolla 900 e 500 · body: Commissioner · voci: i loghi veri delle tre attività (tracciati SVG nel colore del testo) e una riga su cosa fa ciascuna · hero: la parola Echìōn a tutta larghezza e una riga su cosa tiene insieme; scorrendo le lettere si aprono, la ō si ingrandisce fino a riempire lo schermo e dentro sale il nome in greco con la sua storia · nav: solo il segno e il pulsante delle animazioni · footer: il simbolo piccolo (l'anello che si chiude) e accanto contatto e riga legale · imagery: none, il marchio è l'immagine · signature: il tuffo dentro la ō
 * axes: light/display-heavy/neutral · posture: restrained, monocromo; il colore arriva solo quando si passa su una voce (il fondo prende i colori del suo sito) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V5 · weakest: H/E, la pagina ha pochissime parole e vive di movimento; da ferma deve reggere da sola, quindi la versione ferma ha la parola, il greco grande e le tre voci a tutta misura */
/* Hallmark · dismissed 77 · quattro sezioni per scelta del titolare: il sito parla solo del nome e delle tre voci, clienti e servizi stanno sui siti delle singole attività */
/* Hallmark · answered F8 · due movimenti legati allo scorrimento: il tuffo nella ō (la firma, che finisce con il nome che sale dentro la ō) e le voci che accendono il fondo; il secondo cambia solo il colore, non sposta niente */
@import url("./fonts.css");
@import url("./tokens.css");
@import url("./base.css");

/* ---------- Base */
body { font-size: var(--text-md); font-weight: 400; font-synthesis: none; }
h1, h2, h3 { font-weight: 500; letter-spacing: var(--tracking-display); line-height: 1.08; color: inherit; }
h2 { font-size: var(--text-section); max-width: 20ch; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.salta { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.salta:focus-visible { top: var(--space-md); outline: 2px solid var(--color-focus); outline-offset: 2px; }

.movimento { min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: transparent; color: var(--color-ink-2); font: 400 var(--text-sm)/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.movimento:hover { background: var(--color-paper-2); color: var(--color-ink); }
.movimento:active { transform: translateY(1px); }
.movimento:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.movimento:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- Testa: solo il segno e il pulsante */
.testa { position: relative; z-index: var(--z-raised); }
.testa__riga { display: flex; align-items: center; justify-content: space-between; min-height: 72px; }
.testa__segno { display: block; padding: var(--space-xs); margin-left: calc(-1 * var(--space-xs)); }
.testa__segno img { width: 23px; height: auto; }
.testa__segno:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- La porta (ferma: la parola, sotto «di Maciej Vella» e le tre voci) */
.porta__scena { position: relative; }
.porta__centro { display: grid; align-content: center; min-height: min(calc(100svh - 72px), 820px); padding-block: var(--space-xl) var(--space-3xl); }
.porta__nome { margin: 0; color: var(--color-ink); max-width: none; }
.parola { width: 100%; height: auto; overflow: visible; fill: currentColor; }
/* «di Maciej Vella» sta attaccato sotto la parola, a destra, come una firma. */
.porta__di { justify-self: end; margin-top: var(--space-sm); font: 500 var(--text-display-s)/1.05 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); }
/* Il nome porta alla pagina «Chi sono» di maciejvella.it: il link con il nome rafforza la persona per Google. */
.porta__di a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: var(--color-rule); text-underline-offset: 0.14em; }
.porta__di a:hover { text-decoration-color: currentColor; }
.porta__piede { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: var(--space-2xl); row-gap: var(--space-md); margin-top: var(--space-2xl); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.porta__cosa { font-size: var(--text-lead); line-height: 1.4; color: var(--color-ink-2); text-wrap: pretty; }
.porta__voci { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); margin: 0; padding: 0; list-style: none; }
.porta__voci a { display: inline-block; padding-block: var(--space-xs); font-size: var(--text-lg); color: var(--color-ink); text-decoration-color: var(--color-rule); white-space: nowrap; }
.porta__voci a:hover { text-decoration-color: currentColor; }

/* ---------- Il nome: come una voce di dizionario. La parola in greco, sotto come si legge;
   accanto le tre frasi, con l'ultima riga sulla stessa linea di base del greco. */
.nome { padding-block: var(--space-3xl) var(--space-2xl); }
.nome__voce { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-md); align-items: last baseline; }
.nome__greco { grid-row: 1; grid-column: 1 / span 6; margin: 0; padding-bottom: 0.14em; font: 900 var(--text-greco)/0.9 var(--font-display); letter-spacing: -0.02em; color: var(--color-ink); overflow-wrap: break-word; min-width: 0; transform-origin: 0 100%; }
.nome__lettura { grid-row: 2; grid-column: 1 / span 6; font-size: var(--text-md); color: var(--color-muted); }
.nome__frasi { grid-row: 1; grid-column: 7 / -1; display: grid; gap: var(--space-sm); min-width: 0; }
.frase { font: 500 var(--text-frase)/1.22 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); text-wrap: pretty; }

/* ---------- Le tre voci: il logo di ogni attività e una riga su cosa fa; accesa, il fondo prende i colori del suo sito.
   I loghi sono le versioni a un colore ufficiali: nero sulla calce, chiaro sul fondo della voce (il punto di Maciej Vella diventa oro). */
.voci { padding-top: var(--space-2xl); }
.voci__testa { margin-bottom: var(--space-2xl); }
.voci__elenco { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--color-rule); }
.voce { position: relative; isolation: isolate; border-top: 1px solid var(--color-rule); color: var(--color-ink); transition: color var(--dur-long) var(--ease-out); }
.voce::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--voce-fondo); opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.voce.is-accesa { color: var(--voce-testo); border-top-color: transparent; }
.voce.is-accesa::before { opacity: 1; }
.voce__riga { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: center; min-height: min(56svh, 520px); padding-block: var(--space-2xl); }
.voce__nome { grid-column: 1 / span 6; margin: 0; max-width: none; line-height: 0; }
.voce__logo { display: block; width: auto; max-width: 100%; fill: currentColor; overflow: visible; }
.voce__logo--mv { height: clamp(3.5rem, 7.4vw, 7rem); }
.voce__logo--metrica { height: clamp(3.25rem, 6.95vw, 6.5rem); }
.voce__logo--fem { height: clamp(6.5rem, 13.5vw, 12.5rem); }
.voce__testo { grid-column: 7 / -1; display: grid; gap: var(--space-sm); min-width: 0; }
.voce__cosa { font: 500 var(--text-title)/1.2 var(--font-display); letter-spacing: var(--tracking-display); text-wrap: pretty; }
.voce__piu { max-width: 44ch; font-size: var(--text-md); text-wrap: pretty; }
.voce__dove { justify-self: start; margin-top: var(--space-xs); padding-block: var(--space-xs); font-size: var(--text-lg); color: inherit; }
/* Tutta la riga porta al sito; il nome del collegamento resta l'indirizzo. */
a.voce__dove::after { content: ""; position: absolute; inset: 0; }
a.voce__dove:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.voce--mv { --voce-fondo: var(--color-mv-notte); --voce-testo: var(--color-mv-carta); }
.voce--mv.is-accesa { --voce-punto: var(--color-mv-oro); }
.voce--metrica { --voce-fondo: var(--color-metrica-fondo); --voce-testo: var(--color-metrica-carta); --voce-richiamo: var(--color-metrica-oro-carta); }
.voce--metrica.is-accesa { --voce-richiamo: var(--color-metrica-oro); }
.voce--fem { --voce-fondo: var(--color-fem-colata); --voce-testo: var(--color-fem-bianco); }

/* ---------- Piè di pagina: il simbolo piccolo (l'anello che si chiude) e accanto le informazioni.
   Solo il simbolo, senza la scritta: la parola Echìōn c'è già in apertura. */
.chiusura { padding-block: var(--section-gap-s) var(--space-2xl); }
.chiusura__riga { display: flex; align-items: center; gap: var(--space-xl); }
.chiusura__anello { flex: none; width: clamp(4.5rem, 8vw, 7.5rem); height: auto; }
.anello__traccia { fill: none; stroke: var(--color-paper-3); stroke-width: 110; opacity: 0; }
.anello__corsa { fill: none; stroke: var(--color-ink); stroke-width: 110; stroke-dasharray: 100 100; stroke-dashoffset: 0; opacity: 0; }
.anello__simbolo, .anello__lineetta { fill: var(--color-ink); }
.chiusura__testo { display: grid; gap: var(--space-xs); min-width: 0; }
.chiusura__legale { font-size: var(--text-sm); color: var(--color-muted); max-width: 60ch; }

/* ---------- Telefono e tablet */
@media (max-width: 60rem) {
  .porta__centro { min-height: 0; padding-block: var(--space-xl) var(--space-2xl); }
  .nome__voce, .voce__riga { grid-template-columns: minmax(0, 1fr); }
  .nome__greco, .nome__lettura, .nome__frasi { grid-row: auto; grid-column: 1 / -1; }
  .nome__greco { font-size: var(--text-greco-s); }
  .nome__frasi { margin-top: var(--space-xl); }
  .voce__nome, .voce__testo { grid-column: 1 / -1; }
  .voce__riga { min-height: 0; row-gap: var(--space-lg); }
  .chiusura__riga { align-items: flex-start; gap: var(--space-lg); }
}
@media (max-width: 40rem) {
  .porta__voci a { font-size: var(--text-md); }
}

/* ---------- Movimento. Tutto quello che si muove sta sotto html[data-motion="on"]:
   senza JavaScript, o con «Riduci movimento» e nessuna scelta, la pagina è ferma e completa. */

/* Apertura: le lettere salgono, l'anello gira fino a chiudersi, poi cadono la lineetta e l'accento. */
html[data-motion="on"] .p-sinistra, html[data-motion="on"] .p-destra { animation: sale 640ms var(--ease-out) both; }
html[data-motion="on"] .p-anello { transform-box: view-box; transform-origin: 241.95px 71.01px; animation: gira 900ms var(--ease-out) both; }
html[data-motion="on"] .p-lineetta { animation: cade var(--dur-long) var(--ease-out) 520ms both; }
html[data-motion="on"] .p-accento { animation: cade var(--dur-long) var(--ease-out) 560ms both; }
@keyframes sale { from { opacity: 0; transform: translateY(6px); } }
@keyframes gira { from { opacity: 0; transform: rotate(-160deg); } }
@keyframes cade { from { opacity: 0; transform: translateY(-12px); } }

/* Una sola comparsa: le frasi del nome salgono di poco, una volta. */
html.js[data-motion="on"] [data-reveal] { transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
html.js[data-motion="on"] .frase[data-reveal]:not(.is-in) { opacity: 0; transform: translateY(16px); }

/* L'anello della chiusura si disegna quando arriva sullo schermo, poi diventa il simbolo. */
html.js[data-motion="on"] .chiusura__anello .anello__traccia { opacity: 1; transition: opacity var(--dur-long) var(--ease-out) 1400ms; }
html.js[data-motion="on"] .chiusura__anello .anello__corsa { opacity: 1; stroke-dashoffset: 100; transition: stroke-dashoffset 1300ms var(--ease-in-out), opacity var(--dur-short) var(--ease-out) 1400ms; }
html.js[data-motion="on"] .chiusura__anello .anello__simbolo { opacity: 0; transition: opacity var(--dur-long) var(--ease-out) 1250ms; }
html.js[data-motion="on"] .chiusura__anello .anello__lineetta { opacity: 0; transform: translateY(-8px); transition: opacity var(--dur-long) var(--ease-out) 1550ms, transform var(--dur-long) var(--ease-out) 1550ms; }
html.js[data-motion="on"] .chiusura__anello.is-in .anello__traccia { opacity: 0; }
html.js[data-motion="on"] .chiusura__anello.is-in .anello__corsa { stroke-dashoffset: 0; opacity: 0; }
html.js[data-motion="on"] .chiusura__anello.is-in .anello__simbolo { opacity: 1; }
html.js[data-motion="on"] .chiusura__anello.is-in .anello__lineetta { opacity: 1; transform: none; }

/* La porta: la scena resta ferma sullo schermo; le lettere si aprono e la ō si ingrandisce
   finché il suo buco riempie lo schermo. Lì dentro, al centro, compare il nome con le sue frasi
   (la sezione del nome sta dentro la scena). Poi la scena riparte e «Tre voci» arriva subito sotto.
   Solo su schermi abbastanza alti da contenere il nome: sui telefoni in orizzontale la pagina resta in colonna. */
@supports (animation-timeline: view()) {
  @media (min-height: 36rem) {
    html[data-motion="on"] .porta { height: 220svh; view-timeline: --porta block; }
    html[data-motion="on"] .porta__scena { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; align-content: center; }
    html[data-motion="on"] .porta__centro { min-height: 0; }
    html[data-motion="on"] .porta__scena .nome { position: absolute; inset: 0; display: grid; align-content: center; padding-block: var(--space-xl); }
    html[data-motion="on"] .voci { position: relative; z-index: var(--z-raised); margin-top: -18svh; }

    html[data-motion="on"] .p-sinistra { animation: sale 640ms var(--ease-out) both, via-sinistra linear both; animation-timeline: auto, --porta; animation-range: normal, contain 0% contain 26%; }
    html[data-motion="on"] .p-destra { animation: sale 640ms var(--ease-out) both, via-destra linear both; animation-timeline: auto, --porta; animation-range: normal, contain 0% contain 26%; }
    html[data-motion="on"] .p-accento { animation: cade var(--dur-long) var(--ease-out) 560ms both, via-su linear both; animation-timeline: auto, --porta; animation-range: normal, contain 0% contain 16%; }
    html[data-motion="on"] .p-o { transform-box: view-box; transform-origin: 241.95px 71.01px; animation: tuffo linear both; animation-timeline: --porta; animation-range: contain 2% contain 66%; }
    html[data-motion="on"] .porta__di, html[data-motion="on"] .porta__piede { animation: sparisci linear both; animation-timeline: --porta; animation-range: contain 0% contain 12%; }
    html[data-motion="on"] .porta__scena .nome { animation: sorge linear both; animation-timeline: --porta; animation-range: contain 54% contain 74%; }
  }

  @keyframes via-sinistra { to { opacity: 0; transform: translateX(-90px); } }
  @keyframes via-destra { to { opacity: 0; transform: translateX(90px); } }
  @keyframes via-su { to { opacity: 0; transform: translateY(-40px); } }
  @keyframes sparisci { to { opacity: 0; transform: translateY(-16px); } }
  @keyframes tuffo {
    0%   { transform: none; }
    30%  { transform: translate(-76.1px, -9.4px) scale(1.4); }
    55%  { transform: translate(-76.1px, -9.4px) scale(4); }
    78%  { transform: translate(-76.1px, -9.4px) scale(14); }
    100% { transform: translate(-76.1px, -9.4px) scale(50); }
  }
  @keyframes sorge { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) .movimento, html:not([data-motion="on"]) .voce, html:not([data-motion="on"]) .voce::before { transition: none; }
}