/* ============================================
   GAMER EVENTS — Animations & Keyframes
   ============================================ */

/* --- Loader Animations --- */
@keyframes draw-g {
  to { stroke-dashoffset: 0; }
}
@keyframes bar-fill {
  from { width: 0; }
  to { width: 100%; }
}

/* --- Cube Rotation --- */
@keyframes cube-rotate {
  from { transform: rotateX(-15deg) rotateY(0deg); }
  to   { transform: rotateX(-15deg) rotateY(360deg); }
}

/* --- Scroll Indicator Pulse --- */
@keyframes scroll-pulse {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.2); }
}

/* --- Subtle Float (for decorative elements) --- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* --- Glow Pulse --- */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(57, 255, 20, 0.1); }
  50% { box-shadow: 0 0 25px rgba(57, 255, 20, 0.3); }
}

/* --- GSAP Helper Classes --- */
/* Applied by JS before GSAP animates them */
.will-animate {
  visibility: hidden;
}
.is-animated {
  visibility: visible;
}

/* Fade variants (initial states — GSAP transitions FROM these) */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
}
.fade-in {
  opacity: 0;
}
.slide-right {
  opacity: 0;
  transform: translateX(-40px);
}
.slide-left {
  opacity: 0;
  transform: translateX(40px);
}
.scale-in {
  opacity: 0;
  transform: scale(0.95);
}

/* --- Loader animation states --- */
.loader--animate .loader__path {
  animation: draw-g 1.2s ease forwards;
}
.loader--animate .loader__bar-fill {
  animation: bar-fill 1.8s ease forwards 0.3s;
}

/* --- Magnetic button float --- */
.magnetic-btn {
  will-change: transform;
}

/* --- Cube face hover glow --- */
.cube__face--active {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 20px rgba(57, 255, 20, 0.2);
}

/* --- Text scramble cursor blink --- */
.scramble-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--color-accent);
  margin-left: 2px;
  animation: blink 0.8s step-end infinite;
}
@keyframes blink {
  50% { opacity: 0; }
}

/* --- Nav hamburger animation --- */
.nav__hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.nav__hamburger.active span:nth-child(2) {
  opacity: 0;
}
.nav__hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* --- Service card shimmer on hover --- */
.service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(57, 255, 20, 0.03) 45%,
    rgba(57, 255, 20, 0.06) 50%,
    rgba(57, 255, 20, 0.03) 55%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
  z-index: 2;
}
.service-card:hover::after {
  transform: translateX(100%);
}

/* --- Gallery item overlay on hover --- */
.gallery-grid__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(57, 255, 20, 0.05);
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}
.gallery-grid__item:hover::after {
  opacity: 1;
}

/* ============================================
   REDUCED MOTION — Accessibility Override
   ============================================ */
@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;
  }

  .loader__path {
    stroke-dashoffset: 0;
    animation: none;
  }

  .cube {
    animation: none;
    transform: rotateX(-15deg) rotateY(-30deg);
  }

  .slash-line {
    opacity: 0.08;
  }

  .scroll-line {
    animation: none;
  }

  .cursor-dot,
  .cursor-ring,
  .cursor-particle {
    display: none !important;
  }

  body {
    cursor: auto;
  }
  .btn, a, button {
    cursor: pointer;
  }
}