/* ─── CSS Fallback Animations ───────────────────────────── */
/* These provide basic animations when JS hasn't loaded yet */

/* Initial hidden state for animated elements */
[data-animate] {
    opacity: 0;
}

/* CSS fallback: fade in after 2s if JS hasn't taken over */
@keyframes fadeInFallback {
    to { opacity: 1; }
}

[data-animate] {
    animation: fadeInFallback 0.5s ease forwards;
    animation-delay: 1.5s;
}

/* Once GSAP takes over, kill the CSS fallback and set base visible state.
   GSAP's gsap.from() will animate FROM opacity:0 TO this opacity:1 */
body.is-loaded [data-animate] {
    animation: none;
    opacity: 1;
}

/* Show immediately if no JS */
.no-js [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    animation: none !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        animation: none !important;
    }
}

/* ─── Scroll Indicator ──────────────────────────────────── */
@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

.scroll-indicator {
    animation: scrollBounce 2s ease-in-out infinite;
}

/* ─── Preloader ─────────────────────────────────────────── */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

body.is-loaded .preloader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ─── Line reveal animation ─────────────────────────────── */
.line-wrap {
    overflow: hidden;
}

/* ─── Custom Cursor (optional) ──────────────────────────── */
.cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    border: 1px solid var(--color-text);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
}

.cursor--hover {
    width: 60px;
    height: 60px;
    border-color: var(--color-accent);
}

@media (hover: none) {
    .cursor {
        display: none;
    }
}