/* ==========================================================================
   RiyalMarketing — Animations
   Subtle only: fade, reveal, counter, hover, section reveal. GSAP drives
   the timing/orchestration (see gsap-animations.js); this file holds the
   keyframes and states those scripts toggle.
   ========================================================================== */

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

@keyframes rise-in {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in { animation: fade-in var(--duration-slow) var(--ease-standard) both; }

/* Hero growth-line motif — a slow, quiet draw-on, once per page load */
.growth-line path {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: draw-line 2.4s var(--ease-standard) 0.3s forwards;
}
@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}

/* Card hover lift — applied via component classes, not globally */
.card, .feature-card, .case-study-card, .pricing-card {
  will-change: transform;
}

.hover-lift:hover {
  transform: translateY(-4px);
}

/* Counter target — number swapped by JS via textContent during count-up */
[data-counter] {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .growth-line path { animation: none; stroke-dashoffset: 0; }
}