/* ============================================
   МОТОДРАЙВ 63 — ANIMATIONS
   3 типа: reveal (fade-up), reveal-clip (image),
   scroll-fade / scroll-rise / scroll-clip
============================================ */

/* Type 1 — On-load fade up (hero text) */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  animation: revealUp 900ms cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes revealUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Type 2 — Clip reveal for big text rows */
.reveal-clip {
  display: block;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transform: translateY(8%);
  animation: revealClip 1000ms cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes revealClip {
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}

/* ── Scroll-triggered ────────────── */

/* Type A — subtle fade for small text/meta */
.scroll-fade {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 800ms cubic-bezier(.16,1,.3,1) var(--delay, 0s),
    transform 800ms cubic-bezier(.16,1,.3,1) var(--delay, 0s);
}
.scroll-fade.in { opacity: 1; transform: translateY(0); }

/* Type B — rise for cards (heavier) */
.scroll-rise {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 900ms cubic-bezier(.2,1,.3,1) var(--delay, 0s),
    transform 900ms cubic-bezier(.2,1,.3,1) var(--delay, 0s);
}
.scroll-rise.in { opacity: 1; transform: translateY(0); }

/* Type C — clip for images (cinematic) */
.scroll-clip {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1100ms cubic-bezier(.7,0,.3,1) var(--delay, 0s);
}
.scroll-clip.in { clip-path: inset(0 0 0 0); }