/* ============================ CARD HOVER — /digital ============================
   Solo per /digital: le classi .ag-* di assets/agency/main.css sono condivise con
   /agency, quindi l'effetto vive su classi proprie (.dg-*) usate solo da
   layouts/digital/landing.html.

   - eyebrow: freccia chiusa (width 0) che entra da sinistra spingendo il testo
     verso destra (stesso pattern di .fw-arrow in assets/shared/featured-work.css)
   - titolo: il testo scorre via verso l'alto e una copia identica entra dal basso
   ============================================================================== */

.dg-eyebrow { display: inline-flex; align-items: center; }
.dg-eyebrow__arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  width: 0;
  margin-right: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(-0.25em);
  transition: width 0.45s var(--ease), margin-right 0.45s var(--ease),
              opacity 0.4s ease, transform 0.45s var(--ease);
}
.dg-eyebrow__arrow svg { flex: 0 0 auto; width: 1.05em; height: 1.05em; display: block; }

/* Le due copie del titolo: la stessa altezza, una sopra l'altra, clippate dal titolo */
.dg-swap { position: relative; overflow: hidden; }
.dg-swap__a,
.dg-swap__b { display: block; transition: transform 0.55s var(--ease); }
.dg-swap__b { position: absolute; top: 0; left: 0; right: 0; transform: translateY(102%); }

/* ⚠️ Gli stati :hover vanno SEMPRE dietro `@media (hover: hover)`. Su touch il
   browser simula l'hover al tap e poi ce lo lascia appiccicato: la freccia entra
   e il titolo si scambia mentre stai solo aprendo la card — sembra un glitch.
   Il :focus-visible resta fuori dal media query: serve alla tastiera, che esiste
   anche su dispositivi senza mouse. */
@media (hover: hover) {
  .ag-world:hover .dg-eyebrow__arrow,
  .ag-dcard:hover .dg-eyebrow__arrow {
    width: 1.05em;
    margin-right: 0.42em;
    opacity: 1;
    transform: translateX(0);
  }
  .ag-world:hover .dg-swap__a,
  .ag-dcard:hover .dg-swap__a { transform: translateY(-102%); }
  .ag-world:hover .dg-swap__b,
  .ag-dcard:hover .dg-swap__b { transform: translateY(0); }
}

.ag-world:focus-visible .dg-eyebrow__arrow,
.ag-dcard:focus-visible .dg-eyebrow__arrow {
  width: 1.05em;
  margin-right: 0.42em;
  opacity: 1;
  transform: translateX(0);
}
.ag-world:focus-visible .dg-swap__a,
.ag-dcard:focus-visible .dg-swap__a { transform: translateY(-102%); }
.ag-world:focus-visible .dg-swap__b,
.ag-dcard:focus-visible .dg-swap__b { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .dg-eyebrow__arrow, .dg-swap__a, .dg-swap__b { transition: none; }
}