/*
 * AYA immersive integration fixes.
 * Kept separate from the imported minified stylesheet so every local change
 * remains reviewable and reproducible.
 */

/* The imported preview used translateZ alone and accidentally discarded the
   centring transform from the original live site. Preserve the live site's
   exact geometry while adding depth. */
.hero-sun-wrap {
  top: calc(var(--hero-sun-top) + 20px);
  transform: translateX(-50%) translateZ(80px);
}

.hero-copy {
  padding-top: calc(
    var(--hero-sun-top) + var(--hero-sun-size) +
    clamp(1.5rem, 4svh, 3.5rem) + 20px
  );
}

.team-context {
  max-width: 52rem;
  margin: 1.8rem 0 0;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  border-left: 2px solid color-mix(in srgb, var(--neon-mint) 48%, var(--line));
  background: color-mix(in srgb, var(--panel) 72%, transparent);
}

.team-context .team-sub {
  margin-bottom: 0.55rem;
}

.team-context p {
  margin: 0;
  color: var(--muted);
}

.contact-line > span {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neon-mint);
  font-size: 0.68rem;
  font-weight: 700;
}

.terrain-unavailable::after {
  content: "Digital twin non disponibile su questo dispositivo";
  position: absolute;
  inset: 50% auto auto 50%;
  max-width: 24rem;
  transform: translate(-50%, -50%);
  color: rgba(246, 243, 234, 0.75);
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .contact-line {
    width: 100%;
    overflow-wrap: anywhere;
  }
}

/* ==========================================================================
   CORREZIONI DI CONTRASTO — misurate, non stimate.
   Fonte: node scripts/site-visual-audit.js https://aya.vendiamotempo.com
   (6 combinazioni tema × viewport, contrasto WCAG 2.2 AA su ogni nodo di testo,
   confermato con screenshot per singolo elemento).
   Ogni regola qui sotto riporta il rapporto misurato PRIMA → DOPO.
   ========================================================================== */

/* BLOCCANTE — la casella dell'email era illeggibile in dark mode.
   Il blocco usava `background: var(--forest-deep)` con `color: #fff`, ma
   --forest-deep si INVERTE con il tema (#1b3320 chiaro → #c5d9b6 scuro): in
   dark diventava verde chiarissimo con sopra testo bianco e link lime.
   Misurato: 1,50:1 il testo · 1,28:1 l'indirizzo email · 1,21:1 il kicker.
   È l'unica call-to-action del sito.
   Il blocco è progettato come "canale scuro": va tenuto scuro in ENTRAMBI i
   temi, con un colore fisso invece di una variabile che si ribalta.
   → bianco 13,63:1 · lime 11,65:1 · mint 10,99:1 */
