/* Home Scaringi Tech nello stile DOOM. Misure: docs/doom-reference.md (sezioni 1-5).
   Senza .js-anim (GSAP assente, reduced motion) la home e statica e leggibile:
   intro (100vh, testi visibili, foto nella finestra), poi foto a tutto schermo.
   Con .js-anim (aggiunta da js/home.js) l'intro sta sopra la foto e si ingrandisce di 15x allo scroll. */

/* ---------- 1 + 2: hero ---------- */
.home-doom { position: relative; background: var(--nero); }
.video-bg { position: relative; z-index: 0; width: 100%; background: var(--nero); }

.intro { position: relative; height: 100vh; overflow: hidden; background: var(--nero); }
.hero { position: relative; height: 100vh; overflow: hidden; background: var(--nero); }

.js-anim .video-bg { height: 100vh; overflow: hidden; }
.js-anim .intro { position: absolute; inset: 0; z-index: 2; background: transparent; }
.js-anim .hero { position: absolute; inset: 0; background: var(--nero); }

/* Livelli dell'intro: tutti a pieno stage, origine al centro (come i tre livelli di DOOM). */
.intro-layer { position: absolute; inset: 0; transform-origin: 50% 50%; transition: none; pointer-events: none; }
.intro-mask { overflow: hidden; }
.js-anim .intro-layer { will-change: transform; }
/* Menu aperto mentre l'intro e fissata: niente transform su main (un fixed dentro un elemento trasformato
   perderebbe l'ancoraggio alla viewport). Il resto di main e del footer e fuori schermo in quel tratto. */
html.intro-pinned body.menu-open main, html.intro-pinned body.menu-open .site-footer { transform: none; }
/* La compensazione della scrollbar (padding-right sul body) lascerebbe una fascia bianca a destra dello stage
   fissato: mentre il menu e aperto sull'intro il fondo pagina e nero. */
html.intro-pinned body.menu-open { background: var(--nero); }

/* "Immagine" di riferimento mappata a contain: 1920x1080 desktop, 1024x1311 tablet verticale, 430x765 smartphone.
   Posizioni in % di questo box (convertite dai px misurati), font-size in cqw (1% della sua larghezza). */
.intro-art {
  --wx: 43.70%; --wy: 26.57%; --ww: 12.66%; --wh: 44.72%;
  position: absolute; left: 50%; top: 50%;
  width: min(100%, 100vh * 1920 / 1080); aspect-ratio: 1920 / 1080;
  transform: translate(-50%, -50%);
  container-type: inline-size;
}
.intro-hole, .intro-frame, .intro-halo {
  position: absolute; left: var(--wx); top: var(--wy); width: var(--ww); height: var(--wh);
  border-radius: 50% 50% 0 0 / 25% 25% 0 0;
}
/* Apertura nella maschera nera: senza animazione mostra la foto, con animazione e trasparente sulla foto sotto. */
.intro-hole {
  box-shadow: 0 0 0 300vmax var(--nero);
  background: #1a1a1a url("/img/ph/intro-cattedrale.svg") 50% 40% / cover no-repeat;
}
.js-anim .intro-hole { background: none; }
/* Alone di luce attorno alla finestra (unico livello che sfuma). */
.intro-halo::before {
  content: ''; position: absolute; inset: -45% -130%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .28), rgba(255, 255, 255, .08) 55%, rgba(255, 255, 255, 0));
}
/* Cornice della finestra: profilo, montante e traversa bianchi. */
.intro-frame { border: 1px solid rgba(255, 255, 255, .9); }
.intro-frame::before { content: ''; position: absolute; left: 50%; top: 18%; bottom: 0; border-left: 1px solid rgba(255, 255, 255, .7); }
.intro-frame::after { content: ''; position: absolute; left: 0; right: 0; top: 55%; border-top: 1px solid rgba(255, 255, 255, .7); }

.intro-title { margin: 0; font-weight: 400; }
.it {
  position: absolute; display: block; white-space: nowrap;
  font: 400 3.567vw/1 var(--titoli); font-size: 3.567cqw; color: var(--bianco);
  /* origine riga -> bordo alto dell'inchiostro (Abril Fatface, line-height 1) */
  transform: translate(-.025em, -.135em);
}
.it-nel { left: 12.45%; top: 21.21%; }
.it-centro { left: 12.45%; top: 36.85%; font-size: 9.987vw; font-size: 9.987cqw; transform: translate(-.015em, -.895em); }
.it-di { left: 12.45%; top: 38.89%; }
.it-sorge { left: 53.28%; top: 65.74%; }
.it-catt { left: 53.44%; top: 73.62%; font-size: 7.209vw; font-size: 7.209cqw; }

/* Foto a tutto schermo (dietro l'intro), logo:
   tutti sotto i livelli dell'intro (z 2), come su DOOM dove compaiono solo quando la finestra si allarga. */
.hero-photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.home-logo {
  position: absolute; z-index: 1; left: 4%; top: 50px; width: 190px; height: 86px;
  display: flex; align-items: center;
  font: 400 26px/1 var(--titoli); color: var(--bianco); text-decoration: none;
}
.home-logo:focus-visible { outline: 2px solid var(--bianco); outline-offset: 3px; }

/* ---------- Strisce loghi ---------- */
.strip { overflow: hidden; height: 80px; width: 100%; }
.strip-track { list-style: none; margin: 0; padding: 0; display: flex; width: max-content; will-change: transform; }
.strip-track li { flex: none; height: 80px; padding-right: 100px; display: flex; align-items: center; }
.strip-track img { display: block; height: 80px; width: auto; max-width: none; }
.strip-1 { position: absolute; left: 0; top: calc(100% - 207px); z-index: 1; transform: translateY(20px); }
/* Su DOOM il contenitore da 120 sta 20px sotto l'hero e 20px sopra la presentazione (top 2vh + 20). */
.strip-2-wrap { height: 120px; padding: 20px 0; margin: 20px 0; background: var(--bianco); }
.strip-2 img { filter: invert(1); opacity: .5; }

