@keyframes fadeIn {from {opacity: 0;}to {opacity: 1;}}
@keyframes borderFadeIn {from {border-left-color: var(--border);}to {border-left-color: var(--accent);}}
@keyframes borderFadeInRemove {from {border-left-color: var(--accent);}to {border-left-color: var(--border);}}
@keyframes cardFadeIn {from {transform: translateY(80px);}to {transform: translateY(0px);}}
@keyframes cardStackIn {0% {opacity: 1;transform: translateY(40px);}50% {opacity: 0.25;}100% {opacity: 1;transform: translateY(0);}}
@keyframes indicatorPulse {0% {box-shadow: 0 0 0 0 transparent;outline: 1px solid transparent;outline-offset: 2px;}50% {box-shadow: 0 0 15px 0 var(--accent);outline: 2px solid var(--accent);outline-offset: 2px;}100% {box-shadow: 0 0 0 0 transparent;outline: 1px solid transparent;outline-offset: 2px;}}
@keyframes indicatorPulseOrange {0% {box-shadow: 0 0 0 0 transparent;outline: 1px solid transparent;outline-offset: 2px;}50% {box-shadow: 0 0 15px 0 var(--status-warning);outline: 2px solid var(--status-warning);outline-offset: 2px;}100% {box-shadow: 0 0 0 0 transparent;outline: 1px solid transparent;outline-offset: 2px;}}
@keyframes shimmerMove { 0% { background-position: 100% 0; } 100% { background-position: -40% 0; } }
@keyframes shimmerReveal { 0% { color: transparent; } 100% { color: var(--text); } }
@keyframes topographyFadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}
@keyframes fadeInScale { from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes pulse { 0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0; } 30% { opacity: 0.15; } 100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; } }
@keyframes statusPulse { 0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); } 50% { opacity: 0.6; transform: translateX(-50%) scale(1.1); } }
@keyframes fadeInFill { to { fill: var(--fg); stroke: var(--fg); } }
@keyframes fadeOutFill { to { fill: transparent; stroke: transparent; } }
@keyframes topographyFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes shadowScale { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(100%); opacity: 1; } }
@keyframes motoSlideOut { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(160px); }}
@keyframes telemetrySlideOut {0% {opacity: 1;transform: translateX(0);} 100% {opacity: 0;transform: translateX(-160px);}}
@keyframes dividerAppear {0% {opacity: 0;letter-spacing: 20px;transform: translate(-100px);} 100% {opacity: 1;letter-spacing: 3px;}}
@keyframes dividerDisappear { 0% { opacity: 1; letter-spacing: 3px; transition: letter-spacing 0.6s; } 100% { opacity: 0; letter-spacing: -6px; transition: letter-spacing 0.6s; } }
@keyframes motoSlideIn {0% {opacity: 0;transform: translateX(-140px);} 100% {opacity: 1;transform: translateX(0);}}
@keyframes scan {0% {top: -10%;opacity: 0;} 50% {opacity: 1;} 100% {top: 110%;opacity: 0;}}
@keyframes fillGauge { from { width: 0; } to { width: var(--fuel-percentage); } }
@keyframes pulse-eco { 0% { opacity: 0.35; } 50% { opacity: 1; } 100% { opacity: 0.35; } }
@keyframes hexPulse { 0% { transform: scale(1); opacity: 0.3; } 50% { transform: scale(1.1); opacity: 0.6; } 100% { transform: scale(1); opacity: 0.3; } }
@keyframes growBar { to { height: var(--final-height); opacity: 1; } }
@keyframes cellFadeIn { from { opacity: 0; border-bottom: 0.5px solid transparent; } to { opacity: 1; border-bottom: 0.5px solid var(--border); } }
@keyframes moveLogoLeft {0% {transform: translate(-50%, -50%);} 100% {transform: translate(-320%, -50%);}}


.status-indicator {animation: indicatorPulse 1.2s ease-in-out 5 forwards;animation-fill-mode: both;}
.status-indicator-orange {animation: indicatorPulseOrange 1.2s ease-in-out 5 forwards;animation-fill-mode: both;}