.contact-line {
  background: #1b3320;
  color: #f6f3ea;
}
.contact-line a { color: #c8ff65; }
.contact-line > span { color: #72ffd1; }

/* I monogrammi di Elisa e Fabio: bianco su cerchio lime = 1,17:1, cioè le
   iniziali sparivano dentro il disco. Invertito il rapporto tenendo il
   cerchio identico. → 15,78:1 */
.person-orbit {
  color: #11150e;
  font-weight: 700;
}

/* Stessa causa del blocco email: la sfera "AYA" del Team è un gradiente
   lime → var(--forest) → var(--forest-deep), e quelle due variabili si
   ribaltano col tema. In dark diventavano #9dc18f e #c5d9b6, cioè la sfera
   si schiariva tutta e la scritta bianca al centro spariva (1,64:1).
   La sfera è pensata come orbe scuro con un riflesso lime: si fissano i due
   verdi scuri, così resta identica nei due temi. */
.team-core {
  background: radial-gradient(circle at 32% 22%, #c8ff65 0%, #6f9c4a 22%, #24402a 44%, #16281b 100%);
}
.team-core span {
  text-shadow: 0 1px 4px rgb(0 0 0 / 55%);
}

/* Numeri di sezione troppo tenui per il testo piccolo (soglia AA 4,5:1).
   .portal-index 3,13:1 in entrambi i temi · .circle-number 3,34:1 in dark.

   Sul .portal-index il colore da solo non bastava: la regola importata impone
   `opacity:.55 !important` su un testo di 9px, e l'opacità si moltiplica al
   contrasto qualunque colore si scelga. A 9px, per giunta, l'antialiasing si
   mangia gran parte del segnale: serviva agire su opacità E dimensione. */
.portal-index {
  color: #a9ffdf;
  font-weight: 700;
  opacity: 1 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.04em;
}
/* .circle-number: 11px in un cerchio da 56px. Il colore era già scuro a
   sufficienza in chiaro; in dark restava tenue. Alzato anche di mezzo punto di
   corpo — sotto gli 11px l'antialiasing costa più del colore. */
.circle-number { font-size: 0.8rem; }
@media (prefers-color-scheme: dark) {
  .circle-number { color: #c9e3bd; }
}
:root[data-theme="dark"] .circle-number { color: #c9e3bd; }

/* Il testo del hero attraversa l'orizzonte della collina illustrata: la stessa
   riga inizia su cielo chiaro e finisce su verde medio. Su tablet (dove
   l'orizzonte cade esattamente sulla frase di apertura) il contrasto scendeva
   a 2,98:1 sulla seconda riga.
   Non si tocca l'illustrazione: si posa sotto il testo un velo morbido del
   colore della carta, invisibile come bordo perché sfuma a zero prima di
   incontrare qualsiasi margine. Segue il tema perché usa var(--paper). */
.hero-copy { position: relative; }
.hero-copy::before {
  content: "";
  position: absolute;
  inset: -1.5rem -1rem -1rem;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 85% 62% at 50% 58%,
    color-mix(in srgb, var(--paper) 82%, transparent) 0%,
    color-mix(in srgb, var(--paper) 52%, transparent) 48%,
    transparent 76%
  );
}
.hero-copy > * { position: relative; z-index: 1; }

/* Difetti PREESISTENTI (già presenti prima della ricostruzione, non introdotti
   da essa): i colori delle qualità nel tema chiaro restavano sotto AA sul testo
   piccolo. Stessa tinta, solo luminosità corretta quanto basta — la differenza
   non è percepibile ma il testo diventa conforme.
   Animo lieto 3,67→4,53 · Quiete 4,47→4,73 · Condivisione 3,92→4,53 */
@media (prefers-color-scheme: light) {
  :root {
    --q-lieto: #846517;
    --q-quiete: #3c68a2;
    --q-condivisione: #a15613;
  }
}
:root[data-theme="light"] {
  --q-lieto: #846517;
  --q-quiete: #3c68a2;
  --q-condivisione: #a15613;
}

/* Il link diretto alla planimetria. Esiste perché il PDF era raggiungibile solo
   aprendo una finestra costruita in JavaScript: senza JS, o con JS in errore, il
   documento del progetto era irraggiungibile. Ora c'è un <a href> vero, in
   pagina, sempre visibile.

   Nota: vive DENTRO .data-strip-immersive, che ha sfondo fisso #102719 in
   entrambi i temi. Al primo tentativo l'ho colorato con var(--muted) e
   var(--forest) — cioè con le variabili che si ribaltano — ed è finito
   illeggibile (2,59:1 e 1,53:1): esattamente lo stesso errore che sto
   correggendo altrove. Su un fondo fisso servono colori fissi. */
.doc-diretto {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 4vw, 2.2rem) 1.6rem;
  color: #c3cbb6;
}
.doc-diretto a { color: #d7ee9a; font-weight: 600; }

/* Il "+" che segnala l'apertura del cerchio: era var(--forest) su una card
   scura e restava a 1,27:1. È un'affordance, non una decorazione: si deve
   vedere. */
.circle-open { color: #5e8c4c; }   /* 3,80:1 su panel · 3,28:1 su paper-2, sopra la soglia 3 del testo grande */
@media (prefers-color-scheme: dark) { .circle-open { color: #cfe4c2; } }
:root[data-theme="dark"] .circle-open { color: #cfe4c2; }

/* Le targhette sopra la scena 3D. Prima la scena era quasi nera e un testo
   menta ci stava sopra bene; ora è il piano approvato su un campo verde
   chiaro, e le stesse targhette scendevano a 2,08:1. Un testo sopra
   un'immagine non può affidarsi al colore dell'immagine: gli si mette sotto
   una pastiglia piena. */
.terrain-hud {
  background: #0f2114;
  border: 1px solid rgba(196, 232, 176, 0.42);
  color: #e8f4dc;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
}

/* Stessa ragione per il testo del portale, che ora affianca una scena chiara. */
.site-map-copy small { color: #cdd6c2; }
.site-map-copy i { color: #d7ee9a; }