/* ============================================================
   VyaparOS — Keyframe Animations & Transitions
   animations.css
   ============================================================ */

/* ── Keyframes ── */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.75); }
}

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

@keyframes float-slow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-6px) rotate(0.8deg); }
  66%       { transform: translateY(-3px) rotate(-0.8deg); }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes ping {
  0%        { transform: scale(1); opacity: 0.9; }
  75%, 100% { transform: scale(2.2); opacity: 0; }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes data-flow {
  0%   { offset-distance: 0%; opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes border-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(13,110,253,0); }
  50%       { box-shadow: 0 0 0 3px rgba(13,110,253,0.25), 0 0 20px rgba(13,110,253,0.2); }
}

@keyframes typing-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes flow-particle {
  0%   { left: 0%; opacity: 0; transform: translateY(-50%) scale(0.6); }
  10%  { opacity: 1; transform: translateY(-50%) scale(1); }
  90%  { opacity: 1; transform: translateY(-50%) scale(1); }
  100% { left: 100%; opacity: 0; transform: translateY(-50%) scale(0.6); }
}

@keyframes pulse-ring {
  0%   { transform: scale(0.96); box-shadow: 0 0 0 0 rgba(13,110,253,0.5); }
  70%  { transform: scale(1.04); box-shadow: 0 0 0 14px rgba(13,110,253,0); }
  100% { transform: scale(0.96); box-shadow: 0 0 0 0 rgba(13,110,253,0); }
}

@keyframes pulse-ring-amber {
  0%   { transform: scale(0.96); box-shadow: 0 0 0 0 rgba(255,159,0,0.5); }
  70%  { transform: scale(1.04); box-shadow: 0 0 0 14px rgba(255,159,0,0); }
  100% { transform: scale(0.96); box-shadow: 0 0 0 0 rgba(255,159,0,0); }
}

@keyframes node-pulse-glow {
  0%, 100% {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  }
  50% {
    border-color: rgba(13, 110, 253, 0.6);
    box-shadow: 0 0 20px rgba(13, 110, 253, 0.35);
  }
}

@keyframes beam-scan {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes section-focus-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
  }
  30% {
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25), 0 12px 40px rgba(13, 110, 253, 0.15);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
  }
}

.section-focus-active {
  animation: section-focus-glow 1.4s ease forwards;
}

@keyframes subtle-breath {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-3px); }
}

/* ── Animation Utilities ── */
.animate-float        { animation: float 4s ease-in-out infinite; will-change: transform; }
.animate-float-slow   { animation: float-slow 6s ease-in-out infinite; will-change: transform; }
.animate-spin-slow    { animation: spin-slow 20s linear infinite; }
.animate-ping         { animation: ping 1.5s ease-out infinite; }
.animate-shimmer      { animation: shimmer 3s linear infinite; }
.animate-border-glow  { animation: border-glow 3s ease infinite; }
.animate-pulse-ring   { animation: pulse-ring 2.5s ease infinite; }
.animate-pulse-amber  { animation: pulse-ring-amber 2.5s ease infinite; }
.animate-breath       { animation: subtle-breath 3s ease-in-out infinite; }

/* Entrance animations */
.anim-slide-up { animation: slide-up 0.6s ease both; }
.anim-fade-in  { animation: fade-in 0.6s ease both; }
.anim-scale-in { animation: scale-in 0.5s ease both; }

/* Delays */
.anim-delay-100 { animation-delay: 0.1s; }
.anim-delay-200 { animation-delay: 0.2s; }
.anim-delay-300 { animation-delay: 0.3s; }
.anim-delay-400 { animation-delay: 0.4s; }
.anim-delay-500 { animation-delay: 0.5s; }

/* ── Shimmer Gradient ── */
.shimmer-text {
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 50%, var(--primary) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}

/* ── Hover Lift ── */
.hover-lift { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }

/* ── Typewriter cursor ── */
.typewriter-cursor {
  display: inline-block;
  width: 3px;
  height: 1em;
  background: var(--accent);
  margin-left: 4px;
  vertical-align: text-bottom;
  animation: typing-cursor 1s ease infinite;
}

/* ── 8-Card Architecture Board Keyframes ── */
@keyframes svg-dash-flow {
  from { stroke-dashoffset: 24; }
  to   { stroke-dashoffset: 0; }
}

