/* ==========================================================================
   ATLAS ESTATE — HERO CINEMATOGRAFICO
   Stage pinnato scrubbato dallo scroll, bande di testo, sistema di
   leggibilita a quattro livelli, hero statico ai cinque gate.
   Standard: docs/MOTION.md · 10k-websites/references/scrub-pipeline.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · STRUTTURA
   L'altezza si dimensiona in distanza di scroll, non in secondi.
   Sotto-dimensionarla fa passare ogni didascalia come un lampo, per quanto bene
   siano tarate le bande. Ma nemmeno si allunga per principio: il numero giusto
   e il piu piccolo che supera il flick test, perche ogni vh in piu e pagina che
   il visitatore deve scorrere. Con 27,8 secondi di journey 1300vh passa, ma anche
   1200vh passa: si tiene il piu corto. Vedi docs/MOTION.md §9.
   -------------------------------------------------------------------------- */
.hero{
  position: relative;
  height: 1200vh;      /* 6 segmenti · 27,83s · flick test superato. Vedi MOTION.md §9 */
  z-index: var(--z-content);
}

.hero__stage{
  position: sticky;
  inset-block-start: 0;
  height: 100vh;
  height: 100svh;      /* niente salto quando la barra del browser mobile si ritira */
  overflow: hidden;
  background: var(--canvas);
  isolation: isolate;
}

/* --------------------------------------------------------------------------
   2 · I LIVELLI DELLO STAGE
   -------------------------------------------------------------------------- */
.hero__poster,
.hero__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__poster{
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
  background-color: var(--canvas);
  z-index: 1;
}

.hero__video{
  z-index: 2;
  opacity: 0;
  transition: opacity 600ms var(--ease-cine);
  /* layer di compositing proprio: i suoi repaint non trascinano la pagina */
  will-change: transform;
  transform: translateZ(0);
}
.hero__stage.is-video-ready .hero__video{ opacity: 1; }
.hero__stage.is-video-failed .hero__video{ display: none; }

/* --- Livello 1 del sistema di leggibilita: lo scrim globale ---------------
   Un solo oscuramento radiale morbido, sempre attivo, cosi nessun fotogramma
   e mai crudo dietro alla pagina. Attenua, non appiattisce. */
.hero__scrim{
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: var(--scrim-base);
}

/* --------------------------------------------------------------------------
   3 · L'ANELLO DI CARICAMENTO
   Onesto: mostra il progresso reale del Blob. Un anello bloccato e peggio di
   nessun anello, per questo il watchdog lo sostituisce con una freccia.
   -------------------------------------------------------------------------- */
.hero__loader{
  position: absolute;
  inset-block-end: var(--sp-7);
  inset-inline-end: var(--gutter);
  z-index: 6;
  width: 34px;
  height: 34px;
  color: var(--accent);
  opacity: .8;
  transition: opacity var(--dur-ui) var(--ease-out);
}
.hero__stage.is-video-ready .hero__loader{ opacity: 0; pointer-events: none; }

.hero__ring{ width: 100%; height: 100%; transform: rotate(-90deg); }
.hero__ring circle{
  transition: stroke-dashoffset 120ms linear;
}

.hero__chevron{
  position: absolute;
  inset-block-end: var(--sp-7);
  inset-inline-end: var(--gutter);
  z-index: 6;
  width: 24px;
  height: 24px;
  color: var(--accent);
  animation: hero-chevron 2.6s var(--ease-cine) infinite;
  animation-delay: -.9s;
}
@keyframes hero-chevron{
  0%, 100%{ transform: translateY(0); opacity: .55; }
  50%     { transform: translateY(6px); opacity: 1; }
}

/* --------------------------------------------------------------------------
   4 · LE BANDE DI TESTO
   Vivono nello spazio negativo del footage, deciso in fase di concept.
   La corsia d'azione centrale resta libera.
   -------------------------------------------------------------------------- */
