/* ============================================
   F-14 TOMCAT — ANIMATIONS CSS
   ============================================ */

/* ---- Page Load Sequence ---- */
.main-header {
  animation: slideDown 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-40px); }
  to   { opacity: 1; transform: translateY(0); }
}
.main-footer {
  animation: slideUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
  opacity: 0;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.main-content {
  animation: contentFade 0.8s ease 0.4s forwards;
  opacity: 0;
}
@keyframes contentFade {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Number Count-Up Animation ---- */
@keyframes countUp {
  from { opacity: 0.3; transform: scale(0.9) translateY(10px); }
  to   { opacity: 1;   transform: scale(1) translateY(0); }
}
.result-number.updated {
  animation: countUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ---- Input focus ripple ---- */
.hud-input:focus {
  animation: inputPulse 0.4s ease;
}
@keyframes inputPulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,212,255,0.4); }
  70%  { box-shadow: 0 0 0 8px rgba(0,212,255,0); }
  100% { box-shadow: 0 0 15px rgba(0,212,255,0.25); }
}

/* ---- HUD corner animation ---- */
.hud-corner {
  animation: cornerGlow 3s ease-in-out infinite;
}
.top-left  { animation-delay: 0s; }
.top-right { animation-delay: 0.75s; }
.bottom-left  { animation-delay: 1.5s; }
.bottom-right { animation-delay: 2.25s; }
@keyframes cornerGlow {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

/* ---- Missile button press effect ---- */
.missile-btn:active {
  transform: scale(0.95);
  transition: transform 0.1s;
}
.missile-btn.active-sel {
  animation: selectedGlow 2s ease-in-out infinite;
}
@keyframes selectedGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(0,212,255,0.3); }
  50%       { box-shadow: 0 0 20px rgba(0,212,255,0.6), 0 0 35px rgba(0,212,255,0.2); }
}

/* ---- Formula box reveal ---- */
.formula-box {
  animation: formulaReveal 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: top center;
}
@keyframes formulaReveal {
  from { opacity: 0; transform: scaleY(0.7) translateY(-10px); }
  to   { opacity: 1; transform: scaleY(1) translateY(0); }
}

/* ---- Pk danger pulse ---- */
.pk-number.danger {
  animation: dangerFlash 0.5s ease-in-out infinite;
  color: var(--accent-danger) !important;
  text-shadow: 0 0 30px var(--accent-danger) !important;
}
@keyframes dangerFlash {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

/* ---- Result update flash ---- */
@keyframes flashUpdate {
  0%   { background: rgba(0,212,255,0.15); }
  100% { background: transparent; }
}
.result-flash {
  animation: flashUpdate 0.5s ease forwards;
}

/* ---- Radar sweep ---- */
@keyframes radarSweep {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ---- Typewriter for status ---- */
@keyframes typewriter {
  from { width: 0; }
  to   { width: 100%; }
}

/* ---- Module switch crossfade ---- */
.module-panel.fade-out {
  animation: fadeOutScale 0.25s ease forwards;
}
@keyframes fadeOutScale {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.97); }
}
.module-panel.fade-in {
  animation: fadeInScale 0.35s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.97) translateY(15px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---- Glitch effect on title ---- */
.main-title:hover {
  animation: glitch 0.3s cubic-bezier(0.25,0.46,0.45,0.94) both;
}
@keyframes glitch {
  0%   { text-shadow: 0 0 20px var(--accent-blue); }
  20%  { text-shadow: -2px 0 var(--accent-cyan), 2px 0 var(--accent-warn); transform: skewX(-2deg); }
  40%  { text-shadow: 2px 0 var(--accent-blue), -2px 0 var(--accent-cyan); transform: skewX(1deg); }
  60%  { text-shadow: -1px 0 var(--accent-warn); transform: skewX(0); }
  80%  { text-shadow: 0 0 30px var(--accent-blue); }
  100% { text-shadow: 0 0 20px var(--accent-blue); }
}

/* ---- Fuel gauge needle animation ---- */
@keyframes needleSwing {
  from { transform: rotate(-90deg); }
  to   { transform: rotate(0deg); }
}

/* ---- Scan angle indicator ---- */
@keyframes scanBeamPulse {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 1; }
}

/* ---- Bar fill fill animation ---- */
.bar-fill, .result-bar-fill, .pk-bar-fill {
  transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- Particle burst on result change ---- */
@keyframes particleBurst {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}