.butterfly-intro {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: transparent;
  overflow: hidden;
  isolation: isolate;
  touch-action: none;
  overscroll-behavior: contain;
  color: var(--royal, #2b4fd8);
  animation: butterfly-failsafe 1s 7s forwards;
}
.butterfly-intro__veil { position: absolute; inset: 0; background: var(--bg, #efeeec); will-change: opacity; }
.butterfly-intro canvas { display: block; position: relative; width: 100%; height: 100%; }
.butterfly-intro__skip {
  position: absolute;
  bottom: max(24px, env(safe-area-inset-bottom));
  right: 28px;
  padding: 12px 16px;
  border: 1px solid #2b4fd830;
  border-radius: 30px;
  color: #2b4fd8;
  background: #efeeecb3;
  cursor: pointer;
  font: 11px/1 sans-serif;
  letter-spacing: .12em;
}
.butterfly-intro__skip:hover,
.butterfly-intro__skip:focus-visible { background: #dce2f5; border-color: #2b4fd8; }
.butterfly-intro.is-revealing { pointer-events: none; }
.butterfly-intro.is-revealing .butterfly-intro__skip { opacity: 0; transition: opacity .3s; }
.butterfly-intro.is-leaving { opacity: 0; transition: opacity .25s ease; pointer-events: none; }
@keyframes butterfly-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) { .butterfly-intro { display: none; } }
.hero-butterflies {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s ease;
}
.hero-butterflies.is-ready { opacity: .8; }
@media (prefers-reduced-motion: reduce) { .hero-butterflies { display: none; } }