.hero__bands{
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.band{
  position: absolute;
  z-index: 1;
  opacity: 0;
  will-change: opacity;
  /* Livello 3: ombra del testo a tre strati. */
  text-shadow: var(--tshadow);
}
/* Un'etichetta ombreggiata su un bottone sembra sporca. */
.band .ae-btn{ text-shadow: none; }

/* Il microcopy sotto la CTA usa il grigio piu debole della palette, che sul
   canvas pieno funziona e SOPRA IL FOOTAGE sparisce: verificato mettendo il
   testo vero sopra il frame finale vero. Nella hero sale di un gradino e
   tiene la sua ombra. */
/* fit-content non e cosmetico: un riquadro piu largo dei glifi porta l audit
   del pixel peggiore a misurare luce dove non c e testo. Bocciava a 1,78:1
   una riga che sta a 8,20:1. */
.band .ae-cta-note{
  width: fit-content;
  color: var(--text-secondary);
  text-shadow: var(--tshadow);
}

/* Oro su cielo del tramonto: 1,01:1, le due luminanze coincidono e la riga
   sparisce. Limite del colore, non del velo. Nella hero l occhiello passa ad
   avorio, coerente col Brand Book: l oro e accento raro. Vedi D-22. */
.band__eyebrow,
.band .ae-eyebrow{ color: var(--text-primary); }
.band a,
.band button{ pointer-events: auto; }

/* --- Livello 2: lo scrim per banda ----------------------------------------
   Segue l'opacita della banda e si approfondisce con --k, cosi il footage si
   scurisce esattamente mentre quel testo e acceso, e in nessun altro momento.
   Il gradiente muore al 76% perche gli angoli restino vivi. */
.band::before{
  content: "";
  position: absolute;
  inset: -70% -45%;
  z-index: -1;
  pointer-events: none;
  opacity: calc(.25 + .75 * var(--k, 1));
  /* In radial-gradient(ellipse RX RY) le percentuali sono RAGGI, non
     copertura: con rx 92% l ellisse esce dalla scatola, viene tagliata dai
     bordi, e il taglio si vede come un rettangolo. Inscritta (50%) non puo
     disegnare bordi. La copertura si allarga con la SCATOLA. Vedi D-24. */
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(var(--scrim-color), var(--scrim-peak, .66)) 0%,
    rgba(var(--scrim-color), var(--scrim-peak, .66)) 45%,
    rgba(var(--scrim-color), 0) 88%);
}

/* Posizioni. La corsia centrale resta sgombra dove il soggetto e centrale. */
.band--1{
  inset-block-start: clamp(6rem, 16vh, 11rem);
  inset-inline-start: var(--gutter);
  max-width: min(46rem, 62vw);
  --scrim-peak: .80;   /* cielo del tramonto: il fondo piu chiaro di tutta la catena */
}
.band--2{
  inset-block-start: 34vh;
  inset-inline-end: var(--gutter);
  max-width: min(30rem, 46vw);
  text-align: right;
  --scrim-peak: .78;   /* orizzonte arancione dietro le parole di destra */
}
.band--3{
  inset-block-end: 22vh;
  inset-inline-start: var(--gutter);
  max-width: min(34rem, 52vw);
  --scrim-peak: .70;
}
/* Banda 4: l'arco e centrale, il testo sta ai due lati.
   Mai un solo scrim steso attraverso il centro: due ellissi ancorate alle
   colonne, corsia centrale intatta, cosi l'arco resta luminoso. */
.band--4{
  inset-block-start: 50%;
  inset-inline: var(--gutter);
  transform: translateY(-50%);
  max-width: none;
  --scrim-peak: 0;                 /* lo scrim unico centrale e disattivato */
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  justify-items: start;
}
@media (min-width: 900px){
  .band--4{
    grid-template-columns: minmax(0, 22rem) 1fr minmax(0, 22rem);
    align-items: center;
  }
  .band--4 > :nth-child(1){ grid-column: 1; }
  .band--4 > :nth-child(2){ grid-column: 3; text-align: right; justify-self: end; }
}
.band--4::before{ display: none; }
.band--4 > *{ position: relative; }
.band--4 > *::before{
  content: "";
  position: absolute;
  inset: -85% -55%;
  z-index: -1;
  pointer-events: none;
  opacity: calc(.25 + .75 * var(--k, 1));
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(var(--scrim-color), .72) 0%,
    rgba(var(--scrim-color), .72) 45%,
    rgba(var(--scrim-color), 0) 88%);
}

