/* ==========================================================================
   SEVEN TOWERS CAPITAL — Pagina d'attesa ("presto online")
   File autonomo: i token e le regole qui sotto sono COPIATI da
   public/assets/css/tokens.css, base.css e main.css (apertura), stessi
   valori e stesse misure. Se un valore cambia lì, va aggiornato anche qui.
   Nessun JavaScript.
   ========================================================================== */

/* ---------- Font (ospitati nella cartella, licenza SIL OFL 1.1) ---------- */
@font-face {
  font-family: "Marcellus";
  src: url("fonts/marcellus-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex-sans-variable.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Token (da tokens.css) ---------- */
:root {
  --verde-scuro: #01302E;   /* fondo */
  --verde-chiaro: #AFB8AC;  /* testo secondario su verde scuro: 7,0:1 */
  --crema: #F9F2E2;         /* titolo e testi: 12,9:1 */
  --oro: #C69A71;           /* simbolo del logo, link: 5,6:1 */

  --font-titoli: "Marcellus", "Times New Roman", Georgia, serif;
  --font-testo: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-h1: clamp(3rem, 4.63vw, 5.5rem);             /* 80px a 1728; 48px su mobile (44 nel sito: qui il titolo è l'unico testo grande) */
  --fs-lead: clamp(1.125rem, 1.389vw, 1.625rem);     /* 24px a 1728 */
  --fs-testo: clamp(1.0625rem, 1.1vw, 1.3125rem);   /* 19px a 1728 */
  --fs-piccolo: 0.875rem;                           /* minimo assoluto */
  --lh-titoli: 1.25;
  --ls-titoli: -0.02em;
  --lh-testo: 1.6;
  --misura-testo: 68ch;
  --peso-normale: 400;
  --peso-medio: 500;

  --sp-1: 0.25rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: clamp(2rem, 2.778vw, 3.333rem);           /* 48px a 1728 */
  --sp-8: clamp(2.5rem, 3.704vw, 4.444rem);         /* 64px a 1728 */
  --apertura-passo-titolo: clamp(1.5rem, 2.315vw, 2.778rem);   /* titolo → lead: 40px a 1728 */
  --apertura-margine-basso: clamp(3rem, 9.09vw, 10.9rem);      /* dal testo al fondo: 157px a 1728, come nell'apertura */

  --contenitore: 120rem;
  --margine-laterale: clamp(1rem, 3.704vw, 4.5rem); /* 64px a 1728 */
  --passo-griglia: clamp(1.5rem, 2.315vw, 2.778rem);/* 40px a 1728 */
  /* Logo più grande che nell'intestazione del sito (120px): 160px fino a 1728,
     176 a 1920; sotto 64rem si sovrappone alla foto. Sugli schermi bassi scende
     a 120 e poi a 88 (vedi le soglie di altezza più sotto). */
  --logo-altezza: clamp(10rem, 9.26vw, 11rem);
  --logo-margine-alto: var(--sp-5);

  --filetto: 1px;
  --focus-spessore: 2px;
  --focus-distanza: 2px;
  --target-minimo: 44px;

  /* Foto e velo (da tokens.css, apertura) */
  --apertura-foto-larghezza: 77.72vw;          /* desktop: la foto inizia a 385px su 1728 */
  --apertura-foto-posizione: 50% 50%;          /* la facciata del Duomo, al centro */
  /* Sotto 64rem la foto è ingrandita del 25% e parte sopra lo schermo: così la
     facciata (dal 29% all'87% dell'altezza della foto) sale nella finestra tra
     il logo e il titolo, con il rosone a circa un terzo dello schermo */
  --attesa-foto-sopra: -25%;
  --attesa-velo-alto-mobile: 12svh;            /* quanto la sfumatura dall'alto scende oltre la fascia del logo */
  --attesa-sfumatura-testo: 30svh;             /* quanto la sfumatura sale sopra il blocco del testo, sotto 64rem */
  --attesa-sfumatura-sotto-titolo: 8.5rem;     /* quanto continua dentro il blocco: il titolo poggia sulla foto, il verde pieno comincia al lead */
  --apertura-velo-alto: 24%;                   /* dall'alto: pieno → trasparente (Figma: 24%) */
  --apertura-velo-sinistra: 66%;               /* da sinistra: pieno → trasparente, in % della foto */
  --apertura-tinta: color-mix(in srgb, var(--verde-scuro) 20%, transparent);
  --velo-minimo: color-mix(in srgb, var(--verde-scuro) 70%, transparent);
  --sfumatura-dolce:
    var(--verde-scuro) 0%,
    color-mix(in srgb, var(--verde-scuro) 94%, transparent) 10%,
    color-mix(in srgb, var(--verde-scuro) 82%, transparent) 21%,
    color-mix(in srgb, var(--verde-scuro) 65%, transparent) 33%,
    color-mix(in srgb, var(--verde-scuro) 46%, transparent) 45%,
    color-mix(in srgb, var(--verde-scuro) 28%, transparent) 57%,
    color-mix(in srgb, var(--verde-scuro) 14%, transparent) 69%,
    color-mix(in srgb, var(--verde-scuro) 5%, transparent) 82%,
    transparent 100%;
  /* Sfumatura sopra il testo (sotto 64rem): da trasparente a verde pieno con
     tappe regolari, così lo scurimento comincia subito e si distribuisce su
     tutta l'altezza (la curva dell'apertura, concentrata in fondo, qui
     risultava troppo brusca anche se lunga). */
  --sfumatura-dolce-inversa:
    transparent 0%,
    color-mix(in srgb, var(--verde-scuro) 10%, transparent) 14%,
    color-mix(in srgb, var(--verde-scuro) 22%, transparent) 28%,
    color-mix(in srgb, var(--verde-scuro) 36%, transparent) 42%,
    color-mix(in srgb, var(--verde-scuro) 52%, transparent) 56%,
    color-mix(in srgb, var(--verde-scuro) 68%, transparent) 70%,
    color-mix(in srgb, var(--verde-scuro) 84%, transparent) 84%,
    color-mix(in srgb, var(--verde-scuro) 95%, transparent) 94%,
    var(--verde-scuro) 100%;

  /* Movimento (intro al caricamento, come l'apertura del sito) */
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
  --durata-lenta: 500ms;
  --spostamento: 0.75rem;
  --intro-foto: 150ms;
  --intro-testo: 300ms;
  --intro-durata-testo: 700ms;
  --intro-spostamento-testo: 2rem;
  --intro-durata-foto: 1100ms;
  --intro-scala-foto: 1.05;
}

/* ---------- Reset essenziale (da base.css) ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; height: auto; }

/* ---------- Pagina ---------- */
body {
  font-family: var(--font-testo);
  font-size: var(--fs-testo);
  line-height: var(--lh-testo);
  font-weight: var(--peso-normale);
  background: var(--verde-scuro);
  color: var(--crema);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
.contenitore {
  width: min(100% - 2 * var(--margine-laterale), var(--contenitore));
  margin-inline: auto;
}
:focus-visible {
  outline: var(--focus-spessore) solid var(--crema);
  outline-offset: var(--focus-distanza);
}

/* ---------- Schermata (stessa impostazione dell'apertura del sito) ----------
   Tutto sta nell'altezza dello schermo. Sotto 64rem (o in verticale): la foto
   copre tutto lo schermo; sopra, il logo centrato su una sfumatura lunga che
   parte dal verde pieno; in basso il testo e il copyright poggiano su una
   sfumatura che diventa verde pieno. Da 64rem in orizzontale: foto a destra
   dall'alto in basso sotto il velo a quattro sfondi, logo in alto a sinistra,
   testo in basso nelle colonne 1–6, copyright in fondo. */
.attesa {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;   /* logo, spazio (la foto), parte bassa */
  min-height: 100svh;
  overflow: hidden;
}
/* Foto e velo in un contenitore comune, dietro a tutto */
.attesa__scena {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.attesa__foto {
  position: absolute;
  inset: var(--attesa-foto-sopra) 0 0;   /* più alta dello schermo: la parte alta della foto (cielo) resta fuori */
  display: block;
}
.attesa__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--apertura-foto-posizione);
}
/* Velo sulla foto, sotto 64rem: dall'alto la sfumatura morbida, lunga quanto
   la fascia del logo più --attesa-velo-alto-mobile, e la tinta */
.attesa__velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--sfumatura-dolce)) top / 100% calc(var(--logo-margine-alto) + var(--logo-altezza) + var(--sp-4) + var(--attesa-velo-alto-mobile)) no-repeat,
    var(--apertura-tinta);
}
.attesa__logo {
  position: relative;
  z-index: 2;
  grid-row: 1;
  display: flex;
  justify-content: center;   /* sotto 64rem il logo è centrato, come nell'intestazione mobile del sito */
  padding-block: var(--logo-margine-alto) var(--sp-4);
}
.logo { height: var(--logo-altezza); width: auto; }
.logo .logo-simbolo { fill: var(--oro); }
.logo .logo-testo { fill: var(--crema); }

