/* ═══════════════════════════════════════════════════════════════════════════
   PARALLAX CURTAIN - PROGRESSIVE ENHANCEMENT
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   BASE: Parallax layer styles
   ─────────────────────────────────────────────────────────────────────────── */

/* Parallax targets both patterns for safety */
.is-parallax .curtain__layer,
.is-parallax .layer[data-speed] {
    will-change: auto;
    transform: translateY(var(--parallax-shift, 0px));
    transition: transform 0.1s ease-out;
}

/* ───────────────────────────────────────────────────────────────────────────
   DESKTOP ONLY: Enable parallax (>=1024px, fine pointer, no reduced motion)
   ─────────────────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) and (pointer: fine) {
    body.parallax-enabled .curtain__layer,
    body.parallax-enabled .layer[data-speed] {
        will-change: transform;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   DISABLE: Mobile, coarse pointer, reduced motion
   ─────────────────────────────────────────────────────────────────────────── */

/* Disable on mobile/tablet */
@media (max-width: 1023px) {
    .curtain__layer,
    .layer[data-speed] {
        will-change: auto;
        transform: none !important;
    }
}

/* Disable on coarse pointer (touch devices) */
@media (pointer: coarse) {
    .curtain__layer,
    .layer[data-speed] {
        will-change: auto;
        transform: none !important;
    }
}

/* Disable when reduced motion is preferred */
@media (prefers-reduced-motion: reduce) {
    .curtain__layer,
    .layer[data-speed] {
        will-change: auto;
        transform: none !important;
        transition: none !important;
    }
}