/* ═══ ANIMATIONS ═════════════════════════════════════════════════════════════
   .reveal — появляется при попадании в viewport (JS добавляет .is-visible)
   --delay — CSS custom property для staggin внутри grid
   ═══════════════════════════════════════════════════════════════════════════ */

/* Уважаем prefers-reduced-motion */
@media (prefers-reduced-motion: no-preference) {

  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity .65s cubic-bezier(.4,0,.2,1) var(--delay, 0s),
      transform .65s cubic-bezier(.4,0,.2,1) var(--delay, 0s);
  }

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

  /* Вариант: fade from left */
  .reveal-left {
    opacity: 0;
    transform: translateX(-32px);
    transition:
      opacity .65s cubic-bezier(.4,0,.2,1) var(--delay, 0s),
      transform .65s cubic-bezier(.4,0,.2,1) var(--delay, 0s);
  }
  .reveal-left.is-visible {
    opacity: 1;
    transform: translateX(0);
  }

  /* Вариант: fade from right */
  .reveal-right {
    opacity: 0;
    transform: translateX(32px);
    transition:
      opacity .65s cubic-bezier(.4,0,.2,1) var(--delay, 0s),
      transform .65s cubic-bezier(.4,0,.2,1) var(--delay, 0s);
  }
  .reveal-right.is-visible {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Parallax hover on cards — добавляется JS через mouse events */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform .15s ease;
  will-change: transform;
}