/* FV entrance motion (PC/SP).
   Only animates visual properties; no positioning or content changes.
   All content stays visible without CSS animation support or when reduced motion is preferred. */

@keyframes fv-enter-up {
  from { opacity: 0; transform: translate3d(0, 28px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fv-enter-photo {
  from { opacity: 0; transform: translate3d(44px, 0, 0) scale(1.045); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes fv-enter-badge {
  from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.85); }
  68%  { opacity: 1; transform: translate3d(0, -3px, 0) scale(1.025); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes fv-enter-gold {
  from { opacity: 0; transform: translate3d(0, 13px, 0) scale(.97); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes fv-enter-header {
  from { opacity: 0; transform: translate3d(0, -12px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fv-cta-sheen {
  from { transform: translateX(-135%); }
  to   { transform: translateX(135%); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Person image comes from the existing .hero::after background. */
  .hero::after {
    animation: fv-enter-photo 1250ms cubic-bezier(.22, 1, .36, 1) 100ms both;
  }

  .hero .site-header .header-inner {
    animation: fv-enter-header 700ms cubic-bezier(.22, 1, .36, 1) 60ms both;
  }

  /* Make the header immediately visible when navigating by keyboard. */
  .hero .site-header .header-inner:focus-within {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .hero .hero-primary-cta {
    overflow: hidden;
    animation: fv-enter-up 850ms cubic-bezier(.22, 1, .36, 1) both;
  }

  /* Runs once after the button enters: a subtle, noninteractive glint. */
  .hero .hero-primary-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
      105deg, transparent 27%, rgba(255, 255, 255, .20) 50%, transparent 73%
    );
    pointer-events: none;
    animation: fv-cta-sheen 720ms ease-out both;
  }

  .hero .hero-primary-cta:focus-visible {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .hero .hero-notes {
    animation: fv-enter-up 760ms cubic-bezier(.22, 1, .36, 1) both;
  }

  .hero .hero-badges li {
    animation: fv-enter-badge 760ms cubic-bezier(.2, .85, .28, 1) both;
  }

  .hero .hero-badges li:nth-child(1) { animation-delay: 1170ms; }
  .hero .hero-badges li:nth-child(2) { animation-delay: 1320ms; }
  .hero .hero-badges li:nth-child(3) { animation-delay: 1470ms; }
  .hero .hero-badges li:nth-child(4) { animation-delay: 1620ms; }

  @media (min-width: 768px) {
    .hero .pc-hero-headline-intro {
      animation: fv-enter-up 920ms cubic-bezier(.22, 1, .36, 1) 290ms both;
    }
    .hero .pc-hero-headline-main {
      animation: fv-enter-up 960ms cubic-bezier(.22, 1, .36, 1) 510ms both;
    }
    .hero .pc-hero-headline-ending {
      animation: fv-enter-up 950ms cubic-bezier(.22, 1, .36, 1) 740ms both;
    }
    .hero .pc-hero-headline-ending > span {
      display: inline-block;
      animation: fv-enter-gold 850ms cubic-bezier(.22, 1, .36, 1) 1040ms both;
    }
    .hero .hero-lead {
      animation: fv-enter-up 920ms cubic-bezier(.22, 1, .36, 1) 1180ms both;
    }
    .hero .hero-primary-cta { animation-delay: 1780ms; }
    .hero .hero-primary-cta::after { animation-delay: 2290ms; }
    .hero .hero-notes { animation-delay: 1990ms; }
  }

  @media (max-width: 767px) {
    .hero::after {
      animation-duration: 1300ms;
      animation-delay: 40ms;
    }

    .hero .sp-hero-headline-intro {
      animation: fv-enter-up 900ms cubic-bezier(.22, 1, .36, 1) 370ms both;
    }
    .hero .sp-hero-headline-main {
      animation: fv-enter-up 940ms cubic-bezier(.22, 1, .36, 1) 630ms both;
    }
    .hero .sp-hero-headline-ending {
      animation: fv-enter-up 960ms cubic-bezier(.22, 1, .36, 1) 880ms both;
    }
    .hero .sp-hero-headline-ending > span {
      display: inline-block;
      animation: fv-enter-gold 840ms cubic-bezier(.22, 1, .36, 1) 1160ms both;
    }
    .hero .hero-lead {
      animation: fv-enter-up 900ms cubic-bezier(.22, 1, .36, 1) 1350ms both;
    }
    .hero .hero-badges li:nth-child(1) { animation-delay: 1430ms; }
    .hero .hero-badges li:nth-child(2) { animation-delay: 1580ms; }
    .hero .hero-badges li:nth-child(3) { animation-delay: 1730ms; }
    .hero .hero-badges li:nth-child(4) { animation-delay: 1880ms; }
    .hero .hero-primary-cta { animation-delay: 1990ms; }
    .hero .hero-primary-cta::after { animation-delay: 2470ms; }
    .hero .hero-notes { animation-delay: 2130ms; }
  }
}