@keyframes laser-sweep {
  0%   { top: 0%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

@keyframes bar-growth {
  0%   { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}

@keyframes sync-ripple {
  0%   { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}

@keyframes radar-sweep {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes packet-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%      { transform: scale(1.4); opacity: 1; filter: drop-shadow(0 0 6px rgba(13,110,253,0.8)); }
}

@keyframes arch-card-entry {
  0%   { opacity: 0; transform: translateY(24px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ════════════════════════════════════════════════════════════
   4 DISTINCT DIAGRAM SHOWCASE ANIMATION SUITES
   ════════════════════════════════════════════════════════════ */

/* ── 1. CARD 1 (6-steps): Fracture Alert & Dual-Sided Radar ── */
@keyframes alert-grid-flicker {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(1.02); }
}
@keyframes problem-radar-sweep {
  0%   { left: 0%; opacity: 0; }
  10%  { opacity: 0.85; }
  90%  { opacity: 0.85; }
  100% { left: 100%; opacity: 0; }
}
@keyframes warning-beacon-ping {
  0%   { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70%  { transform: scale(1.6); opacity: 0.2; box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
  100% { transform: scale(2.2); opacity: 0; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
@keyframes warning-halo-breathe {
  0%, 100% { transform: scale(1); opacity: 0.45; filter: hue-rotate(0deg); }
  50%      { transform: scale(1.18); opacity: 0.75; filter: hue-rotate(15deg); }
}

/* ── 2. CARD 2 (9.1-steps): Cyber Matrix Streams & Conic Beam & Corner Docks ── */
@keyframes matrix-rain-stream {
  0%   { transform: translateY(-100%); opacity: 0; }
  30%  { opacity: 0.8; }
  70%  { opacity: 0.8; }
  100% { transform: translateY(100%); opacity: 0; }
}
@keyframes conic-border-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes corner-dock-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%      { transform: scale(1.25); opacity: 1; filter: drop-shadow(0 0 6px #0284C7); }
}
@keyframes cyber-grid-scroll {
  0%   { background-position: 0 0; }
  100% { background-position: 40px 40px; }
}

/* ── 3. CARD 3 (9-steps): Concentric Telemetry Waves & Perimeter Loop Tracer ── */
@keyframes ripple-wave-1 {
  0%   { transform: scale(0.4); opacity: 0.9; }
  50%  { opacity: 0.4; }
  100% { transform: scale(2.6); opacity: 0; }
}
@keyframes ripple-wave-2 {
  0%   { transform: scale(0.2); opacity: 0.8; }
  60%  { opacity: 0.35; }
  100% { transform: scale(2.9); opacity: 0; }
}
@keyframes tracer-loop {
  0%   { top: 0; left: 0; width: 0; height: 2px; }
  25%  { top: 0; left: 0; width: 100%; height: 2px; }
  26%  { top: 0; right: 0; left: auto; width: 2px; height: 0; }
  50%  { top: 0; right: 0; left: auto; width: 2px; height: 100%; }
  51%  { bottom: 0; right: 0; top: auto; left: auto; width: 0; height: 2px; }
  75%  { bottom: 0; right: 0; top: auto; left: auto; width: 100%; height: 2px; }
  76%  { bottom: 0; left: 0; top: auto; right: auto; width: 2px; height: 0; }
  100% { bottom: 0; left: 0; top: auto; right: auto; width: 2px; height: 100%; }
}
@keyframes orbit-telemetry-particle {
  0%   { transform: rotate(0deg) translateX(180px) rotate(0deg); opacity: 0.8; }
  50%  { opacity: 1; filter: drop-shadow(0 0 8px #10B981); }
  100% { transform: rotate(360deg) translateX(180px) rotate(-360deg); opacity: 0.8; }
}

/* ── 4. CARD 4 (8-steps): Celestial Horizon Nebula & Prism Shimmer Sweep ── */
@keyframes nebula-breathing {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.55; }
  50%      { transform: scale(1.22) rotate(180deg); opacity: 0.85; filter: hue-rotate(25deg); }
}
@keyframes prism-diagonal-sweep {
  0%   { transform: translate(-120%, -120%) rotate(45deg); opacity: 0; }
  15%  { opacity: 0.75; }
  85%  { opacity: 0.75; }
  100% { transform: translate(120%, 120%) rotate(45deg); opacity: 0; }
}
@keyframes star-particle-twinkle {
  0%, 100% { transform: translateY(0) scale(0.7); opacity: 0.3; }
  50%      { transform: translateY(-16px) scale(1.3); opacity: 1; filter: drop-shadow(0 0 5px #F59E0B); }
}
@keyframes horizon-beacon-glow {
  0%, 100% { box-shadow: 0 0 15px rgba(124, 58, 237, 0.4), 0 0 30px rgba(245, 158, 11, 0.2); }
  50%      { box-shadow: 0 0 30px rgba(124, 58, 237, 0.7), 0 0 50px rgba(245, 158, 11, 0.4); }
}