/* =========================================================================
   Senova — Kinetic motion layer
   Curated Animista keyframes (BSD-3-Clause, © Ana Travas) + Senova utilities.
   Loaded alongside landing.css. Transform/opacity/letter-spacing only, so it
   stays cheap and honors prefers-reduced-motion (guarded at the bottom).

   Usage: add an .anim-* class to any element. Stagger with .d1 … .d6.
   Elements start hidden (opacity:0) and the keyframe resolves to the final
   state with `both` fill, so there is no flash before the animation runs.
   ========================================================================= */

/* ---- Keyframes (Animista) ------------------------------------------------ */

/* tracking-in-expand — letters breathe outward from tight. Display headings. */
@keyframes trackingInExpand {
  0%   { letter-spacing: -0.5em; opacity: 0; }
  40%  { opacity: 0.7; }
  100% { letter-spacing: normal; opacity: 1; }
}

/* text-focus-in — blur to sharp. Subheads / eyebrows. */
@keyframes textFocusIn {
  0%   { filter: blur(12px); opacity: 0; }
  100% { filter: blur(0); opacity: 1; }
}

/* slide-fade-up — the workhorse entrance (translate up + fade). */
@keyframes slideFadeUp {
  0%   { transform: translateY(28px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* slide-fade-down — for elements that drop in (nav island, banners). */
@keyframes slideFadeDown {
  0%   { transform: translateY(-24px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* scale-in-center — soft pop for cards / media. */
@keyframes scaleInCenter {
  0%   { transform: scale(0.94); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* slide-in-blurred-top — kinetic drop with motion blur, for hero cards. */
@keyframes slideInBlurredTop {
  0%   { transform: translateY(-34px) scaleY(1.6) scaleX(0.7); transform-origin: 50% 0%; filter: blur(14px); opacity: 0; }
  100% { transform: translateY(0) scaleY(1) scaleX(1); transform-origin: 50% 50%; filter: blur(0); opacity: 1; }
}

/* float — continuous, imperceptible bob. Decorative accents only. */
@keyframes floatBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* reveal — used by the IntersectionObserver .reveal system as a fallback name. */
@keyframes revealFadeUp {
  0%   { transform: translateY(22px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* marquee — infinite horizontal drift (logo rows, ticker strips). */
@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---- Utility classes ----------------------------------------------------- */

.anim-tracking-in { animation: trackingInExpand 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) both; }
.anim-focus-in    { animation: textFocusIn 0.8s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; }
.anim-fade-up     { animation: slideFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.anim-fade-down   { animation: slideFadeDown 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.anim-scale-in    { animation: scaleInCenter 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
.anim-drop-in     { animation: slideInBlurredTop 0.7s cubic-bezier(0.23, 1, 0.32, 1) both; }
.anim-float       { animation: floatBob 6s ease-in-out infinite; }

/* Stagger delays — pair with any entrance class. */
.d1 { animation-delay: 0.08s; }
.d2 { animation-delay: 0.18s; }
.d3 { animation-delay: 0.30s; }
.d4 { animation-delay: 0.44s; }
.d5 { animation-delay: 0.60s; }
.d6 { animation-delay: 0.78s; }

/* ---- Marquee component --------------------------------------------------- */
.anim-marquee { overflow: hidden; width: 100%; }
.anim-marquee__track {
  display: flex;
  width: max-content;
  gap: var(--marquee-gap, 44px);
  animation: marqueeScroll var(--marquee-speed, 32s) linear infinite;
}
.anim-marquee:hover .anim-marquee__track { animation-play-state: paused; }

/* ---- Reduced motion: show everything, animate nothing -------------------- */
@media (prefers-reduced-motion: reduce) {
  .anim-tracking-in, .anim-focus-in, .anim-fade-up, .anim-fade-down,
  .anim-scale-in, .anim-drop-in, .anim-float, .anim-marquee__track {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    letter-spacing: normal !important;
    transform: none !important;
  }
}