/* ============================================
   Hoty GF — Animation System
   Keyframes, Scroll Animations, Hover Effects
   ============================================ */

/* ---------- Keyframes ---------- */

/* Background rotation */
@keyframes rotate-bg {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Floating elements */
@keyframes float-slow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes float-medium {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  25% { transform: translateY(-6px) translateX(3px); }
  50% { transform: translateY(-12px) translateX(0px); }
  75% { transform: translateY(-5px) translateX(-3px); }
}

/* Pulse glow for dots */
@keyframes pulse-glow {
  0%, 100% { 
    opacity: 1; 
    box-shadow: 0 0 0 0 rgba(0, 180, 216, 0.4); 
  }
  50% { 
    opacity: 0.8; 
    box-shadow: 0 0 0 8px rgba(0, 180, 216, 0); 
  }
}

/* Audio waveform bars */
@keyframes waveform {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

/* Typing dots bounce */
@keyframes typing-bounce {
  0%, 80%, 100% { 
    transform: translateY(0); 
    opacity: 0.4;
  }
  40% { 
    transform: translateY(-6px); 
    opacity: 1;
  }
}

/* Shimmer effect */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

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

/* Scale in */
@keyframes scale-in {
  0% { 
    opacity: 0; 
    transform: scale(0.94); 
  }
  100% { 
    opacity: 1; 
    transform: scale(1); 
  }
}

/* Slide up */
@keyframes slide-up {
  0% { 
    opacity: 0; 
    transform: translateY(24px); 
  }
  100% { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

/* Slide in from left */
@keyframes slide-left {
  0% { 
    opacity: 0; 
    transform: translateX(-30px); 
  }
  100% { 
    opacity: 1; 
    transform: translateX(0); 
  }
}

/* Slide in from right */
@keyframes slide-right {
  0% { 
    opacity: 0; 
    transform: translateX(30px); 
  }
  100% { 
    opacity: 1; 
    transform: translateX(0); 
  }
}

/* Fade in */
@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Counter tick */
@keyframes count-up {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Subtle background particles (Light theme pastel translucent dots) */
@keyframes particle-float {
  0% {
    transform: translateY(100vh) translateX(0) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
    transform: translateY(90vh) translateX(10px) scale(1);
  }
  90% {
    opacity: 0.3;
  }
  100% {
    transform: translateY(-10vh) translateX(-10px) scale(0.6);
    opacity: 0;
  }
}

/* Ring pulse for avatars */
@keyframes ring-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(124, 58, 237, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(124, 58, 237, 0);
  }
}

/* ---------- Scroll Animation Classes ---------- */

/* Base: elements start invisible */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

/* Variants */
.animate-on-scroll.anim-slide-up {
  transform: translateY(30px);
}
.animate-on-scroll.anim-slide-up.animated {
  transform: translateY(0);
}

.animate-on-scroll.anim-slide-left {
  opacity: 0;
  transform: translateX(-30px);
}
.animate-on-scroll.anim-slide-left.animated {
  opacity: 1;
  transform: translateX(0);
}

.animate-on-scroll.anim-slide-right {
  opacity: 0;
  transform: translateX(30px);
}
.animate-on-scroll.anim-slide-right.animated {
  opacity: 1;
  transform: translateX(0);
}

.animate-on-scroll.anim-scale {
  opacity: 0;
  transform: scale(0.95);
}
.animate-on-scroll.anim-scale.animated {
  opacity: 1;
  transform: scale(1);
}

.animate-on-scroll.anim-fade {
  transform: none;
  opacity: 0;
}
.animate-on-scroll.anim-fade.animated {
  opacity: 1;
}

/* Stagger delays for grid children */
.stagger-1 { transition-delay: 0.04s !important; }
.stagger-2 { transition-delay: 0.08s !important; }
.stagger-3 { transition-delay: 0.12s !important; }
.stagger-4 { transition-delay: 0.16s !important; }
.stagger-5 { transition-delay: 0.2s !important; }
.stagger-6 { transition-delay: 0.24s !important; }
.stagger-7 { transition-delay: 0.28s !important; }
.stagger-8 { transition-delay: 0.32s !important; }

/* ---------- Hero Entrance Animations ---------- */
.hero-badge {
  animation: slide-up 0.6s ease 0.1s both;
}

.hero-title .line:nth-child(1) {
  animation: slide-up 0.6s ease 0.2s both;
}
.hero-title .line:nth-child(2) {
  animation: slide-up 0.6s ease 0.3s both;
}
.hero-title .line:nth-child(3) {
  animation: slide-up 0.6s ease 0.4s both;
}

.hero-description {
  animation: slide-up 0.6s ease 0.5s both;
}

.hero-buttons {
  animation: slide-up 0.6s ease 0.6s both;
}

.hero-stats {
  animation: fade-in 0.8s ease 0.8s both;
}

.hero-visual {
  animation: scale-in 0.8s ease 0.4s both;
}

.floating-card {
  animation: scale-in 0.5s ease both;
}

.fc-call { animation-delay: 0.8s; }
.fc-message { animation-delay: 1s; }
.fc-online { animation-delay: 1.2s; }
.fc-duration { animation-delay: 1.4s; }

/* ---------- Background Particles (Soft Light Accents) ---------- */
.bg-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.bg-particles .particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(0, 180, 216, 0.18);
  border-radius: 50%;
  animation: particle-float linear infinite;
}

.bg-particles .particle:nth-child(1) {
  left: 10%;
  animation-duration: 20s;
  animation-delay: 0s;
}
.bg-particles .particle:nth-child(2) {
  left: 25%;
  animation-duration: 24s;
  animation-delay: 3s;
  background: rgba(124, 58, 237, 0.16);
}
.bg-particles .particle:nth-child(3) {
  left: 40%;
  animation-duration: 22s;
  animation-delay: 5s;
}
.bg-particles .particle:nth-child(4) {
  left: 55%;
  animation-duration: 26s;
  animation-delay: 2s;
  background: rgba(236, 72, 153, 0.15);
}
.bg-particles .particle:nth-child(5) {
  left: 70%;
  animation-duration: 21s;
  animation-delay: 4s;
  background: rgba(124, 58, 237, 0.14);
}
.bg-particles .particle:nth-child(6) {
  left: 85%;
  animation-duration: 25s;
  animation-delay: 1s;
}
.bg-particles .particle:nth-child(7) {
  left: 50%;
  animation-duration: 23s;
  animation-delay: 6s;
  background: rgba(0, 180, 216, 0.16);
}
.bg-particles .particle:nth-child(8) {
  left: 15%;
  animation-duration: 27s;
  animation-delay: 7s;
  background: rgba(236, 72, 153, 0.12);
}

/* ---------- Reduced Motion ---------- */
@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;
  }

  .animate-on-scroll {
    opacity: 1;
    transform: none;
  }

  .floating-card {
    animation: none;
  }

  .bg-particles {
    display: none;
  }

  .hero-bg::before {
    animation: none;
  }
}