/* Scoped ambient motion for the hero status bubbles and principle markers. */
.hero-visual .action-pill {
  --pill-delay: .18s;
  --energy-rgb: 37, 199, 220;
  opacity: 0;
  isolation: isolate;
  transform: translateY(12px) scale(.965);
  will-change: opacity, transform, border-color, box-shadow;
}

.hero-visual .action-one {
  --pill-delay: .2s;
  --energy-rgb: 116, 84, 255;
}

.hero-visual .action-three {
  --pill-delay: .58s;
  --energy-rgb: 37, 199, 220;
}

.hero-visual .action-two {
  --pill-delay: .96s;
  --energy-rgb: 55, 211, 181;
}

.hero-visual.is-visible .action-pill {
  animation:
    heroPillEnter .72s cubic-bezier(.16, 1, .3, 1) var(--pill-delay) both,
    heroPillEnergy 3.4s ease-in-out calc(var(--pill-delay) + .72s) infinite;
}

.hero-visual .action-pill::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: 14px;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(116, 84, 255, .42),
    rgba(var(--energy-rgb), .58),
    rgba(37, 199, 220, .18)
  );
  opacity: .28;
  filter: blur(5px);
  transition: opacity .3s ease;
}

.proof-strip i {
  --dot-rgb: 37, 199, 220;
  position: relative;
  flex: 0 0 auto;
  background: rgb(var(--dot-rgb));
  box-shadow:
    0 0 7px rgba(var(--dot-rgb), .9),
    0 0 16px rgba(var(--dot-rgb), .45);
  animation: principleDotGlow 2.5s ease-in-out infinite;
}

.proof-strip span:nth-child(1) i { --dot-rgb: 116, 84, 255; animation-delay: 0s; }
.proof-strip span:nth-child(2) i { --dot-rgb: 37, 199, 220; animation-delay: .35s; }
.proof-strip span:nth-child(3) i { --dot-rgb: 98, 116, 255; animation-delay: .7s; }
.proof-strip span:nth-child(4) i { --dot-rgb: 55, 211, 181; animation-delay: 1.05s; }

.proof-strip i::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(var(--dot-rgb), .3);
  border-radius: 50%;
  opacity: .35;
  animation: principleDotRing 2.5s ease-out infinite;
  animation-delay: inherit;
}

@keyframes heroPillEnter {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(.965);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes heroPillEnergy {
  0%, 100% {
    border-color: rgba(var(--energy-rgb), .28);
    box-shadow:
      0 18px 45px rgba(0, 0, 0, .28),
      0 0 0 0 rgba(var(--energy-rgb), 0),
      0 0 13px rgba(var(--energy-rgb), .08);
  }
  50% {
    border-color: rgba(var(--energy-rgb), .72);
    box-shadow:
      0 18px 45px rgba(0, 0, 0, .3),
      0 0 0 1px rgba(var(--energy-rgb), .16),
      0 0 25px rgba(var(--energy-rgb), .28);
  }
}

@keyframes principleDotGlow {
  0%, 100% {
    transform: scale(.92);
    box-shadow:
      0 0 6px rgba(var(--dot-rgb), .8),
      0 0 13px rgba(var(--dot-rgb), .35);
  }
  50% {
    transform: scale(1.18);
    box-shadow:
      0 0 9px rgba(var(--dot-rgb), 1),
      0 0 22px rgba(var(--dot-rgb), .68);
  }
}

@keyframes principleDotRing {
  0% { opacity: .55; transform: scale(.55); }
  72%, 100% { opacity: 0; transform: scale(1.35); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual .action-pill,
  .hero-visual.is-visible .action-pill {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .proof-strip i,
  .proof-strip i::after {
    animation: none;
  }
}