/* Banda 5: il settle. Qui converge tutto, quindi torna un solo scrim,
   centrato in alto rispetto al blocco. */
.band--5{
  inset-block-end: clamp(4rem, 14vh, 9rem);
  inset-inline-start: var(--gutter);
  max-width: min(44rem, 68vw);
}

/* Il settle e alto quattro elementi: un ellisse centrata lascia scoperti i
   due estremi, dove stanno titolo e microcopy (2,30:1 e 1,73:1). Serve uno
   scrim d angolo ancorato in basso a sinistra. */
/* Un gradiente lineare orizzontale non cade in verticale: dove finisce la
   scatola si interrompe di netto, e su un muro in ombra quel bordo si vede
   (misurato per differenza). Ora uno strato solo, e una maschera verticale lo
   azzera PRIMA del bordo. Vedi D-20. */
.band--5::before{
  inset: -70% -64% -46% -32%;
  background: linear-gradient(to right,
    rgba(var(--scrim-color), .40) 0%,
    rgba(var(--scrim-color), .32) 34%,
    rgba(var(--scrim-color), .16) 58%,
    rgba(var(--scrim-color), 0) 88%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 66%, transparent 96%);
          mask-image: linear-gradient(to top, #000 0%, #000 66%, transparent 96%);
}

@media (max-width: 900px){
  .band--2{ inset-inline: var(--gutter); text-align: left; max-width: none; }
  .band--3, .band--5{ inset-inline-end: var(--gutter); max-width: none; }
}

/* --------------------------------------------------------------------------
   5 · TIPOGRAFIA DELLE BANDE
   -------------------------------------------------------------------------- */
.band__eyebrow{
  display: block;
  margin-block-end: var(--sp-4);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  width: fit-content;   /* il riquadro deve combaciare coi glifi: vedi D-19 */
}

.band__title{
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-hero);
  color: var(--text-primary);
  max-width: 16ch;      /* ch sull'elemento di testo, mai sul contenitore */
}

.band__line{
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: var(--ls-h2);
  color: var(--text-primary);
  max-width: 22ch;
}
.band--2 .band__line{ margin-inline-start: auto; }

/* La zona d ombra e una FRAZIONE dell inquadratura (32%), il testo in rem
   e costante: a 1920 ci stava per sedici pixel, a 1440 usciva (1,36:1). Corpo
   e larghezza seguono vw. Vedi D-19. */
.band__settle-title{
  font-family: var(--font-display);
  font-size: clamp(1.9rem, calc(3vw - 4.8px), 3.6rem);
  font-weight: var(--fw-medium);
  line-height: 1.1;
  letter-spacing: var(--ls-h2);
  width: fit-content;
  max-width: min(20ch, 32vw);
}
.band__sub{
  margin-block-start: var(--sp-4);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--text-primary);
  width: fit-content;
  max-width: min(40ch, 32vw);
}
.band__actions{
  margin-block-start: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-6);
}

/* --------------------------------------------------------------------------
   6 · COREOGRAFIA
   Solo transform e opacity, scrubbate dalla custom property --k della banda
   (0 -> 1 di assemblaggio), completamente reversibili in scroll-up.
   Ogni entrata echeggia cio che il footage sta facendo in quel momento.
   -------------------------------------------------------------------------- */
.w{ display: inline-block; white-space: pre; }
.c{ display: inline-block; }

/* (f) drift-down — banda 1: la camera scende, le parole scendono */
[data-entrance="drift"] .w{
  --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.8, 1);
  opacity: var(--kc);
  transform: translateY(calc((1 - var(--kc)) * -26px));
}

/* (h) halves parting — banda 2: la citta si apre lateralmente */
[data-entrance="part"] .w{
  --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.6, 1);
  opacity: var(--kc);
  transform: translateX(calc((1 - var(--kc)) * var(--jx, 0px)));
}

