/* Mascot: the transparent firefly PNG. Never recoloured, never filtered, never cropped.
   <button class="db-mascot" data-db="mascot" aria-label="Say hello to the firefly">
     <img class="db-mascot__img" src="assets/brand/mascot-512.png" alt=""></button>
   Idle float, a hop on hover or tap (js/components/mascot.js), a soft golden glow behind.
   data-mood="sleepy": lower, slower, dimmer glow, tiny z letters rising.
   data-fly / data-fly="across": roams (or crosses once) over its positioned parent section.
   Size: --db-mascot-size (default 7.5rem). */
.db-mascot{--db-mascot-size:7.5rem;--mascot-float:calc(var(--m-dur-slow) * 8);--mascot-lift:-6%;--glow:.55;
  position:relative;display:inline-grid;place-items:center;width:var(--db-mascot-size);aspect-ratio:800/751;
  padding:0;border:0;background:none;color:inherit;cursor:default;isolation:isolate;-webkit-tap-highlight-color:transparent}
button.db-mascot{cursor:pointer;border-radius:50%}
button.db-mascot:focus-visible{outline-offset:6px}
.db-mascot::before{content:"";position:absolute;inset:-22%;z-index:-1;border-radius:50%;pointer-events:none;opacity:var(--glow);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--db-gold) 55%,transparent),color-mix(in srgb,var(--db-gold) 18%,transparent) 55%,transparent);
  animation:db-mascot-glow var(--mascot-float) ease-in-out infinite;transition:opacity var(--m-dur-slow) var(--m-ease)}
.db-mascot__img{width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;pointer-events:none;
  animation:db-mascot-float var(--mascot-float) ease-in-out infinite}
.db-mascot.is-hopping .db-mascot__img{animation:db-mascot-float var(--mascot-float) ease-in-out infinite,db-mascot-hop calc(var(--m-dur) * 1.6) var(--m-ease-spring)}
@keyframes db-mascot-float{0%,100%{translate:0 0}50%{translate:0 var(--mascot-lift)}}
@keyframes db-mascot-glow{0%,100%{scale:1}50%{scale:1.06}}
/* the app's tour hop (thop): up and tilt, a tiny overshoot, settle */
@keyframes db-mascot-hop{0%{transform:none}35%{transform:translateY(-14%) rotate(-7deg)}70%{transform:translateY(1%) rotate(1deg)}100%{transform:none}}

/* ---- sleepy ---- */
.db-mascot[data-mood="sleepy"]{--mascot-float:calc(var(--m-dur-slow) * 12);--mascot-lift:-3%;--glow:.28}
.db-mascot[data-mood="sleepy"] .db-mascot__img{rotate:-7deg;transform-origin:50% 70%}
.db-mascot[data-mood="sleepy"]{margin-top:calc(var(--db-mascot-size) * .12)}
.db-mascot__z{position:absolute;right:4%;top:6%;font-family:var(--db-font);font-weight:800;line-height:1;color:var(--db-ink);
  font-size:calc(var(--db-mascot-size) * .16);opacity:0;pointer-events:none;text-shadow:0 1px 6px rgba(4,6,20,.35);
  animation:db-mascot-z calc(var(--m-dur-slow) * 7) var(--m-ease) infinite}
.db-light .db-mascot__z{color:var(--db-ink-light);text-shadow:none}
.db-mascot__z:nth-of-type(2){animation-delay:calc(var(--m-dur-slow) * 2.33);font-size:calc(var(--db-mascot-size) * .12)}
.db-mascot__z:nth-of-type(3){animation-delay:calc(var(--m-dur-slow) * 4.66);font-size:calc(var(--db-mascot-size) * .09)}
@keyframes db-mascot-z{0%{opacity:0;transform:translate(0,0) rotate(-8deg)}18%{opacity:.85}
  70%{opacity:.5}100%{opacity:0;transform:translate(calc(var(--db-mascot-size) * .22),calc(var(--db-mascot-size) * -.5)) rotate(10deg)}}

/* ---- flying across a section (the section must be position:relative; .db-section already is) ---- */
.db-mascot.is-flying{position:absolute;left:0;top:0;margin:0;z-index:2;will-change:transform}
.db-mascot.is-flying .db-mascot__img{animation:none;transition:rotate var(--m-dur) var(--m-ease)}

@media (prefers-reduced-motion:reduce){
  .db-mascot::before,.db-mascot__img,.db-mascot.is-hopping .db-mascot__img{animation:none}
  .db-mascot__z{animation:none;opacity:.7}
  .db-mascot__z:nth-of-type(n+2){display:none}
}