/* Bud, the Scatter mascot (Luke, 12 October 2026). Pictures are in art/bud/. Hidden entirely by the Aa setting "Bud: Hide". */
html.hg-s-bud-hide .bud, html.hg-s-bud-hide .bud-pic { display: none; }
.bud { display: block; max-width: 100%; height: auto; }
.bud.flip { transform: scaleX(-1); }
.bud-tour { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 18px; align-items: center; text-align: left; }
.bud-tour .bud-pic { justify-self: center; }
.bud-tour h2 { margin: 0 0 6px; }
.bud-tour p { margin: 0 0 10px; font-size: 1.1rem; }
.bud-tour .bud-tag { font-size: .85rem; color: var(--ink-soft, #4a5275); margin-top: 6px; }
dialog#tour .dlg { max-width: min(760px, 94vw); }
@media (max-width: 640px) { .bud-tour { grid-template-columns: 1fr; text-align: center; } .bud-tour .bud-pic img { width: 150px; height: 150px; margin: 0 auto; } }
/* A little life when Bud arrives. Nothing moves with "Reduce motion" or the device's reduce-motion setting. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.hg-s-calm-on) .bud-pic img { animation: bud-hello .7s cubic-bezier(.2,1.4,.4,1) both; }
  html:not(.hg-s-calm-on) .bud-pic.bud-cheer img { animation: bud-hop .8s ease-out both; }
}
@keyframes bud-hello { from { opacity: 0; transform: translateY(14px) scale(.9); } }
@keyframes bud-hop { 0% { transform: translateY(0); } 30% { transform: translateY(-16px) scale(1.03); } 55% { transform: translateY(0) scale(.98); } 75% { transform: translateY(-6px); } 100% { transform: none; } }

/* ---------- the walking tour (js/bud-tour.js) ---------- */
.bt-root { position: fixed; inset: 0; z-index: 2147482000; }
.bt-spot { position: fixed; border-radius: 18px; box-shadow: 0 0 0 9999px rgba(20, 26, 44, .58), 0 0 0 4px rgba(255, 255, 255, .9) inset; outline: 4px solid #fff; transition: left .5s ease, top .5s ease, width .5s ease, height .5s ease, opacity .3s; pointer-events: none; }
.bt-walker { position: fixed; left: 0; top: 0; z-index: 2; transform: translate(-300px, 0); transition: transform 1s ease-in-out; will-change: transform; pointer-events: none; }
.bt-walker img { display: block; transform-origin: 50% 90%; }
.bt-bubble { position: fixed; z-index: 3; background: var(--card, #fff); color: var(--ink, #1d2340); border: 3px solid var(--accent, #2d6a4f); border-radius: 20px; padding: 14px 18px 12px; box-shadow: 0 12px 34px rgba(0, 0, 0, .35); opacity: 0; transform: translateY(8px) scale(.97); transition: opacity .3s, transform .3s, left .5s ease, top .5s ease; }
.bt-bubble.bt-in { opacity: 1; transform: none; }
.bt-title { margin: 0 0 4px; font-size: 1.35rem; }
.bt-text { margin: 0 0 8px; font-size: 1.05rem; line-height: 1.45; }
.bt-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.bt-gap { flex: 1; }
.bt-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html.hg-s-bud-hide .bt-walker { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.hg-s-calm-on) .bt-walking img { animation: bt-walk .34s ease-in-out infinite; }
  html:not(.hg-s-calm-on) .bt-cheer img { animation: bud-hop .8s ease-out both; }
  html:not(.hg-s-calm-on) .bt-walker:not(.bt-walking) img { animation: bud-hello .5s cubic-bezier(.2,1.4,.4,1) both; }
}
@keyframes bt-walk { 0%, 100% { transform: translateY(0) rotate(calc(var(--tilt, 1) * -5deg)) scaleY(1); } 25% { transform: translateY(-14px) rotate(calc(var(--tilt, 1) * 3deg)) scaleY(1.04); } 50% { transform: translateY(0) rotate(calc(var(--tilt, 1) * 5deg)) scaleY(.96); } 75% { transform: translateY(-10px) rotate(calc(var(--tilt, 1) * -3deg)) scaleY(1.02); } }
.bt-still .bt-spot, .bt-still .bt-bubble, .bt-still .bt-walker { transition: none; }
@media (max-width: 640px) { .bt-title { font-size: 1.2rem; } .bt-text { font-size: 1rem; } }

/* ---------- Bud in the field, on the sign-in screen, on cards and on the survey ---------- */
.bud-field { position: absolute; z-index: 6; background: none; border: 0; padding: 0; cursor: pointer; }
.bud-field:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 16px; }
.bud-field .bf-img img { display: block; width: 100%; height: 100%; transform-origin: 50% 95%; }
.bf-say { position: absolute; left: 50%; bottom: calc((1 - var(--head, .3)) * 100% + 12px); transform: translate(calc(-50% + var(--shift, 0px)), 6px); width: max-content; max-width: 210px; background: var(--card, #fff); color: var(--ink, #1d2340); border: 2px solid var(--accent, #2d6a4f); border-radius: 16px; padding: 7px 13px; font-size: .95rem; line-height: 1.3; text-align: left; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .18)); }
.bf-say.on { opacity: 1; transform: translate(calc(-50% + var(--shift, 0px)), 0); }
/* the tail: a little point that runs down to Bud's head, so the words are clearly his (it stays above Bud even when the bubble is moved to stay on the screen) */
.bf-say::before, .bf-say::after { content: ""; position: absolute; left: calc(50% - var(--shift, 0px)); top: 100%; width: 0; height: 0; border-style: solid; border-color: transparent; transform: translateX(-50%); }
.bf-say::before { border-width: 11px 9px 0 9px; border-top-color: var(--accent, #2d6a4f); margin-top: -1px; }
.bf-say::after { border-width: 8px 6px 0 6px; border-top-color: var(--card, #fff); margin-top: -3px; }
.bf-drop { position: absolute; z-index: 7; width: 7px; height: 11px; margin: 0; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: #7fc0e8; box-shadow: inset -1px -1px 0 #4d9bd0; pointer-events: none; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.hg-s-calm-on) .bud-field:not(.bf-walking) .bf-img img { animation: bf-breathe 3.6s ease-in-out infinite; }
  html:not(.hg-s-calm-on) .bf-walking .bf-img img { animation: bt-walk .34s ease-in-out infinite; }
}
@keyframes bf-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, 1.03); } }
html.hg-s-bud-hide .bud-field, html.hg-s-bud-hide .bf-drop, html.hg-s-bud-hide .bud-hero, html.hg-s-bud-hide .bud-panel, html.hg-s-bud-hide .sc-toast-bud, html.hg-s-bud-hide .bud-pulse { display: none; }
.bud-hero { margin-top: 10px; text-align: left; }
.bud-hero .bud-hero-pic img { display: block; }
.bud-hero-line { margin: 0; font-weight: 700; color: var(--ink, #1d2340); }
.sc-toast-bud { flex: 0 0 auto; margin-right: -4px; }
.sc-toast-bud img { display: block; width: 62px; height: 62px; }
.bud-pulse { display: flex; align-items: center; gap: 12px; }
.bud-pulse img { flex: 0 0 auto; width: 84px; height: 84px; }
.bud-pulse h2 { margin: 0; }

.bf-wet { position: absolute; z-index: 5; width: 34px; height: 10px; border-radius: 50%; background: #5a3a22; pointer-events: none; opacity: 0; }
html.hg-s-bud-hide .bf-wet { display: none; }

/* ---------- Bud in small places (js/bud-moments.js) ---------- */
.bud-note { display: inline-flex; align-items: center; gap: 10px; vertical-align: middle; text-align: left; }
.bud-note .bud-pic { flex: 0 0 auto; }
.bud-note-line { font-weight: 700; }
.bud-box { display: flex; align-items: center; gap: 12px; }
.bud-box > .bud-pic, .bud-box > .bud-note { flex: 0 0 auto; }
.bud-load { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--ink, #1d2340); font-weight: 700; }
.bud-moveup { position: relative; display: grid; justify-items: center; min-height: 190px; }
.bud-moveup .bud-pic { grid-area: 1 / 1; }
.bud-moveup .bud-new { opacity: 0; }
.bud-moveup.bud-grown .bud-old { opacity: 0; transition: opacity .6s; }
.bud-moveup.bud-grown .bud-new { opacity: 1; transition: opacity .6s; }
.bud-term-end { display: flex; justify-content: center; margin: 4px 0 8px; }
.bud-selfcheck { display: flex; justify-content: center; margin: 0 0 4px; }
.bud-gone { display: none !important; }
.notice .bud-note { margin-right: 8px; }
html.hg-s-bud-hide .bud-note, html.hg-s-bud-hide .bud-moveup, html.hg-s-bud-hide .bud-term-end, html.hg-s-bud-hide .bud-selfcheck { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.hg-s-calm-on) .bud-load .bud-pic img { animation: bf-breathe 1.8s ease-in-out infinite; }
}
.bud-policy { margin: 0 0 6px; }
html.hg-s-bud-hide .bud-policy { display: none; }
.bud-aa { margin-right: 8px; flex: 0 0 auto; }

/* ---------- A little bounce for Bud everywhere he stands still (12 October 2026: Luke asked for more life) ----------
   He bobs on the spot, using the separate "translate" property so it adds to his arrival, his hop and his walk instead of replacing them.
   Off with "No movement" (Reduce motion), the device's reduce-motion setting, and Bud: Quiet. Bigger places bounce a little more. */
@keyframes bud-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(var(--bob, 5px) * -1); } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.hg-s-calm-on):not(.hg-s-bud-quiet) .bud-pic img { animation: bud-hello .7s cubic-bezier(.2,1.4,.4,1) both, bud-bob 2.4s ease-in-out .8s infinite; }
  html:not(.hg-s-calm-on):not(.hg-s-bud-quiet) .bud-pic.bud-cheer img { animation: bud-hop .8s ease-out both, bud-bob 1.6s ease-in-out .8s infinite; }
  html:not(.hg-s-calm-on):not(.hg-s-bud-quiet) .bud-hero .bud-pic img { --bob: 9px; animation: bud-hello .7s cubic-bezier(.2,1.4,.4,1) both, bud-bob 1.9s ease-in-out .8s infinite; }
  html:not(.hg-s-calm-on):not(.hg-s-bud-quiet) .bud-moveup .bud-pic img { --bob: 8px; }
  html:not(.hg-s-calm-on):not(.hg-s-bud-quiet) .bud-note .bud-pic img { --bob: 4px; }
  html:not(.hg-s-calm-on):not(.hg-s-bud-quiet) .bt-walker:not(.bt-walking) img { --bob: 8px; animation: bud-hello .5s cubic-bezier(.2,1.4,.4,1) both, bud-bob 1.8s ease-in-out .5s infinite; }
  html:not(.hg-s-calm-on):not(.hg-s-bud-quiet) .bud-field:not(.bf-walking) .bf-img img { --bob: 6px; animation: bf-breathe 3.6s ease-in-out infinite, bud-bob 2.1s ease-in-out infinite; }
  html:not(.hg-s-calm-on):not(.hg-s-bud-quiet) .sc-toast-bud img, html:not(.hg-s-calm-on):not(.hg-s-bud-quiet) .bud-pulse img { --bob: 4px; animation: bud-bob 2s ease-in-out infinite; }
  html:not(.hg-s-calm-on):not(.hg-s-bud-quiet) .bt-walking img, html:not(.hg-s-calm-on):not(.hg-s-bud-quiet) .bt-walking .bud-pic img { animation: bt-walk .34s ease-in-out infinite; }   /* walking wins over the bob */
  html:not(.hg-s-calm-on):not(.hg-s-bud-quiet) .bud-load .bud-pic img { --bob: 6px; animation: bf-breathe 1.8s ease-in-out infinite, bud-bob 1.2s ease-in-out infinite; }
}

/* ---------- the sign-in "Meet Bud" panel (js/bud-signin.js) ---------- */
html:not(.hg-s-bud-hide) .hero-mark.bp-replaced { display: none; }
.bud-panel { margin-top: 22px; max-width: 470px; padding: 14px 20px 14px; border-radius: 26px; border: 1px solid rgba(36, 84, 61, .18);
  background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .5)); box-shadow: 0 14px 34px rgba(36, 60, 40, .14), inset 0 1px 0 rgba(255, 255, 255, .8); }
.bp-top { display: flex; align-items: center; gap: 16px; }
.bp-bud { flex: 0 0 auto; }
.bp-words { min-width: 0; }
.bp-kicker { margin: 0 0 6px; font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #24543d; }
.bp-line { margin: 0 0 6px; font-size: 1.35rem; line-height: 1.2; font-weight: 800; color: var(--ink, #1d2340); text-wrap: balance; }
.bp-sub { margin: 0; font-size: .98rem; color: #3f4766; }
.bp-rail { list-style: none; margin: 8px 0 0; padding: 12px 0 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; border-top: 3px solid #8cc46a; border-radius: 2px; text-align: center; }
.bp-stage { opacity: .42; filter: saturate(.55); transition: opacity .35s, filter .35s, transform .35s; }
.bp-stage.on { opacity: 1; filter: none; }
.bp-stage.now { transform: translateY(-3px) scale(1.06); }
.bp-stage .bud-pic img { margin: -6px auto -10px; display: block; width: 56px; height: 56px; }
.bp-stage b { display: block; font-size: .78rem; color: var(--ink, #1d2340); }
.bp-stage small { display: block; font-size: .7rem; color: #4a5275; }
@media (max-width: 640px) { .bud-panel { max-width: none; } .bp-line { font-size: 1.15rem; } .bp-stage small { display: none; } .bp-stage .bud-pic img { width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .bp-stage { transition: none; } }
html.hg-s-calm-on .bp-stage, html.hg-s-bud-quiet .bp-stage { transition: none; }

/* ---------- the smoothness check page (device-check.html) ---------- */
.dc-stage { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 0; }
.dc-av { width: 72px; height: 72px; display: block; transform: rotateY(var(--r, 0deg)); transform-style: preserve-3d; }
.dc-av svg { width: 100%; height: 100%; }
.dc-bud img { display: block; }