/* ==========================================================================
   Animation System — keyframes + scroll-reveal primitives
   JS toggles [data-reveal] -> .is-visible. CSS owns the motion.
   ========================================================================== */

/* ---- Keyframes ---- */
@keyframes fade-up {
  from { opacity: 0; transform: translate3d(0, 28px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

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

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
  0%   { background-position: -180% 0; }
  100% { background-position: 180% 0; }
}

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

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4); }
  70%  { box-shadow: 0 0 0 14px rgba(212, 175, 55, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

@keyframes flow-dash {
  to { stroke-dashoffset: -32; }
}

@keyframes spin-slow {
  to { transform: rotate(360deg); }
}


/* ---- Scroll Reveal Primitives ---- */
[data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
[data-reveal="up"]    { transform: translate3d(0, 32px, 0); }
[data-reveal="down"]  { transform: translate3d(0, -32px, 0); }
[data-reveal="left"]  { transform: translate3d(40px, 0, 0); }
[data-reveal="right"] { transform: translate3d(-40px, 0, 0); }
[data-reveal="scale"] { transform: scale(0.96); }
[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Stagger via custom property set by JS */
[data-reveal] { transition-delay: var(--reveal-delay, 0s); }

/* ---- Cinematic line-by-line text reveal ---- */
.reveal-lines .line {
  display: block;
  overflow: hidden;
}
.reveal-lines .line > span {
  display: block;
  transform: translateY(110%);
  transition: transform var(--dur-cinematic) var(--ease-out);
  transition-delay: calc(var(--line-index, 0) * 0.09s);
}
.reveal-lines.is-visible .line > span {
  transform: translateY(0);
}

/* ---- Shimmer (used on hairlines / badges) ---- */
.shimmer {
  background-image: linear-gradient(
    100deg,
    transparent 30%,
    rgba(212, 175, 55, 0.45) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: shimmer 6s linear infinite;
}

.float { animation: float-slow 7s var(--ease-in-out) infinite; }

/* ---- Cinematic media reveal — image stays visible at all times,
        it simply settles from a slight zoom (fail-safe: never hidden). ---- */
.reveal-media .media__img { transform: scale(1.12); transition: transform 1.3s var(--ease-out); }
.reveal-media.is-visible .media__img { transform: scale(1); }

/* Hero media entrance (wrapper fades; image settles from a slight zoom) */
@keyframes media-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes media-zoom { from { transform: scale(1.1); } to { transform: scale(1); } }

/* ---- Marquee (featured logos) ---- */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .reveal-lines .line > span { transform: none !important; }
  .reveal-media { clip-path: none !important; }
  .reveal-media .media__img { transform: none !important; }
  .hero__media, .hero__media .media__img { animation: none !important; }
  .media[data-tilt] { transition: none !important; }
  .float, .shimmer { animation: none !important; }
}