/**
 * Carrossel do painel hero da login (cards de vídeo/animação).
 * Escopo: .loginHeroCarousel dentro de .loginSplit__visual
 */

.loginSplit__visual {
    background-image: none;
}

.loginHeroCarousel {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
}

.loginHeroCarousel__track {
    position: absolute;
    inset: 0;
}

.loginHeroCarousel__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 520ms cubic-bezier(0.32, 0.72, 0, 1),
        visibility 0s linear 520ms,
        transform 520ms cubic-bezier(0.32, 0.72, 0, 1),
        filter 520ms cubic-bezier(0.32, 0.72, 0, 1);
    transform: scale(1.02);
    filter: blur(8px);
    will-change: opacity, transform, filter;
}

.loginHeroCarousel__slide--active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity 560ms cubic-bezier(0.32, 0.72, 0, 1),
        visibility 0s linear 0s,
        transform 560ms cubic-bezier(0.32, 0.72, 0, 1),
        filter 560ms cubic-bezier(0.32, 0.72, 0, 1);
    transform: scale(1);
    filter: blur(0);
}

.loginHeroCarousel__slide--leaving {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.98);
    filter: blur(10px);
    transition:
        opacity 440ms cubic-bezier(0.32, 0.72, 0, 1),
        visibility 0s linear 440ms,
        transform 440ms cubic-bezier(0.32, 0.72, 0, 1),
        filter 440ms cubic-bezier(0.32, 0.72, 0, 1);
}

