/* =============================================================
   TRIVIA - Sistema de Controle de Frotas
   Tela: Login — cenas animadas do painel ilustrado
   (desenho em auth/_login_scenes.html, carrossel em login_scenes.js)

   Regras do jogo:
   - O estilo base de cada peca e o estado FINAL; os keyframes so
     descrevem o comeco ("from"). Sem animacao a cena fica completa.
   - Nada anima fora de .scene.is-live. O JS recoloca a classe para
     reiniciar uma cena do zero quando ela volta ao ar.
   - Pausa e prefers-reduced-motion zeram as animacoes: a cena
     mostra o estado final, parada.
   ============================================================= */

/* --- Palco ---------------------------------------------- */
.scene-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.login-stage .scene {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
    pointer-events: none;
}

.login-stage .scene.is-on { opacity: 1; }

.scene > svg {
    display: block;
    width: 100%;
    height: 100%;
    font-family: 'Inter', system-ui, sans-serif;
    transform-origin: 50% 50%;
}

.scene.is-live > svg { animation: sc-drift 12s ease-in-out both; }

@keyframes sc-drift { from { transform: scale(0.95); } }

/* O mapa vai ate a borda do palco; a mascara apaga as quinas. */
.scene--map > svg {
    -webkit-mask-image: radial-gradient(ellipse 60% 62% at 50% 48%, #000 58%, transparent 100%);
            mask-image: radial-gradient(ellipse 60% 62% at 50% 48%, #000 58%, transparent 100%);
}

/* --- Utilitarios de animacao ---------------------------- */
/* Origem no centro da propria peca. Por isso nenhuma delas leva
   atributo transform: a posicao fica num <g> por fora. */
.a-rise, .a-pop, .a-drop, .a-press, .a-ripple, .a-pulse, .a-slide,
.a-frame, .a-snap, .a-stamp, .a-grow-y, .a-grow-x {
    transform-box: fill-box;
    transform-origin: center;
}

.a-grow-y { transform-origin: 50% 100%; }
.a-grow-x { transform-origin: 0 50%; }

/* Pecas que terminam invisiveis. */
.a-vanish, .a-ripple, .a-pulse, .a-flash, .scan { opacity: 0; }

.scene.is-live .a-rise   { animation: sc-rise 0.8s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) both; }
.scene.is-live .a-pop    { animation: sc-pop 0.55s cubic-bezier(.3, 1.5, .5, 1) var(--d, 0s) both; }
.scene.is-live .a-drop   { animation: sc-drop 0.7s cubic-bezier(.3, 1.4, .5, 1) var(--d, 0s) both; }
.scene.is-live .a-appear { animation: sc-appear 0.5s ease var(--d, 0s) both; }
.scene.is-live .a-vanish { animation: sc-vanish 0.3s ease var(--d, 0s) both; }
.scene.is-live .a-press  { animation: sc-press 0.35s ease var(--d, 0s); }
.scene.is-live .a-ripple { animation: sc-ripple 0.7s ease-out var(--d, 0s); }
.scene.is-live .a-pulse  { animation: sc-pulse 2s ease-out var(--d, 0s) infinite; }
.scene.is-live .a-flash  { animation: sc-flash 0.6s ease-out var(--d, 0s); }
.scene.is-live .a-blink  { animation: sc-blink 0.5s steps(1) var(--d, 0s) 6; }
.scene.is-live .a-slide  { animation: sc-slide 0.6s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) both; }
.scene.is-live .a-frame  { animation: sc-frame 0.5s ease-out var(--d, 0s) both; }
.scene.is-live .a-snap   { animation: sc-snap 0.75s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) both; }
.scene.is-live .a-stamp  { animation: sc-stamp 0.5s cubic-bezier(.3, 1.4, .5, 1) var(--d, 0s) both; }
.scene.is-live .a-field  { animation: sc-field 0.5s ease var(--d, 0s) both; }
.scene.is-live .a-grow-y { animation: sc-grow-y 0.8s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) both; }
.scene.is-live .a-grow-x { animation: sc-grow-x var(--t, 0.8s) var(--e, ease) var(--d, 0s) both; }
.scene.is-live .a-draw   { animation: sc-draw var(--t, 1.2s) var(--e, ease-in-out) var(--d, 0s) both; }

@keyframes sc-rise   { from { opacity: 0; transform: translateY(28px); } }
@keyframes sc-pop    { from { opacity: 0; transform: scale(0.4); } }
@keyframes sc-drop   { from { opacity: 0; transform: translateY(-36px) scale(0.8); } }
@keyframes sc-appear { from { opacity: 0; } }
@keyframes sc-vanish { from { opacity: 1; } }
@keyframes sc-press  { 50% { transform: scale(0.94); } }
@keyframes sc-ripple { from { opacity: 0.5; transform: scale(0.2); } to { opacity: 0; transform: scale(1.8); } }
@keyframes sc-pulse  { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(2.4); } }
@keyframes sc-flash  { 0% { opacity: 0; } 25% { opacity: 0.75; } 100% { opacity: 0; } }
@keyframes sc-blink  { 50% { opacity: 0.2; } }
@keyframes sc-slide  { from { opacity: 0; transform: translateX(36px); } }
@keyframes sc-frame  { from { opacity: 0; transform: scale(1.1); } }
@keyframes sc-snap   { from { opacity: 0; transform: translate(-150px, -140px) scale(1.7) rotate(-5deg); } }
@keyframes sc-stamp  { 0% { opacity: 0; transform: scale(1.9); } 60% { opacity: 1; transform: scale(0.94); } }
@keyframes sc-field  { from { fill-opacity: 0.18; } }
@keyframes sc-grow-y { from { transform: scaleY(0); } }
@keyframes sc-grow-x { from { transform: scaleX(0); } }
@keyframes sc-draw   { from { stroke-dashoffset: 100; } }

