/* BATTLE FLAGS 4.0 — motion: entradas curtas (200–400 ms), resposta a hover/press/focus/selected/locked/unlock/new */
@keyframes bf-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bf-slide-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bf-slide-down { from { opacity: 0; transform: translateY(-26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bf-slide-left { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes bf-slide-right { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes bf-pop { 0% { opacity: 0; transform: scale(.86); } 70% { transform: scale(1.03); } 100% { opacity: 1; transform: scale(1); } }
@keyframes bf-reveal { 0% { opacity: 0; transform: translateY(40px) scale(.94); filter: brightness(2.2); } 60% { filter: brightness(1.15); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes bf-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes bf-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 211, 38, .0), var(--bf-shadow); } 50% { box-shadow: 0 0 26px 6px rgba(255, 211, 38, .55), var(--bf-shadow); } }
@keyframes bf-blink { to { opacity: .35; } }
@keyframes bf-shine { from { transform: translateX(-140%) skewX(-20deg); } to { transform: translateX(240%) skewX(-20deg); } }
@keyframes bf-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@keyframes bf-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes bf-banner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); letter-spacing: .3em; } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1); letter-spacing: .06em; } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) scale(.96); } }
@keyframes bf-dmg { 0% { opacity: 0; transform: translate(-50%, 0) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -14px) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -54px) scale(.9); } }
@keyframes bf-hitmark { 0% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(.9); opacity: 0; } }
@keyframes bf-ring { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes bf-stripes { to { background-position: 60px 0; } }
.bf-in-up { animation: bf-slide-up var(--bf-t-slow) var(--bf-ease-out) both; }
.bf-in-down { animation: bf-slide-down var(--bf-t-slow) var(--bf-ease-out) both; }
.bf-in-left { animation: bf-slide-left var(--bf-t-slow) var(--bf-ease-out) both; }
.bf-in-right { animation: bf-slide-right var(--bf-t-slow) var(--bf-ease-out) both; }
.bf-in-pop { animation: bf-pop var(--bf-t-slow) var(--bf-ease) both; }
.bf-in-reveal { animation: bf-reveal 520ms var(--bf-ease-out) both; }
.bf-d1 { animation-delay: 60ms; } .bf-d2 { animation-delay: 120ms; } .bf-d3 { animation-delay: 180ms; } .bf-d4 { animation-delay: 240ms; } .bf-d5 { animation-delay: 300ms; } .bf-d6 { animation-delay: 360ms; }
.bf-out { animation: bf-fade-in var(--bf-t) reverse both; }
@media (prefers-reduced-motion: reduce) { .bf-in-up, .bf-in-down, .bf-in-left, .bf-in-right, .bf-in-pop, .bf-in-reveal { animation: none; } }