/* ==========================================================================
   VIDIM — CSS di supporto alle animazioni (fase 2)

   Contiene SOLO cio che serve al funzionamento di GSAP/ScrollTrigger e Lenis.
   Il rendering statico a 1512px resta identico: gli elementi aggiunti per
   l'animazione (schermate 02/03, numeri 02/03) partono a opacity 0 e sono
   fuori dal flusso, quindi non spostano nulla e non cambiano le altezze.

   Caricato DOPO i fogli di sezione e DOPO i responsive.
   ========================================================================== */

/* --- Lenis ----------------------------------------------------------------
   Le tre regole richieste dalla libreria. `html.lenis` viene aggiunta dal JS:
   se il JS non parte, la pagina scrolla nativamente e nulla di questo si
   applica. */
html.lenis,
html.lenis body { height: auto; }

.lenis.lenis-smooth { scroll-behavior: auto !important; }

.lenis.lenis-stopped { overflow: clip; }

.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* --- How Vidim Helps: le tre schermate sovrapposte -------------------------
   Il box .how__media e gia 696x700 con overflow hidden. Le tre immagini si
   sovrappongono in assoluto: la 01 e visibile, le altre due sono pronte a
   incrociare. Senza JS resta visibile solo la 01, cioe lo stato di Figma. */
.how__media { position: relative; }

.how__media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.how__media-img--02,
.how__media-img--03 { opacity: 0; }

/* --- How Vidim Helps: i tre numeri decorativi -----------------------------
   Erano un solo <span> assoluto; ora sono tre nella stessa posizione.
   `.how-card__num` porta gia position:absolute e le coordinate dal foglio di
   sezione: qui si aggiunge solo lo stato iniziale dei due nascosti. */
.how-card__num--02,
.how-card__num--03 { opacity: 0; }

/* --- How Vidim Helps: i tre blocchi di testo ------------------------------
   Nel foglio di sezione i blocchi 02 e 03 hanno un offset verticale di 20px,
   che era la loro posizione in Figma da layer nascosti. Per l'incrocio devono
   partire dallo stesso punto del 01, altrimenti il testo scivola durante la
   dissolvenza. Sono a opacity 0, quindi spostarli non cambia nulla a video. */
.how-card__text--02,
.how-card__text--03 { top: 50%; }

/* --- Core Capabilities: la pista che scorre -------------------------------
   .core__cards resta il box da 639px. .core__track e la colonna che contiene
   le 8 card e che il JS trasla in verticale.
   Senza JS il box conserva il proprio scroll interno e il comportamento e
   quello di prima: nessuna regressione se lo script non parte. */
.core__track {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);                    /* 8px, come l'auto-layout Figma */
  width: 100%;
  will-change: transform;
}

/* Quando il JS prende il controllo disattiva lo scroll nativo del box:
   la lista si muove solo con lo scroll di pagina, come richiesto. */
.core__cards.is-pinned {
  overflow: hidden;
  overscroll-behavior: none;
}

/* --- Sezioni in pin -------------------------------------------------------
   ScrollTrigger avvolge la sezione in un wrapper: questa regola evita che il
   sotto/sopra della pagina lampeggi durante il pin su schermi con scrollbar
   in overlay. */
.pin-spacer { pointer-events: none; }
.pin-spacer > * { pointer-events: auto; }

/* --- Accessibilita --------------------------------------------------------
   Chi ha ridotto le animazioni di sistema non deve subire ne lo scroll con
   inerzia ne il pin. Il JS legge la stessa preferenza e non inizializza
   nulla; qui si garantisce che gli stati nascosti restino coerenti. */
@media (prefers-reduced-motion: reduce) {
  html.lenis,
  html.lenis body { height: auto; }

  .core__cards { overflow-y: auto; }
}

/* --- Zoom dell'immagine al passaggio del mouse ----------------------------
   Vale per le card che portano da qualche parte: le quattro Application Card
   (che nel component set hanno una variante `Stato = Hover`) e qualunque
   altra card che in futuro diventi un link.

   ⚠️ La QUANTITA di zoom NON viene da Figma: il mockup dichiara la variante
   Hover ma non una trasformazione dell'immagine (`02` §Valori non determinati
   registra che gli stati interattivi delle card non sono specificati). 1.05 e
   600ms sono una scelta mia: abbastanza da accorgersene, poco da non
   distrarre. Se il cliente definisce lo stato in Figma, si cambiano i due
   valori qui sotto e basta.

   Si muove SOLO l'immagine, non l'overlay: la velatura scura serve a tenere
   leggibile il testo e se scalasse anche lei il testo ballerebbe.
   Il ritaglio lo fa `overflow: hidden` gia presente su `.app-card`.
-------------------------------------------------------------------------- */
.app-card__img > img,
.easy-card__img > img {
  transition: transform 600ms cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

/* `hover: hover` esclude i dispositivi touch, dove :hover resta "appiccicato"
   dopo il tap e l'immagine resterebbe zoomata. */
@media (hover: hover) and (pointer: fine) {
  /* Le quattro Application Card zoomano tutte, anche Operations che per ora
     non porta a nessuna pagina: la sezione e una griglia 2x2 e una card ferma
     in mezzo alle altre tre che si muovono si legge come un difetto, non come
     "questa non e cliccabile". Appena Operations avra una destinazione le
     bastera la classe `card-link` per diventare cliccabile come le altre. */
  .app-card:hover .app-card__img > img,
  .card-link:hover .easy-card__img > img {
    transform: scale(1.05);
  }
}

/* Da tastiera: stesso effetto quando il link dentro la card prende il fuoco,
   cosi chi naviga con Tab vede quale card e selezionata. */
.card-link:focus-within .app-card__img > img,
.card-link:focus-within .easy-card__img > img {
  transform: scale(1.05);
}

/* --- Il link che copre tutta la card --------------------------------------
   Il testo del link resta il titolo (quindi ha senso letto da solo da uno
   screen reader), ma l'area cliccabile e l'intera card grazie allo
   pseudo-elemento steso su tutto. `z-index` lo tiene sopra media e overlay,
   ma sotto niente: dentro la card non ci sono altri link.
-------------------------------------------------------------------------- */
.card-link__a { position: static; }

.card-link__a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Il contorno di focus va disegnato sulla card, non sul titolo: il link e
   grande quanto la card, e un anello attorno alle sole parole sarebbe
   fuorviante. */
.card-link:focus-within {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}
.card-link__a:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .app-card__img > img,
  .easy-card__img > img {
    transition: none;
  }
  .card-link:hover .app-card__img > img,
  .card-link:focus-within .app-card__img > img,
  .card-link:hover .easy-card__img > img,
  .card-link:focus-within .easy-card__img > img {
    transform: none;
  }
}

/* `cursor: pointer` e dichiarato su `.app-card` in 05-applications.css perche
   nel mockup le card sono pensate cliccabili. Finche Operations non ha una
   destinazione, su quella il cursore torna quello normale: la manina su una
   card che non fa niente e la piccola bugia che infastidisce di piu. */
.app-card:not(.card-link) { cursor: default; }