/* --- Pecas que giram ou andam por coordenada ------------ */
/* Origem no ponto (0,0) do <g> que as posiciona: o pivo do ponteiro,
   o centro do anel, o canto do mapa. */
.pivot {
    transform-box: view-box;
    transform-origin: 0 0;
}

/* 01 · Reserva: o cartao escolhido sobe e fica destacado. */
.lift { transform: translateY(-14px); }
.scene.is-live .lift { animation: sc-lift 0.5s cubic-bezier(.2, .8, .2, 1) 2.1s both; }
@keyframes sc-lift { from { transform: none; } }

/* 02 · CNH: o feixe de leitura passa duas vezes e some. */
.scene.is-live .scan { animation: sc-scan 1.6s ease-in-out 0.5s 2 both; }
@keyframes sc-scan {
    0%       { transform: translateY(0); opacity: 0; }
    12%, 88% { opacity: 1; }
    100%     { transform: translateY(330px); opacity: 0; }
}

/* 03 · Check-in: ponteiro faz a varredura da ignicao e volta ao zero;
   o odometro gira ate o KM inicial. 15 casas na unidade em 2,6s: a
   dezena vira quando a unidade passa pelo 9, aos 10/15 do giro. */
.needle { transform: rotate(150deg); }
.scene.is-live .needle { animation: sc-ignition 2.4s ease-in-out 0.6s both; }
@keyframes sc-ignition {
    0%, 100% { transform: rotate(150deg); }
    45%      { transform: rotate(390deg); }
}

.sweep { stroke-dashoffset: 100; }
.scene.is-live .sweep { animation: sc-sweep 2.4s ease-in-out 0.6s both; }
@keyframes sc-sweep {
    0%, 100% { stroke-dashoffset: 100; }
    45%      { stroke-dashoffset: 0; }
}

.odo text {
    font-size: 30px;
    font-weight: 700;
    fill: #ffffff;
    text-anchor: middle;
    font-variant-numeric: tabular-nums;
}

.drum-dez { transform: translateY(-40px); }
.drum-uni { transform: translateY(-600px); }
.scene.is-live .drum-uni { animation: sc-roll 2.6s linear 1.3s both; }
.scene.is-live .drum-dez { animation: sc-roll 0.3s ease-out 3s both; }
@keyframes sc-roll { from { transform: translateY(0); } }

/* 04 · Viagem: o carro percorre a rota em velocidade constante — cada
   trecho ocupa a fatia do tempo proporcional ao seu comprimento
   (120 + 300 + 140 + 145 = 705), e as curvas sao giros curtos. */
.route-car { transform: translate(705px, 300px) rotate(0deg); }
.scene.is-live .route-car { animation: sc-drive 5s linear 1s both; }
@keyframes sc-drive {
    0%    { transform: translate(260px, 560px) rotate(-90deg); }
    16%   { transform: translate(260px, 446px) rotate(-90deg); }
    18.5% { transform: translate(266px, 440px) rotate(0deg); }
    58%   { transform: translate(552px, 440px) rotate(0deg); }
    61%   { transform: translate(560px, 432px) rotate(-90deg); }
    77.5% { transform: translate(560px, 308px) rotate(-90deg); }
    80.5% { transform: translate(568px, 300px) rotate(0deg); }
    100%  { transform: translate(705px, 300px) rotate(0deg); }
}

/* 05 · Abastecimento: ponteiro e faixa sobem juntos do R (8%) ao 1/1. */
.fuel-needle { transform: rotate(360deg); }
.scene.is-live .fuel-needle { animation: sc-fuel-needle 3s cubic-bezier(.4, 0, .2, 1) 1s both; }
@keyframes sc-fuel-needle { from { transform: rotate(194.4deg); } }

.fuel-level { stroke-dashoffset: 0; }
.scene.is-live .fuel-level { animation: sc-fuel-level 3s cubic-bezier(.4, 0, .2, 1) 1s both; }
@keyframes sc-fuel-level { from { stroke-dashoffset: 92; } }

.scene.is-live .print { animation: sc-print 2.6s cubic-bezier(.35, 0, .25, 1) 1.4s both; }
@keyframes sc-print { from { transform: translateY(252px); } }

/* 06 · Preventiva: anel e carrinho andam 88% do ciclo, no mesmo passo. */
.cycle { stroke-dashoffset: 12; }
.scene.is-live .cycle { animation: sc-cycle 3.2s cubic-bezier(.4, 0, .2, 1) 0.6s both; }
@keyframes sc-cycle { from { stroke-dashoffset: 100; } }

.ring-head { transform: rotate(316.8deg); }
.scene.is-live .ring-head { animation: sc-ring-head 3.2s cubic-bezier(.4, 0, .2, 1) 0.6s both; }
@keyframes sc-ring-head { from { transform: rotate(0deg); } }

/* --- Pausa e movimento reduzido -------------------------- */
.login-brand.is-paused .scene *,
.login-brand.is-paused .scene > svg {
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .scene *,
    .scene > svg {
        animation: none !important;
    }

    .login-stage .scene { transition: none; }
}