/* ==========================================================================
   Layer 7: Animations — native CSS, progressive enhancement
   Uses animation-timeline: view() for scroll-triggered reveals.
   Browsers without support get content visible immediately (no JS needed).
   ========================================================================== */

/* --- Entry keyframes --- */
@keyframes fade-slide-up {
  from { opacity: 0; transform: translateY(1.5rem); }
}

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes scale-up {
  from { opacity: 0; transform: scale(0.95); }
}

@keyframes fade-slide-left {
  from { opacity: 0; transform: translateX(2rem); }
}

@keyframes fade-slide-right {
  from { opacity: 0; transform: translateX(-2rem); }
}

/* --- Scroll-triggered reveal --- */
@supports (animation-timeline: view()) {
  .reveal {
    animation-name: fade-slide-up;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: entry 25% cover 35%;
  }

  /* Stagger — offset the animation range so siblings on the same row appear sequentially */
  .reveal.d1 { animation-range: entry 45% cover 55%; }
  .reveal.d2 { animation-range: entry 65% cover 75%; }
  .reveal.d3 { animation-range: entry 85% cover 95%; }
  .reveal.d4 { animation-range: cover 10% cover 120%; }

  .reveal-left { animation-name: fade-slide-left; animation-fill-mode: both; animation-timeline: view(); animation-range: entry 25% cover 35%; }
  .reveal-right { animation-name: fade-slide-right; animation-fill-mode: both; animation-timeline: view(); animation-range: entry 25% cover 35%; }
  .reveal-left.d1, .reveal-right.d1 { animation-range: entry 45% cover 55%; }
  .reveal-left.d2, .reveal-right.d2 { animation-range: entry 65% cover 75%; }
  .reveal-left.d3, .reveal-right.d3 { animation-range: entry 85% cover 95%; }

  /* Auto-stagger children — parent class drives timing, modifier sets animation type.
     .reveal-stagger          = fade-slide-up (default)
     .reveal-stagger.stagger-fade   = fade only
     .reveal-stagger.stagger-left   = slide from right
     .reveal-stagger.stagger-right  = slide from left
     Replaces manual d1/d2/d3 on uniform grids. */
  .reveal-stagger > * {
    animation-name: fade-slide-up;
    animation-fill-mode: both;
    animation-timeline: view();
  }
  .reveal-stagger.stagger-fade > *  { animation-name: fade-in; }
  .reveal-stagger.stagger-left > *  { animation-name: fade-slide-left; }
  .reveal-stagger.stagger-right > * { animation-name: fade-slide-right; }
  .reveal-stagger.stagger-sides > :nth-child(odd)  { animation-name: fade-slide-right; }
  .reveal-stagger.stagger-sides > :nth-child(even) { animation-name: fade-slide-left; }

  .reveal-stagger > :nth-child(1)  { animation-range: entry 20% cover 30%; }
  .reveal-stagger > :nth-child(2)  { animation-range: entry 30% cover 40%; }
  .reveal-stagger > :nth-child(3)  { animation-range: entry 40% cover 50%; }
  .reveal-stagger > :nth-child(4)  { animation-range: entry 50% cover 60%; }
  .reveal-stagger > :nth-child(5)  { animation-range: entry 60% cover 70%; }
  .reveal-stagger > :nth-child(6)  { animation-range: entry 70% cover 80%; }
  .reveal-stagger > :nth-child(7)  { animation-range: entry 75% cover 85%; }
  .reveal-stagger > :nth-child(8)  { animation-range: entry 80% cover 90%; }
  .reveal-stagger > :nth-child(9)  { animation-range: entry 82% cover 92%; }
  .reveal-stagger > :nth-child(10) { animation-range: entry 84% cover 94%; }
  .reveal-stagger > :nth-child(11) { animation-range: entry 86% cover 96%; }
  .reveal-stagger > :nth-child(12) { animation-range: entry 88% cover 98%; }
}

/* Browsers without animation-timeline: content visible immediately */
@supports not (animation-timeline: view()) {
  .reveal { opacity: 1; }
}

/* --- Time-based entrance animations (page load, not scroll-linked) --- */
.enter-fade { animation: fade-in 0.6s var(--ease) both; }
.enter-up { animation: fade-slide-up 0.6s var(--ease) both; }
.enter-scale { animation: scale-up 0.5s var(--ease) both; }

/* Stagger delays for entrance animations */
.enter-d1 { animation-delay: 0.1s; }
.enter-d2 { animation-delay: 0.2s; }
.enter-d3 { animation-delay: 0.3s; }
.enter-d4 { animation-delay: 0.4s; }
.enter-d5 { animation-delay: 0.5s; }

/* Reduced motion: no animation */
@media (prefers-reduced-motion: reduce) {
  .reveal, .enter-fade, .enter-up, .enter-scale { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* --- Interactive --- */
.hover-lift {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}