/* ============================================
   ANIMAÇÕES DIRECIONAIS DO JOGADOR HERO
   CSS puro — sem View Transitions API
   ============================================ */

/* ============================================
   ENTRADA: controlado pelo data-nav-direction
   aplicado pelo script inline do view.html
   ============================================ */

/* Wrapper do texto de fundo: Entrada Lenta com Espera */
html[data-nav-direction] .bg-text-wrapper {
    opacity: 0;
    animation: fade-in 1.8s ease forwards 0.4s;
}

/* Vindo do PASSADO → entra da ESQUERDA */
html[data-nav-direction="past"] .season-player .player-img {
    animation: slide-in-from-left 1.2s cubic-bezier(0.25, 1, 0.5, 1) both 0.3s;
}
html[data-nav-direction="past"] .season-info {
    animation: text-in-from-left 1.0s cubic-bezier(0.25, 1, 0.5, 1) both 0.4s;
}

/* Vindo do FUTURO → entra da DIREITA */
html[data-nav-direction="future"] .season-player .player-img {
    animation: slide-in-from-right 1.2s cubic-bezier(0.25, 1, 0.5, 1) both 0.3s;
}
html[data-nav-direction="future"] .season-info {
    animation: text-in-from-right 1.0s cubic-bezier(0.25, 1, 0.5, 1) both 0.4s;
}

/* ============================================
   SAÍDA: Classe aplicada via JS antes de navegar
   ============================================ */

/* Indo para o FUTURO → Imagem e texto saem pela ESQUERDA */
.season-player .player-img.exit-to-left {
    animation: slide-out-to-left-fast 0.25s cubic-bezier(0.5, 0, 1, 0.5) forwards !important;
}
.season-info.exit-to-left {
    animation: text-out-to-left-fast 0.25s cubic-bezier(0.5, 0, 1, 0.5) forwards !important;
}

/* Indo para o PASSADO → Imagem e texto saem pela DIREITA */
.season-player .player-img.exit-to-right {
    animation: slide-out-to-right-fast 0.25s cubic-bezier(0.5, 0, 1, 0.5) forwards !important;
}
.season-info.exit-to-right {
    animation: text-out-to-right-fast 0.25s cubic-bezier(0.5, 0, 1, 0.5) forwards !important;
}

/* Fade-out global do wrapper */
.bg-text-wrapper.exit-fade {
    animation: fade-out 0.2s ease forwards !important;
}

/* ============================================
   KEYFRAMES
   ============================================ */

/* ENTRADA */
@keyframes slide-in-from-right {
    from { opacity: 0; transform: translateX(400px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes slide-in-from-left {
    from { opacity: 0; transform: translateX(-400px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes text-in-from-right {
    from { opacity: 0; transform: translateX(200px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes text-in-from-left {
    from { opacity: 0; transform: translateX(-200px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* SAÍDA (Rápida) */
@keyframes slide-out-to-left-fast {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-150px); }
}

@keyframes slide-out-to-right-fast {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(150px); }
}

@keyframes text-out-to-left-fast {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-80px); }
}

@keyframes text-out-to-right-fast {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(80px); }
}

@keyframes fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================
   ACESSIBILIDADE
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .season-player .player-img,
    .season-info,
    .bg-text-wrapper {
        animation: none !important;
    }
}