/* Hummingbird: page overlay, never participates in layout or hit testing. */
#hummingbird-stage { position:fixed; inset:0; z-index:1000; pointer-events:none; overflow:hidden; }
#hummingbird { position:absolute; left:0; top:0; width:96px; height:80px; will-change:transform; }
#hummingbird svg { width:100%; height:100%; overflow:visible; }
@media (prefers-reduced-motion:reduce) { #hummingbird-stage, #hb-lamp-room { display:none; } }
/* The syntax itself is the collectible. Its dimensions and copy text stay intact. */
.sh .hb-flower { position:relative; z-index:1001; }
.sh .hb-flower:not([data-collected]) {
  color:transparent; -webkit-text-fill-color:transparent;
  background-image:linear-gradient(125deg,#ffbd9f 0%,#ffd982 28%,#fff9dc 44%,#fff 48%,#ffd982 55%,#ffbd9f 78%,#ffd982 100%);
  background-size:240% 100%; background-clip:text; -webkit-background-clip:text;
  animation:hb-shine 2.4s linear infinite;
  filter:drop-shadow(0 0 3px #ffc98288);
}
.sh .hb-flower:not([data-collected])::after {
  content:'';position:absolute;pointer-events:none;width:11px;height:11px;right:1px;top:-4px;
  background:linear-gradient(90deg,transparent 44%,#fff3cd 49%,#fff3cd 51%,transparent 56%),linear-gradient(transparent 44%,#fff3cd 49%,#fff3cd 51%,transparent 56%);
  animation:hb-glint 2.4s ease-in-out infinite;
}
@keyframes hb-shine { to { background-position:240% 0; } }
@keyframes hb-glint { 0%,35%,75%,100% { opacity:0;transform:scale(.35) rotate(0deg); } 52% { opacity:1;transform:scale(1) rotate(12deg); } }
#hb-room, #hb-lamp-room { position:fixed;inset:0;z-index:998;pointer-events:none;overflow:hidden; }
/* The dark patch round the letter the bird moves in on: plain black, soft-edged; the letter sits above it. */
.hb-dim { position:absolute;left:-36px;top:-36px;width:72px;height:72px;opacity:0;
          background:radial-gradient(circle,rgba(0,0,0,.3) 0,rgba(0,0,0,.25) 14px,rgba(0,0,0,.11) 24px,transparent 36px); }
.hb-lamp { position:absolute;left:0;top:0;width:180px;height:124px;background:radial-gradient(ellipse,#ffc87616 0%,#ffc87609 35%,transparent 70%);transition:opacity .25s; }
.hb-day-shadow { filter:blur(11px); }
.hb-point-shadow { filter:blur(4px); }
#hummingbird { transform-origin:48px 40px; }
#hummingbird svg { position:relative;z-index:1;filter:drop-shadow(0 0 2.5px #ffc98255); }   /* the lit things' one halo: also the footer bird's and Try it live's (live-demo.css) */
.hb-mote { position:absolute;z-index:2;width:2px;height:2px;margin:-1px;opacity:0;border-radius:50%;background:#fff2c4;box-shadow:0 0 3px 1px #ffd67e99; }
@media (prefers-reduced-motion:reduce) {
  .sh .hb-flower:not([data-collected]) { animation:none;filter:none; }
  .sh .hb-flower::after { display:none; }
  .hb-lamp { transition:none; }
}

/* Letters the bird chose, and letters tapped after the collection (always from the light-blue strings): their own
   blue with a pale glint sweeping through, at a level from 0 (plain) to 1 (the settled, barely discernible glow),
   set per letter as --hb-level. Choosing flashes it smoothly brighter (to 2) and back; a tap flashes it up to the
   settled glow and back. --hb-glow is registered so those flashes animate smoothly (without @property they jump). */
@property --hb-glow { syntax:'<number>'; inherits:false; initial-value:0; }
.sh .hb-glow {
  --hb-glow:var(--hb-level,1);
  color:transparent; -webkit-text-fill-color:transparent;
  background-image:linear-gradient(125deg,#a5d6ff 0%,#a5d6ff 36%,
    color-mix(in srgb,#c9e6ff calc(min(var(--hb-glow),1) * 100%),#a5d6ff) 45%,
    color-mix(in srgb,#eef6ff calc(min(var(--hb-glow),1) * 100%),#a5d6ff) 49%,
    color-mix(in srgb,#c9e6ff calc(min(var(--hb-glow),1) * 100%),#a5d6ff) 53%,#a5d6ff 62%,#a5d6ff 100%);
  background-size:240% 100%; background-clip:text; -webkit-background-clip:text;
  filter:brightness(calc(1 + max(0, var(--hb-glow) - 1) * .45))
         drop-shadow(0 0 calc(1.5px + max(0, var(--hb-glow) - 1) * 2.5px) rgb(207 232 255 / calc(min(var(--hb-glow),1) * .2 + max(0, var(--hb-glow) - 1) * .4)))
        ;
  animation:hb-shine 3.2s linear infinite;
}

.sh .hb-glow.hb-select { animation:hb-shine 3.2s linear infinite, hb-select 1.6s ease-in-out; }
.sh .hb-glow.hb-tap { animation:hb-shine 3.2s linear infinite, hb-tap .9s ease-in-out; }
@keyframes hb-select { 35% { --hb-glow:2; } }
@keyframes hb-tap { 40% { --hb-glow:1; } }
.sh .hb-poi-glyph { position:relative; z-index:1002; }
@media (prefers-reduced-motion:reduce) { .sh .hb-glow, .sh .hb-glow.hb-select, .sh .hb-glow.hb-tap { animation:none; } }

/* Dust and motes of the bird's light where it slips under the block's right edge. Below the live demo (z 20).
   Each grain is a soft glow that fades all the way out (a Gaussian falloff, blurred), never a disc with a rim, and the
   puff thins out over the last 14 px before the block's edge instead of stopping at it. */
.hb-puff { position:absolute;z-index:1;pointer-events:none;overflow:hidden;border-radius:8px;transition:opacity .4s;
           -webkit-mask:linear-gradient(to left,transparent,#000 14px);mask:linear-gradient(to left,transparent,#000 14px); }
.hb-puff b { position:absolute;left:0;top:0;border-radius:50%;opacity:0;filter:blur(3px);
             background:radial-gradient(closest-side,#efe2c6 0%,#efe2c6d1 20%,#efe2c673 40%,#efe2c62b 60%,#efe2c60a 80%,#efe2c600 100%); }
/* The faint glitter the bird leaves where it has been: in page coordinates, so each mote stays put; under the bird. */
.hb-trail { position:absolute;left:0;top:0;width:0;height:0;overflow:visible;z-index:999;pointer-events:none; }
/* Glitter: crisp single points of light, no glow around them (the dust, the flower's and the bird's alike). */
.hb-puff i, .hb-trail i, .sh .hb-flower > i { position:absolute;pointer-events:none;left:0;top:0;width:1px;height:1px;margin:-.5px;opacity:0;background:#fff2c4; }

/* Taps on the commands bring the bird back: keep double-tap zoom out of the way there (scrolling and pinch zoom stay). */
pre:has(> code.sh) { touch-action: manipulation; }

/* The footer's bird, once the light has been collected: glowing like the flying bird and Try it live, the same
   flowing warm field through its lines (hummingbird.js adds the gradient) and the same halo. Before that it is a light grey, a shade
   brighter than the footer's text (its lines' own opacities, chosen in the Hummingbird Mark tool). Lit, the lines take
   the tool's lit strengths: full, the far wing (the first path) .57. */
footer svg.mark.hb-lit { filter:drop-shadow(0 0 2.5px #ffc98255); }
footer svg.mark.hb-lit g { stroke:url(#hb-mark-field); }
footer svg.mark.hb-lit path { stroke-opacity:1; }
footer svg.mark.hb-lit path:first-child { stroke-opacity:.57; }