/**
 * GSAP Animations CSS
 *
 * Classes to add in Bricks:
 *   animate-heading   → word-by-word reveal
 *   animate-image     → clip-path reveal with scale
 *   animate-button    → left-to-right clip reveal
 *   animate-fade-up   → fade + move up on scroll
 *   animate-stagger   → stagger children on scroll
 */

/* ============================================================
   PRELOADER
   ============================================================ */

#site-preloader {
    position: fixed;
    inset: 0;
    background: #0d0d0d;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: all;
    will-change: transform;
    transition: transform 0.85s cubic-bezier(0.76, 0, 0.24, 1);
}

#site-preloader.is-exiting {
    transform: translateY(-100%);
}

/* ── Logo ── */
.preloader-logo-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: preloader-logo-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.preloader-logo {
    width: 220px;
    max-width: 60vw;
    height: auto;
    object-fit: contain;
}

@keyframes preloader-logo-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Progress bar ── */
.preloader-progress {
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

.preloader-bar {
    height: 100%;
    width: 0%;
    background: #ffffff;
    transform-origin: left center;
    will-change: width;
    animation: preloader-fill 1.4s ease-in-out forwards;
}

@keyframes preloader-fill {
    from { width: 0%; }
    to   { width: 100%; }
}

/* ============================================================
   JS FAILURE FALLBACK
   If GSAP never loads, reveal all animated elements after 3s
   so content is never permanently invisible.
   ============================================================ */

@keyframes anim-reveal-fallback {
    to { opacity: 1; transform: none; }
}

/* ============================================================
   HEADING WORD ANIMATION
   Class: animate-heading
   ============================================================ */

/* Prevent flash of unstyled content */
.animate-heading:not([data-word-animated]) {
    opacity: 0;
    animation: anim-reveal-fallback 0s 3s forwards;
}

.word-animate {
    display: inline-block;
    opacity: 0;
    transform: translateY(50px);
    will-change: opacity, transform;
}

/* ============================================================
   IMAGE REVEAL ANIMATION
   Class: animate-image
   ============================================================ */

.image-animate-wrapper {
    overflow: hidden;
    position: relative;
}

.image-animate-wrapper:not([data-image-animated]) .animate-image {
    clip-path: inset(100% 0 0 0);
    transform: scale(1.1);
    animation: anim-reveal-fallback 0s 3s forwards;
}

.image-animate-wrapper .animate-image {
    display: block;
    width: 100%;
    height: auto;
    will-change: clip-path, transform;
}

/* ============================================================
   BUTTON ANIMATION
   Class: animate-button
   ============================================================ */

.animate-button:not([data-button-animated]) {
    clip-path: inset(0 100% 0 0);
    transform: scale(0.95);
    animation: anim-reveal-fallback 0s 3s forwards;
}

.animate-button {
    will-change: clip-path, transform;
    display: inline-block;
}

.animate-button[data-button-animated="true"] {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.animate-button[data-button-animated="true"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ============================================================
   FADE UP ANIMATION
   Class: animate-fade-up
   ============================================================ */

.animate-fade-up:not([data-fade-animated]) {
    opacity: 0;
    transform: translateY(60px);
    animation: anim-reveal-fallback 0s 3s forwards;
}

.animate-fade-up {
    will-change: opacity, transform;
}

/* ============================================================
   STAGGER ANIMATION
   Class on parent: animate-stagger
   ============================================================ */

/* Hide children before JS processes the container */
.animate-stagger:not([data-stagger-animated]) > *,
.animate-stagger:not([data-stagger-animated]) > * > * {
    opacity: 0;
    transform: translateY(40px);
    animation: anim-reveal-fallback 0s 3s forwards;
}

.animate-stagger > * {
    will-change: opacity, transform;
}

/* ============================================================
   TEXT ANIMATION
   Class: animate-text
   ============================================================ */

.animate-text:not([data-text-animated]) {
    opacity: 0;
    transform: translateY(24px);
    animation: anim-reveal-fallback 0s 3s forwards;
}

.animate-text {
    will-change: opacity, transform;
}


/* ============================================================
   GENERAL
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
    overflow: visible;
}

/* ============================================================
   ACCESSIBILITY — respect reduced motion preference
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    #site-preloader {
        display: none !important;
    }

    .animate-heading,
    .animate-fade-up,
    .animate-text {
        opacity: 1 !important;
        transform: none !important;
    }

    .word-animate {
        opacity: 1 !important;
        transform: none !important;
    }

    .animate-stagger:not([data-stagger-animated]) > * {
        opacity: 1 !important;
        transform: none !important;
    }

    .image-animate-wrapper .animate-image {
        clip-path: none !important;
        transform: none !important;
    }

    .animate-button {
        clip-path: none !important;
        transform: none !important;
        transition: none !important;
    }
}