/* ==========================================================================
   Elevators Website - Unified Premium Animation System
   ========================================================================== */

/* Prevent horizontal overflow on mobile from directional slide-ins */
html, body {
    overflow-x: hidden;
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    [data-animate],
    .micro-float {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}

/* Base state for animated elements */
[data-animate] {
    opacity: 0;
    will-change: opacity, transform;
    transition-property: opacity, transform;
    transition-duration: 0.65s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Animation Type #1: Soft Float In */
[data-animate="float"] {
    transform: translateY(25px) scale(0.98);
}

/* Animation Type #2: Right to Center */
[data-animate="from-right"] {
    transform: translateX(45px);
}

/* Animation Type #3: Left to Center */
[data-animate="from-left"] {
    transform: translateX(-45px);
}

/* Animation Type #4: Bottom to Center */
[data-animate="from-bottom"] {
    transform: translateY(35px);
}

/* Animation Type #5: Soft Scale Reveal */
[data-animate="scale"] {
    transform: scale(0.95);
}

/* Hero Staggered Entrance Base State */
[data-animate="hero-stagger"] > * {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Grid Stagger Base State */
[data-animate="stagger-grid"] > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Mobile distance adjustments to prevent layout shifts */
@media (max-width: 768px) {
    [data-animate="from-right"] { transform: translateX(22px); }
    [data-animate="from-left"] { transform: translateX(-22px); }
    [data-animate="from-bottom"], [data-animate="float"] { transform: translateY(20px); }
}

/* ==========================================================================
   TRIGGERED STATES (ANIMATED INTO VIEW)
   ========================================================================== */

[data-animate].in-view {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

[data-animate="hero-stagger"].in-view > * {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

[data-animate="stagger-grid"].in-view > * {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* Animation Type #9: Micro Float (Subtle ambient continuous float) */
@keyframes elevatorsMicroFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.micro-float {
    animation: elevatorsMicroFloat 5s ease-in-out infinite;
}

/* Ensure glass card hover effects work cleanly on top of revealed state */
.glass-panel.in-view,
.glass.in-view,
.gold-border-gradient.in-view {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s ease,
                opacity 0.65s ease;
}