/* ═══════════════════════════════════════════
   ANIMATIONS — Reveals, keyframes, transitions
   ═══════════════════════════════════════════ */

/* ── Scroll reveal system ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/* Stagger delays */
.reveal-d1 { --reveal-delay: 0.1s; }
.reveal-d2 { --reveal-delay: 0.2s; }
.reveal-d3 { --reveal-delay: 0.3s; }

/* ── Card hover ── */
.card-hover {
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ── Phase 03 border shimmer ── */
@keyframes border-shimmer {
  0%   { border-color: rgba(80, 80, 80, 0.15); }
  50%  { border-color: rgba(80, 80, 80, 0.4); }
  100% { border-color: rgba(80, 80, 80, 0.15); }
}

.shimmer-border {
  animation: border-shimmer 3s var(--ease-smooth) infinite;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .shimmer-border {
    animation: none;
  }

  .card-hover:hover {
    transform: none;
  }

  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}