/* ============================================================================
   InsightLearn Design System — Motion Recipes (Fase 3 Week 1, 2026-04-21)

   Keyframes e classi utility per le 5 recipes citate nello spec Fase 3 §6:
     1. fade-rise on viewport entry
     2. stagger reveal
     3. magnetic hover (via CSS custom property, attivato da JS)
     4. elastic press
     5. page transition (via View Transitions API in motion.js)

   Tutte le motion hanno fallback automatico per prefers-reduced-motion: reduce
   (transizione a opacita' < 200 ms, senza translate/scale).
   ============================================================================ */

/* === KEYFRAMES ============================================================ */

@keyframes il-fade-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes il-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes il-scale-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes il-slide-in-right {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes il-pulse-soft {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.02); }
}

@keyframes il-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* === RECIPES (utility classes) ============================================ */

/* 1. Fade-rise on viewport entry
   Uso: aggiungere .il-fade-rise al componente; IntersectionObserver in motion.js
   aggiunge .is-visible quando entra nel viewport. */
.il-fade-rise {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--duration-normal) var(--ease-out-expo),
                transform var(--duration-normal) var(--ease-out-expo);
    will-change: opacity, transform;
}

.il-fade-rise.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 2. Stagger reveal — usare --i come indice child (da 0 a max 7).
   <ul class="il-stagger">
     <li style="--i:0">...</li>
     <li style="--i:1">...</li>
   </ul>
*/
.il-stagger > * {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--duration-normal) var(--ease-out-expo),
                transform var(--duration-normal) var(--ease-out-expo);
    transition-delay: calc(var(--i, 0) * 40ms);
}

.il-stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* 3. Magnetic hover — JS in motion.js aggiorna --mx/--my sul mousemove.
   Solo desktop con cursor:fine-pointer. */
@media (hover: hover) and (pointer: fine) {
    .il-magnetic {
        transition: transform var(--duration-fast) var(--ease-out-expo);
        will-change: transform;
        transform: translate3d(
            calc(var(--mx, 0) * 6%),
            calc(var(--my, 0) * 6%),
            0
        );
    }
}

/* 4. Elastic press — feedback tattile su CTA/card */
.il-press {
    transition: transform var(--duration-instant) var(--ease-out-expo);
}

.il-press:active {
    transform: scale(0.97);
}

/* 5. Shimmer per skeleton loader (gia' usato in CourseSkeletonLoader,
   standardizzato qui) */
.il-skeleton {
    background: linear-gradient(
        90deg,
        var(--color-neutral-100) 0%,
        var(--color-neutral-200) 50%,
        var(--color-neutral-100) 100%
    );
    background-size: 200% 100%;
    animation: il-shimmer 1.4s linear infinite;
    border-radius: var(--radius-md);
}

/* === HERO CINEMATIC (scroll-driven, con fallback) ========================= */

.il-hero-cinematic {
    position: relative;
    min-height: 90vh;
    overflow: hidden;
}

.il-hero-cinematic__title {
    will-change: opacity, transform;
}

@supports (animation-timeline: scroll()) {
    .il-hero-cinematic__title {
        animation: il-hero-parallax linear both;
        animation-timeline: scroll(root block);
        animation-range: 0 60vh;
    }
}

@keyframes il-hero-parallax {
    0%   { opacity: 1;   transform: translateY(0)    scale(1);    }
    100% { opacity: 0.2; transform: translateY(-40px) scale(0.98); }
}

/* Senza supporto animation-timeline, il titolo resta statico. Nessun degrado. */

/* === PULSE CTA (hero call-to-action) ====================================== */

.il-pulse-cta {
    animation: il-pulse-soft 1.8s var(--ease-in-out-quart) infinite;
}

/* === VIEW TRANSITIONS (scope in-page: dropdown, chart range) ============== */

/* Feature query via selector() — piu' diretto del test su view-transition-name:
   verifica l'esistenza dello pseudo-element, non solo della proprieta' CSS. */
@supports selector(::view-transition-old(root)) {
    ::view-transition-old(root) {
        animation: il-fade-in var(--duration-fast) var(--ease-in-out-quart) reverse;
    }
    ::view-transition-new(root) {
        animation: il-fade-in var(--duration-normal) var(--ease-out-expo);
    }
}

/* === REDUCED MOTION ======================================================= */
/* Override globale: transizioni ridotte a solo opacita', durata <= 200ms,
   nessun translate/scale. Rispetto del setting utente, requisito WCAG 2.3.3. */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .il-fade-rise,
    .il-stagger > * {
        opacity: 1 !important;
        transform: none !important;
    }

    .il-pulse-cta,
    .il-skeleton {
        animation: none !important;
    }
}