/* ============================================
   ANIMATION UTILITIES
   Initial states for GSAP entrance animations.
   GSAP sets final states via JS.
   ============================================ */

/* Fade up */
.anim-fade-up {
  opacity: 0;
  transform: translateY(40px);
}

/* Slide from left */
.anim-slide-left {
  opacity: 0;
  transform: translateX(-60px);
}

/* Slide from right */
.anim-slide-right {
  opacity: 0;
  transform: translateX(60px);
}

/* Scale in */
.anim-scale-in {
  opacity: 0;
  transform: scale(0.9);
}

/* Fade only */
.anim-fade {
  opacity: 0;
}

/* ============================================
   CSS-only animations (no GSAP dependency)
   ============================================ */

/* Pulse */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}

.anim-pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* Float */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

.anim-float {
  animation: float 3s ease-in-out infinite;
}

/* Glow breathe — for hero orbs / accents */
@keyframes glowBreathe {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 0.7;  transform: scale(1.08); }
}

.anim-glow {
  animation: glowBreathe 6s ease-in-out infinite;
}

/* Scroll cue bounce */
@keyframes scrollCue {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.7; }
  50%      { transform: translate(-50%, 8px); opacity: 1; }
}

.hero__scroll {
  animation: scrollCue 2.2s ease-in-out infinite;
}

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

.anim-spin {
  animation: spin 1s linear infinite;
}

/* Shimmer (skeleton loading) */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.anim-shimmer {
  background: linear-gradient(
    90deg,
    var(--color-bg-alt) 25%,
    var(--color-border) 50%,
    var(--color-bg-alt) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease infinite;
}

/* ============================================
   SHINY BUTTON (port of magicui/shiny-button)
   Animated --shine-x drives a gradient sweep across
   the border + label mask.
   ============================================ */
@property --shine-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}

@keyframes shine-sweep {
  0%   { --shine-x: 100%; }
  55%  { --shine-x: -100%; }
  100% { --shine-x: -100%; } /* hold off-screen = pause between sweeps */
}

/* ============================================
   HOVER EFFECTS
   ============================================ */

/* Underline grow */
.hover-underline {
  position: relative;
}

.hover-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width var(--transition-base);
}

.hover-underline:hover::after {
  width: 100%;
}

/* Lift on hover */
.hover-lift {
  transition: transform var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-6px);
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .anim-fade-up,
  .anim-slide-left,
  .anim-slide-right,
  .anim-scale-in,
  .anim-fade,
  .pillars__underline {
    opacity: 1;
    transform: none;
  }

  .anim-pulse,
  .anim-float,
  .anim-spin,
  .anim-shimmer,
  .anim-glow,
  .hero__scroll,
  .btn--shiny {
    animation: none;
  }
}