/* =========================================================================
   Keyframes
   ========================================================================= */

@keyframes spin { to { rotate: 360deg; } }

@keyframes shimmer {
    0%   { left: -60%; }
    55%  { left: 120%; }
    100% { left: 120%; }
}

@keyframes ripple {
    to { transform: scale(2.6); opacity: 0; }
}

/* Toast muncul dari bawah layar, searah dengan posisinya */
@keyframes toast-in {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

@keyframes toast-out {
    to { opacity: 0; transform: translateY(10px); }
}

@keyframes float-soft {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-10px) rotate(1.2deg); }
}

@keyframes particle-rise {
    0%   { opacity: 0; transform: translateY(0) scale(.6); }
    12%  { opacity: .85; }
    100% { opacity: 0; transform: translateY(-78vh) scale(1.15); }
}

@keyframes slow-zoom {
    from { scale: 1.12; }
    to   { scale: 1; }
}

@keyframes scroll-hint {
    0%   { transform: scaleY(0); transform-origin: top; }
    45%  { transform: scaleY(1); transform-origin: top; }
    55%  { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}

@keyframes tick-in {
    from { opacity: 0; transform: translateY(35%); }
    to   { opacity: 1; transform: none; }
}

/* =========================================================================
   Animasi masuk landing page — dijalankan bertahap lewat atribut data-open
   ========================================================================= */

[data-open] {
    opacity: 0;
    transform: translateY(26px);
}

.opening.is-ready [data-open] {
    animation: reveal-up .95s var(--ease-out) forwards;
}

.opening.is-ready [data-open="1"] { animation-delay: .15s; }
.opening.is-ready [data-open="2"] { animation-delay: .35s; }
.opening.is-ready [data-open="3"] { animation-delay: .6s; }
.opening.is-ready [data-open="4"] { animation-delay: .85s; }
.opening.is-ready [data-open="5"] { animation-delay: 1.1s; }

@keyframes reveal-up {
    to { opacity: 1; transform: none; }
}

/* =========================================================================
   Reveal saat elemen masuk viewport — kelas .is-visible dipasang reveal.js
   ========================================================================= */

[data-reveal] {
    opacity: 0;
    transition:
        opacity var(--dur-slow) var(--ease-out),
        transform var(--dur-slow) var(--ease-out),
        clip-path var(--dur-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

[data-reveal="fade-up"]      { transform: translateY(42px); }
[data-reveal="fade-down"]    { transform: translateY(-28px); }
[data-reveal="slide-left"]   { transform: translateX(52px); }
[data-reveal="slide-right"]  { transform: translateX(-52px); }
[data-reveal="zoom-in"]      { transform: scale(.88); }
[data-reveal="stagger"]      { opacity: 1; }

[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/*
 | grow-x dan image-reveal sengaja TIDAK mengecilkan kotak elemennya sendiri.
 | Elemen yang diperkecil menjadi nol (scaleX(0) atau clip-path penuh) memiliki
 | area perpotongan nol, sehingga IntersectionObserver tidak pernah
 | menganggapnya masuk viewport dan animasinya tidak akan pernah berjalan.
 | Karena itu yang dianimasikan adalah isi elemen, bukan kotaknya.
 */

/* Garis emas melebar lewat background-size, kotak elemen tetap utuh */
[data-reveal="grow-x"] {
    opacity: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0% 100%;
    transition: background-size var(--dur-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal="grow-x"].is-visible { background-size: 100% 100%; }

/* Gambar tersingkap dari atas ke bawah; yang diklip adalah <img> di dalamnya */
[data-reveal="image-reveal"] { opacity: 1; }

[data-reveal="image-reveal"] > img {
    clip-path: inset(0 0 100% 0);
    scale: 1.06;
    transition: clip-path var(--dur-slow) var(--ease-out),
                scale var(--dur-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal="image-reveal"].is-visible > img {
    clip-path: inset(0 0 0 0);
    scale: 1;
}

/* Anak dari stagger muncul berurutan; jeda diatur reveal.js */
[data-reveal="stagger"] > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
    transition-delay: var(--stagger-delay, 0ms);
}

[data-reveal="stagger"].is-visible > * {
    opacity: 1;
    transform: none;
}

/* Ornamen yang mengambang halus */
.ornament.is-floating {
    animation: float-soft 7s var(--ease-soft) infinite;
}

/* =========================================================================
   Hormati preferensi sistem: matikan pergerakan, pertahankan keterbacaan
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    [data-reveal],
    [data-reveal="stagger"] > *,
    [data-reveal="image-reveal"] > img,
    [data-open] {
        opacity: 1 !important;
        transform: none !important;
        scale: 1 !important;
        clip-path: none !important;
    }

    [data-reveal="grow-x"] { background-size: 100% 100% !important; }

    .particles,
    .btn--gold::after { display: none; }

    .ornament.is-floating { animation: none; }
}