/* Animazioni della griglia lavori in home. Foglio a sé, caricato da front-page.php subito prima della griglia:
   main.css lo toccano più sessioni e un deploy lo aveva già sovrascritto (25 ott 2026). */
/* ═══════════════════════════════════════════════════════
   ANIMAZIONI GRIGLIA LAVORI (25 ott 2026, v2) — entrata guidata dallo scroll, nativa.
   Scala, posizione e opacità di scheda e foto sono animazioni agganciate alla posizione della
   scheda nello schermo (view timeline): le esegue il processore grafico, il JavaScript non c'entra
   (gemello in fondo a main.js: solo --sd-col e il ripiego per i browser vecchi).
   La scheda parte piccola nel bianco e cresce fino alla sua misura; la foto, dentro la cornice,
   parte ingrandita e si ritira. Con mouse, in uscita dall'alto la scheda si ritira e sfuma.
   Intensità: --sd-da (scala di partenza), --sd-dy (px che risale), --sd-dz (zoom iniziale della foto).
   Si usano `translate`/`scale`/`opacity` e non `transform`, così lo zoom al passaggio del mouse
   (che usa `transform`) non litiga con l'animazione.
═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .sd-work-item {
      --sd-da: .5; --sd-dy: 150px; --sd-dz: 1.3;
      --sd-sf: calc(var(--sd-col, 0) * 8%);          /* ogni colonna parte un po' dopo la precedente */
      view-timeline: --sd-card block;
      animation: sd-card-in linear backwards;
      animation-timeline: --sd-card;
      animation-range: entry var(--sd-sf) contain 25%;   /* dalla striscia che spunta fino a un quarto di strada dopo che è tutta dentro */
    }
    .sd-work-item img {
      animation: sd-foto-in linear backwards;
      animation-timeline: --sd-card;
      animation-range: entry var(--sd-sf) contain 25%;
    }
    /* le immagini ritagliate dal tema sono più grandi della scheda: lo zoom ruota attorno al centro della cornice */
    @supports (width: 1cqw) {
      .sd-fit img.sd-fit__img {
        transform-origin:
          calc(50cqw - clamp(calc(100cqw - var(--w)), calc(50cqw - var(--efx) * var(--w)), 0px))
          calc(50cqh - clamp(calc(100cqh - var(--h)), calc(50cqh - var(--efy) * var(--h)), 0px));
      }
    }
    @media (max-width: 768px) {                       /* telefono: due colonne piccole, movimento più corto */
      .sd-work-item { --sd-da: .74; --sd-dy: 56px; --sd-dz: 1.14; }
    }
    @media (hover: hover) and (pointer: fine) {       /* solo con mouse: anche l'uscita in alto */
      .sd-work-item {
        animation: sd-card-in linear backwards, sd-card-out linear;
        animation-timeline: --sd-card, --sd-card;
        animation-range: entry var(--sd-sf) contain 25%, exit 25% exit 100%;
      }
    }
  }
  @keyframes sd-card-in  { from { opacity: 0; translate: 0 var(--sd-dy); scale: var(--sd-da); } to { opacity: 1; translate: 0 0; scale: 1; } }
  @keyframes sd-foto-in  { from { scale: var(--sd-dz); } to { scale: 1; } }
  @keyframes sd-card-out { from { opacity: 1; scale: 1; } to { opacity: .45; scale: .9; } }

  /* ripiego (browser senza animazioni di scroll): si aprono una volta sola, quando entrano */
  html.sd-anima-ripiego .sd-work-item:not(.sd-visto) { opacity: 0; translate: 0 40px; scale: .92; }
  html.sd-anima-ripiego .sd-work-item { transition: opacity .8s cubic-bezier(.22,.61,.36,1), translate .9s cubic-bezier(.22,.61,.36,1), scale .9s cubic-bezier(.22,.61,.36,1); }
}
.sd-work-meta { transition: transform .45s cubic-bezier(.22,1,.36,1); }
.sd-work-item:hover .sd-work-meta, .sd-work-item:focus-within .sd-work-meta { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
  .sd-work-item:hover .sd-work-meta, .sd-work-item:focus-within .sd-work-meta { transform: none; }
}