/* =====================================================================
   App-hero animation freeze
   ---------------------------------------------------------------------
   The app-page mockups (Lookout / Wave / Backhaul / Sentinel / Affinity)
   ship from the FD-site build with looping `infinite` reveal animations
   (see fd-site-app-heroes.*.css). For the pitch deck we want each mockup
   to play its reveal ONCE on load, then hold the finished frame — no
   perpetual re-reveal on screen-share.

   Two parts:
   1. Force a single iteration + hold the final frame for everything
      inside an app-hero (`.hg`).
   2. Re-define the cycling keyframes so their final frame is the
      *revealed* state (the originals loop back to hidden at 100%).
      Loaded last, so these same-name @keyframes win.
   ===================================================================== */

.hg,
.hg * {
  animation-iteration-count: 1 !important;
  animation-fill-mode: both !important;
}

/* --- reveal cycles: end on the visible plateau instead of resetting --- */

@keyframes g1row {
  0%, 3% { opacity: 0; transform: translateY(5px); }
  12%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes g2badge {
  0%, 25% { opacity: 0; transform: translateY(3px); }
  38%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes g2you {
  0%, 8% { width: 0; }
  45%, 100% { width: 90%; }
}
@keyframes g2bench {
  0%, 8% { width: 0; }
  45%, 100% { width: 60%; }
}
@keyframes g3draw {
  0%, 4% { stroke-dashoffset: 240px; }
  45%, 100% { stroke-dashoffset: 0; }
}
@keyframes g3fillin {
  0%, 8% { opacity: 0; }
  45%, 100% { opacity: 1; }
}
@keyframes g3upd {
  0%, 30% { opacity: 0; }
  48%, 100% { opacity: 1; }
}
@keyframes wvApprove {
  0% { transform: scale(0); }
  11% { transform: scale(1.25); }
  20%, 100% { transform: scale(1); }
}
@keyframes bhCheck {
  0%, 18% { transform: scale(0); }
  30%, 100% { transform: scale(1); }
}
@keyframes snLine {
  0%, 6% { opacity: 0; transform: translate(4px); }
  18%, 100% { opacity: 1; transform: translate(0); }
}
@keyframes snCheck {
  0%, 55% { transform: scale(0); }
  66%, 100% { transform: scale(1); }
}
@keyframes snRow {
  0%, 8% { opacity: 0; transform: translateY(4px); }
  22%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes afCard {
  0%, 6% { opacity: 0; transform: translateY(4px); }
  18%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes afCardBest {
  0%, 6% { opacity: 0; transform: translateY(4px) scale(.98); }
  18%, 44% { opacity: 1; transform: translateY(0) scale(1); }
  52%, 100% { opacity: 1; transform: translateY(0) scale(1.04); }
}
@keyframes afRibbon {
  0%, 46% { opacity: 0; }
  56%, 100% { opacity: 1; }
}
@keyframes afLine {
  0%, 4% { opacity: 0; transform: translateY(3px); }
  18%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes afCta {
  0%, 10% { opacity: 0; transform: scale(.96); }
  24%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes whgType {
  0%, 8% { width: 0; }
  26%, 100% { width: 100%; }
}
@keyframes whgPop {
  0%, 8% { opacity: 0; transform: translateY(6px); }
  24%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes whgDraw {
  0%, 8% { stroke-dashoffset: 320px; }
  40%, 100% { stroke-dashoffset: 0; }
}
@keyframes whgFill {
  0%, 12% { opacity: 0; }
  45%, 100% { opacity: 1; }
}
@keyframes sngPop {
  0%, 8% { opacity: 0; transform: translateY(5px); }
  24%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes sngRow {
  0%, 10% { opacity: 0; transform: translateY(5px); }
  26%, 100% { opacity: 1; transform: translateY(0); }
}

/* --- status-dot pulses: pulse once, then settle with no ring --- */

@keyframes whgPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc) 45%, transparent); }
  60% { box-shadow: 0 0 0 6px #0000; }
  100% { box-shadow: 0 0 0 0 #0000; }
}
@keyframes bhgPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc) 45%, transparent); }
  60% { box-shadow: 0 0 0 6px #0000; }
  100% { box-shadow: 0 0 0 0 #0000; }
}
@keyframes sngPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc) 45%, transparent); }
  60% { box-shadow: 0 0 0 6px #0000; }
  100% { box-shadow: 0 0 0 0 #0000; }
}
@keyframes ahgPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc) 45%, transparent); }
  60% { box-shadow: 0 0 0 6px #0000; }
  100% { box-shadow: 0 0 0 0 #0000; }
}