.loginHeroCarousel__slideAnim {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    background: radial-gradient(120% 90% at 50% 40%, #1a3348 0%, #0d1824 100%);
}

/* ============================================================
 * Atmosfera dos vídeos: luz de fundo viva, poeira e grão de filme.
 * Tudo barato para a GPU: só gradientes e transform/opacity (nada de blur animado, blend-mode ou backdrop-filter).
 * O fundo passa para o card; o vídeo (.pmcSim) fica transparente e a atmosfera aparece por trás dele.
 * ============================================================ */
.loginHeroCarousel__slide--anim {
    background: radial-gradient(120% 90% at 50% 40%, #1a3348 0%, #0d1824 100%);
}

.loginHeroCarousel__slide--anim .loginHeroCarousel__slideAnim,
.loginHeroCarousel__slide--anim .loginHeroCarousel__slideAnim .pmcSim {
    background: transparent;
}

.loginHeroAmbient {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* orbes de luz que derivam devagar (gradientes já são macios: sem filter: blur) */
.loginHeroAmbient::before {
    content: "";
    position: absolute;
    inset: -25%;
    background:
        radial-gradient(40% 40% at 22% 78%, rgba(0, 79, 159, 0.34), rgba(0, 79, 159, 0) 70%),
        radial-gradient(38% 38% at 80% 22%, rgba(61, 165, 244, 0.2), rgba(61, 165, 244, 0) 70%),
        radial-gradient(34% 34% at 52% 52%, rgba(139, 197, 63, 0.07), rgba(139, 197, 63, 0) 70%);
    will-change: transform;
    animation: loginAmbientDrift 26s ease-in-out infinite alternate;
}

@keyframes loginAmbientDrift {
    from { transform: translate3d(-2%, 1%, 0) scale(1); }
    to { transform: translate3d(3%, -3%, 0) scale(1.08); }
}

/* poeira em suspensão: um único ponto de 2px replicado por box-shadow, subindo devagar */
.loginHeroAmbient::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    will-change: transform, opacity;
    box-shadow:
        90px 160px 0 rgba(255, 255, 255, 0.45), 240px 610px 0 rgba(255, 255, 255, 0.3),
        410px 90px 0 rgba(255, 255, 255, 0.5), 560px 340px 0 rgba(255, 255, 255, 0.25),
        720px 640px 0 rgba(255, 255, 255, 0.4), 840px 220px 0 rgba(255, 255, 255, 0.55),
        120px 430px 0 rgba(139, 197, 63, 0.4), 330px 520px 0 rgba(255, 255, 255, 0.35),
        500px 660px 0 rgba(61, 165, 244, 0.5), 620px 130px 0 rgba(255, 255, 255, 0.3),
        790px 420px 0 rgba(255, 255, 255, 0.45), 190px 690px 0 rgba(255, 255, 255, 0.25),
        40px 90px 0 rgba(255, 255, 255, 0.3), 280px 330px 0 rgba(255, 255, 255, 0.4),
        670px 500px 0 rgba(255, 255, 255, 0.55), 900px 150px 0 rgba(0, 120, 220, 0.55),
        200px 250px 0 rgba(255, 255, 255, 0.3), 460px 30px 0 rgba(255, 255, 255, 0.4),
        580px 250px 0 rgba(255, 255, 255, 0.25), 760px 580px 0 rgba(255, 255, 255, 0.5);
    animation: loginAmbientDust 34s linear infinite;
}

@keyframes loginAmbientDust {
    0% { transform: translate3d(0, 50px, 0); opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { transform: translate3d(30px, -150px, 0); opacity: 0; }
}

/* grão de filme sobre o vídeo: ladrilho de ruído fixo, só desloca em passos (sem mix-blend-mode) */
.loginHeroCarousel__slide--anim::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    animation: loginAmbientGrain 0.9s steps(5) infinite;
}

@keyframes loginAmbientGrain {
    0% { background-position: 0 0; }
    20% { background-position: -37px 23px; }
    40% { background-position: 51px -41px; }
    60% { background-position: -19px -62px; }
    80% { background-position: 44px 35px; }
    100% { background-position: 0 0; }
}

.loginHeroAnimDebug {
    position: absolute;
    left: 50%;
    bottom: 3.25rem;
    z-index: 4;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: rgba(8, 14, 22, 0.72);
    backdrop-filter: blur(10px);
    pointer-events: auto;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
}

.loginHeroAnimDebug button {
    border: 0;
    background: rgba(255, 255, 255, 0.12);
    color: inherit;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    cursor: pointer;
}

.loginHeroAnimDebug input[type="range"] {
    width: min(160px, 28vw);
}

.loginSplit__visualContent--animHidden {
    opacity: 0;
    transform: translateY(-12px);
    transition:
        opacity 480ms cubic-bezier(0.32, 0.72, 0, 1),
        transform 480ms cubic-bezier(0.32, 0.72, 0, 1);
}

.loginSplit__visualContent {
    transition:
        opacity 480ms cubic-bezier(0.32, 0.72, 0, 1),
        transform 480ms cubic-bezier(0.32, 0.72, 0, 1);
}

.loginHeroCarousel__chrome {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    /* Acima do overlay (1), abaixo do logo Flow (3) */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0 1.25rem 1.75rem 2.5rem;
    pointer-events: none;
}

/* Navegação minimalista: um segmento por vídeo (rótulo + barra fina). Segmentos concluídos ficam cheios e discretos. */
.loginHeroNav {
    list-style: none;
    margin: 0;
    padding: 0;
    width: min(300px, 62%);
    display: flex;
    gap: 0.75rem;
}

.loginHeroNav__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.loginHeroNav__label {
    font-family: roboto-medium, roboto-regular, Arial, sans-serif;
    font-size: 0.6875rem;
    line-height: 1;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.5);
    transition: color 320ms cubic-bezier(0.32, 0.72, 0, 1);
}

.loginHeroNav__item--active .loginHeroNav__label {
    color: rgba(255, 255, 255, 0.95);
}

.loginHeroNav__track {
    display: block;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

.loginHeroNav__fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.95);
    transform-origin: left center;
    transform: scaleX(0);
    will-change: transform;
}

.loginHeroNav__item:not(.loginHeroNav__item--active) .loginHeroNav__fill {
    background: rgba(255, 255, 255, 0.55);
}

/* ============================================================
 * Abertura de marca (logo Flow + frase), antes do primeiro vídeo
 * ============================================================ */

/* Fundo do carrossel: o mesmo degradê dos vídeos, para a abertura e o primeiro vídeo se fundirem sem corte. */
.loginHeroCarousel {
    background: radial-gradient(120% 90% at 50% 40%, #1a3348 0%, #0d1824 100%);
}

.loginSplit__visual--intro .loginSplit__visualOverlay {
    background: none;
}

/* Abertura de marca: foto do Jardim Botânico com uma película escura (no próprio slide, para sumir junto
   com ele na troca para o vídeo) que garante a leitura do logo e da frase brancos. */
.loginHeroCarousel__slide--intro {
    background:
        radial-gradient(ellipse 90% 75% at 50% 46%, rgba(7, 21, 37, 0.18) 0%, rgba(7, 21, 37, 0.42) 72%, rgba(7, 21, 37, 0.58) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.28) 55%, rgba(0, 0, 0, 0.4) 100%),
        #1a3a5c url("../img/backgrounds/login/jardimBotanico.webp") center / cover no-repeat;
}

