/* ════════════════════════════════════════════════════════════════════
   FASE 21.D — Motion presets (2026-05-09)
   ────────────────────────────────────────────────────────────────────
   CSS-only motion library for CMS sections. Each preset has an initial
   "before" state; the JS adds `.is-in-view` when the section enters
   the viewport, transitioning to the "after" state.

   Presets:
     fade-in        — opacity 0 → 1 (default for all sections)
     slide-up       — opacity 0 + translateY(20px) → none
     slide-in-left  — opacity 0 + translateX(-30px) → none
     slide-in-right — opacity 0 + translateX(30px) → none
     zoom-in        — opacity 0 + scale(0.96) → none
     none           — no animation (operator opt-out)

   Accessibility: respects prefers-reduced-motion: reduce. Users who
   have motion-sensitivity enabled in their OS get instant rendering
   (initial-state collapses to final-state, no transition).
   ──────────────────────────────────────────────────────────────────── */

.platforma-motion-wrap {
    /* Wrapper acts as the observed element. The inner <section> keeps
       its semantic role + aria-label intact. */
    display: contents;
}

/* Use a containing block fallback when display:contents is not respected
   (e.g. inside grid contexts). The :where() makes sure existing rules
   remain unbroken. */
@supports not (display: contents) {
    .platforma-motion-wrap { display: block; }
}

/* ── Initial states (BEFORE in-view) ─────────────────────────────── */

.platforma-motion-wrap[data-motion="fade-in"] > section,
.platforma-motion-wrap[data-motion="slide-up"] > section,
.platforma-motion-wrap[data-motion="slide-in-left"] > section,
.platforma-motion-wrap[data-motion="slide-in-right"] > section,
.platforma-motion-wrap[data-motion="zoom-in"] > section {
    opacity: 0;
    transition:
        opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}

.platforma-motion-wrap[data-motion="slide-up"] > section {
    transform: translateY(20px);
}

.platforma-motion-wrap[data-motion="slide-in-left"] > section {
    transform: translateX(-30px);
}

.platforma-motion-wrap[data-motion="slide-in-right"] > section {
    transform: translateX(30px);
}

.platforma-motion-wrap[data-motion="zoom-in"] > section {
    transform: scale(0.96);
}

/* ── Final states (in-view) ───────────────────────────────────────── */

.platforma-motion-wrap.is-in-view[data-motion="fade-in"] > section,
.platforma-motion-wrap.is-in-view[data-motion="slide-up"] > section,
.platforma-motion-wrap.is-in-view[data-motion="slide-in-left"] > section,
.platforma-motion-wrap.is-in-view[data-motion="slide-in-right"] > section,
.platforma-motion-wrap.is-in-view[data-motion="zoom-in"] > section {
    opacity: 1;
    transform: none;
}

/* ── No-animation opt-out ─────────────────────────────────────────── */

.platforma-motion-wrap[data-motion="none"] > section {
    /* Pin opacity 1 in case browser inherits a stale opacity from a
       parent transition. No-op otherwise. */
    opacity: 1;
}

/* ── Editor preview override ──────────────────────────────────────── */

/* Inside the CMS editor's live-preview iframe, motion would distract
   from click-to-edit interactions (operator clicks a faded section that
   visually moves on hover). Disable motion entirely when the editor
   passes ?preview=true or the preview iframe injects body[data-edit-mode]. */
body[data-edit-mode="true"] .platforma-motion-wrap > section,
body[data-edit-mode="true"] .platforma-motion-wrap[data-motion] > section {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* ── prefers-reduced-motion: collapse to no-op ───────────────────── */

@media (prefers-reduced-motion: reduce) {
    .platforma-motion-wrap[data-motion] > section {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ── Lazy-no-JS fallback ──────────────────────────────────────────── */

/* If JS fails to load or IntersectionObserver isn't available, the
   sections would stay at opacity:0 forever — visitor sees a blank page.
   <noscript> safety: if JS is disabled, force is-in-view via :root class.
   Set by inline <noscript><style>...</style></noscript> in the layout. */
.no-js .platforma-motion-wrap[data-motion] > section {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}