/* animations.css — Animation states, cursor, loader, reduced motion */

/* Initial states for GSAP-driven animations */
[data-animate] {
  visibility: hidden;
}

/* Fallback: if JS fails, make everything visible */
.no-js [data-animate] {
  visibility: visible;
}

/* Custom cursor */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  border: 1.5px solid var(--fg);
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  opacity: 0;
  transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease, opacity 0.3s ease;
}

.custom-cursor.is-visible {
  opacity: 1;
}

.custom-cursor.is-active {
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-color: var(--accent);
}

/* Will-change hints — applied by JS, removed after animation */
.will-animate {
  will-change: transform, opacity;
}

/* Reduced motion: disable ALL motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  [data-animate] {
    visibility: visible !important;
  }
  .custom-cursor { display: none !important; }
}