/* ═══════════════════════════════════════════════════════════════
   DARKNET WEB PANEL — ANIMATIONS
   All @keyframes and animated element base styles
   ═══════════════════════════════════════════════════════════════ */

/* ─── Core Animations ─── */
@keyframes shimmer {
  0%   { background-position: -400% center; }
  100% { background-position:  400% center; }
}

@keyframes float {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-14px) rotate(2deg); }
}

@keyframes floatSlow {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Used by mobile-perf.css for pane transitions */
@keyframes paneIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes msgIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

@keyframes tailSwing {
  0%,100% { transform: rotate(-22deg); }
  50%      { transform: rotate(28deg); }
}

@keyframes eyeBlink {
  0%,85%,100% { transform: scaleY(1); }
  90%          { transform: scaleY(0.05); }
}

@keyframes catBounce {
  0%,100% { transform: translateY(0) scaleY(1); }
  40%      { transform: translateY(-22px) scaleY(1.04); }
  70%      { transform: translateY(-6px) scaleY(0.97); }
}

@keyframes catShadow {
  0%,100% { transform: scaleX(0.5); opacity: 0.3; }
  50%      { transform: scaleX(1.05); opacity: 0.12; }
}

@keyframes particle {
  0%   { opacity: 0.9; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-80px) translateX(var(--dx, 15px)) scale(0); }
}

@keyframes numPop {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ripple {
  0%   { transform: scale(0); opacity: 0.7; }
  100% { transform: scale(3); opacity: 0; }
}

@keyframes pingIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes connNew {
  0%   { opacity: 0; transform: translateX(-100%); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes pinReveal {
  from { filter: blur(12px); opacity: 0.3; }
  to   { filter: blur(0); opacity: 1; }
}

@keyframes slideDown {
  from { opacity: 0; max-height: 0; transform: translateY(-8px); }
  to   { opacity: 1; max-height: 200px; transform: translateY(0); }
}

@keyframes delBtn {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─── Cyberpunk-Specific Animations ─── */
/* neonPulse: GPU-only — opacity on a pseudo overlay, no box-shadow animation */
@keyframes neonPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.82; }
}

@keyframes neonTextPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.75; }
}

