/**
 * Animations CSS - SCROLL-SAFE Architecture
 * 
 * PRINCIPLE: NO content is ever hidden by CSS.
 * All content is ALWAYS visible regardless of scroll position.
 * Animations are cosmetic only - never control visibility.
 */

/* ==========================================
   ALL CONTENT VISIBLE - NO EXCEPTIONS
   ========================================== */

/* These classes exist but do NOT hide content.
   They only mark elements for optional cosmetic effects. */
.scroll-reveal,
.scroll-reveal-left,
.scroll-reveal-right,
.scroll-reveal-scale,
.stagger-children>*,
.stagger-container>* {
    /* ALWAYS VISIBLE - no opacity manipulation */
    opacity: 1;
    transform: none;
    visibility: visible;
}

/* ==========================================
   COSMETIC TRANSITIONS ONLY
   These enhance appearance but never hide
   ========================================== */

/* Subtle hover effects - purely cosmetic */
.enhance-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.enhance-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ==========================================
   REDUCED MOTION SUPPORT
   ========================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================
   PARALLAX SECTIONS (decorative only)
   ========================================== */

.parallax-section {
    position: relative;
    overflow: hidden;
}

.parallax-bg {
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    height: 120%;
    object-fit: cover;
    z-index: -1;
}

/* ==========================================
   SCROLL PADDING
   ========================================== */

html {
    scroll-padding-top: 80px;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ==========================================
   LOADING STATES
   ========================================== */

.loading,
.loaded {
    /* No visibility manipulation - content always visible */
    visibility: visible;
    opacity: 1;
}