/* ============================================
   PIXOSWIFTRC – ANIMATIONS
   animations.css | Version 1.0
============================================ */

/* --- KEYFRAMES --- */

@keyframes hero-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.75); }
}

@keyframes float-card {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes scroll-hint-fade {
  0%, 100% { opacity: 0.4; transform: translateX(-50%) translateY(0); }
  50% { opacity: 0.9; transform: translateX(-50%) translateY(4px); }
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes fade-in-up-anim {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-left-anim {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-in-right-anim {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes particle-float {
  0% { transform: translateY(100vh) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 0.6; }
  100% { transform: translateY(-10vh) translateX(30px); opacity: 0; }
}

/* --- SCROLL-TRIGGERED ANIMATION CLASSES --- */

.fade-in-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: var(--delay, 0s);
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: var(--delay, 0s);
}

.fade-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.fade-in-right {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: var(--delay, 0s);
}

.fade-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* --- PANEL GLOW PULSE --- */
.panel-glow {
  animation: glow-pulse 4s ease infinite;
}

/* --- HERO CARD FLOAT --- */
.hero-feature-card {
  will-change: transform;
}

/* --- PAGE TRANSITIONS --- */
body {
  animation: fade-in-up-anim 0.5s ease both;
}

/* --- HOVER EFFECTS --- */
.feature-card,
.game-card,
.value-card,
.tool-card,
.faq-item,
.resource-card {
  will-change: transform;
}

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

  .fade-in-up,
  .fade-in-left,
  .fade-in-right {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-bg-img {
    animation: none !important;
  }
}