/* ============================================
   VISTR+ Animations
   ============================================ */

/* Scroll Reveal */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale.active {
  opacity: 1;
  transform: scale(1);
}

/* Stagger children */
.stagger-children .reveal:nth-child(1) { transition-delay: 0s; }
.stagger-children .reveal:nth-child(2) { transition-delay: 0.1s; }
.stagger-children .reveal:nth-child(3) { transition-delay: 0.2s; }
.stagger-children .reveal:nth-child(4) { transition-delay: 0.3s; }
.stagger-children .reveal:nth-child(5) { transition-delay: 0.4s; }
.stagger-children .reveal:nth-child(6) { transition-delay: 0.5s; }
.stagger-children .reveal:nth-child(7) { transition-delay: 0.6s; }
.stagger-children .reveal:nth-child(8) { transition-delay: 0.7s; }

/* Floating Card Animations */
@keyframes float-card-1 {
  0%, 100% { transform: translateY(0) rotateX(5deg) rotateY(-5deg); }
  50% { transform: translateY(-20px) rotateX(8deg) rotateY(-8deg); }
}

@keyframes float-card-2 {
  0%, 100% { transform: translateY(0) rotateX(-3deg) rotateY(5deg); }
  50% { transform: translateY(-15px) rotateX(-6deg) rotateY(8deg); }
}

@keyframes float-card-3 {
  0%, 100% { transform: translateY(0) rotateX(4deg) rotateY(3deg); }
  50% { transform: translateY(-25px) rotateX(7deg) rotateY(6deg); }
}

.floating-card:nth-child(1) { animation: float-card-1 6s ease-in-out infinite; }
.floating-card:nth-child(2) { animation: float-card-2 7s ease-in-out infinite 0.5s; }
.floating-card:nth-child(3) { animation: float-card-3 5s ease-in-out infinite 1s; }
.floating-card:nth-child(4) { animation: float-card-1 8s ease-in-out infinite 1.5s; }
.floating-card:nth-child(5) { animation: float-card-2 6.5s ease-in-out infinite 2s; }

/* Pulse glow for AI elements */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(201, 168, 76, 0.2); }
  50% { box-shadow: 0 0 40px rgba(201, 168, 76, 0.5), 0 0 80px rgba(201, 168, 76, 0.2); }
}

.pulse-glow {
  animation: pulse-glow 3s ease-in-out infinite;
}

/* Scanning line for ANPR */
@keyframes scan-line {
  0% { top: 0; opacity: 1; }
  50% { opacity: 0.5; }
  100% { top: 100%; opacity: 1; }
}

.scan-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #C9A84C, transparent);
  animation: scan-line 2.5s ease-in-out infinite;
  z-index: 2;
}

/* Face recognition box */
@keyframes face-box-pulse {
  0%, 100% { border-color: rgba(201, 168, 76, 0.8); box-shadow: 0 0 10px rgba(201, 168, 76, 0.3); }
  50% { border-color: rgba(201, 168, 76, 1); box-shadow: 0 0 25px rgba(201, 168, 76, 0.6); }
}

.face-box {
  animation: face-box-pulse 2s ease-in-out infinite;
}

/* Number plate highlight */
@keyframes plate-highlight {
  0%, 100% { outline-color: rgba(229, 200, 110, 0.6); }
  50% { outline-color: rgba(229, 200, 110, 1); outline-offset: 4px; }
}

.plate-highlight {
  animation: plate-highlight 1.5s ease-in-out infinite;
}

/* Gradient text shimmer */
@keyframes text-shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.text-shimmer {
  background-size: 200% auto;
  animation: text-shimmer 4s linear infinite;
}

/* Orbit animation for 3D scene decorations */
@keyframes orbit {
  0% { transform: rotate(0deg) translateX(120px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(120px) rotate(-360deg); }
}

.orbit-item {
  animation: orbit 20s linear infinite;
}

/* Typing cursor */
@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.typing-cursor::after {
  content: '|';
  animation: blink-cursor 0.8s step-end infinite;
  color: var(--accent-cyan);
}

/* Hero badge pulse */
@keyframes badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.hero-badge {
  animation: badge-pulse 3s ease-in-out infinite;
}

/* Marquee */
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee-track {
  animation: marquee-scroll 30s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

/* Progress bar fill */
@keyframes fill-bar {
  from { width: 0; }
}

.progress-fill {
  animation: fill-bar 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Ripple effect on buttons */
@keyframes ripple {
  0% { transform: scale(0); opacity: 0.5; }
  100% { transform: scale(4); opacity: 0; }
}

.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple::after {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: scale(0);
  pointer-events: none;
}

.btn-ripple:active::after {
  animation: ripple 0.6s ease-out;
}

/* Parallax float */
@keyframes parallax-float {
  0%, 100% { transform: translateY(0) translateX(0); }
  25% { transform: translateY(-10px) translateX(5px); }
  50% { transform: translateY(-5px) translateX(-5px); }
  75% { transform: translateY(-15px) translateX(3px); }
}

.parallax-element {
  animation: parallax-float 8s ease-in-out infinite;
}

/* Camera feed static noise overlay */
@keyframes static-noise {
  0%, 100% { opacity: 0.03; }
  50% { opacity: 0.06; }
}

.camera-noise {
  animation: static-noise 0.1s steps(5) infinite;
}

/* Timeline connector draw */
@keyframes draw-line {
  from { height: 0; }
  to { height: 100%; }
}

.timeline-connector.active {
  animation: draw-line 0.8s ease-out forwards;
}

/* Rotate for loading states */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1s linear infinite;
}

/* Preloader fade out */
@keyframes preloader-out {
  to { opacity: 0; visibility: hidden; }
}

.preloader.loaded {
  animation: preloader-out 0.5s ease forwards;
  pointer-events: none;
}

/* Gradient border animation */
@keyframes gradient-border {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-border-animated {
  background-size: 300% 300%;
  animation: gradient-border 4s ease infinite;
}

/* Counter number roll */
@keyframes count-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.counter-animated {
  animation: count-up 0.5s ease-out forwards;
}