/* 24racks View Transitions
 * Progressive enhancement for same-origin MPA navigation and a few
 * same-document state changes. Unsupported browsers keep normal navigation.
 */

@view-transition {
    navigation: auto;
}

:root {
    --vt-ease-out: cubic-bezier(.22, 1, .36, 1);
    --vt-ease-expo: cubic-bezier(.16, 1, .3, 1);
    --vt-exit-duration: 160ms;
    --vt-enter-duration: 260ms;
    --vt-shared-duration: 360ms;
}

[data-vt-header] {
    view-transition-name: site-header;
}

[data-vt-page-header] {
    view-transition-name: client-page-header;
}

::view-transition-group(root),
::view-transition-group(site-header),
::view-transition-group(client-page-header),
::view-transition-group(product-focus),
::view-transition-group(client-focus),
::view-transition-group(state-focus) {
    animation-timing-function: var(--vt-ease-out);
}

::view-transition-group(site-header) {
    z-index: 1000;
    animation-duration: var(--vt-enter-duration);
}

::view-transition-old(site-header),
::view-transition-new(site-header) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    animation: vt-page-out var(--vt-exit-duration) ease-in both;
}

::view-transition-new(root) {
    animation: vt-page-in var(--vt-enter-duration) var(--vt-ease-out) both;
}

:root:active-view-transition-type(portal-to-client)::view-transition-new(root),
:root:active-view-transition-type(client-forward)::view-transition-new(root) {
    animation-name: vt-page-forward-in;
}

:root:active-view-transition-type(client-back)::view-transition-old(root) {
    animation-name: vt-page-back-out;
}

::view-transition-group(product-focus) {
    z-index: 20;
    overflow: clip;
    border-radius: 18px;
    animation-duration: var(--vt-shared-duration);
    animation-timing-function: var(--vt-ease-expo);
}

::view-transition-old(product-focus),
::view-transition-new(product-focus),
::view-transition-old(client-focus),
::view-transition-new(client-focus) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: normal;
}

::view-transition-group(client-focus) {
    z-index: 18;
    overflow: clip;
    border-radius: 18px;
    animation-duration: 320ms;
    animation-timing-function: var(--vt-ease-out);
}

::view-transition-group(client-page-header) {
    animation-duration: 300ms;
    animation-timing-function: var(--vt-ease-out);
}

::view-transition-old(client-page-header),
::view-transition-new(client-page-header) {
    mix-blend-mode: normal;
}

::view-transition-group(state-focus) {
    animation-duration: 240ms;
}

html[data-vt-theme]::view-transition-old(root) {
    z-index: 1;
    animation: none;
}

html[data-vt-theme]::view-transition-new(root) {
    z-index: 2;
    animation: vt-theme-reveal 360ms var(--vt-ease-expo) both;
}

html[data-vt-theme]::view-transition-group(site-header),
html[data-vt-theme]::view-transition-group(client-page-header) {
    animation: none;
}

html[data-vt-state]::view-transition-old(root),
html[data-vt-state]::view-transition-new(root),
html[data-vt-state]::view-transition-group(site-header),
html[data-vt-state]::view-transition-group(client-page-header) {
    animation: none;
}

@keyframes vt-page-out {
    to { opacity: 0; transform: translateY(-4px); }
}

@keyframes vt-page-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@keyframes vt-page-forward-in {
    from { opacity: 0; transform: translateY(12px) scale(.995); }
    to { opacity: 1; transform: none; }
}

@keyframes vt-page-back-out {
    to { opacity: 0; transform: translateY(8px) scale(.995); }
}

@keyframes vt-theme-reveal {
    from { clip-path: circle(0 at var(--vt-theme-x, 50%) var(--vt-theme-y, 50%)); }
    to { clip-path: circle(var(--vt-theme-radius, 150vmax) at var(--vt-theme-x, 50%) var(--vt-theme-y, 50%)); }
}

/* When native cross-document transitions run, the old loading strip would
 * duplicate the navigation feedback. Livewire can still activate it. */
html[data-vt-navigation] .site-loader {
    opacity: 0 !important;
}

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

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