/**
 * animations.css — Frigotel CSS Animations
 *
 * Handles CSS-native animations and initial states:
 *  - Initial states for GSAP entry animations
 *  - Pure CSS hover interactions
 *  - Loading skeleton states
 *  - Accessibility overrides (reduced motion)
 *
 * Orchestration and scroll-triggered sequences are handled
 * by GSAP in assets/js/animations.js.
 *
 * @package Frigotel
 */

/* =========================================================
   ANIMATION INITIAL STATES
   (GSAP will animate these to their final state)
========================================================= */

/**
 * .anim-fade-up — Section reveal via ScrollTrigger.
 * Initial state: hidden and shifted down.
 * GSAP will animate this to opacity: 1 and transform: translateY(0).
 */
.anim-fade-up {
    opacity: 0;
    transform: translateY(20px);
    will-change: transform, opacity; /* Promote to GPU layer for smoother animation */
}

/**
 * .anim-fade-in — simple opacity reveal (no movement).
 */
.anim-fade-in {
    opacity: 0;
    will-change: opacity;
}

/**
 * .anim-slide-left — Reveal from the right.
 */
.anim-slide-left {
    opacity: 0;
    transform: translateX(40px);
    will-change: transform, opacity;
}

/**
 * .anim-slide-right — Reveal from the left.
 */
.anim-slide-right {
    opacity: 0;
    transform: translateX(-40px);
    will-change: transform, opacity;
}

/**
 * .anim-scale-in — Subtle scale expansion.
 */
.anim-scale-in {
    opacity: 0;
    transform: scale(0.92);
    will-change: transform, opacity;
}
/* =========================================================
   PAGE TRANSITION OVERLAY
   GSAP fades this element in/out during page navigation.
========================================================= */

#page-transition-overlay {
    position: fixed;
    inset: 0; /* Modern shorthand for top/right/bottom/left: 0 */
    z-index: var(--z-overlay);
    background-color: var(--color-bianco);
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}

/* =========================================================
   PREFERS-REDUCED-MOTION
   Respect system accessibility preferences.
   When active: disable all transitions, animations, GSAP
   initial states (reset to visible).
========================================================= */

@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;
    }

    /* Reset all GSAP initial states so content is visible */
    .anim-fade-up,
    .anim-fade-in,
    .anim-slide-left,
    .anim-slide-right,
    .anim-scale-in {
        opacity: 1 !important;
        transform: none !important;
    }
}