/* Boomlify animated logo — header build. ~60KB of images, no fonts, no video. */
.boomlify-logo {
  --bl-ink: #1c2238;
  --bl-trail: #3aa8dd;
  --bl-ring: #35b4dc;
  --bl-ring2: #7b5cd6;
  position: relative;
  display: inline-block;
  height: 40px;
  width: calc(40px * 792 / 320);
  line-height: 0;
}
@media (prefers-color-scheme: dark) {
  .boomlify-logo:not([data-theme="light"]) { --bl-ink: #f1f3fb; --bl-trail: #59bdf0; --bl-ring: #4cc6ee; --bl-ring2: #9a7cf0; }
}
.boomlify-logo[data-theme="dark"] { --bl-ink: #f1f3fb; --bl-trail: #59bdf0; --bl-ring: #4cc6ee; --bl-ring2: #9a7cf0; }

.boomlify-logo__scale { position: absolute; left: 0; top: 0; width: 792px; height: 320px; transform-origin: 0 0; }
.boomlify-logo__scale > * { position: absolute; }
.boomlify-logo__layer { background-repeat: no-repeat; background-size: 100% 100%; }
.boomlify-logo__mask { background-color: var(--bl-ink); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.boomlify-logo__glint {
  inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.6) 50%, transparent 62%) 200% 0 / 300% 100% no-repeat;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.boomlify-logo__ring { border-radius: 50%; border: 3px solid var(--bl-ring); opacity: 0; box-sizing: border-box; pointer-events: none; }
.boomlify-logo__wm { overflow: hidden; }
.boomlify-logo__wm i { position: absolute; top: 0; background: var(--bl-ink); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; transform: translateY(170px); }
.boomlify-logo__plane { opacity: 0; }
/*
 * Do NOT add `will-change: transform` to the two rules just above.
 *
 * The logo is painted once on a 792x320 canvas and then scaled down to ~48px,
 * so anything promoted into its own GPU layer is rasterised at canvas
 * resolution and the compositor shrinks that bitmap about 6x afterwards. The
 * result is a blurred paper plane and a soft wordmark that stays blurry until
 * something forces a re-raster - a 1-2% browser zoom, a resize, a scroll.
 * The mark and the envelope stay sharp because nothing ever promotes them.
 *
 * Painting the plane and the letters into the parent layer costs a couple of
 * hundred device pixels per frame here, which is not worth a composited layer:
 * this plays once for ~4s and then holds still.
 */
.boomlify-logo__plane > * { position: absolute; inset: 0; }
.boomlify-logo__trail { overflow: visible; pointer-events: none; position: absolute; left: 0; top: 0; width: 792px; height: 320px; }

/* Respect reduced motion: show the finished mark with no orchestrated animation. */
@media (prefers-reduced-motion: reduce) {
  .boomlify-logo[data-motion="auto"] .boomlify-logo__glint { display: none; }
}