/* ==========================================================================
   DIGITAL INERTIA — ANIMATIONS
   Keyframes + the scroll-reveal utility driven by animations.js (IntersectionObserver)
   ========================================================================== */

/* ---------- Loader keyframes ---------- */
@keyframes loaderRingA { to { stroke-dashoffset: 0; } }
@keyframes loaderRingB { to { stroke-dashoffset: 0; } }
@keyframes loaderWord { to { transform: translateY(0); } }
@keyframes loaderBar { to { width: 100%; } }

/* ---------- Hero ---------- */
@keyframes revealLine { to { transform: translateY(0); } }
@keyframes scrollLine { 0% { top: -100%; } 60% { top: 100%; } 100% { top: 100%; } }
@keyframes slowSpin { to { transform: rotate(360deg); } }
@keyframes gridDrift { from { background-position: 0 0; } to { background-position: 80px 80px; } }

/* ---------- Generic reveal-up (hero eyebrow / sub / actions) ---------- */
.reveal-up { opacity: 0; transform: translateY(18px); animation: revealUp 0.9s var(--ease-out-expo) forwards; animation-delay: var(--d, 0.3s); }
@keyframes revealUp { to { opacity: 1; transform: translateY(0); } }

/* ---------- Scroll-triggered reveal (applied via JS adding .is-visible) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 0.06s);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* Card grids get a touch of scale for extra polish */
.exp-card[data-reveal], .ind-card[data-reveal], .masonry__card[data-reveal] {
  transform: translateY(28px) scale(0.98);
}
.exp-card[data-reveal].is-visible, .ind-card[data-reveal].is-visible, .masonry__card[data-reveal].is-visible {
  transform: translateY(0) scale(1);
}

/* ---------- Counter tick (subtle) ---------- */
.metric__count, .about__stat-num { font-variant-numeric: tabular-nums; }

/* ---------- Body ready state ---------- */
body:not(.di-loading) .hero__title .reveal-line span { }

/* ---------- Card hover lift used broadly ---------- */
@media (prefers-reduced-motion: no-preference) {
  .exp-card, .masonry__card, .insight-card, .ind-card { will-change: transform; }
}

/* ---------- 3D tilt (applied inline via JS transform) ---------- */
.tilt-card { transition: transform 0.25s var(--ease-out-quart); transform-style: preserve-3d; }

/* ---------- Reduced motion overrides ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal-line span, .reveal-up, [data-reveal] { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
  .loader__ring, .about__ring, .cta__grid { animation: none !important; }
}