@keyframes scanLine {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

@keyframes holoShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes glitchX {
  0%, 100% { clip-path: inset(0 0 98% 0); transform: translateX(0); }
  20%       { clip-path: inset(0 0 60% 0); transform: translateX(-4px); }
  40%       { clip-path: inset(30% 0 40% 0); transform: translateX(4px); }
  60%       { clip-path: inset(50% 0 20% 0); transform: translateX(-2px); }
  80%       { clip-path: inset(70% 0 5% 0); transform: translateX(2px); }
}

@keyframes sakuraFall {
  0%   { transform: translateY(-20px) rotate(0deg) translateX(0); opacity: 1; }
  25%  { transform: translateY(25vh) rotate(90deg) translateX(20px); }
  50%  { transform: translateY(50vh) rotate(180deg) translateX(-15px); }
  75%  { transform: translateY(75vh) rotate(270deg) translateX(10px); }
  100% { transform: translateY(105vh) rotate(360deg) translateX(-5px); opacity: 0; }
}

@keyframes orb {
  0%,100% { transform: scale(1) translateY(0); opacity: 0.6; }
  50%      { transform: scale(1.15) translateY(-10px); opacity: 0.9; }
}

@keyframes gridFlicker {
  0%, 98%, 100%  { opacity: 1; }
  99%             { opacity: 0.4; }
}

@keyframes borderFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* holoPulse: removed filter:hue-rotate — GPU killer on mobile */
@keyframes holoPulse {
  0%, 100% { background-position: 0% 50%; opacity: 0.6; }
  50%       { background-position: 100% 50%; opacity: 0.8; }
}

@keyframes waveIn {
  from { opacity: 0; transform: translateX(-20px) skewX(2deg); }
  to   { opacity: 1; transform: translateX(0) skewX(0); }
}

/* statusBlink: GPU-only — opacity only, no box-shadow animation */
@keyframes statusBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

/* ─── Skeleton keyframes — webkit-prefixed for iOS Safari < 13 / Android WebView < 80 ─── */
@-webkit-keyframes jawChatter {
  0%, 45%, 100% { -webkit-transform: rotate(0deg);  transform: rotate(0deg);  }
  10%            { -webkit-transform: rotate(14deg); transform: rotate(14deg); }
  20%            { -webkit-transform: rotate(3deg);  transform: rotate(3deg);  }
  30%            { -webkit-transform: rotate(16deg); transform: rotate(16deg); }
  40%            { -webkit-transform: rotate(4deg);  transform: rotate(4deg);  }
}
@keyframes jawChatter {
  0%, 45%, 100% { transform: rotate(0deg);  }
  10%            { transform: rotate(14deg); }
  20%            { transform: rotate(3deg);  }
  30%            { transform: rotate(16deg); }
  40%            { transform: rotate(4deg);  }
}

@-webkit-keyframes ribBreath {
  0%, 100% { -webkit-transform: scaleX(1) scaleY(1);          transform: scaleX(1) scaleY(1);          }
  50%       { -webkit-transform: scaleX(1.06) scaleY(1.03);   transform: scaleX(1.06) scaleY(1.03);   }
}
@keyframes ribBreath {
  0%, 100% { transform: scaleX(1) scaleY(1);        }
  50%       { transform: scaleX(1.06) scaleY(1.03); }
}

@-webkit-keyframes armSwing {
  0%, 100% { -webkit-transform: rotate(-8deg); transform: rotate(-8deg); }
  50%       { -webkit-transform: rotate(8deg);  transform: rotate(8deg);  }
}
@keyframes armSwing {
  0%, 100% { transform: rotate(-8deg); }
  50%       { transform: rotate(8deg);  }
}

/* ─── Skeleton CSS animation classes
   transform-box:fill-box makes transform-origin relative to the element's
   own bounding box — required for correct SVG rotation on iOS Safari.      ─── */
.sk-jaw {
  -webkit-animation: jawChatter 2.8s ease-in-out infinite;
          animation: jawChatter 2.8s ease-in-out infinite;
  -webkit-transform-box: fill-box;
          transform-box: fill-box;
  -webkit-transform-origin: center top;
          transform-origin: center top;
}
.sk-rib {
  -webkit-animation: ribBreath 2.4s ease-in-out infinite;
          animation: ribBreath 2.4s ease-in-out infinite;
  -webkit-transform-box: fill-box;
          transform-box: fill-box;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
/* Left arm: shoulder pivot is the rightmost top corner of the group bbox */
.sk-arm-l {
  -webkit-animation: armSwing 3.5s ease-in-out infinite;
          animation: armSwing 3.5s ease-in-out infinite;
  -webkit-transform-box: fill-box;
          transform-box: fill-box;
  -webkit-transform-origin: 90% 0%;
          transform-origin: 90% 0%;
}
/* Right arm: shoulder pivot is the leftmost top corner of the group bbox */
.sk-arm-r {
  -webkit-animation: armSwing 3.5s ease-in-out infinite;
          animation: armSwing 3.5s ease-in-out infinite;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
  -webkit-transform-box: fill-box;
          transform-box: fill-box;
  -webkit-transform-origin: 10% 0%;
          transform-origin: 10% 0%;
}
.sk-eye-l {
  -webkit-animation: eyeBlink 5s infinite;
          animation: eyeBlink 5s infinite;
  -webkit-transform-box: fill-box;
          transform-box: fill-box;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
.sk-eye-r {
  -webkit-animation: eyeBlink 5s infinite;
          animation: eyeBlink 5s infinite;
  -webkit-animation-delay: 0.07s;
          animation-delay: 0.07s;
  -webkit-transform-box: fill-box;
          transform-box: fill-box;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}

/* ─── Performance: kill decorative animations on panel open ─── */
/* Skeleton only animates on login screen; stop it once panel is open to free CPU */
#panel.open ~ * .sk-jaw,
#panel.open ~ * .sk-rib,
#panel.open ~ * .sk-arm-l,
#panel.open ~ * .sk-arm-r,
#panel.open ~ * .sk-eye-l,
#panel.open ~ * .sk-eye-r { animation: none !important; }

/* Kill non-essential continuous animations inside open panel */
#panel.open .orb { animation-duration: 12s; }
#panel.open #scanLines { animation-play-state: paused; }

/* Reduce shimmer to only what's visible */
.modal::before { animation-duration: 3s; }

/* prefers-reduced-motion — kill all decorative motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}