/* ============================================================
   GANDINI LAB — MOTION / MICROANIMAZIONI
   Principio: transizioni lente e morbide, la luce/il movimento accompagnano.
   Mai "effetto wow". Usa i token in tokens.css. Rispetta reduced-motion.
   ============================================================ */

/* transizione fluida del tema (toggle light/dark) */
:root { --theme-transition: background-color var(--dur-slow) var(--ease-standard),
                            color var(--dur-slow) var(--ease-standard),
                            border-color var(--dur-slow) var(--ease-standard); }
.theming, .theming * { transition: var(--theme-transition) !important; }

/* ---------- KEYFRAMES ---------- */
@keyframes gl-rise   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes gl-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes gl-scale  { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes gl-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes gl-line   { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- ENTRATE (page-load) ---------- */
.anim-rise   { opacity: 0; animation: gl-rise   var(--dur-slower) var(--ease-out) forwards;
               animation-delay: var(--anim-delay, 0ms); }
.anim-fade   { opacity: 0; animation: gl-fade   var(--dur-slow)   var(--ease-standard) forwards;
               animation-delay: var(--anim-delay, 0ms); }
.anim-scale  { opacity: 0; animation: gl-scale  var(--dur-slow)   var(--ease-out) forwards;
               animation-delay: var(--anim-delay, 0ms); }
.anim-reveal { animation: gl-reveal var(--dur-slower) var(--ease-out) forwards;
               animation-delay: var(--anim-delay, 0ms); }

/* cascata: ogni figlio entra con un ritardo incrementale */
[data-stagger] > * { opacity: 0; animation: gl-rise var(--dur-slower) var(--ease-out) forwards; }
[data-stagger] > *:nth-child(1){ animation-delay: calc(var(--stagger-step) * 1); }
[data-stagger] > *:nth-child(2){ animation-delay: calc(var(--stagger-step) * 2); }
[data-stagger] > *:nth-child(3){ animation-delay: calc(var(--stagger-step) * 3); }
[data-stagger] > *:nth-child(4){ animation-delay: calc(var(--stagger-step) * 4); }
[data-stagger] > *:nth-child(5){ animation-delay: calc(var(--stagger-step) * 5); }
[data-stagger] > *:nth-child(6){ animation-delay: calc(var(--stagger-step) * 6); }
[data-stagger] > *:nth-child(7){ animation-delay: calc(var(--stagger-step) * 7); }
[data-stagger] > *:nth-child(8){ animation-delay: calc(var(--stagger-step) * 8); }

/* ---------- SCROLL-REVEAL (richiede il piccolo JS in fondo a tokens-demo) ---------- */
.reveal { opacity: 0; transform: translateY(20px);
          transition: opacity var(--dur-slower) var(--ease-out),
                      transform var(--dur-slower) var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- HOVER / INTERAZIONE ---------- */
/* lift impercettibile (card) */
.hover-lift { transition: transform var(--dur-base) var(--ease-standard),
                          box-shadow var(--dur-base) var(--ease-standard); }
.hover-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* sottolineatura che si disegna da sinistra */
.link-underline { position: relative; text-decoration: none; color: inherit; }
.link-underline::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-standard);
}
.link-underline:hover::after { transform: scaleX(1); }

/* freccia che avanza dolcemente (CTA) */
.nudge { display: inline-block; transition: transform var(--dur-base) var(--ease-standard); }
:hover > .nudge, .nudge-parent:hover .nudge { transform: translateX(4px); }

/* immagine che respira lentamente all'hover (entro un overflow:hidden) */
.media-zoom { overflow: hidden; }
.media-zoom > img, .media-zoom > .media { transition: transform var(--dur-ambient) var(--ease-standard); }
.media-zoom:hover > img, .media-zoom:hover > .media { transform: scale(1.045); }

/* ---------- FOCUS ---------- */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm);
}

/* ---------- ACCESSIBILITÀ: riduci il movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-delay: 0ms !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}