/* ==========================================================================
   ANIMATIONS.CSS — GSAP-Ready Classes & Keyframes
   Option 3: Modern Tech / Neo-Corporate Dark Theme
   SRS Management Website
   ========================================================================== */


/* ==========================================================================
   REVEAL — GSAP Entry Animations
   Elements start hidden; GSAP animates them to visible.
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(24px);
}

.reveal--left {
  opacity: 0;
  transform: translateX(-24px);
}

.reveal--right {
  opacity: 0;
  transform: translateX(24px);
}

.reveal--scale {
  opacity: 0;
  transform: scale(0.95);
}

.reveal--fade {
  opacity: 0;
}

/* After GSAP animates, it sets inline styles.
   This class can be added as a fallback or for CSS-only mode. */
.reveal--visible {
  opacity: 1;
  transform: none;
}


/* ==========================================================================
   STAGGER DELAYS
   For child elements that animate in sequence.
   ========================================================================== */

.stagger-1 { transition-delay: 100ms; }
.stagger-2 { transition-delay: 200ms; }
.stagger-3 { transition-delay: 300ms; }
.stagger-4 { transition-delay: 400ms; }
.stagger-5 { transition-delay: 500ms; }
.stagger-6 { transition-delay: 600ms; }
.stagger-7 { transition-delay: 700ms; }
.stagger-8 { transition-delay: 800ms; }


/* ==========================================================================
   KEYFRAMES
   ========================================================================== */

/* Glow Pulse — subtle shadow pulsation */
@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.1);
  }
  50% {
    box-shadow: 0 0 40px rgba(0, 212, 255, 0.2);
  }
}

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

/* Gradient Shift — background position animation for mesh bg */
@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.anim-gradient-shift {
  background-size: 200% 200%;
  animation: gradient-shift 8s ease-in-out infinite;
}

/* Line Grow — horizontal line expansion */
@keyframes line-grow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.anim-line-grow {
  transform-origin: left;
  animation: line-grow 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.anim-line-grow--center {
  transform-origin: center;
  animation: line-grow 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Fade In — simple opacity */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.anim-fade-in {
  animation: fade-in 0.6s ease-out forwards;
}

/* Slide Up — combine opacity + translate */
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.anim-slide-up {
  animation: slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Float — gentle vertical hover */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

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

/* Blink — status indicator */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

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

/* Pulse Dot — expanding ring (for status dots) */
@keyframes pulse-dot {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(0, 212, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 212, 255, 0);
  }
}

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

/* Typing cursor blink */
@keyframes cursor-blink {
  0%, 100% { border-color: var(--color-accent); }
  50%      { border-color: transparent; }
}

.anim-cursor {
  border-right: 2px solid var(--color-accent);
  animation: cursor-blink 1s step-end infinite;
}

/* Counter spin — for preloader */
@keyframes counter-fade {
  0%   { opacity: 0; transform: translateY(8px); }
  10%  { opacity: 1; transform: translateY(0); }
  90%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-8px); }
}

/* Shimmer — diagonal highlight sweep for badges */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Status Pulse — expanding ring for status indicator dots */
@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(63, 185, 80, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(63, 185, 80, 0); }
}

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

/* Scroll indicator bounce */
@keyframes scroll-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

.anim-scroll-bounce {
  animation: scroll-bounce 1.5s ease-in-out infinite;
}


/* ==========================================================================
   PERFORMANCE HINTS
   ========================================================================== */

.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}

.will-change-all {
  will-change: transform, opacity;
}

/* GPU compositing layer hint */
.gpu {
  transform: translateZ(0);
  backface-visibility: hidden;
}


/* ==========================================================================
   TRANSITION UTILITIES
   ========================================================================== */

.transition-fast {
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-out);
}

.transition-base {
  transition-duration: var(--duration-base);
  transition-timing-function: var(--ease-out);
}

.transition-slow {
  transition-duration: var(--duration-slow);
  transition-timing-function: var(--ease-out);
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--scale,
  .reveal--fade {
    opacity: 1;
    transform: none;
  }

  .stagger-1,
  .stagger-2,
  .stagger-3,
  .stagger-4,
  .stagger-5,
  .stagger-6,
  .stagger-7,
  .stagger-8 {
    transition-delay: 0ms;
  }

  .anim-glow-pulse,
  .anim-gradient-shift,
  .anim-line-grow,
  .anim-line-grow--center,
  .anim-fade-in,
  .anim-slide-up,
  .anim-float,
  .anim-blink,
  .anim-pulse-dot,
  .anim-cursor,
  .anim-scroll-bounce,
  .anim-status-pulse {
    animation: none;
  }

  .hero__scroll-line {
    animation: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}