/* ===== The guide: the robot that follows you down the homepage and presents each section (assets/companion.js) =====
   Each section has its own spot for it (data-guide-station*): standing on a card, peeking out from behind a door, next to
   a title or a button, in the page margin, or up from the bottom edge of the screen. The headings stay the page's own
   headings; when the robot stands next to one it says it, and a thin line in the section's colour runs under the words. */
:root { --guide-size: clamp(112px, 11vw, 188px); }
@media (max-width: 900px) { :root { --guide-size: 60px; } }

/* ---------- the robot (fixed; companion.js moves it with transforms only) ---------- */
.guide { position: fixed; left: 0; top: 0; z-index: 42; display: block; width: 0; height: 0; margin: 0; padding: 0 0 env(safe-area-inset-bottom, 0px); pointer-events: none; }
/* a screen-sized layer: companion.js clips it at the edge of the card or door the robot is behind (clicks too) */
.guide__stage { position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; pointer-events: none; }
.guide__bot {
  position: absolute; left: 0; top: 0; display: block; width: var(--guide-size); height: var(--guide-size); margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; pointer-events: none; transform-origin: 50% 50%;
  will-change: transform; opacity: 0; visibility: hidden; transition: opacity .28s, visibility 0s .28s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.guide.is-on .guide__bot { opacity: 1; visibility: visible; transition-delay: 0s; }
.guide.is-snap .guide__bot { transition: none; } /* the hand-off with the hero robot: swap in place, no fade */
/* only its body catches the pointer (head to feet, not the button's whole square: that reached onto the row it stands on) */
.guide__hit { position: absolute; left: 7%; right: 7%; top: 13%; bottom: 17%; border-radius: 46% 46% 40% 40%; pointer-events: auto; }
.guide.is-moving .guide__hit { pointer-events: none; } /* never catches a click meant for what it passes */
.guide__bot:focus-visible { outline: 2px solid var(--cobalt, #2F4BFF); outline-offset: 6px; }
.guide.is-ink .guide__bot:focus-visible { outline-color: var(--paper, #F3EFE6); }

/* the body: the live 3D robot (agent3d.js) when it runs, else a pre-rendered sprite, else the page's 2D face */
.guide__pose { position: absolute; inset: 0; display: block; transform-origin: 50% 90%; }
.guide__agent { position: absolute; inset: 0; width: 100%; pointer-events: none; }
.guide__agent .agent__body { box-shadow: inset -9cqw -12cqw 0 rgba(255, 255, 255, .05), inset 6cqw 7cqw 0 rgba(255, 255, 255, .1), 0 12cqw 24cqw -12cqw rgba(15, 15, 16, .5); }
/* on ink a black robot keeps its outline: a thin paper rim, no glow */
.guide.is-ink .guide__agent:not(.has-3d) .agent__body { box-shadow: inset 6cqw 7cqw 0 rgba(255, 255, 255, .12), 0 0 0 max(1.5px, 1cqw) rgba(243, 239, 230, .45); }
.guide.is-ink .guide__sprite { filter: drop-shadow(0 0 1px rgba(243, 239, 230, .5)); }
/* sprites (assets/3d/sprites, 640px squares, same camera for every pose): framed to sit exactly where the 3D robot does */
.guide__sprite { position: absolute; left: -23%; top: -34.5%; width: 145.6%; max-width: none; height: auto; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.guide:not(.is-sprite) .guide__sprite { display: none; }
.guide.is-sprite .guide__agent { visibility: hidden; }
/* a little life when it stands still (2D face and sprites; the 3D robot breathes, talks and hops on its own) */
.guide__sprite, .guide__agent:not(.has-3d) .agent__body { animation: guide-breathe 3.4s var(--ease-io, ease-in-out) infinite alternate; }
@keyframes guide-breathe { from { translate: 0 0; } to { translate: 0 -2.5%; } }
.guide.is-talking .guide__sprite { animation: guide-talk .19s ease-in-out infinite alternate; }
@keyframes guide-talk { from { translate: 0 0; scale: 1; } to { translate: 0 -2%; scale: 1.015 .985; } }
.guide__agent.is-talk:not(.has-3d) .mouth { animation: guide-mouth .18s var(--ease-io, ease-in-out) infinite alternate; }
@keyframes guide-mouth { from { width: 19%; height: 6%; } to { width: 15%; height: 15%; border-radius: 50%; background: #fff; } }
.guide__agent.agent--light.is-talk .mouth { animation-name: guide-mouth-l; }
@keyframes guide-mouth-l { from { width: 19%; height: 6%; } to { width: 15%; height: 15%; border-radius: 50%; background: var(--ink, #0F0F10); } }
.guide.is-hop .guide__sprite, .guide.is-hop .guide__agent:not(.has-3d) { animation: guide-hop .6s var(--spring, ease-out) both; }
@keyframes guide-hop { 40% { translate: 0 -14%; } }
/* what it does while it waits at a spot (data-guide-idle): a slow sway, or a slow bob */
.guide[data-idle="sway"] .guide__pose { animation: guide-sway 5.6s var(--ease-io, ease-in-out) infinite alternate; }
.guide[data-idle="bob"] .guide__pose { animation: guide-bob 3.6s var(--ease-io, ease-in-out) infinite alternate; }
@keyframes guide-sway { from { rotate: -2deg; } to { rotate: 2deg; } }
@keyframes guide-bob { from { translate: 0 0; } to { translate: 0 -3%; } }

/* ---------- its own bubbles: a plain card, a hairline, a soft shadow; the tail is two small triangles ---------- */
.guide__say, .guide__menu {
  --gb-line: rgba(15, 15, 16, .16);
  position: absolute; left: 0; top: 0; margin: 0; border: 1px solid var(--gb-line); border-radius: 14px;
  background: var(--card, #FFFDF8); color: var(--ink, #0F0F10); box-shadow: 0 14px 32px -18px rgba(15, 15, 16, .42);
  font: 500 .9rem/1.35 var(--f-body, sans-serif); text-align: left; opacity: 0; visibility: hidden; scale: .92;
  transition: opacity .22s, scale .45s var(--ease, ease-out), visibility 0s .22s;
}
.guide__say { width: max-content; max-width: min(15rem, calc(100vw - 6.5rem)); padding: .55rem .8rem; pointer-events: none; transform-origin: var(--tx, 50%) var(--ty, 100%); }
.guide__say.is-on, .guide__menu.is-on { opacity: 1; visibility: visible; scale: 1; transition-delay: 0s; }
.guide__say::before, .guide__say::after, .guide__menu::before, .guide__menu::after { content: ""; position: absolute; width: 12px; height: 7px; pointer-events: none; }
.guide__say::before, .guide__menu::before { background: var(--gb-line); }
.guide__say::after, .guide__menu::after { background: var(--card, #FFFDF8); }
/* tail down (bubble above the robot) */
.guide__say.is-u::before, .guide__say.is-u::after, .guide__menu.is-up::before, .guide__menu.is-up::after { left: var(--tx, 50%); top: 100%; margin-left: -6px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.guide__say.is-u::after, .guide__menu.is-up::after { margin-top: -1.4px; }
/* tail up (bubble below it) */
.guide__say.is-d::before, .guide__say.is-d::after, .guide__menu:not(.is-up)::before, .guide__menu:not(.is-up)::after { left: var(--tx, 50%); bottom: 100%; margin-left: -6px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.guide__say.is-d::after, .guide__menu:not(.is-up)::after { margin-bottom: -1.4px; }
/* tail sideways (bubble beside it) */
.guide__say.is-l::before, .guide__say.is-l::after, .guide__say.is-r::before, .guide__say.is-r::after { top: var(--ty, 50%); width: 7px; height: 12px; margin-top: -6px; }
.guide__say.is-l::before, .guide__say.is-l::after { left: 100%; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.guide__say.is-l::after { margin-left: -1.4px; }
.guide__say.is-r::before, .guide__say.is-r::after { right: 100%; clip-path: polygon(100% 0, 100% 100%, 0 50%); }
.guide__say.is-r::after { margin-right: -1.4px; }
.guide__say.is-l { transform-origin: 100% var(--ty, 50%); }
.guide__say.is-r { transform-origin: 0 var(--ty, 50%); }

/* the robot's own bubble: hover/focus/tap it. You can move onto it and click (WCAG 1.4.13); Escape closes it; x hides it */
.guide__menu { display: grid; gap: .55rem; width: max-content; max-width: min(17rem, calc(100vw - 1.5rem)); padding: .7rem 2.6rem .75rem .9rem; transform-origin: var(--tx, 50%) 100%; }
.guide__menu:not(.is-up) { transform-origin: var(--tx, 50%) 0; }
.guide__menu.is-on { pointer-events: auto; }
.guide__menu-q { margin: 0; color: rgba(15, 15, 16, .7); }
.guide__menu-book {
  display: inline-flex; align-items: center; justify-content: space-between; gap: .6rem; margin: 0; padding: .55rem .7rem .55rem .95rem;
  border: 0; border-radius: 999px; background: var(--ink, #0F0F10); color: var(--paper, #F3EFE6); font: 600 .9rem/1 var(--f-body, sans-serif); cursor: pointer;
  transition: background-color .25s;
}
.guide__menu svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.guide__menu-book:hover { background: var(--cobalt, #2F4BFF); }
.guide__menu-hide { position: absolute; right: .3rem; top: .3rem; display: grid; place-items: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: rgba(15, 15, 16, .5); cursor: pointer; transition: background-color .2s, color .2s; }
.guide__menu-hide svg { width: 14px; height: 14px; }
.guide__menu-hide:hover { background: rgba(15, 15, 16, .06); color: var(--ink, #0F0F10); }
.guide__menu button:focus-visible { outline: 2px solid var(--cobalt, #2F4BFF); outline-offset: 2px; }
.guide__live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- once you hide it (x): a small tab with its eyes at the right edge brings it back. Nothing otherwise. ---------- */
.guide__tab {
  position: fixed; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); display: block; width: 24px; height: 38px; margin: 0; padding: 0;
  border: 1px solid rgba(15, 15, 16, .14); border-right: 0; border-radius: 12px 0 0 12px; background: var(--card, #FFFDF8);
  box-shadow: 0 8px 18px -12px rgba(15, 15, 16, .45); cursor: pointer; pointer-events: auto; translate: 110% 0; opacity: 0; visibility: hidden;
  transition: translate .45s var(--ease, ease), opacity .2s, visibility 0s .45s; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.guide__tab::before { content: ""; position: absolute; inset: -4px 0 -4px -12px; } /* a bigger target, over the page margin */
.guide__tab i { position: absolute; top: 14px; width: 4px; height: 7px; border-radius: 50%; background: var(--ink, #0F0F10); }
.guide__tab i:first-child { left: 7px; }
.guide__tab i + i { left: 14px; }
.guide.has-tab .guide__tab { translate: 0 0; opacity: 1; visibility: visible; transition-delay: .2s, .2s, 0s; }
.guide__tab:focus-visible { outline: 2px solid var(--cobalt, #2F4BFF); outline-offset: 2px; }

/* ---------- the line: when it stands next to its section's title it says it, one word at a time: a thin underline in the
   section's colour passes under each word as it is said and fades (the words stay ink: never a two-tone heading) ---------- */
.guide-line { --guide-say: var(--accent, #2F4BFF); }
.guide-line.is-karaoke .w:not(:has(> i)), .guide-line.is-karaoke .w > i { text-decoration-line: underline; text-decoration-thickness: .06em; text-underline-offset: .14em; text-decoration-skip-ink: none; text-decoration-color: transparent; animation: guide-kara calc(var(--guide-word, 110ms) * 3.6) var(--ease-io, ease) none; animation-delay: calc(var(--i, 0) * var(--guide-word, 110ms) + 60ms); }
@keyframes guide-kara { 38% { text-decoration-color: var(--guide-say); } }

/* the hero robot steps aside while the guide is out (with its floor shadow, so the stage never looks abandoned) */
html.guide-out #top .agent[data-agent3d], html.guide-out #top [data-say] { opacity: 0 !important; transition: opacity .25s !important; }
html.guide-out #top .hero__robot::before, html.guide-out #top .hero__robot::after { opacity: 0; transition: opacity .5s; }

@media (prefers-reduced-motion: reduce) {
  .guide__sprite, .guide__agent .agent__body, .guide__pose { animation: none !important; }
  .guide__say, .guide__menu, .guide__tab { transition: none; }
}
.is-still .guide__sprite, .is-still .guide__agent .agent__body, .is-still .guide__pose { animation: none; }
.is-still .guide-line.is-karaoke .w, .is-still .guide-line.is-karaoke .w > i { animation: none; }
/* phones: while the builder (#mix) fills a good part of the screen the robot stays away (companion.js), and it never
   stands over it */
@media print { .guide { display: none; } }