/* ============================================================
   APL Team — sistema di animazioni
   Blocco 1: buchi-fustella sulle immagini (effetto firma)
   Il quadrato usa il colore del fondo sezione (--apl-hole, letta
   dal JS via getComputedStyle; fallback #FFFFFF) e simula un foro
   nell'immagine. Bordo interno 1px per leggibilità su foto chiare.
   ============================================================ */

.apl-imgwrap {
  position: relative;
  display: block;
  overflow: visible;
  line-height: 0;
  /* le immagini verticali usano height:100% + object-fit: il wrapper
     non deve spezzare la catena delle altezze */
  height: 100%;
}

/* contenitore interno: ritaglia lo zoom hover senza tagliare i fori */
.apl-imgclip {
  display: block;
  overflow: hidden;
  position: relative; /* ancora per .apl-corner */
  height: 100%;
  border-radius: 8px;
  line-height: 0;
}

.apl-corner {
  --cell: 22px;
  --gap: 4px;
  position: absolute;
  top: 0;
  right: 0;
  width: calc(var(--cell) * 4 + var(--gap) * 3);
  height: calc(var(--cell) * 3 + var(--gap) * 2);
  pointer-events: none;
}

.apl-corner i {
  position: absolute;
  display: block;
  width: calc(var(--cell) * var(--sc));
  height: calc(var(--cell) * var(--sc));
  right: calc((var(--cell) + var(--gap)) * var(--col));
  top: calc((var(--cell) + var(--gap)) * var(--row));
  background: var(--apl-hole, #FFFFFF);
  opacity: 0;
  transform: scale(.2);
  transition:
    opacity .38s cubic-bezier(.16,1,.3,1) var(--d),
    transform .38s cubic-bezier(.16,1,.3,1) var(--d);
}

/* bordino di leggibilità: attivato dal JS solo quando l'angolo
   dell'immagine è chiaro (luminosità campionata via canvas) */
.apl-imgwrap.apl-edge .apl-corner i {
  box-shadow: inset 0 0 0 1px rgba(17,33,77,.08);
}

.apl-imgwrap.apl-in .apl-corner i {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 767px) {
  .apl-corner { --cell: 14px; --gap: 3px; }
}

/* ============================================================
   Blocco 2 — ingresso in viewport
   ============================================================ */
.apl-rise {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.apl-rise.apl-in { opacity: 1; transform: none; }

/* ============================================================
   Blocco 3 — stagger sulle griglie di card
   ============================================================ */
.apl-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
.apl-stagger.apl-in > * { opacity: 1; transform: none; }
.apl-stagger.apl-in > *:nth-child(1) { transition-delay: 0ms; }
.apl-stagger.apl-in > *:nth-child(2) { transition-delay: 80ms; }
.apl-stagger.apl-in > *:nth-child(3) { transition-delay: 160ms; }
.apl-stagger.apl-in > *:nth-child(4) { transition-delay: 240ms; }
.apl-stagger.apl-in > *:nth-child(5) { transition-delay: 320ms; }

/* ============================================================
   Blocco 4 — mosaico hero: animazione di composizione.
   Ogni cella entra con delay --d (dal basso-sinistra verso l'alto-
   destra, calcolato dal JS: distanza × 60ms). La scala base --bs
   preserva la dissolvenza delle celle ridotte .s/.t (anche lo style
   inline del widget usa --bs, non transform). Le celle vuote .e non
   si animano.
   ============================================================ */
.apl-grid .c:not(.e) {
  --bs: 1;
  opacity: 0;
  transform: scale(calc(var(--bs) * .35));
  transition:
    opacity .42s cubic-bezier(.16,1,.3,1) var(--d, 0ms),
    transform .42s cubic-bezier(.16,1,.3,1) var(--d, 0ms);
}
.apl-grid .c.s { --bs: .55; }
.apl-grid .c.t { --bs: .32; }
.apl-grid.apl-in .c:not(.e) {
  opacity: 1;
  transform: scale(var(--bs));
}

/* ============================================================
   Blocco 4b — parallasse sulle fasce full width
   Il JS sposta la background-image su un layer interno sovradimensionato
   (±15%): niente background-attachment:fixed, che su iOS è rotto.
   ============================================================ */
.apl-parallax {
  position: relative;
  overflow: hidden;
}
.apl-parallax-img .apl-imgclip { overflow: hidden; }
.apl-parallax-img .apl-imgclip img {
  height: calc(100% + 80px) !important;
  top: -40px;
  position: relative;
  will-change: transform;
}
.apl-parallax__layer {
  position: absolute;
  left: 0; right: 0;
  top: -18%; bottom: -18%;
  background-size: cover;
  background-position: center;
  will-change: transform;
  pointer-events: none;
}

/* ============================================================
   Blocco 5 — hover
   ============================================================ */
/* card (la classe apl-card è applicata dal JS alle card delle griglie) */
.apl-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.apl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 6px rgba(17,33,77,.10), 0 18px 36px rgba(17,33,77,.13);
  border-color: #1ABCE6;
}
/* card del widget posts (news) */
.elementor-posts .elementor-post {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.elementor-posts .elementor-post:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 6px rgba(17,33,77,.10), 0 18px 36px rgba(17,33,77,.13);
  border-color: #1ABCE6;
}

/* menu principale: underline animato da sinistra */
.elementor-nav-menu--main .elementor-item::after {
  transition: width .22s cubic-bezier(.16,1,.3,1) !important;
}

/* bottoni */
.elementor-button {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.elementor-button:hover { transform: translateY(-1px); }

/* zoom immagini dentro link: l'immagine zooma nel clip, i fori restano fermi */
.apl-imgclip img { transition: transform .4s cubic-bezier(.16,1,.3,1); }
a:hover .apl-imgwrap .apl-imgclip img,
.apl-imgwrap a:hover .apl-imgclip img { transform: scale(1.03); }

/* ============================================================
   Blocco 6 — page transition tra le pagine
   Nativa (cross-document View Transitions) dove supportata:
   Chrome/Edge 126+, Safari 18.2+. Dove non lo è (Firefox),
   il browser ignora la regola e naviga normalmente; il fallback
   fade-in qui sotto è attivato da una classe messa via JS inline
   nell'<head> solo quando manca CSSViewTransitionRule.
   ============================================================ */
@view-transition {
  navigation: auto;
}
/* dip to navy: la pagina vecchia svanisce sul fondo navy, breve
   istante di navy pieno, poi la nuova emerge. Il backdrop della
   transizione è il navy di brand. */
::view-transition {
  background-color: #11214D;
}
::view-transition-old(root) {
  animation: apl-vt-out .5s cubic-bezier(.45,.05,.35,1) both;
}
::view-transition-new(root) {
  /* il delay (.55s) tiene la nuova pagina invisibile finché la vecchia
     non è svanita: è lì che si vede il navy */
  animation: apl-vt-in .8s cubic-bezier(.45,.05,.35,1) .55s both;
}
@keyframes apl-vt-out {
  to { opacity: 0; transform: translateY(-10px); }
}
@keyframes apl-vt-in {
  from { opacity: 0; transform: translateY(12px); }
}
/* header e footer hanno il proprio gruppo: essendo identici tra le
   pagine restano fermi durante la transizione (continuità alla igel).
   ATTENZIONE: view-transition-name rende l'elemento uno stacking
   context; senza z-index esplicito il dropdown del menu finirebbe
   dietro le hero (che hanno position:relative per il gradiente). */
.elementor-location-header {
  view-transition-name: apl-header;
  position: relative;
  z-index: 500;
}
.elementor-location-footer { view-transition-name: apl-footer; }

/* header e footer devono restare IMMOBILI: senza queste regole il
   browser interpola posizione/altezza tra i due snapshot (es. header
   sticky compresso sulla pagina di partenza vs pieno su quella di
   arrivo) e si vede un piccolo scivolamento verticale. */
::view-transition-group(apl-header),
::view-transition-image-pair(apl-header),
::view-transition-old(apl-header),
::view-transition-new(apl-header),
::view-transition-group(apl-footer),
::view-transition-image-pair(apl-footer),
::view-transition-old(apl-footer),
::view-transition-new(apl-footer) {
  animation: none;
}
/* Anti-sdoppiamento: navigando da una pagina scrollata, l'header sticky
   è position:fixed e lo snapshot VECCHIO del gruppo ne cattura l'ink
   overflow (~uno schermo sotto l'origine del wrapper): ricomposto sulla
   pagina nuova compariva un secondo header a metà pagina. Lo snapshot
   vecchio non serve (il nuovo è identico): non lo dipingiamo. */
::view-transition-old(apl-header) {
  display: none;
}

/* fallback: solo fade-in all'arrivo, nessuna intercettazione del click */
@media not (prefers-reduced-motion: reduce) {
  html.apl-vt-fallback body {
    animation: apl-page-in .6s ease-in-out both;
  }
}
@keyframes apl-page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   Mosaico hero su mobile: il calcolo delle celle è pensato per le
   colonne desktop e sotto i 768px la griglia esplode fuori dal suo
   contenitore. Su mobile la hero resta solo testuale.
   ============================================================ */
@media (max-width: 767px) {
  .apl-grid { display: none !important; }
}

/* ============================================================
   Accessibilità — chi disattiva le animazioni vede tutto statico
   e completo. NON spostare: deve restare in fondo al file.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .apl-in, .apl-in > *, .apl-corner i, [class*="apl-"] {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  /* griglia hero: già composta, senza animazione, con le scale base
     preservate (la regola generica sopra azzererebbe i transform) */
  .apl-grid .c {
    opacity: 1 !important;
    transform: scale(var(--bs, 1)) !important;
    transition: none !important;
  }
  /* page transition: swap istantaneo, nessuna animazione */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
  html.apl-vt-fallback body { animation: none !important; }
}