/* ====================================================== */
    /* ANIMATION FIX - SOURCE OF TRUTH */
    /* ====================================================== */

    /*
        Semua reveal lama dinetralkan.
        Animasi sekarang dikendalikan Web Animations API.
    */
    html.motion-js .reveal {
        opacity: 0;
        transform: none;
        filter: none;

        transition: none !important;
        animation: none !important;

        will-change: auto !important;
    }

    html.motion-js .reveal.motion-done {
        opacity: 1;
        transform: none;
        filter: none;
    }




    /* ====================================================== */
    /* SCROLL PROGRESS */
    /* ====================================================== */

    #about-scroll-progress {
        position: fixed;
        top: 0;
        left: 0;

        width: 100%;
        height: 2px;

        z-index: 10001;

        pointer-events: none;

        transform: scaleX(0);
        transform-origin: left center;

        background:
            linear-gradient(
                90deg,
                rgba(14,165,233,.30),
                #0ea5e9 45%,
                #38bdf8 78%,
                rgba(125,211,252,.60)
            );

        box-shadow:
            0 0 14px rgba(14,165,233,.28);
    }


    /* ====================================================== */
    /* SUBTLE HERO PARALLAX */
    /* ====================================================== */

    .hero-visual {
        --about-image-y: 0px;
    }

    .hero-visual img {
        transform:
            translate3d(0, var(--about-image-y), 0)
            scale(1.025);

        transition:
            transform .12s linear;
    }


    /*
        User memang meminta animasi aktif.
        Jadi khusus komponen ini tidak dimatikan oleh setting
        reduced-motion lama yang ada di file sebelumnya.
    */
    @media (prefers-reduced-motion: reduce) {

        #navbar-container {
            transition:
                background .5s cubic-bezier(.16,1,.3,1),
                backdrop-filter .5s cubic-bezier(.16,1,.3,1),
                -webkit-backdrop-filter .5s cubic-bezier(.16,1,.3,1),
                border-color .45s ease,
                padding .5s cubic-bezier(.16,1,.3,1),
                box-shadow .5s ease !important;
        }

        #navbar-container #navbar-inner {
            transition:
                padding .5s cubic-bezier(.16,1,.3,1) !important;
        }

        #nav-indicator {
            transition:
                left .34s cubic-bezier(.16,1,.3,1),
                width .34s cubic-bezier(.16,1,.3,1) !important;
        }

    }