/* ==========================================================================
   GLYPH PORTAL — stile
   --------------------------------------------------------------------------
   Port vanilla del componente "Glyph Portal".
   Glyph Portal © 2026 Christian Katzmann. MIT. Keep this notice with copies.
   Origin: UsefulPortal.astro on https://ktzm.dk → UsefulPortal.tsx → ClarityPortal.tsx.

   COME FUNZIONA
   Una "camera" che attraversa il testo mentre scorri:
     1. la parola sta sulla carta, disegnata col colore del campo;
     2. scorrendo, la camera si avvicina a una lettera;
     3. l'interno della lettera si allarga fino a riempire lo schermo;
     4. quello che c'era "dentro" la lettera diventa la pagina che continua.

   ADATTAMENTO A JACOVISUALS
   - carta chiara (#f4f4f1) con la retina di puntini in alto a destra;
   - campo NERO, anche lui puntinato: è il momento scuro del sito;
   - il testo è in Anton (il font dei titoli);
   - dentro la lettera il contenuto è chiaro su nero.

   PER CAMBIARE I COLORI: solo il blocco .gp { --gp-* } qui sotto.
   ========================================================================== */

.gp {
  /* ── COLORI ── */
  --gp-paper: #f4f4f1;          /* carta: lo sfondo chiaro della pagina */
  --gp-field: #0b0b0d;          /* campo: quello che si vede dentro la lettera */
  --gp-ink: #0b0b0d;            /* testo e segni sulla carta */
  --gp-ink-2: #5f5f66;          /* testi secondari sulla carta */
  --gp-foreground: #f4f4f5;     /* testo del contenuto dentro il campo */
  --gp-foreground-2: #a3a3ab;   /* testo secondario dentro il campo */
  --gp-line: rgba(11, 11, 13, .16);
  --gp-dots-paper: rgba(11, 11, 13, .16);
  --gp-dots-field: rgba(244, 244, 245, .13);
  --gp-btn-bg: #0b0b0d;
  --gp-btn-ink: #ffffff;
  --gp-btn-line: rgba(11, 11, 13, .28);

  /* ── TIPOGRAFIA DELLA PAROLA ── */
  --gp-font: 'Anton', 'Arial Narrow', sans-serif;
  --gp-weight: 400;             /* Anton ha un peso solo */

  /* ── GEOMETRIA ── */
  --gp-r: 3px;

  position: relative;
  isolation: isolate;
  background: var(--gp-paper);
  color: var(--gp-ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;

  /* ⚠️ Il canvas dei puntini (`.gp-dots`) sborda di 9px per lato apposta,
     per arrivare ai bordi. Ma il suo contenitore diretto è QUESTA sezione,
     non il pin: il pin ha `overflow: clip` e non serve a niente, perché il
     canvas non sta dentro di lui. Risultato: da mobile i 9px di destra
     finivano fuori dallo schermo e la pagina scorreva di lato di una
     decina di pixel.
     Qui si taglia SOLO in orizzontale, e con `clip` non con `hidden`:
     `hidden` creerebbe un contenitore di scorrimento e spaccherebbe la
     posizione `sticky` del pin. `clip` no.
     (Verificato: pagina 497px → 487px, il canvas resta 506px.) */
  overflow-x: clip;
}

/* ── LA RETINA DI PUNTINI DELLA CARTA (canvas) ──────────────
   Ispirata a "Sonar Grid" di NIMA MZ (21st.dev, MIT): una griglia di
   puntini su canvas, con anelli che si allargano dove clicchi, ping
   ambientali che la tengono viva e un anello già a metà strada al
   primo disegno. Con "riduci animazioni" resta ferma.
   Qui c'è solo il livello e la sfumatura: il disegno lo fa
   glyph-portal.js. La deriva e il respiro di prima sono spariti:
   con gli anelli il movimento c'è già, e due animazioni insieme
   facevano confusione. */
.gp-dots {
  position: absolute;
  top: -9px; left: -9px; right: -9px;
  height: calc(var(--gp-height, 100svh) + 18px);
  z-index: 0;
  pointer-events: none;
  display: block;
  -webkit-mask-image: radial-gradient(130% 100% at 76% 16%, #000 0%, transparent 70%);
  mask-image: radial-gradient(130% 100% at 76% 16%, #000 0%, transparent 70%);
}

/* Sonda 100svh: misura l'altezza reale del viewport mobile una volta sola,
   così la distanza di scorrimento non cambia quando la barra del browser
   si nasconde mentre scorri. */
.gp > [data-gp-viewport] {
  position: absolute;
  inset: 0 auto auto 0;
  height: 100vh;
  height: 100svh;
  width: 0;
  pointer-events: none;
  visibility: hidden;
}

.gp [data-gp-pin] {
  position: relative;
  height: var(--gp-height, 100svh);
  overflow: clip;
  isolation: isolate;
  container-type: size;
}

/* ── IL CAMPO: la superficie colorata, ritagliata a forma di lettere ── */
.gp [data-gp-field] {
  position: absolute;
  inset: 0;
  background: var(--gp-field);
  background-image: radial-gradient(circle, var(--gp-dots-field) 1.1px, transparent 1.3px);
  background-size: 9px 9px;
  opacity: 0;
  pointer-events: none;
}
.gp[data-gp-ready='true'] [data-gp-field] { opacity: 1; }

.gp [data-gp-art] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* Il testo dentro l'SVG: è la sagoma che ritaglia il campo.
   Se cambi font qui, cambia anche la misura dell'inchiostro. */
.gp [data-gp-glyph] {
  font-family: var(--gp-font);
  font-weight: var(--gp-weight);
  font-size: 100px;
  letter-spacing: 0;
  font-kerning: none;
  font-variant-ligatures: none;
}

/* Testo per soli lettori di schermo */
.gp .gp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* I segni tecnici: riga sotto la parola, tacche, mirino sulla lettera */
.gp [data-gp-marks] { fill: none; stroke: var(--gp-ink); opacity: .6; }

/* ── LE LETTERE CLICCABILI (zona di scelta) ── */
.gp [data-gp-choices] { position: absolute; inset: 0; visibility: hidden; pointer-events: none; }
.gp[data-gp-choosing='true'] [data-gp-choices] { visibility: visible; }
.gp [data-gp-letter] {
  box-sizing: border-box;
  position: absolute;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  touch-action: pan-y;
}
.gp [data-gp-letter]:disabled { pointer-events: none; }
.gp [data-gp-letter]:focus-visible { outline: 2px solid var(--gp-field); outline-offset: 5px; }

/* In hover su una lettera, l'interno si accende appena */
.gp [data-gp-letter]:not(:disabled):hover { background: rgba(11, 11, 13, .05); }

/* ── SELEZIONE LETTERA SU TOUCH ── */
.gp [data-gp-touch-picker] {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  align-items: center;
  gap: .75rem;
  font-size: .75rem;
  visibility: hidden;
}
.gp[data-gp-choosing='true'] [data-gp-touch-picker] { visibility: visible; }
.gp [data-gp-select] {
  min-height: 44px;
  min-width: 96px;
  padding: 0 .6rem;
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r);
  background: var(--gp-paper);
  color: var(--gp-ink);
  font: inherit;
}
/* Sul touch il menù per scegliere la lettera sta in basso: lì il chevron
   non serve e darebbe fastidio. Si tocca la lettera e si scorre. */
@media (any-pointer: coarse) {
  .gp [data-gp-touch-picker] { display: flex; }
  .gp [data-gp-hint] { display: none; }
}

/* ── LETTERA FISSA: VIA IL MENÙ DI SCELTA ──
   Sulla home la porta è sempre la stessa lettera (la seconda A), quindi
   chiedere quale sia non ha senso. Sui telefoni quel menù in fondo era
   l'unica cosa scritta che si vedeva, e diceva "Scegli una lettera".
   Con il menù via, al suo posto torna l'invito a scorrere, che era stato
   nascosto proprio perché c'era il menù.
   Il `:not([data-gp-motion='off'])` serve a non mostrare "Scorri per
   entrare" quando l'effetto è spento: lì scorrere non porta da nessuna
   parte, e le regole più in basso del foglio nascondono già l'invito. */
.gp[data-picker='off'] [data-gp-touch-picker] { display: none; }
@media (any-pointer: coarse) {
  .gp[data-picker='off']:not([data-gp-motion='off']) [data-gp-hint] { display: inline-flex; }
}

/* ── TESTI SOPRA LA PAROLA (front) ── */
.gp [data-gp-front] {
  position: absolute;
  inset: 0;
  opacity: var(--gp-caption, 1);
  pointer-events: none;
}
.gp [data-gp-eyebrow] {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: calc(100% - var(--gp-word-top, 35%) + 28px);
  margin: 0;
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gp-ink-2);
}
.gp [data-gp-support] {
  position: absolute;
  left: 8%;
  right: 8%;
  top: calc(var(--gp-word-bottom, 50%) + 28px);
  margin: 0;
  text-align: center;
  font-size: clamp(.92rem, 1.2vw, 1.05rem);
  line-height: 1.6;
  color: var(--gp-ink-2);
  text-wrap: balance;
}

/* ── PIÈ DI PAGINA DELLA SCENA: il solo invito a scendere ── */
.gp [data-gp-caption] {
  position: absolute;
  inset: auto 8% 8%;
  display: flex;
  align-items: center;
  justify-content: center;   /* centrato in orizzontale */
  gap: 1rem;
  font-size: .72rem;
  opacity: var(--gp-caption, 1);
  pointer-events: var(--gp-caption-hit, auto);
}
.gp [data-gp-hint] {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  color: var(--gp-ink-2);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
/* Il chevron sotto il testo, che rimbalza verso il basso:
   è l'invito a scorrere. Disegnato in CSS, nessuna icona da caricare. */
.gp [data-gp-hint]::after {
  content: '';
  width: 9px;
  height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  animation: gp-invito 1.9s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes gp-invito {
  0%, 100% { transform: translateY(-4px) rotate(45deg); opacity: .25; }
  50%      { transform: translateY(3px) rotate(45deg);  opacity: 1; }
}

/* Il bottone "Entra nel sito" non si vede più: resta solo per chi naviga
   da tastiera o con un lettore di schermo, e compare quando lo si
   raggiunge col tab. Senza, chi non usa il mouse non avrebbe una via
   d'uscita dalla porta. */
.gp [data-gp-enter] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  padding: 0;
  border: 0;
  white-space: nowrap;
  text-decoration: none;
}
.gp [data-gp-enter]:focus-visible {
  position: static;
  width: auto;
  height: auto;
  clip-path: none;
  padding: .65rem 1.1rem;
  border: 1px solid var(--gp-btn-bg);
  border-radius: var(--gp-r);
  background: var(--gp-btn-bg);
  color: var(--gp-btn-ink);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  outline: 2px solid var(--gp-field);
  outline-offset: 4px;
}
.gp [data-gp-caption]:focus-within { opacity: 1; pointer-events: auto; }
/* Chi ha chiesto meno animazioni: il chevron resta fermo */
@media (prefers-reduced-motion: reduce) {
  .gp [data-gp-hint]::after { animation: none; opacity: 1; }
}

/* La parola disegnata a tutto schermo, solo per il caso senza JS */
.gp [data-gp-fallback] {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  font-family: var(--gp-font);
  font-weight: var(--gp-weight);
  font-size: min(calc(100cqw / var(--gp-characters, 8)), 38cqh);
  line-height: 1;
  color: var(--gp-field);
  letter-spacing: 0;
}

/* ── IL CONTENUTO CHE STA "DENTRO" LA LETTERA ── */
.gp [data-gp-content] {
  box-sizing: border-box;
  position: relative;
  min-height: var(--gp-height, 100svh);
  padding: clamp(4rem, 12vh, 8rem) clamp(1.2rem, 6vw, 4.5rem);
  display: grid;
  align-content: center;
  color: var(--gp-foreground);
  background: var(--gp-field);
  overflow-wrap: anywhere;
}
.gp [data-gp-content] .wrap,
.gp [data-gp-content] .gp-in { width: min(100%, 1180px); margin-inline: auto; }

/* Con l'animazione attiva il pin resta appeso e il contenuto sale sopra il campo */
.gp[data-gp-motion='on'] [data-gp-pin] { position: sticky; top: 0; }
/* Senza animazione il suggerimento "scorri per entrare" non ha senso */
.gp[data-gp-motion='off'] [data-gp-hint] { display: none; }
.gp[data-gp-motion='on'] [data-gp-content] {
  margin-top: calc((var(--gp-length) - 1) * var(--gp-height));
  background: transparent;
  opacity: var(--gp-reveal, 0);
  pointer-events: none;
}
.gp[data-gp-motion='on'][data-gp-entered='true'] [data-gp-content] { pointer-events: auto; }

/* Se l'utente arriva col tab dentro il contenuto, il campo si apre subito */
.gp[data-gp-motion='on']:has([data-gp-content]:focus-within) [data-gp-field] { clip-path: none !important; }
.gp[data-gp-motion='on'] [data-gp-content]:focus-within { opacity: 1; pointer-events: auto; }
.gp:has([data-gp-content]:focus-within) [data-gp-caption],
.gp:has([data-gp-content]:focus-within) [data-gp-marks] { opacity: 0; }

/* ── TESTI DEL CONTENUTO ── */
.gp [data-gp-content] .display {
  font-family: var(--gp-font);
  font-weight: var(--gp-weight);
  text-transform: uppercase;
  line-height: .96;
  font-size: clamp(2.1rem, 5.6vw, 4.6rem);
  margin: 0 0 1.2rem;
  text-wrap: balance;
}
.gp [data-gp-content] .lead { color: var(--gp-foreground-2); font-size: 1.02rem; line-height: 1.7; max-width: 56ch; margin: 0 0 1.8rem; }
.gp [data-gp-content] .lead strong { color: var(--gp-foreground); font-weight: 600; }
.gp [data-gp-content] .gp-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.8rem; }
.gp [data-gp-content] .gp-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--gp-r);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1), background .25s, border-color .25s;
}
.gp [data-gp-content] .gp-btn:hover { transform: translateY(-2px); }
.gp [data-gp-content] .gp-btn-fill { background: var(--gp-foreground); color: var(--gp-field); }
.gp [data-gp-content] .gp-btn-line { border-color: rgba(244, 244, 245, .34); color: var(--gp-foreground); }
.gp [data-gp-content] .gp-btn-line:hover { border-color: var(--gp-foreground); }
.gp [data-gp-content] .gp-trust {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gp-foreground-2);
}
.gp [data-gp-content] .gp-trust li { display: flex; align-items: center; gap: .5rem; }
.gp [data-gp-content] .gp-trust li::before { content: ''; width: 13px; height: 1px; background: rgba(244, 244, 245, .4); }

/* Chi preferisce meno movimento: nessun pinning, campo subito aperto */
@media (prefers-reduced-motion: reduce) {
  .gp [data-gp-pin] { position: relative !important; }
  .gp [data-gp-content] { margin-top: 0 !important; opacity: 1 !important; background: var(--gp-field) !important; min-height: 0; padding-block: clamp(3rem, 8vh, 5rem); }
  .gp [data-gp-caption] { opacity: 1 !important; }
  .gp [data-gp-hint] { display: none; }
}