/* ====== animations.css ====== */

/* -------- Keyframes -------- */
@keyframes auroraDrift {
  0%,100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(60px, -40px) scale(1.1); }
  50% { transform: translate(-30px, 60px) scale(0.95); }
  75% { transform: translate(40px, 30px) scale(1.05); }
}

@keyframes glowLineMove {
  to { transform: translateX(calc(100vw + 600px)); }
}

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

@keyframes pulseShape {
  0%,100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.15); opacity: 1; }
}

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

@keyframes tickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes scrollText {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes loadProgress {
  0% { width: 0%; }
  50% { width: 60%; }
  100% { width: 100%; }
}

@keyframes pulseText {
  0%,100% { opacity: 0.4; }
  50% { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes rippleAnim {
  to { transform: scale(6); opacity: 0; }
}

@keyframes floatShape {
  0%,100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(20px, -20px) rotate(90deg); }
  50% { transform: translate(-10px, 30px) rotate(180deg); }
  75% { transform: translate(-20px, -10px) rotate(270deg); }
}

@keyframes whatsappPulse {
  0% { box-shadow: 0 4px 20px rgba(37,211,102,0.4); }
  50% { box-shadow: 0 4px 30px rgba(37,211,102,0.7); }
  100% { box-shadow: 0 4px 20px rgba(37,211,102,0.4); }
}

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-20px) scale(0.95); }
}

@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* -------- Scroll-triggered Animations -------- */
/* NOTE: [data-anim] opacity is managed by GSAP fromTo(), not CSS.
   CSS only sets initial hidden state; GSAP animates to opacity:1. */
[data-anim] {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  [data-anim] { opacity: 1 !important; }
}

/* -------- Scroll Progress -------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  z-index: 100000;
  background: linear-gradient(90deg, var(--primary-light), var(--accent));
  transition: width 0.1s linear;
}

/* -------- Mouse Follower -------- */
.mouse-follower {
  position: fixed;
  width: 12px; height: 12px;
  background: var(--primary-light);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%) scale(1);
  transition: width 0.3s, height 0.3s, background 0.3s, opacity 0.3s;
  mix-blend-mode: difference;
  opacity: 0.6;
}

.mouse-follower.hover {
  width: 40px; height: 40px;
  background: var(--primary);
  opacity: 0.3;
}

/* -------- Floating Shapes -------- */
.floating-shape {
  display: none !important;
}