/**
 * Base Animation & Creative Styles
 */

/* Smooth Scroll (Lenis) recommended styles */
html.lenis {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

/* Soft Hiding: only hide if JS is active and intended to handle it */
body.js-active [data-animate]:not(.is-ready) {
    opacity: 0;
    animation: backup-reveal 0.5s forwards;
    animation-delay: 4s;
    /* After JS fallback */
}

@keyframes backup-reveal {
    to {
        opacity: 1;
        visibility: visible;
    }
}

[data-animate].is-ready {
    opacity: 1 !important;
    animation: none !important;
}

/* Global Reveal on Scroll */
.reveal-on-scroll {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
    /* Safety: auto-reveal after 2s if JS never fires */
    animation: reveal-fallback 0.6s ease-out 2s forwards;
}

/* No-JS fallback: always visible */
body:not(.js-active) .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

@keyframes reveal-fallback {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: scale(1);
    animation: none;
}

@keyframes fade-in-scale-up {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Specific architectural reveals can keep visibility for curtain effects */
.reveal-curtain:not(.is-ready) {
    visibility: hidden;
}

/* Premium Reveal Masks */
.reveal-curtain {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transition: clip-path 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}

.reveal-curtain.is-ready {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Parallax Drifting */
[data-parallax] {
    will-change: transform;
}

/* 3D Perspective Context */
.perspective-container {
    perspective: 1200px;
}

/* Stacking Sections Utility */
[data-animate="stack"] {
    z-index: 1;
    position: relative;
}

/* Horizontal Scroll Styles */
[data-animate="horizontal"] {
    overflow: hidden;
    height: 100vh;
    display: flex;
    align-items: center;
}

.horizontal-wrapper {
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
    height: 100%;
}

.horizontal-item {
    flex: 0 0 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Magnetic Elements */
[data-magnetic] {
    display: inline-flex;
    /* Changed from inline-block for better alignment */
    align-items: center;
    justify-content: center;
}

/* Specific fix for hamburger which MUST be flex */
.hamburger-toggle[data-magnetic] {
    display: flex;
}

/* Mask Reveal Base */
.reveal-mask {
    position: relative;
    overflow: hidden;
}

/* Custom Cursor */
.custom-cursor {
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99999;
    mix-blend-mode: difference;
    transition: width 0.3s, height 0.3s, background 0.3s;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

body.cursor-active .custom-cursor {
    opacity: 1;
}

/* WebGL Canvas Background */
[data-webgl] {
    position: relative;
    overflow: hidden;
}

[data-webgl] canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: -1;
    pointer-events: none;
}

/* SplitText Wrappers */
.word-wrapper {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    margin-right: 0.2em;
}

.word {
    display: inline-block;
    will-change: transform;
}

/* Glitch Effect Utility */
.glitch-text {
    position: relative;
    animation: glitch 5s infinite;
}

@keyframes glitch {
    0% {
        transform: translate(0);
    }

    1% {
        transform: translate(-2px, 2px);
    }

    2% {
        transform: translate(2px, -2px);
    }

    3% {
        transform: translate(0);
    }

    100% {
        transform: translate(0);
    }
}

/* Section Stacking Depth */
.section-overlap {
    margin-top: -10vh;
    z-index: 2;
}

/* Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}