/* =====================================================
   FIRECRASH 2 — animations-ui.css
   UI animations: sidebar, cards, buttons, popup, toast
   Developer: ADAMMUKHRIZ
   Version: 0.10.1 BetaRelease
   ===================================================== */

@keyframes shineSweep {
  0% { transform: translateX(-100%); }
  50%, 100% { transform: translateX(100%); }
}
@keyframes shineSweepReverse {
  0% { transform: translateX(100%); }
  50%, 100% { transform: translateX(-100%); }
}
@keyframes shinePulse {
  0%, 100% { opacity: .3; }
  50% { opacity: .8; }
}

@keyframes auroraDrift {
  0% { transform: translate(0, 0) scale(1); opacity: .8; }
  50% { transform: translate(2%, -2%) scale(1.05); opacity: 1; }
  100% { transform: translate(-2%, 2%) scale(1.02); opacity: .9; }
}
@keyframes auroraDriftAlt {
  0% { transform: translate(0, 0) rotate(0); }
  100% { transform: translate(3%, -3%) rotate(4deg); }
}

@keyframes infoFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes infoCardIn {
  from { transform: scale(.85) translateY(40px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes infoCardOut {
  from { transform: scale(1) translateY(0); opacity: 1; }
  to { transform: scale(.9) translateY(20px); opacity: 0; }
}
@keyframes infoOverlayIn { from { opacity: 0; backdrop-filter: blur(0); } to { opacity: 1; backdrop-filter: blur(8px); } }
@keyframes infoOverlayOut { from { opacity: 1; backdrop-filter: blur(8px); } to { opacity: 0; backdrop-filter: blur(0); } }

@keyframes flameFlicker {
  0%, 100% { transform: scale(1) rotate(0); filter: drop-shadow(0 0 8px rgba(255,107,53,.6)); }
  25% { transform: scale(1.06) rotate(-2deg); filter: drop-shadow(0 0 12px rgba(255,107,53,.9)); }
  50% { transform: scale(1.02) rotate(1deg); filter: drop-shadow(0 0 10px rgba(255,107,53,.7)); }
  75% { transform: scale(1.08) rotate(-1deg); filter: drop-shadow(0 0 14px rgba(255,107,53,1)); }
}

@keyframes sidebarIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes sidebarOut { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes navItemIn {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes navItemHover {
  0% { transform: translateX(0); }
  100% { transform: translateX(3px); }
}
@keyframes navIconPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3) rotate(-8deg); }
  100% { transform: scale(1.18) rotate(-4deg); }
}
@keyframes navIndicatorGrow {
  from { height: 0; }
  to { height: 60%; }
}

@keyframes cardHoverUp {
  from { transform: translateY(0); }
  to { transform: translateY(-3px); }
}
@keyframes cardGlow {
  0%, 100% { box-shadow: inset 3px 3px 8px var(--clay-shadow-dark), inset -3px -3px 8px var(--clay-shadow-light), 0 4px 12px rgba(184,168,152,.2); }
  50% { box-shadow: inset 3px 3px 8px var(--clay-shadow-dark), inset -3px -3px 8px var(--clay-shadow-light), 0 12px 28px rgba(255,107,53,.25); }
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cardOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(.94); }
}

@keyframes btnRipple {
  0% { transform: scale(0); opacity: .6; }
  100% { transform: scale(3); opacity: 0; }
}
@keyframes btnPress { 0% { transform: scale(1); } 50% { transform: scale(.96); } 100% { transform: scale(1); } }
@keyframes btnHoverLift { from { transform: translateY(0); } to { transform: translateY(-2px); } }
@keyframes btnShine {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(20px) scale(.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(20px) scale(.9); }
}
@keyframes toastSlideLeft {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes menuBtnPress {
  0% { transform: rotate(0); }
  50% { transform: rotate(90deg); }
  100% { transform: rotate(0); }
}
@keyframes hamburgerTop { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(6px) rotate(45deg); } }
@keyframes hamburgerBottom { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-45deg); } }

@keyframes titleIn {
  from { opacity: 0; letter-spacing: 8px; }
  to { opacity: 1; letter-spacing: .5px; }
}
@keyframes titleTypewriter {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes statusBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
@keyframes statusGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(34,197,94,.5); }
  50% { box-shadow: 0 0 20px rgba(34,197,94,.9); }
}

