.reveal {
    /* Reveal state handled by JS to prevent conflicts */
    will-change: transform, opacity;
}

/* Background Animated Gradient Mesh (Simplified for CSS) */
.mesh-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: radial-gradient(circle at 0% 0%, rgba(var(--clr-accent-pink-rgb), 0.05) 0%, transparent 50%),
                radial-gradient(circle at 100% 100%, rgba(var(--clr-accent-cyan-rgb), 0.05) 0%, transparent 50%);
    pointer-events: none;
}

/* Floating Animation */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

.float-anim {
    animation: float 6s ease-in-out infinite;
}

/* Pulse Glow */
@keyframes glow {
    0% { box-shadow: 0 0 5px rgba(var(--clr-accent-pink-rgb), 0.2); }
    50% { box-shadow: 0 0 20px rgba(var(--clr-accent-pink-rgb), 0.5); }
    100% { box-shadow: 0 0 5px rgba(var(--clr-accent-pink-rgb), 0.2); }
}

.glow-anim {
    animation: glow 3s infinite alternate;
}

/* Text Shimmer */
.shimmer-text {
    background: linear-gradient(90deg, #fff, var(--clr-accent-pink), var(--clr-accent-cyan), #fff);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shine 5s linear infinite;
}

@keyframes shine {
    to { background-position: 200% center; }
}

/* Page Transitions (GSAP will handle mostly, but CSS helps) */
.page-wipe {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--clr-bg-dark);
    z-index: 10000;
    pointer-events: none;
    transform: translateX(-100%);
}