/* ═══════════════════════════════════════════════════════════════════════
   FastFixCell.com — Animations v3.0
   Futuristic Micro-Interactions + Scroll Reveal + Parallax
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Scroll Reveal ──────────────────────────────────────────── */
.layout-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.layout-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Stagger children ───────────────────────────────────────── */
.stagger-children > * {
  opacity: 0;
  transform: translateY(30px);
}
.stagger-children > *.is-visible {
  animation: staggerIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.stagger-children > *:nth-child(1).is-visible { animation-delay: 0ms; }
.stagger-children > *:nth-child(2).is-visible { animation-delay: 80ms; }
.stagger-children > *:nth-child(3).is-visible { animation-delay: 160ms; }
.stagger-children > *:nth-child(4).is-visible { animation-delay: 240ms; }
.stagger-children > *:nth-child(5).is-visible { animation-delay: 320ms; }
.stagger-children > *:nth-child(6).is-visible { animation-delay: 400ms; }
.stagger-children > *:nth-child(7).is-visible { animation-delay: 480ms; }
.stagger-children > *:nth-child(8).is-visible { animation-delay: 560ms; }
@keyframes staggerIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Fade In ────────────────────────────────────────────────── */
.fade-in {
  animation: fadeIn 0.6s ease both;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Slide Up ───────────────────────────────────────────────── */
.slide-up {
  animation: slideUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Scale In ───────────────────────────────────────────────── */
.scale-in {
  animation: scaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* ── Glow Pulse ─────────────────────────────────────────────── */
.glow-pulse {
  animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(37, 99, 235, 0.3); }
  50% { box-shadow: 0 0 50px rgba(37, 99, 235, 0.6); }
}

/* ── Float ──────────────────────────────────────────────────── */
.float {
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ── Shimmer (Loading Skeleton) ─────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── Neon Border Animation ──────────────────────────────────── */
.neon-border {
  position: relative;
}
.neon-border::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(45deg, var(--primary-500), var(--neon-cyan), var(--accent-500), var(--neon-purple), var(--primary-500));
  background-size: 400% 400%;
  z-index: -1;
  animation: neonRotate 4s linear infinite;
  opacity: 0;
  transition: opacity var(--transition-base);
}
.neon-border:hover::after { opacity: 1; }
@keyframes neonRotate {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Scan Line Overlay ──────────────────────────────────────── */
.scan-overlay {
  position: relative;
  overflow: hidden;
}
.scan-overlay::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary-400), transparent);
  box-shadow: 0 0 20px var(--primary-400);
  animation: scanDown 3s linear infinite;
  pointer-events: none;
  z-index: 5;
  opacity: 0.3;
}
@keyframes scanDown {
  0% { top: 0; }
  100% { top: 100%; }
}

/* ── Toast Notification ─────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-heavy);
  -webkit-backdrop-filter: var(--glass-blur-heavy);
  border: var(--border-default);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-6);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-toast);
  transition: transform var(--transition-spring);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.toast.show {
  transform: translateX(-50%) translateY(0);
}
.toast-success { border-color: var(--success); }
.toast-error { border-color: var(--error); }
.toast-info { border-color: var(--primary-400); }