/* Parte bassa: la sfumatura a tappe regolari parte --attesa-sfumatura-testo
   sopra il blocco e continua dentro per --attesa-sfumatura-sotto-titolo, così
   il titolo poggia sulla foto e il verde pieno comincia all'altezza del lead
   (sovrapposto di 2px: evita la riga chiara al confine). Disegnata da uno
   pseudo-elemento che non occupa spazio nel layout. */
.attesa__basso {
  position: relative;
  z-index: 2;
  grid-row: 3;
  padding-top: var(--sp-4);
  background: linear-gradient(to bottom, transparent calc(var(--attesa-sfumatura-sotto-titolo) - 2px), var(--verde-scuro) calc(var(--attesa-sfumatura-sotto-titolo) - 2px));
}
.attesa__basso::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - var(--attesa-sfumatura-sotto-titolo));
  height: calc(var(--attesa-sfumatura-testo) + var(--attesa-sfumatura-sotto-titolo));
  background: linear-gradient(to bottom, var(--sfumatura-dolce-inversa));
  pointer-events: none;
}
.attesa__contenuto { position: relative; }
h1 {
  font-family: var(--font-titoli);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-titoli);
  letter-spacing: var(--ls-titoli);
  color: var(--crema);
  text-wrap: balance;
}
.attesa__lead {
  margin-top: var(--sp-5);
  max-width: var(--misura-testo);
  font-size: var(--fs-lead);
  line-height: var(--lh-testo);
  color: var(--verde-chiaro);
}
/* Blocco contatto: link email in oro, sottolineato (riconoscibile anche
   senza colore), area cliccabile di almeno 44px */
