/* ═══════════════════════════════════════════════════════════════════════════
   ivs-reveal — the site's ONE entrance gesture (rule-wajib/animasi-motion.md).
   ─────────────────────────────────────────────────────────────────────────
   Usage: put data-ivs-reveal on an element (value = optional stagger index,
   0-3) and load this file + js/components/ivs-reveal.js on the page.

   ARM pattern: by default the element is fully visible — this file only
   styles the ARMED state, and only JS (ivs-reveal.js) adds .ivs-reveal-armed.
   No JS (crawler, blocked script) = content simply shows. Never write a
   default opacity:0 here.
   ═══════════════════════════════════════════════════════════════════════════ */

.ivs-reveal-armed {
    opacity: 0;
    transform: translateY(var(--ivs-anim-rise, 16px));
    transition:
        opacity var(--ivs-anim-duration, 650ms) var(--ivs-anim-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
        transform var(--ivs-anim-duration, 650ms) var(--ivs-anim-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
    transition-delay: calc(var(--ivs-reveal-idx, 0) * var(--ivs-anim-stagger, 100ms));
    will-change: opacity, transform;
}

.ivs-reveal-armed.is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .ivs-reveal-armed {
        opacity: 1;
        transform: none;
        transition: none;
    }
}