/* ---------- 3: presentazione ---------- */
.presentazione { padding: 20px 0 0; min-height: 247px; }
.pres-col { width: min(500px, calc(100% - 40px)); margin: 0 auto; text-align: center; }
.pres-h, .pres-p { margin: 8px 0 16px; font: 400 17px/25px var(--titoli); color: #222; }
.pres-h b { font-size: 18px; font-weight: 400; }

/* ---------- 4: righe ---------- */
.riga { border-top: 1px solid var(--nero); border-bottom: 1px solid var(--nero); padding: 0 10px; }
.riga + .riga { margin-top: -1px; }
.riga-in { max-width: 900px; margin: 0 auto; display: flex; align-items: center; gap: 20px; padding: 10px 0; }
.riga .rosone { flex: none; }
.riga-txt { flex: 1; min-width: 0; }
.riga-h { margin: 0 0 20px; font: 400 40px/40px var(--titoli); letter-spacing: .01em; color: var(--nero); }
.riga-h a, .contatti-h a { color: inherit; text-decoration: none; }
.riga-h a:focus-visible, .contatti-h a:focus-visible { outline: 2px solid var(--nero); outline-offset: 3px; }
.riga-p { margin: 0 0 14.4px; font: 400 18px/27px var(--corpo); color: #333; }
.pills { display: flex; flex-wrap: wrap; gap: 16px 54px; width: 526px; max-width: 100%; padding: 19.6px 27px 0; }
/* Misure DOOM: descrizione -> bottoni 34px; righe senza descrizione: titolo -> bottone 94px; bottone singolo allineato al titolo. */
.riga-h + .pills { padding-top: 74px; }
.pills > .pill:only-child { margin-left: -27px; }

/* ---------- 5: contattaci ---------- */
.contatti { margin-top: 30px; padding: 0 10px; }
/* Altezza come DOOM (194 = titolo 40 + 20 + testo 27 + 20 + bottone 37 + 50). La foto del team sta a sinistra
   in una colonna laterale (griglia 1fr auto 1fr): il blocco di testo resta centrato sulla pagina come su DOOM. */
.contatti-in {
  max-width: 900px; margin: 0 auto; padding: 0 0 50px;
  display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 20px; align-items: start; text-align: center;
}
.contatti-txt { grid-column: 2; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.contatti-foto { grid-column: 1; grid-row: 1; justify-self: start; display: block; width: 100%; max-width: 336px; height: auto; aspect-ratio: 2688 / 1152; object-fit: cover; }
.contatti-h { margin: 0; font: 400 40px/40px var(--titoli); letter-spacing: .01em; color: var(--nero); }
.contatti-p { margin: 0; font: 400 18px/27px var(--corpo); color: #333; }
.pills-center { justify-content: center; padding: 0; width: auto; }
.pills-center > .pill:only-child { margin-left: 0; }

/* ---------- Breakpoint (tabella "Breakpoint" del riferimento) ---------- */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .intro-art { --wx: 40.24%; --wy: 33.94%; --ww: 19.63%; --wh: 30.51%; width: min(100%, 100vh * 1024 / 1311); aspect-ratio: 1024 / 1311; }
  .it { font-size: 4.418vw; font-size: 4.418cqw; }
  .it-nel { left: 9.87%; top: 26.31%; }
  .it-centro { left: 9.87%; top: 34.86%; font-size: 12.45vw; font-size: 12.45cqw; }
  .it-di { left: 9.87%; top: 36.00%; }
  .it-sorge { left: 47.96%; top: 63.39%; }
  .it-catt { left: 48.14%; top: 67.80%; font-size: 8.959vw; font-size: 8.959cqw; }
  .home-logo { width: 150px; height: 68px; font-size: 22px; }
}
@media (max-width: 767px) {
  .intro-art { --wx: 34.88%; --wy: 32.16%; --ww: 30.45%; --wh: 33.86%; width: min(100%, 100vh * 430 / 765); aspect-ratio: 430 / 765; }
  .it { font-size: 6.428vw; font-size: 6.428cqw; }
  .it-nel { left: 9.76%; top: 18.96%; }
  .it-centro { left: 9.76%; top: 27.98%; font-size: 17.96vw; font-size: 17.96cqw; }
  .it-di { left: 9.76%; top: 29.02%; }
  .it-sorge { left: 29.31%; top: 66.40%; }
  .it-catt { left: 29.76%; top: 70.98%; font-size: 12.92vw; font-size: 12.92cqw; }
  .home-logo { width: 150px; height: 68px; font-size: 22px; top: 30px; }

  /* Misure DOOM a 390: rosone -> titolo 10, descrizione -> bottoni 34, titolo -> bottone 94, bottoni impilati a 15, 10 sotto. */
  .riga-in { flex-direction: column; align-items: stretch; gap: 10px; }
  .riga .rosone { width: 100%; height: auto; aspect-ratio: 1; }
  .riga-txt { text-align: center; }
  .riga-h { font-size: min(40px, 10vw); line-height: 1; }
  .pills { width: auto; flex-direction: column; align-items: center; gap: 15px; padding: 19.6px 0 0; }
  .pills > .pill:only-child { margin-left: 0; }

  .contatti-in { display: flex; flex-direction: column; align-items: center; gap: 20px; }
  .contatti-foto { max-width: 240px; }
}