/*
|--------------------------------------------------------------------------
| Garage 46 — Native Cross-document View Transitions
|--------------------------------------------------------------------------
| The browser transitions directly from the old Laravel page to the new one.
| There is no artificial loader and no delayed JavaScript redirect.
|--------------------------------------------------------------------------
*/

@view-transition {
    navigation: auto;
}

.main-header {
    view-transition-name: g46-header;
}

main {
    view-transition-name: g46-main;
}

.site-footer {
    view-transition-name: g46-footer;
}

::view-transition-group(root),
::view-transition-group(g46-main),
::view-transition-group(g46-footer) {
    animation-duration: .58s;
    animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}

::view-transition-old(root) {
    animation: g46-native-root-out .32s ease both;
}

::view-transition-new(root) {
    animation: g46-native-root-in .58s cubic-bezier(.22, 1, .36, 1) both;
}

::view-transition-old(g46-main) {
    animation: g46-native-main-out .28s ease both;
}

::view-transition-new(g46-main) {
    animation: g46-native-main-in .58s cubic-bezier(.22, 1, .36, 1) both;
}

::view-transition-old(g46-header),
::view-transition-new(g46-header) {
    animation-duration: .34s;
    animation-timing-function: ease;
    mix-blend-mode: normal;
}

::view-transition-old(g46-footer) {
    animation: g46-native-footer-out .24s ease both;
}

::view-transition-new(g46-footer) {
    animation: g46-native-footer-in .48s .06s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes g46-native-root-out {
    from {
        opacity: 1;
        filter: brightness(1);
    }

    to {
        opacity: .78;
        filter: brightness(.72);
    }
}

@keyframes g46-native-root-in {
    from {
        opacity: 0;
        filter: brightness(.72);
    }

    to {
        opacity: 1;
        filter: brightness(1);
    }
}

@keyframes g46-native-main-out {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        opacity: 0;
        transform: translate3d(0, -12px, 0) scale(.994);
    }
}

@keyframes g46-native-main-in {
    from {
        opacity: 0;
        transform: translate3d(0, 22px, 0) scale(.992);
        clip-path: inset(18px 0 0 0 round 18px);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        clip-path: inset(0 0 0 0 round 0);
    }
}

@keyframes g46-native-footer-out {
    to {
        opacity: 0;
        transform: translate3d(0, -8px, 0);
    }
}

@keyframes g46-native-footer-in {
    from {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
    }

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

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

    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation-duration: .01ms !important;
        animation-delay: 0ms !important;
    }
}