@keyframes badgeBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}
@keyframes badgePop {
  0% { transform: scale(0); }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes inputFocus {
  0% { box-shadow: inset 3px 3px 8px var(--clay-shadow-dark), inset -3px -3px 8px var(--clay-shadow-light); }
  100% { box-shadow: inset 3px 3px 8px var(--clay-shadow-dark), inset -3px -3px 8px var(--clay-shadow-light), 0 0 0 3px rgba(255,107,53,.25); }
}
@keyframes caretBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@keyframes scrollHint {
  0%, 100% { transform: translateY(0); opacity: .4; }
  50% { transform: translateY(6px); opacity: 1; }
}

@keyframes loadingDots {
  0%, 20% { content: "."; }
  40% { content: ".."; }
  60%, 100% { content: "..."; }
}
@keyframes loadingBar {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes loadingSpin {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}

@keyframes avatarFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes avatarGlow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255,107,53,.3)); }
  50% { filter: drop-shadow(0 0 12px rgba(255,107,53,.7)); }
}

@keyframes infoBtnHover {
  0% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-2px) rotate(8deg); }
  100% { transform: translateY(-2px) rotate(0); }
}
@keyframes infoBtnPulse {
  0%, 100% { box-shadow: 3px 3px 8px var(--clay-shadow-dark), -3px -3px 8px var(--clay-shadow-light); }
  50% { box-shadow: 3px 3px 8px var(--clay-shadow-dark), -3px -3px 8px var(--clay-shadow-light), 0 0 0 6px rgba(255,107,53,.15); }
}

@keyframes menuDrawerIn {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes menuDrawerOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-100%); opacity: 0; }
}

@keyframes collapseOpen {
  from { max-height: 0; opacity: 0; }
  to { max-height: 500px; opacity: 1; }
}
@keyframes collapseClose {
  from { max-height: 500px; opacity: 1; }
  to { max-height: 0; opacity: 0; }
}

@keyframes scrollProgress {
  0% { width: 0; }
  100% { width: 100%; }
}

@keyframes tooltipIn {
  from { opacity: 0; transform: translateY(4px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tooltipFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes keyPress {
  0% { transform: scale(1); background: var(--clay-light); }
  50% { transform: scale(.94); background: var(--accent); color: #fff; }
  100% { transform: scale(1); background: var(--clay-light); }
}
@keyframes keyRipple {
  0% { transform: scale(1); opacity: .8; }
  100% { transform: scale(1.6); opacity: 0; }
}

@keyframes chipPop {
  0% { transform: scale(.6); opacity: 0; }
  60% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes chipHover {
  0% { transform: translateY(0); }
  100% { transform: translateY(-1px); }
}

@keyframes tableRow {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes tableHover {
  from { background: transparent; }
  to { background: var(--clay-bg); }
}

@keyframes sidebarFooter {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes sidebarGlow {
  0%, 100% { box-shadow: inset 3px 3px 8px var(--clay-shadow-dark), inset -3px -3px 8px var(--clay-shadow-light); }
  50% { box-shadow: inset 3px 3px 8px var(--clay-shadow-dark), inset -3px -3px 8px var(--clay-shadow-light), 0 0 20px rgba(255,107,53,.2); }
}

@keyframes resultIn {
  from { opacity: 0; transform: translateY(8px); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes resultType {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes copySuccess {
  0% { transform: scale(1); color: var(--text); }
  50% { transform: scale(1.3); color: #22c55e; }
  100% { transform: scale(1); color: var(--text); }
}

@keyframes shakeError {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
@keyframes shakeSuccess {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes sliderGlow {
  0%, 100% { box-shadow: 0 0 4px rgba(255,107,53,.3); }
  50% { box-shadow: 0 0 12px rgba(255,107,53,.8); }
}
@keyframes sliderKnob {
  from { transform: scale(1); }
  to { transform: scale(1.15); }
}

@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-8px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes dropdownItem {
  from { opacity: 0; transform: translateX(-4px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes modalShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
@keyframes modalBackdrop {
  from { opacity: 0; backdrop-filter: blur(0); }
  to { opacity: 1; backdrop-filter: blur(6px); }
}