/* ==========================================================================
   NYC ICON LIMO — Motion
   Reveal-on-scroll, hero entrance, hover polish.

   IMPORTANT: reveals only ever hide content when the `js-anim` class is on
   <html>, which a tiny inline script adds. If scripting is unavailable or
   fails, every element renders normally — content is never left invisible.
   ========================================================================== */

.js-anim [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}

.js-anim [data-reveal="fade"] {
  transform: none;
}

.js-anim [data-reveal="left"] {
  transform: translateX(-28px);
}

.js-anim [data-reveal="right"] {
  transform: translateX(28px);
}

.js-anim [data-reveal="zoom"] {
  transform: scale(0.96);
}

.js-anim [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

.js-anim [data-reveal-delay="1"] {
  transition-delay: 70ms;
}
.js-anim [data-reveal-delay="2"] {
  transition-delay: 140ms;
}
.js-anim [data-reveal-delay="3"] {
  transition-delay: 210ms;
}
.js-anim [data-reveal-delay="4"] {
  transition-delay: 280ms;
}
.js-anim [data-reveal-delay="5"] {
  transition-delay: 350ms;
}
.js-anim [data-reveal-delay="6"] {
  transition-delay: 420ms;
}

/* --------------------------------------------------------------------------
   Hero entrance
   -------------------------------------------------------------------------- */

@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.js-anim .hero__badge {
  animation: riseIn var(--t-slow) var(--ease-out) both;
}
.js-anim .hero__title {
  animation: riseIn var(--t-slow) var(--ease-out) 100ms both;
}
.js-anim .hero__lede {
  animation: riseIn var(--t-slow) var(--ease-out) 200ms both;
}
.js-anim .hero__actions {
  animation: riseIn var(--t-slow) var(--ease-out) 300ms both;
}
.js-anim .hero__proof {
  animation: riseIn var(--t-slow) var(--ease-out) 400ms both;
}

/* Very slow drift on the hero photograph — depth without distraction. */
@keyframes heroDrift {
  from {
    transform: scale(1.05);
  }
  to {
    transform: scale(1.13);
  }
}

.hero__media img {
  animation: heroDrift 22s var(--ease-out) both;
}

/* --------------------------------------------------------------------------
   Floating stat card over the hero
   -------------------------------------------------------------------------- */

@keyframes floatSoft {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.float {
  animation: floatSoft 6s var(--ease) infinite;
}

/* --------------------------------------------------------------------------
   Reduced motion — hard stop
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .js-anim [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .js-anim .hero__badge,
  .js-anim .hero__title,
  .js-anim .hero__lede,
  .js-anim .hero__actions,
  .js-anim .hero__proof,
  .hero__media img,
  .float {
    animation: none;
  }

  .hero__media img {
    transform: scale(1.03);
  }
}