.contatto {
  margin-top: var(--sp-5);
  max-width: var(--misura-testo);
}
.contatto__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-minimo);
  font-weight: var(--peso-medio);
  color: var(--oro);
  text-decoration: underline;
  text-decoration-thickness: var(--filetto);
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;   /* indirizzi lunghi a 320px */
}
.contatto__link:hover { text-decoration-thickness: 2px; }

.attesa__piede {
  padding-block: var(--sp-5) var(--sp-6);
  font-size: var(--fs-piccolo);
  font-weight: var(--peso-medio);
  color: var(--verde-chiaro);
}

/* Schermi bassi (telefoni piccoli, finestre basse): logo a 120px e distanze
   più strette, così tutto resta nello schermo */
@media (max-height: 44rem) {
  :root {
    --logo-altezza: 7.5rem;
    --logo-margine-alto: var(--sp-4);
    --attesa-sfumatura-testo: 26svh;
  }
  .attesa__lead { margin-top: var(--sp-4); }
  .contatto { margin-top: var(--sp-4); }
  .attesa__piede { padding-block: var(--sp-4); }
}

/* Schermi molto bassi (320 × 568): logo a 88px (come l'intestazione mobile
   del sito), titolo e lead ai minimi, distanze strette. Nessun testo sotto
   --fs-piccolo. */
