/* ==========================================================================
   La Parola alla Scuola — Animation System (v5)
   - CSS hides reveal targets BEFORE first paint (no flash).
   - All x-reveal.X variants are explicitly enumerated because Alpine
     modifiers are part of the attribute NAME, not its value, so a plain
     [x-reveal] selector wouldn't match `[x-reveal.up]` etc.
   - JS removes hide on intersect; 0.8s safety net catches stuck content.
   ========================================================================== */


/* ---------- 1. SCROLL REVEAL --------------------------------------------- */

/* Base hide + transition for every reveal target */
[x-reveal],
[x-reveal\.up], [x-reveal\.up\.stagger],
[x-reveal\.down], [x-reveal\.down\.stagger],
[x-reveal\.left], [x-reveal\.left\.stagger],
[x-reveal\.right], [x-reveal\.right\.stagger],
[x-reveal\.scale], [x-reveal\.scale\.stagger],
[x-reveal\.pop], [x-reveal\.pop\.stagger],
[x-reveal\.tilt-l], [x-reveal\.tilt-l\.stagger],
[x-reveal\.tilt-r], [x-reveal\.tilt-r\.stagger],
[x-reveal\.blur], [x-reveal\.blur\.stagger],
.reveal {
    opacity: 0;
    transition:
        opacity .85s cubic-bezier(.16, 1, .3, 1),
        transform .85s cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform;
}

/* Direction-specific transforms while hidden */
[x-reveal\.up]:not(.is-visible),
[x-reveal\.up\.stagger]:not(.is-visible),
.reveal.reveal-up:not(.is-visible) { transform: translateY(28px); }

[x-reveal\.down]:not(.is-visible),
[x-reveal\.down\.stagger]:not(.is-visible),
.reveal.reveal-down:not(.is-visible) { transform: translateY(-28px); }

[x-reveal\.left]:not(.is-visible),
[x-reveal\.left\.stagger]:not(.is-visible),
.reveal.reveal-left:not(.is-visible) { transform: translateX(-32px); }

[x-reveal\.right]:not(.is-visible),
[x-reveal\.right\.stagger]:not(.is-visible),
.reveal.reveal-right:not(.is-visible) { transform: translateX(32px); }

[x-reveal\.scale]:not(.is-visible),
[x-reveal\.scale\.stagger]:not(.is-visible),
.reveal.reveal-scale:not(.is-visible) { transform: scale(.94); }

[x-reveal\.pop]:not(.is-visible),
[x-reveal\.pop\.stagger]:not(.is-visible),
.reveal.reveal-pop:not(.is-visible) { transform: scale(.88); }

[x-reveal\.tilt-l]:not(.is-visible),
[x-reveal\.tilt-l\.stagger]:not(.is-visible),
.reveal.reveal-tilt-l:not(.is-visible) { transform: rotate(-2deg) translateY(20px); }

[x-reveal\.tilt-r]:not(.is-visible),
[x-reveal\.tilt-r\.stagger]:not(.is-visible),
.reveal.reveal-tilt-r:not(.is-visible) { transform: rotate(2deg) translateY(20px); }

[x-reveal\.blur]:not(.is-visible),
[x-reveal\.blur\.stagger]:not(.is-visible),
.reveal.reveal-blur:not(.is-visible) { transform: translateY(14px); }

/* Visible state (added by JS) */
.is-visible {
    opacity: 1 !important;
    transform: none !important;
}

/* Stagger delays */
.delay-1  { transition-delay: 80ms; }
.delay-2  { transition-delay: 160ms; }
.delay-3  { transition-delay: 240ms; }
.delay-4  { transition-delay: 320ms; }
.delay-5  { transition-delay: 400ms; }
.delay-6  { transition-delay: 480ms; }
.delay-7  { transition-delay: 560ms; }
.delay-8  { transition-delay: 640ms; }
.delay-9  { transition-delay: 720ms; }
.delay-10 { transition-delay: 800ms; }
.delay-11 { transition-delay: 880ms; }
.delay-12 { transition-delay: 960ms; }


/* ---------- 2. HOVER (cards / buttons) ---------------------------------- */

.hover-pop {
    transition:
        transform .25s cubic-bezier(.34, 1.4, .64, 1),
        box-shadow .25s ease;
}
.hover-pop:hover  { transform: translate(-3px, -3px); }
.hover-pop:active { transform: translate(1px, 1px); }

.hover-tilt { transition: transform .3s cubic-bezier(.22, .61, .36, 1); }
.hover-tilt:hover { transform: rotate(-1.5deg) translateY(-2px); }

.hover-glare { position: relative; overflow: hidden; isolation: isolate; }
.hover-glare::before {
    content: '';
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .25) 50%, transparent 100%);
    transform: skewX(-22deg);
    transition: left .9s cubic-bezier(.22, .61, .36, 1);
    pointer-events: none;
    z-index: 1;
}
.hover-glare:hover::before { left: 130%; }

.draw-underline { position: relative; }
.draw-underline::after {
    content: '';
    position: absolute;
    left: 0; bottom: -2px;
    width: 100%; height: 2px;
    background: currentColor;
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
.draw-underline:hover::after { transform: scaleX(1); }


/* ---------- 3. NEUTRALIZED LEGACY CLASSES (no-ops) ---------------------- */

.hover-grow,
.hover-bounce,
.hover-wiggle,
.hover-spin,
.hover-arrow,
.hover-lift,
.wobble-anim,
.bob-anim,
.pin-wiggle,
.pulse-ring,
.gentle-spin,
.float-anim,
.float-anim-slow,
.float-anim-fast,
.pop-in {
    animation: none !important;
}
.pulse-ring::after { content: none !important; }


/* ---------- 4. MASCOT FLOAT --------------------------------------------- */

.mascot-float {
    animation: mascotFloat 5.5s ease-in-out infinite !important;
    will-change: transform;
}
@keyframes mascotFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}


/* ---------- 5. ACCESSIBILITY -------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    [x-reveal],
    [x-reveal\.up], [x-reveal\.up\.stagger],
    [x-reveal\.down], [x-reveal\.down\.stagger],
    [x-reveal\.left], [x-reveal\.left\.stagger],
    [x-reveal\.right], [x-reveal\.right\.stagger],
    [x-reveal\.scale], [x-reveal\.scale\.stagger],
    [x-reveal\.pop], [x-reveal\.pop\.stagger],
    [x-reveal\.tilt-l], [x-reveal\.tilt-l\.stagger],
    [x-reveal\.tilt-r], [x-reveal\.tilt-r\.stagger],
    [x-reveal\.blur], [x-reveal\.blur\.stagger],
    .reveal {
        transition: opacity .25s ease !important;
        transform: none !important;
    }
    .is-visible { transform: none !important; }

    .mascot-float,
    .hover-glare::before {
        animation: none !important;
        transition: none !important;
    }
    .hover-pop:hover,
    .hover-tilt:hover { transform: none !important; }
    .draw-underline::after { display: none !important; }
}