@media (min-width: 992px) {
    /* O conteúdo de marca só aparece quando o carrossel inicia (fontes prontas): nada de frase "pela metade".
       Se o JS não rodar, uma animação libera o conteúdo depois de 6s. */
    .loginSplit__visual--pending .loginSplit__visualContent {
        opacity: 0;
        animation: loginContentFailsafe 1ms linear 6s forwards;
    }
}

@keyframes loginContentFailsafe {
    to { opacity: 1; }
}

@keyframes loginIntroLogo {
    from { opacity: 0; filter: blur(14px) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.32)); transform: scale(0.94); }
    to { opacity: 1; filter: blur(0) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.32)); transform: scale(1); }
}

@keyframes loginIntroRise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes loginIntroFade {
    from { opacity: 0; filter: blur(6px); }
    to { opacity: 1; filter: blur(0); }
}

/* Fundo da abertura: surge com fade in (a foto sai do escuro). fill-mode "backwards": ao terminar volta ao estado
   normal do slide, então a saída (crossfade para o vídeo) não é afetada. */
@keyframes loginIntroBg {
    from { opacity: 0; }
    to { opacity: 1; }
}

.loginSplit__visual--intro .loginHeroCarousel__slide--intro.loginHeroCarousel__slide--active {
    animation: loginIntroBg 1400ms cubic-bezier(0.33, 0, 0.2, 1) backwards;
}

/* Linha do tempo (a abertura dura 4s): fundo 0 a 1,4s · logo 0,35 a 1,85s · frase 0,8 a 2,4s · leitura tranquila até a troca para o vídeo. */
.loginSplit__visual--intro .loginSplit__flow {
    animation: loginIntroLogo 1500ms cubic-bezier(0.22, 1, 0.36, 1) 350ms both;
}

.loginSplit__visual--intro .loginSplit__tagline {
    animation: loginIntroRise 1400ms cubic-bezier(0.22, 1, 0.36, 1) 800ms both;
}

.loginSplit__visual--intro .loginSplit__taglineRegular {
    animation: loginIntroFade 1200ms cubic-bezier(0.22, 1, 0.36, 1) 800ms both;
}

.loginSplit__visual--intro .loginSplit__taglineBold {
    animation: loginIntroFade 1200ms cubic-bezier(0.22, 1, 0.36, 1) 1300ms both;
}
.loginSplit__visual--animSlide .loginSplit__visualOverlay {
    /* O vídeo já tem fundo próprio: a película escura da foto o deixaria apagado e "parado". */
    background: none;
}

@media (prefers-reduced-motion: reduce) {
    .loginSplit__visual--intro .loginHeroCarousel__slide--intro.loginHeroCarousel__slide--active,
    .loginSplit__visual--intro .loginSplit__flow,
    .loginSplit__visual--intro .loginSplit__tagline,
    .loginSplit__visual--intro .loginSplit__taglineRegular,
    .loginSplit__visual--intro .loginSplit__taglineBold {
        animation: none;
    }

    .loginHeroCarousel__slide {
        transition: opacity 280ms ease;
        transform: none;
        filter: none;
    }

    .loginHeroCarousel__slide--active,
    .loginHeroCarousel__slide--leaving {
        transform: none;
        filter: none;
    }
}

@media (max-width: 991.98px) {
    .loginHeroCarousel__chrome {
        padding: 0 1rem 1.25rem 1.5rem;
    }
}

/* A atmosfera (luz, poeira, grão) fica parada para quem pede menos movimento. */
@media (prefers-reduced-motion: reduce) {
    .loginHeroAmbient::before,
    .loginHeroAmbient::after,
    .loginHeroCarousel__slide--anim::after {
        animation: none;
    }

    .loginHeroAmbient::after {
        opacity: 0.6;
    }
}