/* =================================================================
   MDFWala — animations.css
   Scroll reveals, stagger, counters & micro-interactions
   ================================================================= */

/* ---------- Scroll reveal (IntersectionObserver adds .in) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].in { opacity: 1; transform: none; }

[data-reveal="left"]  { transform: translateX(-44px); }
[data-reveal="right"] { transform: translateX(44px); }
[data-reveal="zoom"]  { transform: scale(0.92); }
[data-reveal="left"].in,
[data-reveal="right"].in,
[data-reveal="zoom"].in { transform: none; }

/* On tablet/mobile, horizontal slide-in reveals push content past the
   viewport edge (creating dead space on the right until they animate in).
   Swap them for a vertical reveal so there is never any horizontal overflow. */
@media (max-width: 900px) {
  [data-reveal="left"],
  [data-reveal="right"] { transform: translateY(36px); }
  [data-reveal="left"].in,
  [data-reveal="right"].in { transform: none; }
}

/* ---------- Stagger children ---------- */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
[data-stagger].in > * { opacity: 1; transform: none; }
[data-stagger].in > *:nth-child(1) { transition-delay: 0.05s; }
[data-stagger].in > *:nth-child(2) { transition-delay: 0.13s; }
[data-stagger].in > *:nth-child(3) { transition-delay: 0.21s; }
[data-stagger].in > *:nth-child(4) { transition-delay: 0.29s; }
[data-stagger].in > *:nth-child(5) { transition-delay: 0.37s; }
[data-stagger].in > *:nth-child(6) { transition-delay: 0.45s; }
[data-stagger].in > *:nth-child(7) { transition-delay: 0.53s; }
[data-stagger].in > *:nth-child(8) { transition-delay: 0.61s; }

/* ---------- Idle float ---------- */
.float-y { animation: floatY 6s ease-in-out infinite; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- Shine sweep on primary buttons ---------- */
.btn--primary::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s var(--ease);
}
.btn--primary:hover::after { left: 140%; }

/* ---------- Shimmer text (hero brand word) ---------- */
.shimmer {
  background: linear-gradient(100deg, var(--light) 30%, #fff 50%, var(--light) 70%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer { to { background-position: 200% center; } }

/* ---------- Counter pop ---------- */
.stat.in .stat__num { animation: pop 0.6s var(--ease); }
@keyframes pop {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------- Hover lift ---------- */
.lift { transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.lift:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

/* ---------- Underline grow ---------- */
.link-grow { position: relative; }
.link-grow::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--fast) var(--ease);
}
.link-grow:hover::after { transform: scaleX(1); }

/* ---------- Fade in (tabs etc.) ---------- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; }
}