/* ==========================================================================
   FACEBMI — Animations animation.css
   ========================================================================== */

/* ---------------------------------------------------------------------- 
   Screen transitions
   ---------------------------------------------------------------------- */
@keyframes screenFadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes screenFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-14px); }
}

.screen.is-entering {
  animation: screenFadeIn var(--transition-slow, 0.4s) forwards;
}

.screen.is-leaving {
  animation: screenFadeOut var(--transition-medium, 0.25s) forwards;
}

/* ---------------------------------------------------------------------- 
   Whole-page transitions
   ---------------------------------------------------------------------- */
.page-fade-in {
  animation: screenFadeIn var(--transition-slow, 0.4s) forwards;
}

.page-fade-out {
  animation: screenFadeOut var(--transition-fast, 0.15s) forwards;
}

/* ---------------------------------------------------------------------- 
   Card / element entrance
   ---------------------------------------------------------------------- */
@keyframes cardPopIn {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---------------------------------------------------------------------- 
   Ambient glow pulse (borders / cards)
   ---------------------------------------------------------------------- */
@keyframes glowPulse {
  0%, 100% { box-shadow: var(--shadow-glow-sm, 0 0 10px rgba(47, 143, 255, 0.2)); }
  50%      { box-shadow: var(--shadow-glow-lg, 0 0 25px rgba(47, 143, 255, 0.5)); }
}

.scanner-card {
  animation: cardPopIn var(--transition-slow, 0.4s) var(--ease-out, ease-out) both,
             glowPulse 3.4s ease-in-out infinite 0.4s;
}

.result-card {
  animation: cardPopIn var(--transition-slow, 0.4s) var(--ease-out, ease-out) both,
             glowPulse 3.8s ease-in-out infinite 0.4s;
}

/* How It Works — workflow step markers ambient glow */
.workflow-step-marker {
  animation: glowPulse 3.4s ease-in-out infinite;
}

.workflow-step:nth-child(3) .workflow-step-marker { animation-delay: 0.3s; }
.workflow-step:nth-child(5) .workflow-step-marker { animation-delay: 0.6s; }
.workflow-step:nth-child(7) .workflow-step-marker { animation-delay: 0.9s; }
.workflow-step:nth-child(9) .workflow-step-marker { animation-delay: 1.2s; }
.workflow-step:nth-child(11) .workflow-step-marker { animation-delay: 1.5s; }
.workflow-step:nth-child(13) .workflow-step-marker { animation-delay: 1.8s; }

/* ---------------------------------------------------------------------- 
   Scan line sweep (inside scanner card)
   ---------------------------------------------------------------------- */
@keyframes scanLineMove {
  0%   { top: 4%;  opacity: 0; }
  8%   { opacity: 1; }
  50%  { top: 50%; opacity: 1; }
  92%  { opacity: 1; }
  100% { top: 96%; opacity: 0; }
}

/* ---------------------------------------------------------------------- 
   Center crosshair pulse
   ---------------------------------------------------------------------- */
@keyframes crosshairPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.55; }
  50%      { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}

.center-crosshair {
  animation: crosshairPulse 2.4s ease-in-out infinite;
}

/* ---------------------------------------------------------------------- 
   Status text ambient glow
   ---------------------------------------------------------------------- */
@keyframes textGlow {
  0%, 100% { text-shadow: 0 0 12px rgba(87, 168, 255, 0.35); }
  50%      { text-shadow: 0 0 22px rgba(87, 168, 255, 0.65); }
}

.status-text,
.scanning-text {
  animation: textGlow 2.6s ease-in-out infinite;
}

/* ---------------------------------------------------------------------- 
   Button press / click feedback
   ---------------------------------------------------------------------- */
@keyframes btnPress {
  0%   { transform: scale(1); }
  50%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}

.is-clicked {
  animation: btnPress 0.25s var(--ease-out, ease-out);
}

/* ---------------------------------------------------------------------- 
   Loading spinner dots
   ---------------------------------------------------------------------- */
@keyframes dotFade {
  0%, 80%, 100% { opacity: 0.25; }
  40%           { opacity: 1; }
}

.dots span {
  animation: dotFade 1.4s infinite;
}

.dots span:nth-child(1) { animation-delay: 0s; }
.dots span:nth-child(2) { animation-delay: 0.2s; }
.dots span:nth-child(3) { animation-delay: 0.4s; }

/* ---------------------------------------------------------------------- 
   Reduced motion support
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}