/* ==========================================================
   PAGE TRANSITIONS - ESTILO CINEMATOGRÁFICO MUGEN STUDIO
   Exit: scale(0.5), opacity: 0, cubic-bezier(0.56, 0.22, 0.05, 0.99)
   Enter: scale(1), opacity: 1, cubic-bezier(0.56, 0.22, 0.05, 0.99)
   ========================================================== */

/* Fundo da janela durante transições */

html {
    background-color: #080808;
}

body.page-transitioning {
    background-color: #080808 !important;
}

/* O elemento que sofre o recuo 3D (Mugen Studio effect) */

#smooth-wrapper {
    transition: transform 0.6s cubic-bezier(0.56, 0.22, 0.05, 0.99),
                opacity 0.52s cubic-bezier(0.56, 0.22, 0.05, 0.99),
                filter 0.6s cubic-bezier(0.56, 0.22, 0.05, 0.99);
    will-change: transform, opacity;
}

/* 1. Efeito de Saída (Afastamento no espaço) */

body.page-is-exiting #smooth-wrapper {
    transform: scale(0.5) !important;
    opacity: 0 !important;
    filter: blur(4px);
    pointer-events: none !important;
}

/* 2. Efeito de Entrada na Nova Página / Retorno suave à home */

html.page-is-returning body #smooth-wrapper,
body.page-enter-prepare #smooth-wrapper {
    transform: scale(1.06) !important;
    opacity: 0 !important;
    filter: blur(6px) !important;
    transition: none !important;
}

body.page-enter-active #smooth-wrapper {
    transform: scale(1) !important;
    opacity: 1 !important;
    filter: blur(0px) !important;
    transition: transform 0.65s cubic-bezier(0.56, 0.22, 0.05, 0.99),
                opacity 0.52s cubic-bezier(0.56, 0.22, 0.05, 0.99),
                filter 0.65s cubic-bezier(0.56, 0.22, 0.05, 0.99) !important;
}

/* Cursor pointer e hover dinâmico nos cards que navegam */

.routes-card[data-page-target] {
    cursor: pointer;
}

.routes-card[data-page-target] .routes-card__img-wrap {
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.routes-card[data-page-target]:hover .routes-card__img-wrap {
    transform: scale(1.02);
}