/* =============================================
   ADVANCED ANIMATIONS
   ============================================= */

/* ===== HERO PARALLAX ===== */
.hero__background {
    will-change: transform;
    transform: translateZ(0);
}

/* ===== TEXT REVEAL ===== */
.reveal-text {
    position: relative;
    overflow: hidden;
    display: block;
}

.reveal-text span {
    display: inline-block;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
    will-change: transform, opacity;
}

.reveal-text.visible span {
    transform: translateY(0);
    opacity: 1;
}

/* Stagger delays for letters/words are handled in JS */

/* Custom Cursor removed to allow CSS Brush Cursor */

/* ===== MAGNETIC BUTTONS ===== */
.btn-magnetic {
    display: inline-block;
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* ===== PAGE TRANSITION ===== */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-dark);
    z-index: 10001;
    transform: scaleY(0);
    transform-origin: top;
    pointer-events: none;
}

.page-transition.active {
    animation: pageSwipe 1s cubic-bezier(0.85, 0, 0.15, 1) forwards;
}

@keyframes pageSwipe {
    0% {
        transform: scaleY(0);
        transform-origin: top;
    }

    45% {
        transform: scaleY(1);
    }

    55% {
        transform: scaleY(1);
        transform-origin: bottom;
    }

    100% {
        transform: scaleY(0);
        transform-origin: bottom;
    }
}

/* ===== PAINT SPLASH ===== */
.paint-splash-particle {
    position: fixed;
    pointer-events: none;
    background: var(--primary-blue);
    border-radius: 50%;
    z-index: 9998;
}

@keyframes splashDrop {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(var(--tx), var(--ty)) scale(var(--scale));
        opacity: 0;
    }
}