/* The original two-layer choreography stays anchored to the treehouse floor. */
.treehouse-guide { position: absolute; z-index: 4; left: 14.5%; top: 47.8%; width: 10.2%; aspect-ratio: 1; min-width: 44px; min-height: 44px; display: block; pointer-events: auto; cursor: pointer; text-decoration: none; }
.mascot-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 8px; box-shadow: 0 0 0 6px var(--landing-cyan); }
.mascot-viewport { display: block; position: relative; width: 100%; height: 100%; }
.mascot-idle { position: absolute; inset: 0; transform-origin: 50% 90%; animation: mascot-breathe 5200ms ease-in-out infinite; }
.mascot-layer { position: absolute; inset: 5%; display: block; width: 90%; height: 90%; object-fit: contain; opacity: 0; transform-origin: 50% 92%; translate: var(--pose-x, 8%) var(--pose-y, 0%); scale: var(--pose-scale, 1); }
.mascot-layer:first-child { opacity: 1; }
.mascot-bubble { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, 4px); padding: 7px 10px; border: 2px solid #26364b; border-radius: 5px; background: #fff9e9; color: #183b52; white-space: nowrap; font: 800 12px/1.4 var(--landing-body); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
.mascot-cta:hover .mascot-bubble, .mascot-cta:focus-visible .mascot-bubble, .mascot-cta.is-wayfinding .mascot-bubble { opacity: 1; transform: translate(-50%, -4px); }
[data-mascot][data-paused="true"] .mascot-idle { animation-play-state: paused; }
@keyframes mascot-breathe { 0%, 100% { transform: translate(0, 0) rotate(-.4deg) scale(1); } 50% { transform: translate(1px, -2px) rotate(.4deg) scale(1.008); } }
@media (max-width: 600px) {
  .mascot-bubble { left: 0; transform: translateY(4px); }
  .mascot-cta:hover .mascot-bubble, .mascot-cta:focus-visible .mascot-bubble, .mascot-cta.is-wayfinding .mascot-bubble { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .mascot-idle { animation: none; }
  .mascot-bubble { transition: none; }
}