/* ==========================================
   ANIMATIONS.CSS — Kinetic Mesh & Intersection Observer Reveals
   ========================================== */

/* ------------------------------------------
   1. Scroll Reveal Animations (Section 6)
   ------------------------------------------ */
.reveal {
  opacity: 0.5;
  transform: translateY(20px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--visible:hover {
  transition-delay: 0s !important;
}

/* Staggered Delay Utilities for Sibling Grids */
.delay-1 { transition-delay: 140ms; }
.delay-2 { transition-delay: 280ms; }
.delay-3 { transition-delay: 420ms; }

/* Word-by-Word Scroll Reveal (Section 6A.7) */
.word-reveal {
  display: inline-block;
  opacity: 0.5;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.word-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------
   2. Kinetic & Static Gradient Mesh Backgrounds (Section 6A.5)
   ------------------------------------------ */
.gradient-mesh {
  position: relative;
  overflow: hidden;
}

.gradient-mesh::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 20% 30%, var(--color-primary-light) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, var(--color-secondary) 0%, transparent 50%);
  filter: blur(60px);
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
}

.gradient-mesh-kinetic {
  position: relative;
  overflow: hidden;
}

.gradient-mesh-kinetic::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 20% 30%, var(--color-primary-light) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, var(--color-secondary) 0%, transparent 50%);
  background-size: 150% 150%;
  filter: blur(60px);
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
  animation: gradient-drift 18s ease-in-out infinite;
}

@keyframes gradient-drift {
  0%, 100% { background-position: 0% 0%, 100% 100%; }
  50% { background-position: 30% 20%, 70% 80%; }
}

/* Alternate mesh angle for section breaks */
.gradient-mesh-alt::before {
  background:
    radial-gradient(circle at 80% 20%, var(--color-primary-light) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, var(--color-secondary) 0%, transparent 50%);
}

/* ------------------------------------------
   3. Mandatory Accessibility Fallback (Section 6)
   Shortens transitions to 200ms — never uses !important opacity override!
   ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition-duration: 200ms;
  }
  
  .gradient-mesh-kinetic::before {
    animation: none;
  }

  .word-reveal {
    transition-duration: 200ms;
  }
}