/* Base Reveal Styles */
/* Default invisible only if JS is active */
.reveal {
    opacity: 0;
    will-change: transform, opacity;
    transition-property: transform, opacity;
    transition-timing-function: cubic-bezier(0.21, 0.45, 0.32, 0.9);
}

/* Fallback: If JS fails or takes too long, we show them via a global class or just opacity 1 */
.no-js .reveal {
    opacity: 1 !important;
    transform: none !important;
}

.reveal.revealed {
    opacity: 1;
    transform: none !important;
}

/* Reveal Variants */
.reveal[data-reveal="up"] {
    transform: translateY(20px);
}

.reveal[data-reveal="down"] {
    transform: translateY(-20px);
}

.reveal[data-reveal="left"] {
    transform: translateX(20px);
}

.reveal[data-reveal="right"] {
    transform: translateX(-20px);
}

.reveal[data-reveal="fade"] {
    transform: none;
}

/* Micro-interactions */
.micro {
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.micro:hover {
    transform: scale(1.02) translateY(-1px);
}

.micro:active {
    transform: scale(0.98);
}

/* Parallax Container */
[data-parallax] {
    position: relative;
    overflow: hidden;
}

.parallax-layer {
    position: absolute;
    top: -15%;
    left: -5%;
    width: 110%;
    height: 130%;
    will-change: transform;
    pointer-events: none;
    z-index: 0;
}

.parallax-layer img,
.parallax-layer .bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .parallax-layer {
        transform: none !important;
    }

    .micro {
        transition: none !important;
        transform: none !important;
    }
}