/* ============================================================
   byGarami — animations.css
   Scroll reveals, hero entrance, micro-motion
   ============================================================ */

/* --- Scroll reveal ------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}

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

.reveal-left {
  transform: translateX(-30px);
}

.reveal-right {
  transform: translateX(30px);
}

.reveal-scale {
  transform: scale(0.96);
}

.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
  opacity: 1;
  transform: none;
}

/* stagger helpers */
.d-1 { --reveal-delay: 0.08s; }
.d-2 { --reveal-delay: 0.16s; }
.d-3 { --reveal-delay: 0.24s; }
.d-4 { --reveal-delay: 0.32s; }
.d-5 { --reveal-delay: 0.4s; }
.d-6 { --reveal-delay: 0.48s; }

/* --- Hero entrance -------------------------------------------- */
.hero-enter {
  opacity: 0;
  transform: translateY(22px);
  animation: rise-in 0.75s var(--ease) forwards;
  animation-delay: var(--enter-delay, 0s);
}

.hero-media .media-frame {
  opacity: 0;
  transform: translateY(26px) scale(0.985);
  animation: rise-in 0.9s var(--ease) 0.15s forwards;
}

/* --- Keyframes -------------------------------------------------- */
@keyframes rise-in {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes float-y {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes glow-pulse {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 0.75;
  }
}

.media-glow {
  animation: glow-pulse 7s ease-in-out infinite;
}

.float {
  animation: float-y 6s ease-in-out infinite;
}

/* --- Hover micro-motion ----------------------------------------- */
.price-card,
.feature-card,
.project-card,
.np-card,
.step {
  will-change: transform;
}

/* number reveal (multipliers) handled by JS adds .counted */
.mult b,
.price-value [data-count] {
  display: inline-block;
  transition: opacity 0.3s;
}

/* --- Reduced motion: disable everything -------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .reveal,
  .hero-enter,
  .hero-media .media-frame {
    opacity: 1 !important;
    transform: none !important;
  }
}