/* ============================================================
   MOTION.CSS  —  Meni World  |  Shared Animation Engine
   ------------------------------------------------------------
   1. Generic scroll-reveal contract used by every section
      ( [data-reveal] — moved here from hero.css, now global )
   2. Page enter/exit fade choreography (see motion.js)
   3. Top gradient progress bar shown during a page transition
   4. Reduced-motion escape hatch
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   1. GENERIC SCROLL-REVEAL — [data-reveal]
   ------------------------------------------------------------
   • data-reveal="0".."6"        legacy numeric stagger index
                                  (used by hero.blade.php)
   • data-reveal-type="fade|left|right|scale"   direction variant
   • style="--rd: .18s"          arbitrary custom stagger delay
   ══════════════════════════════════════════════════════════ */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity .65s cubic-bezier(.22, .68, 0, 1.1) var(--rd, 0s),
        transform .65s cubic-bezier(.22, .68, 0, 1.1) var(--rd, 0s);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

[data-reveal-type="fade"] { transform: none; }
[data-reveal-type="left"] { transform: translateX(-28px); }
[data-reveal-type="right"] { transform: translateX(28px); }
[data-reveal-type="scale"] { transform: translateY(14px) scale(.94); }
[data-reveal-type="up"] { transform: translateY(56px); }
[data-reveal-type="down"] { transform: translateY(-56px); }

/* ── 3D "flip" variants — whole block rotates in around one edge ──
   `perspective()` lives inside the transform itself (not on an
   ancestor) so it never turns a parent into a containing block for
   fixed-position descendants — same rule the page-transition code
   above already follows for the fixed navbar. */
[data-reveal-type="flip-left"] {
    transform: perspective(1400px) rotateY(-28deg) translateX(-48px);
    transform-origin: left center;
}
[data-reveal-type="flip-right"] {
    transform: perspective(1400px) rotateY(28deg) translateX(48px);
    transform-origin: right center;
}
[data-reveal-type="flip-up"] {
    transform: perspective(1400px) rotateX(22deg) translateY(56px);
    transform-origin: bottom center;
}
[data-reveal-type="flip-down"] {
    transform: perspective(1400px) rotateX(-22deg) translateY(-56px);
    transform-origin: top center;
}

/* ── whole-SECTION reveals ──────────────────────────────────────
   Marks the top-level <section> of a homepage block (see each
   component's opening tag). A bigger block reads better with a
   touch more time/settle than a small card, so it gets its own
   duration instead of the default .65s in the base rule above. */
[data-reveal-section] {
    transition-duration: .9s;
    transition-timing-function: cubic-bezier(.16, .8, .24, 1);
}

/* legacy numeric stagger index (hero.blade.php) */
[data-reveal="0"] { transition-delay: .05s; }
[data-reveal="1"] { transition-delay: .18s; }
[data-reveal="2"] { transition-delay: .32s; }
[data-reveal="3"] { transition-delay: .46s; }
[data-reveal="4"] { transition-delay: .60s; }
[data-reveal="5"] { transition-delay: .74s; }
[data-reveal="6"] { transition-delay: .90s; }

/* reduced motion: never hide content with CSS while waiting for JS */
@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ══════════════════════════════════════════════════════════
   2. PAGE ENTER / EXIT
   ------------------------------------------------------------
   `.mw-js` is added by a tiny inline script at the very top of
   <head> — but only when the visitor hasn't asked for reduced
   motion — so a disabled/failed script never leaves the page
   permanently invisible. Opacity-only (never transform/filter)
   so the fixed navbar's containing block is never disturbed.
   ══════════════════════════════════════════════════════════ */
html.mw-js body {
    opacity: 0;
}

html.mw-js.mw-page-in body {
    opacity: 1;
    transition: opacity .5s cubic-bezier(.22, .68, 0, 1.1);
}

html.mw-page-out body {
    opacity: 0;
    transition: opacity .24s ease;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   3. TOP PROGRESS BAR
   ══════════════════════════════════════════════════════════ */
.mw-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--color-orange), var(--color-primary) 55%, var(--color-accent));
    box-shadow: 0 0 12px rgba(126, 217, 87, .55);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    html.mw-js body,
    html.mw-js.mw-page-in body,
    html.mw-page-out body {
        opacity: 1 !important;
        transition: none !important;
    }
    .mw-progress { display: none; }
}