@view-transition {
    navigation: auto;
}

/* ==========================
   MVO Page Transition Premium
========================== */

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

::view-transition-old(root) {
    animation: mvoPageOut .85s cubic-bezier(.22, 1, .36, 1) forwards;
}

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

/* Página saindo */
@keyframes mvoPageOut {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: scale(.96) translateX(-35px);
        filter: blur(8px);
    }
}

/* Página entrando */
@keyframes mvoPageIn {
    0% {
        opacity: 0;
        transform: scale(1.03) translateX(55px);
        filter: blur(12px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateX(0);
        filter: blur(0);
    }
}

/* ==========================
   Flash visual estilo jato
========================== */

.mvo_transition_flash {
    position: fixed;
    inset: 0;
    z-index: 999999;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
}

.mvo_transition_flash::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 60% 45%, rgba(2, 118, 172, .22), transparent 35%),
        linear-gradient(120deg, transparent 25%, rgba(255,255,255,.18) 48%, transparent 70%);
    transform: translateX(-100%);
}

.mvo_transition_logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(.82);
    font-family: 'MVO', Arial, sans-serif;
    font-size: 86px;
    color: #0276ac;
    opacity: 0;
    text-shadow: 0 18px 45px rgba(0, 88, 143, .25);
}

.mvo_transition_line {
    position: absolute;
    right: -30%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.95),
        rgba(2,118,172,.95),
        transparent
    );
    transform: rotate(-17deg);
    opacity: 0;
    filter: drop-shadow(0 0 12px rgba(2,118,172,.8));
}

.line_1 {
    width: 620px;
    top: 34%;
}

.line_2 {
    width: 480px;
    top: 50%;
}

.line_3 {
    width: 720px;
    top: 66%;
}

/* Quando clicar em link */
html.mvo_is_transitioning .mvo_transition_flash {
    opacity: 1;
    animation: mvoFlashWrap .85s ease forwards;
}

html.mvo_is_transitioning .mvo_transition_flash::before {
    animation: mvoFlashBg .85s ease forwards;
}

html.mvo_is_transitioning .mvo_transition_logo {
    animation: mvoLogoFlash .85s cubic-bezier(.22,1,.36,1) forwards;
}

html.mvo_is_transitioning .mvo_transition_line {
    animation: mvoLineFlash .85s cubic-bezier(.22,1,.36,1) forwards;
}

html.mvo_is_transitioning .line_2 {
    animation-delay: .06s;
}

html.mvo_is_transitioning .line_3 {
    animation-delay: .12s;
}

@keyframes mvoFlashWrap {
    0%, 100% {
        opacity: 0;
    }

    15%, 75% {
        opacity: 1;
    }
}

@keyframes mvoFlashBg {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes mvoLogoFlash {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.72);
        filter: blur(10px);
    }

    35% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.16);
        filter: blur(8px);
    }
}

@keyframes mvoLineFlash {
    0% {
        transform: translateX(-950px) translateY(280px) rotate(-17deg);
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    100% {
        transform: translateX(0) translateY(0) rotate(-17deg);
        opacity: 0;
    }
}