/* ============================================================================
   ANIMATIONS.CSS — Motion & Animation System
   ============================================================================
   A comprehensive animation library for the Careeraa website.
   
   System overview:
     1. @keyframes — Reusable animation definitions
     2. [data-animate] — Scroll-triggered entrance animations (JS toggles .is-visible)
     3. [data-delay]   — Staggered reveal timing
     4. Utility classes — .float, .pulse, .glow, etc.
     5. prefers-reduced-motion — Accessibility override
   
   Usage in HTML:
     <div data-animate="fade-up" data-delay="200">...</div>
   
   JS responsibility:
     IntersectionObserver adds .is-visible when element enters viewport.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   KEYFRAMES — Core animation definitions
   --------------------------------------------------------------------------- */

/* Entrance — Fade Up (most common) */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Entrance — Simple Fade */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Entrance — Blur + Slide (premium reveal) */
@keyframes blurReveal {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

/* Entrance — Slide from right */
@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Entrance — Slide from left */
@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Entrance — Scale In */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Ambient — Floating motion */
@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

/* Ambient — Breathing pulse */
@keyframes pulse {
  0%   { opacity: 0.5; }
  50%  { opacity: 1; }
  100% { opacity: 0.5; }
}

/* Ambient — Glowing shadow */
@keyframes glow {
  0%   { box-shadow: 0 0 20px rgba(2, 98, 211, 0.2); }
  50%  { box-shadow: 0 0 40px rgba(2, 98, 211, 0.4); }
  100% { box-shadow: 0 0 20px rgba(2, 98, 211, 0.2); }
}

/* Ambient — Continuous rotation */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Effect — Shimmer sweep (loading / highlight) */
@keyframes shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* Effect — Horizontal marquee scroll */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Effect — Gradient position animation */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Effect — Organic floating for ecosystem nodes */
@keyframes nodeFloat {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(5px, -5px); }
  50%      { transform: translate(-3px, 8px); }
  75%      { transform: translate(7px, 3px); }
}


/* ---------------------------------------------------------------------------
   SCROLL ANIMATIONS — [data-animate] system
   ---------------------------------------------------------------------------
   Elements start hidden with a transform offset.
   When JS adds .is-visible, they animate into place.
   --------------------------------------------------------------------------- */

/* Base state — hidden */
[data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s var(--ease-out-expo),
    transform 0.6s var(--ease-out-expo),
    filter 0.6s var(--ease-out-expo);
  will-change: opacity, transform;
}

/* Variant: fade-up (default — same as base) */
[data-animate="fade-up"] {
  transform: translateY(30px);
}

/* Variant: fade-in (no spatial movement) */
[data-animate="fade-in"] {
  transform: none;
}

/* Variant: blur-reveal (blur + slide) */
[data-animate="blur-reveal"] {
  filter: blur(10px);
  transform: translateY(20px);
}

/* Variant: slide-left (enter from right) */
[data-animate="slide-left"] {
  transform: translateX(50px);
}

/* Variant: slide-right (enter from left) */
[data-animate="slide-right"] {
  transform: translateX(-50px);
}

/* Variant: scale-in (grow into view) */
[data-animate="scale-in"] {
  transform: scale(0.9);
}


/* ---------------------------------------------------------------------------
   VISIBLE STATE — Triggered by JS IntersectionObserver
   --------------------------------------------------------------------------- */

[data-animate].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}


/* ---------------------------------------------------------------------------
   STAGGER DELAYS — [data-delay] attribute
   ---------------------------------------------------------------------------
   Creates cascading entrance effects for grouped elements.
   Apply to individual items within a grid/list.
   --------------------------------------------------------------------------- */

[data-delay="100"].is-visible  { transition-delay: 100ms; }
[data-delay="200"].is-visible  { transition-delay: 200ms; }
[data-delay="300"].is-visible  { transition-delay: 300ms; }
[data-delay="400"].is-visible  { transition-delay: 400ms; }
[data-delay="500"].is-visible  { transition-delay: 500ms; }
[data-delay="600"].is-visible  { transition-delay: 600ms; }
[data-delay="700"].is-visible  { transition-delay: 700ms; }
[data-delay="800"].is-visible  { transition-delay: 800ms; }
[data-delay="900"].is-visible  { transition-delay: 900ms; }
[data-delay="1000"].is-visible { transition-delay: 1000ms; }


/* ---------------------------------------------------------------------------
   UTILITY ANIMATION CLASSES
   ---------------------------------------------------------------------------
   Drop-in classes for continuous ambient animations.
   --------------------------------------------------------------------------- */

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

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

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

.rotate-slow {
  animation: rotate 20s linear infinite;
}

/* Shimmer — light sweep overlay */
.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  animation: shimmer 2.5s ease-in-out infinite;
  pointer-events: none;
}

/* Gradient animation — shifting background position */
.gradient-animate {
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
}


/* ---------------------------------------------------------------------------
   ACCESSIBILITY — prefers-reduced-motion
   ---------------------------------------------------------------------------
   Respects users who have requested reduced motion in their OS settings.
   All animations are disabled; elements appear immediately.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

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

  /* Show scroll-animated elements immediately */
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  /* Remove stagger delays */
  [data-delay].is-visible {
    transition-delay: 0ms !important;
  }

  /* Remove shimmer overlay */
  .shimmer::after {
    animation: none !important;
    display: none;
  }
}