@view-transition {
    navigation: auto;
}

@keyframes sipMasukPotret {
    from {
        opacity: .001;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes sipKeluarPotret {
    from {
        opacity: 1;
    }

    to {
        opacity: .001;
    }
}

@keyframes sipMasukHalaman {
    from {
        opacity: .001;
    }

    to {
        opacity: 1;
    }
}

::view-transition-old(root) {
    animation: sipKeluarPotret .16s ease forwards;
}

::view-transition-new(root) {
    animation: sipMasukPotret .3s cubic-bezier(.22, 1, .36, 1) forwards;
}

body {
    animation: sipMasukHalaman .28s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }

    body {
        animation: none;
    }
}