/* Home page motion — hero entrance, staggered reveals and pointer-reactive cards.
   Every effect here degrades to a static layout under prefers-reduced-motion. */

/* ---------------------------------------------------------- hero entrance --- */

/* Each headline line sits in its own clipping box and slides up from below.
   The padding/margin pair gives descenders room so nothing is shaved off. */
.home-v2 .v4-copy h1 .hero-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.home-v2 .v4-copy h1 .hero-line > span {
  display: block;
  transform: translateY(105%);
  animation: heroLineUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--line-index, 0) * 105ms + 150ms);
}

@keyframes heroLineUp {
  to {
    transform: translateY(0);
  }
}

/* Supporting hero elements fade up behind the headline. */
.home-v2 .hero-fade {
  opacity: 0;
  transform: translateY(18px);
  animation: heroFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--fade-index, 0) * 110ms + 260ms);
}

@keyframes heroFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scroll parallax. The variables are written by home-motion.js. */
.home-v2 .v4-stage > img {
  transform: translate3d(0, var(--hero-shift, 0px), 0) scale(var(--hero-zoom, 1));
  transform-origin: center;
}
.home-v2 .v4-copy {
  will-change: transform;
}

/* ------------------------------------------------------- staggered reveals --- */

/* Cards in a row arrive one after another instead of all at once. */
.home-v2 .v2-service-grid > .reveal,
.home-v2 .principle-cards > .reveal,
.home-v2 .showcase-grid > .reveal {
  transition-delay: calc(var(--reveal-index, 0) * 90ms);
}

/* ------------------------------------------------- pointer-reactive cards --- */

/* A soft highlight that follows the pointer across a service card.
   ::before is unused by home-v2.css, and the card already clips overflow. */
.home-v2 .v2-service::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  background: radial-gradient(
    260px circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
    rgba(255, 255, 255, 0.28),
    transparent 65%
  );
}
.home-v2 .v2-service:hover::before {
  opacity: 1;
}
/* The dark and blue cards need a brighter highlight to register at all. */
.home-v2 .v2-service.dark::before,
.home-v2 .v2-service.blue::before {
  background: radial-gradient(
    260px circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
    rgba(255, 255, 255, 0.16),
    transparent 62%
  );
}

/* The device mock-ups drift slightly as the showcase section passes by. */
.home-v2 .showcase-card .mock-browser,
.home-v2 .showcase-card .mock-phone {
  transform: translate3d(0, var(--mock-shift, 0px), 0);
  transition: transform 0.1s linear;
}

/* ------------------------------------------------------------- proof band --- */

/* Counting numbers are tabular so the band does not jitter as digits change. */
.home-v2 .proof-grid strong {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  .home-v2 .v4-copy h1 .hero-line > span,
  .home-v2 .hero-fade {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .home-v2 .v4-stage > img,
  .home-v2 .showcase-card .mock-browser,
  .home-v2 .showcase-card .mock-phone {
    transform: none;
  }
  .home-v2 .v2-service-grid > .reveal,
  .home-v2 .principle-cards > .reveal,
  .home-v2 .showcase-grid > .reveal {
    transition-delay: 0s;
  }
  .home-v2 .v2-service::before {
    display: none;
  }
}