/* ==========================================================================
   Motion — subtle, fast, modern.
   ========================================================================== */

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s var(--e-out), transform .65s var(--e-out);
  transition-delay: var(--d, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

.reveal-scale {
  opacity: 0;
  transform: scale(.965);
  transition: opacity .7s var(--e-out), transform .7s var(--e-out);
  transition-delay: var(--d, 0ms);
}
.reveal-scale.is-visible { opacity: 1; transform: none; }

/* Hero load sequence */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
@keyframes popIn {
  0% { opacity: 0; transform: scale(.9); }
  100% { opacity: 1; transform: scale(1); }
}
.hero-seq > * {
  opacity: 0;
  animation: riseIn .8s var(--e-out) forwards;
}
.hero-seq > *:nth-child(1) { animation-delay: .05s; }
.hero-seq > *:nth-child(2) { animation-delay: .14s; }
.hero-seq > *:nth-child(3) { animation-delay: .23s; }
.hero-seq > *:nth-child(4) { animation-delay: .32s; }
.hero-seq > *:nth-child(5) { animation-delay: .41s; }

.brand-plate { animation: popIn .9s var(--e-out) .1s both; }

/* Gentle float for the brand mark */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
.floaty { animation: floaty 6s ease-in-out infinite; }

/* Count-up target starts hidden-ish to avoid layout jump */
.count-up { font-variant-numeric: tabular-nums; }

/* Marquee strip */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: var(--sp-7);
  width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(50%); }
}
.marquee-item {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-3);
  white-space: nowrap;
}
.marquee-item svg { width: 17px; height: 17px; color: var(--red); flex-shrink: 0; }

/* Skeleton shimmer for async content slots */
@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--bg-3) 25%, var(--bg-alt) 50%, var(--bg-3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--r-md);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-scale { opacity: 1 !important; transform: none !important; }
  .hero-seq > * { opacity: 1 !important; }
}