/* Boomlify animated logo - header build. ~60KB of images, no fonts, no video.
 *
 * The intro itself is not in here: `boomlify-logo.js` compiles it into @keyframes from
 * the geometry in geom.json and injects it once per page, because the timings and the
 * flight path both depend on the artwork. Everything below is the static half - the
 * layout, the assets, and the state every animated element returns to when the intro is
 * over (which is also the state `instant: true` and prefers-reduced-motion paint).
 */
.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; }

/* The box is the *display* size - width and height come from geom.json on mount. It is
   deliberately not the 792x320 the art was cut from with a `transform: scale()` on top:
   see the note in boomlify-logo.js, that one line is what makes the wordmark go soft. */
.boomlify-logo__scale { position: absolute; left: 0; top: 0; }
.boomlify-logo__scale > * { position: absolute; }
.boomlify-logo__layer { background-repeat: no-repeat; background-size: 100% 100%; }
/* The envelope squashes and stretches about 60% of its own height rather than its
   centre, so the flap stays put while the body moves. */
.boomlify-logo__env { transform-origin: 50% 60%; }
.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%;
}

/* The impact rings are SVG circles scaled up from their smallest size, with the stroke
   divided by that scale so it thins as the ring grows - the same shape the old build
   drew with an animating border-width, without the layout pass that came with it.
   fill-box puts the scale origin on the circle's own centre, and the stroke lives here
   rather than in the injected keyframes because only its width is animated. */
.boomlify-logo__ring { fill: none; stroke: var(--bl-ring); opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; pointer-events: none; }
.boomlify-logo__ring-2 { stroke: var(--bl-ring2); }

.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-origin: 50% 100%; }

/* The plane gets its own wrapper so the idle bob (playOnce: false) can sit on top of
   the flight instead of fighting it for the same transform property. */
.boomlify-logo__plane { position: absolute; inset: 0; }
.boomlify-logo__plane > * { position: absolute; inset: 0; }

.boomlify-logo__trail { overflow: visible; pointer-events: none; position: absolute; left: 0; top: 0; }
/* Hidden at rest: the intro fades it in with the flight and takes it out again. */
.boomlify-logo__trail-line { opacity: 0; }

/*
 * A note for whoever tunes this next, because the obvious lever here is a trap.
 *
 * The wordmark and the plane are sharp because of how the box above is sized, and that
 * is the whole reason `k` is multiplied into the geometry instead of being applied as a
 * `transform: scale()` on `.boomlify-logo__scale`. An element with a CSS animation on it
 * is composited, and a composited layer under a scaled ancestor rasterises at the
 * ancestor's scale rather than the display's, which blurs it for as long as the
 * animation is in effect and then snaps it back - a visible pop at the end of the intro.
 * Measured at 48px: two thirds of the sharpness of the rAF build with the scale on the
 * ancestor, pixel-identical without it.
 *
 * So: do not reintroduce a scale on `.boomlify-logo__scale`, and do not add
 * `will-change: transform` to `.boomlify-logo__plane` or `.boomlify-logo__wm i` to
 * "help" - promoting them individually was measured and made it worse, not better.
 */

/* 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; }
}