/* Home hero · Peach roams the painting (option A, _proto/hero-unicorn).
   The hero video is untouched; Peach lives on a layer above it and keeps to the
   grass the video leaves clear. Loaded by index.html only. */
.hu-a-win { position: relative; }
/* hero-peach.js adds .has-peach on desktop with a fine pointer; everywhere
   else (phones, touch) the layer and its bubble never render */
.hu-a-win:not(.has-peach) .hu-a-stage,
.hu-a-win:not(.has-peach) .hu-a-bubble { display: none; }
.hu-a-stage { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hu-a-stage canvas { position: absolute; top: 0; left: 0; image-rendering: pixelated; will-change: transform; }
.hu-a-lilac, .hu-a-hearts { display: none; }
/* he only shows once the video has its first frame (no unicorn on a black box) */
.hu-a-stage { opacity: 0; transition: opacity .9s cubic-bezier(.22, 1, .36, 1); }
.hu-a-win.is-ready .hu-a-stage { opacity: 1; }
.hu-a-win.is-over-peach { cursor: pointer; }

/* the bubble: Unicorn's own panel glass, small. Placed once when the pointer
   arrives and never chases him, so nothing slides under the cursor. */
.hu-a-bubble {
  position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2;
  display: flex; flex-direction: column; gap: 4px; padding: 9px 13px 10px; border-radius: 11px;
  color: #ECE6F0; font: 400 11.5px/1.2 "Ubuntu Sans", ui-sans-serif, system-ui, sans-serif; white-space: nowrap;
  background:
    linear-gradient(135deg, rgb(255 255 255 / .11), rgb(255 255 255 / .035) 26%, rgb(255 255 255 / 0) 56%),
    linear-gradient(310deg, rgb(167 139 223 / .12), rgb(232 149 106 / .05) 30%, transparent 52%),
    rgb(21 20 25 / .96);
  box-shadow: 0 10px 30px rgb(0 0 0 / .45), inset 0 0 0 1px rgb(255 255 255 / .07);
  opacity: 0; transform: translateY(4px);
  transition: opacity .32s cubic-bezier(.22, 1, .36, 1), transform .32s cubic-bezier(.22, 1, .36, 1);
}
.hu-a-bubble.is-on { opacity: 1; transform: none; transition-duration: .22s; }
.hu-a-bubble__w { display: flex; align-items: center; gap: 7px; }
.hu-a-bubble__w b { font-weight: 500; font-size: 13.5px; letter-spacing: .005em; }
.hu-a-bubble__w i { flex: none; width: 6px; height: 6px; border-radius: 1px; background: linear-gradient(135deg, #FFAF5F, #F28DA6); }
.hu-a-bubble[data-st="waiting"] .hu-a-bubble__w i { background: linear-gradient(135deg, #C8A2FF, #AF87D7); animation: hu-a-tw 1.1s ease-in-out infinite; }
.hu-a-bubble[data-st="idle"] .hu-a-bubble__w i { background: rgb(236 230 240 / .35); }
@keyframes hu-a-tw { 50% { opacity: .35; } }
.hu-a-bubble__l { color: rgb(236 230 240 / .6); padding-left: 13px; }
/* a pixel tail: two squares stepping down toward him, his own grid */
.hu-a-bubble__tail { position: absolute; left: var(--tail, 50%); bottom: -10px; width: 0; height: 0; }
.hu-a-bubble__tail i { position: absolute; width: 4px; height: 4px; background: rgb(21 20 25 / .96); }
.hu-a-bubble__tail i:nth-child(1) { left: -2px; top: 0; width: 6px; height: 5px; }
.hu-a-bubble__tail i:nth-child(2) { left: 0; top: 6px; }
@media (prefers-reduced-motion: reduce) {
  .hu-a-bubble, .hu-a-stage { transition: none; }
  .hu-a-bubble[data-st="waiting"] .hu-a-bubble__w i { animation: none; }
}