/* (b) grid snap-align — banda 3: la linea d'oro traccia da sinistra */
[data-entrance="snap"] .c{
  --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 3, 1);
  opacity: var(--kc);
  transform: translateX(calc((1 - var(--kc)) * var(--jx, -14px)));
}

/* (g) approach-from-depth — banda 4: ci si avvicina all'arco.
   Il gemello sfocato porta un blur STATICO: il filtro non si anima mai,
   non e compositor friendly. Si incrociano le due opacita. */
[data-entrance="approach"]{
  --kc: clamp(0, var(--k, 0) * 1.15, 1);
}
[data-entrance="approach"] .band__line{
  transform: scale(calc(.86 + .14 * var(--kc)));
  opacity: var(--kc);
}
[data-entrance="approach"] .band__soft{
  position: absolute;
  inset: 0;
  filter: blur(9px);
  opacity: calc(1 - var(--kc));
  pointer-events: none;
}

/* (e) word-rise in settle a tre tempi — banda 5: l'arrivo, il riposo */
[data-entrance="settle"] .band__settle-title .w{
  --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.6, 1);
  opacity: var(--kc);
  transform: translateY(calc((1 - var(--kc)) * 20px));
}
[data-entrance="settle"] .band__sub{
  --ks: clamp(0, (var(--k, 0) - .58) * 3.4, 1);
  opacity: var(--ks);
  transform: translateY(calc((1 - var(--ks)) * 14px));
}
[data-entrance="settle"] .band__actions{
  --kb: clamp(0, (var(--k, 0) - .74) * 4.2, 1);
  opacity: var(--kb);
  transform: translateY(calc((1 - var(--kb)) * 12px));
}

/* --------------------------------------------------------------------------
   7 · HERO STATICO — I CINQUE GATE
   Le cinque query devono restare IDENTICHE carattere per carattere qui e in
   hero-scrub.js, altrimenti un lato carica cio che l'altro nasconde.
   Non e un ripiego: e un layout progettato.
   -------------------------------------------------------------------------- */
.hero-static{ display: none; }

@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce){

  .hero{ height: auto; }
  .hero__stage{ display: none; }

  .hero-static{
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 92svh;
    padding: calc(var(--header-h-sm) + var(--sp-8)) 0 var(--sp-8);
    overflow: hidden;
    isolation: isolate;
  }
  .hero-static__bg{
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
  }
  .hero-static__scrim{
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      linear-gradient(to top,
        rgba(6,21,39,.94) 0%,
        rgba(6,21,39,.72) 38%,
        rgba(6,21,39,.30) 68%,
        rgba(6,21,39,.42) 100%);
  }
  .hero-static__inner{ width: 100%; }
  .hero-static__title{
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 1.4rem + 6.4vw, 4rem);
    font-weight: var(--fw-medium);
    line-height: 1.06;
    letter-spacing: var(--ls-h1);
    max-width: 14ch;
    text-shadow: var(--tshadow);
  }
  .hero-static__sub{
    margin-block-start: var(--sp-5);
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    max-width: 34ch;
    color: var(--text-primary);
    text-shadow: var(--tshadow);
  }
  .hero-static__actions{
    margin-block-start: var(--sp-6);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }
  .hero-static__actions .ae-btn--primary{ width: 100%; }
}

/* Guardia collaterale per schermi capaci ma solo bassi: una finestra desktop
   schiacciata, non un telefono. Si tiene lo scrub e si nascondono gli overlay
   piccoli, che non hanno spazio. */
@media (max-height: 560px) and (pointer: fine){
  .hero__loader, .hero__chevron{ display: none; }
}

/* --------------------------------------------------------------------------
   8 · REDUCED MOTION
   Il video non viene mai caricato: e uno dei cinque gate.
   Tutto cio che e coreografato si mostra nel suo stato finale.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .band{ opacity: 1; --k: 1; }
  .band .w, .band .c{ opacity: 1; transform: none; }
  .hero__chevron{ animation: none; }
}