@media (max-height: 36rem) {
  :root {
    --logo-altezza: 5.5rem;
    --fs-h1: 2.5rem;
    --fs-lead: 1rem;
    --fs-testo: 1rem;
    --logo-margine-alto: var(--sp-3);
    --attesa-sfumatura-testo: 22svh;
    --attesa-sfumatura-sotto-titolo: 6.5rem;
  }
  .attesa__logo { padding-bottom: var(--sp-3); }
  .attesa__lead { margin-top: var(--sp-3); }
  .contatto { margin-top: var(--sp-3); }
  .attesa__piede { padding-block: var(--sp-3); }
}

/* Schermata desktop: da 64rem, solo in orizzontale */
@media (min-width: 64rem) and (orientation: landscape) {
  .attesa__scena {
    inset: 0 0 0 auto;
    width: var(--apertura-foto-larghezza);
  }
  .attesa__foto { inset: 0; }
  .attesa__velo {
    background:
      linear-gradient(to bottom, var(--verde-scuro), var(--velo-minimo) calc(var(--logo-margine-alto) + var(--logo-altezza) * 0.75), transparent) top / 100% max(var(--apertura-velo-alto), calc(var(--logo-margine-alto) + var(--logo-altezza) * 1.6)) no-repeat,
      linear-gradient(to right, var(--sfumatura-dolce)) left / var(--apertura-velo-sinistra) 100% no-repeat,
      linear-gradient(to top, var(--sfumatura-dolce)) bottom / 100% 100% no-repeat,
      var(--apertura-tinta);
  }
  .attesa__logo { justify-content: flex-start; }
  .attesa__basso {
    padding-top: 0;
    background: none;   /* il velo della foto basta: il testo sta sulla parte verde */
  }
  .attesa__basso::before { content: none; }
  .attesa__contenuto {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--passo-griglia);
    margin-top: var(--sp-7);
  }
  .attesa__contenuto > * { grid-column: 1 / span 6; }
  .attesa__lead { margin-top: var(--apertura-passo-titolo); }
  .contatto { margin-top: var(--sp-7); }
  /* dal testo al fondo la stessa distanza dell'apertura (157px a 1728),
     con il copyright dentro quello spazio */
  .attesa__piede {
    display: flex;
    align-items: end;
    min-height: var(--apertura-margine-basso);
    padding-top: var(--sp-6);
  }
}
/* Desktop basso (es. 1280 × 720, 1366 × 768): logo a 120px e distanze più strette */
@media (min-width: 64rem) and (orientation: landscape) and (max-height: 48rem) {
  :root { --logo-altezza: 7.5rem; }   /* 120px: la misura dell'intestazione del sito */
  .attesa__contenuto { margin-top: var(--sp-5); }
  .attesa__lead { margin-top: var(--sp-5); }
  .contatto { margin-top: var(--sp-5); }
  .attesa__piede { min-height: 0; padding-top: var(--sp-5); }
}

/* ---------- Movimento (come l'intro dell'apertura del sito) ----------
   Solo al caricamento: il logo compare, la foto emerge dal verde assestandosi
   da un leggero ingrandimento, poi titolo, lead e contatto salgono insieme
   come un unico blocco. Solo opacity e transform. Con il movimento ridotto il
   contenuto è visibile subito. */
@media (prefers-reduced-motion: no-preference) {
  .attesa__logo { animation: comparsa var(--durata-lenta) var(--curva) both; }
  .attesa__foto {
    overflow: hidden;
    animation: comparsa-ferma var(--intro-durata-foto) var(--curva) both;
    animation-delay: var(--intro-foto);
  }
  .attesa__foto img {
    animation: foto-assesta var(--intro-durata-foto) var(--curva) both;
    animation-delay: var(--intro-foto);
  }
  .attesa__contenuto {
    animation: comparsa-blocco var(--intro-durata-testo) var(--curva) both;
    animation-delay: var(--intro-testo);
  }
  @keyframes comparsa { from { opacity: 0; transform: translateY(var(--spostamento)); } }
  @keyframes comparsa-blocco { from { opacity: 0; transform: translateY(var(--intro-spostamento-testo)); } }
  @keyframes comparsa-ferma { from { opacity: 0; } }
  @keyframes foto-assesta { from { transform: scale(var(--intro-scala-foto)); } }
}