/* ============================================================
   PIXOSWIFTRC — ANIMATIONS
   animations.css
   ============================================================ */

/* --- KEYFRAMES --- */
@keyframes glowPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.05); }
}

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

@keyframes scrollBounce {
  0%, 100% { transform: rotate(45deg) translateY(0); opacity: 0.8; }
  50%       { transform: rotate(45deg) translateY(6px); opacity: 1; }
}

@keyframes particleDrift {
  0%   { transform: translateY(100vh) translateX(0); opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.3; }
  100% { transform: translateY(-10vh) translateX(40px); opacity: 0; }
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

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

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

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

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

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

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

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

.fade-in-up.visible,
.fade-in-left.visible,
.fade-in-right.visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* --- PARTICLE SYSTEM --- */
.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.5);
  animation: particleDrift linear infinite;
  pointer-events: none;
}

/* --- HERO GRADIENT ANIMATION --- */
.hero__bg-gradient {
  background-size: 200% 200%;
  animation: gradientShift 12s ease infinite;
}

/* --- NAV LINK HOVER UNDERLINE --- */
.nav__link::after {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- CARD HOVER LIFT --- */
.glass-card {
  transition:
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- BUTTON RIPPLE --- */
.btn {
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.07);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.btn:active::after {
  opacity: 1;
}

/* --- TEXT SHIMMER on hero badge --- */
.hero__badge {
  background: linear-gradient(
    90deg,
    rgba(34, 197, 94, 0.12) 0%,
    rgba(74, 222, 128, 0.2) 50%,
    rgba(34, 197, 94, 0.12) 100%
  );
  background-size: 200% auto;
  animation: shimmer 4s linear infinite;
}

/* --- SCROLL PARALLAX HINT --- */
.hero__scroll-hint {
  animation: fadeInUp 1s ease 2s both;
}

/* --- GAME CARD IMAGE ZOOM --- */
.game-card__img {
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- FLOATING CARDS --- */
.hero__floating-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero__floating-card:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 32px rgba(34, 197, 94, 0.2);
}

/* --- SECTION TRANSITIONS --- */
.section {
  transition: background 0.5s ease;
}

/* --- FORM INPUT FOCUS PULSE --- */
.form__input {
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* --- LOGO PULSE --- */
.logo__leaf {
  display: inline-block;
  animation: glowPulse 4s ease-in-out infinite;
  animation-delay: 1s;
}