/* ============================================
   J4 ATELIER — Scroll Reveal System

   Laura Monin inspired editorial reveal
   Controlled, elegant, minimal
   ============================================ */

/* Base Reveal Classes */
.reveal,
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale {
    opacity: 1;
    transition: opacity 700ms ease-out,
                transform 700ms ease-out;
    will-change: opacity, transform;
}

/* Reveal from Bottom (default) */
.reveal {
    transform: translateY(40px);
}

/* Reveal from Bottom (explicit) */
.reveal-up {
    transform: translateY(50px);
}

/* Reveal from Left */
.reveal-left {
    transform: translateX(-40px);
}

/* Reveal from Right */
.reveal-right {
    transform: translateX(40px);
}

/* Reveal with Scale */
.reveal-scale {
    transform: scale(0.95);
}

/* Visible State */
.reveal.is-visible,
.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

/* Delay Variations (for staggered reveals) */
.reveal-delay-1 {
    transition-delay: 100ms;
}

.reveal-delay-2 {
    transition-delay: 200ms;
}

.reveal-delay-3 {
    transition-delay: 300ms;
}

.reveal-delay-4 {
    transition-delay: 400ms;
}

/* Slow Reveal (for large images) */
.reveal-slow {
    transition-duration: 900ms;
}

/* Fast Reveal (for small elements) */
.reveal-fast {
    transition-duration: 500ms;
}

/* ============================================
   Reduced Motion Support
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-up,
    .reveal-left,
    .reveal-right,
    .reveal-scale {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .reveal.is-visible,
    .reveal-up.is-visible,
    .reveal-left.is-visible,
    .reveal-right.is-visible,
    .reveal-scale.is-visible {
        opacity: 1;
        transform: none;
    }
}

/* ============================================
   No-JS Fallback
   ============================================ */

.no-js .reveal,
.no-js .reveal-up,
.no-js .reveal-left,
.no-js .reveal-right,
.no-js .reveal-scale {
    opacity: 1;
    transform: none;
}

.reveal-enabled :is(.reveal,.reveal-up,.reveal-left,.reveal-right,.reveal-scale):not(.is-visible) { opacity: 0; }