/* ============================================================
   Hero entrance animation
   ------------------------------------------------------------
   The hero is the very first thing on the page and always
   above the fold, so it can't use the scroll-triggered reveal
   from site-reveal.js/css (there's no scroll yet for an
   IntersectionObserver to react to) -- instead this plays once,
   automatically, as soon as the page paints.

   Pure CSS keyframes + animation-delay, no JavaScript involved:
   if this file fails to load for any reason, every hero element
   simply keeps its normal, fully-visible default styling (same
   "additive only" guarantee as site-reveal.css). Respects
   prefers-reduced-motion by not applying at all for those users
   (including the ambient glow/sheen touches at the bottom).

   Scoped entirely to elements inside .hero -- never touches
   #pfScrub ("How Bigfix GSP Works") or anything below the hero.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* ── Left column -------------------------------------------------- */

  .hero-copy .hero-badge {
    opacity: 0;
    animation: heroBadgeIn .65s cubic-bezier(.22,1,.36,1) .08s forwards;
  }

  .hero-copy h1 {
    opacity: 0;
    animation: heroHeadingIn 1s cubic-bezier(.19,1,.22,1) .24s forwards;
  }

  .hero-copy .hero-lead {
    opacity: 0;
    animation: heroCopyIn .9s cubic-bezier(.19,1,.22,1) .44s forwards;
  }

  .hero-copy .hero-btns .btn-primary {
    opacity: 0;
    animation: heroBtnIn .6s cubic-bezier(.22,1.3,.36,1) .62s forwards;
  }

  .hero-copy .hero-btns .btn-outline {
    opacity: 0;
    animation: heroBtnIn .6s cubic-bezier(.22,1.3,.36,1) .72s forwards;
  }

  /* ── Right column: card + screenshot ------------------------------- */

  .hero-visual {
    opacity: 0;
    animation: heroVisualIn 1s cubic-bezier(.19,1,.22,1) .32s forwards;
  }

  .hero-shot {
    animation: heroShadowIn 1.3s cubic-bezier(.19,1,.22,1) .32s forwards;
  }

  .hero-shot img {
    animation: heroImageIn 1s cubic-bezier(.19,1,.22,1) .48s backwards;
  }

  /* One-time light sweep across the dashboard screenshot, timed to
     land right after it settles into place -- a small, premium detail
     rather than a loop, so it never distracts once the hero is read. */
  .hero-shot::after {
    content: '';
    position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(115deg,
      transparent 42%, rgba(255,255,255,.32) 50%, transparent 58%);
    transform: translateX(-120%);
    pointer-events: none;
    animation: heroSheen 1.15s cubic-bezier(.19,1,.22,1) 1.15s 1 forwards;
  }

  /* ── Stats row: cascades in one figure at a time -------------------- */

  .hero-stats .stat-item {
    opacity: 0;
    animation: heroStatIn .55s cubic-bezier(.19,1,.22,1) forwards;
  }
  .hero-stats .stat-item:nth-child(1) { animation-delay: 1.05s; }
  .hero-stats .stat-item:nth-child(2) { animation-delay: 1.13s; }
  .hero-stats .stat-item:nth-child(3) { animation-delay: 1.21s; }
  .hero-stats .stat-item:nth-child(4) { animation-delay: 1.29s; }

  /* ── Ambient touches, once the entrance has settled ------------------ */

  /* Soft breathing glow behind the screenshot -- barely-there, so it
     reads as "premium ambient light" rather than a moving graphic. */
  .hero-visual::before {
    animation: heroGlowPulse 6s ease-in-out 1.5s infinite;
  }
}

@keyframes heroBadgeIn {
  from { opacity: 0; transform: translateY(-10px) scale(.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes heroHeadingIn {
  from { opacity: 0; transform: translateX(-26px); filter: blur(6px); letter-spacing: .01em; }
  to   { opacity: 1; transform: translateX(0); filter: blur(0); letter-spacing: normal; }
}

@keyframes heroCopyIn {
  from { opacity: 0; transform: translateX(-18px); filter: blur(4px); }
  to   { opacity: 1; transform: translateX(0); filter: blur(0); }
}

@keyframes heroBtnIn {
  from { opacity: 0; transform: translateY(18px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes heroVisualIn {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes heroShadowIn {
  from { box-shadow: 0 6px 16px rgba(0,0,0,.12); }
  to   { box-shadow: 0 34px 80px rgba(4,16,40,.5); }
}

@keyframes heroImageIn {
  from { transform: translateY(38px) scale(.93); filter: blur(5px); }
  to   { transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes heroSheen {
  0%   { transform: translateX(-120%); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}

@keyframes heroStatIn {
  from { opacity: 0; transform: translateY(10px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes heroGlowPulse {
  0%, 100% { opacity: .75; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.07); }
}