/* A quiet, finite flight around the campaign, independent of the scroll story. */
.hero-art:focus-visible { outline: 1px solid #274c4666; outline-offset: 16px; border-radius: 5px; }
.hero-butterfly-field {
  position: absolute;
  inset: -8% -12%;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: layout paint;
}
.hero-butterfly {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: var(--butterfly-size, 36px);
  aspect-ratio: 64 / 56;
  opacity: 0;
  color: color-mix(in srgb, var(--butterfly-color, #a7cbc4) 60%, #274c46);
  transform-origin: 0 0;
}
.hero-butterfly-body { display: block; width: 100%; transform: translate(-50%, -50%); perspective: 160px; }
.hero-butterfly svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 2px 2px #263b3320); }
.butterfly-wing { fill: currentColor; stroke: currentColor; stroke-width: .6; }
.butterfly-veins { fill: none; stroke: #e8f6f2; stroke-width: .65; stroke-linecap: round; opacity: .32; }
.butterfly-edge { fill: none; stroke: #e8f6f2; stroke-width: 1.1; opacity: .28; }
.butterfly-spine { fill: #55726d; }
.butterfly-antennae { fill: none; stroke: #55726d; stroke-width: .8; stroke-linecap: round; }
.butterfly-wing-left, .butterfly-wing-right {
  transform-box: view-box;
  transform-origin: 32px 28px;
  animation: butterfly-wingbeat-left var(--wing-period, 440ms) cubic-bezier(.45, .02, .55, .98) var(--wing-delay, 0ms) infinite;
  animation-play-state: paused;
}
.butterfly-wing-right { animation-name: butterfly-wingbeat-right; }
.hero-butterfly-field[data-flight]:not([data-flight="idle"]):not([data-paused="true"]) .butterfly-wing-left,
.hero-butterfly-field[data-flight]:not([data-flight="idle"]):not([data-paused="true"]) .butterfly-wing-right { animation-play-state: running; }
@keyframes butterfly-wingbeat-left {
  0%, 100% { transform: rotateY(8deg) rotateZ(-2deg); }
  50% { transform: rotateY(72deg) rotateZ(5deg); }
}
@keyframes butterfly-wingbeat-right {
  0%, 100% { transform: rotateY(-8deg) rotateZ(2deg); }
  50% { transform: rotateY(-72deg) rotateZ(-5deg); }
}
@media (max-width: 700px) {
  .hero-butterfly-field { inset: -5% -7%; }
  .hero-butterfly { width: calc(var(--butterfly-size, 36px) * .8); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-butterfly-field { display: none; }
  .butterfly-wing-left, .butterfly-wing-right { animation: none; }
}