.presences { position: absolute; inset: 0; z-index: 94; pointer-events: none; }
.presence { position: absolute; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.presence:focus-visible { outline: 1px solid #f2dab0; outline-offset: 5px; border-radius: 50%; }
.presence img { display: block; width: 100%; height: auto; pointer-events: none; filter: drop-shadow(0 5px 3px #142e3440); }
.presence--axolotl { left: 64%; bottom: 16%; width: clamp(74px, 9vw, 130px); min-height: 44px; animation: axolotl-drift 16s ease-in-out infinite; }
.presence--axolotl::after { content: ''; position: absolute; inset: 57% -12% 5%; border-bottom: 1px solid #d5e2d14d; border-radius: 50%; pointer-events: none; }
.presence--axolotl.is-greeting img { animation: axolotl-greet 2.4s ease-in-out; }
.panda-path { position: absolute; left: 29%; bottom: 22%; width: clamp(96px, 11vw, 154px); animation: panda-wander 65s ease-in-out infinite; }
.presence--panda { position: relative; display: block; width: 100%; }
.presence--panda img { animation: panda-breathe 4s ease-in-out infinite; }
.panda-path:has(:hover), .panda-path:has(:focus-visible), .panda-path.is-resting { animation-play-state: paused; }
.panda-path.is-resting img { animation-play-state: paused; }
.panda-note { position: absolute; left: 45%; bottom: 17%; width: 44px; height: 44px; padding: 12px; border: 0; background: transparent; pointer-events: auto; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 2s; }
.panda-note.is-left { opacity: 1; visibility: visible; }
.panda-note span { display: block; width: 19px; height: 14px; transform: rotate(-13deg); background: #d1c3a3; border-radius: 1px 4px 1px 1px; box-shadow: 0 3px 6px #101c3040; }
.panda-note span::after { content: ''; display: block; width: 10px; height: 6px; margin: 3px; border-top: 1px solid #826e54; border-bottom: 1px solid #826e5470; }
.panda-note:focus-visible { outline: 1px solid #f2dab0; border-radius: 50%; }
@keyframes axolotl-drift { 0%,100% { transform: translate(0,0) rotate(-3deg); } 50% { transform: translate(15px,5px) rotate(3deg); } }
@keyframes axolotl-greet { 50% { transform: translateY(-7px) rotate(-8deg); } }
@keyframes panda-breathe { 50% { transform: translateY(-2px); } }
@keyframes panda-wander { 0%,12%,100% { transform: translate(0,0); } 38%,57% { transform: translate(12vw,4vh); } 70%,85% { transform: translate(5vw,2vh); } }
@media (min-width: 1025px) { .presences { left: 50%; right: auto; width: min(100vw,120rem); transform: translateX(-50%); } }
@media (max-width: 720px) and (orientation: portrait) { .presence--axolotl { left: 59%; bottom: 16%; width: 86px; } .panda-path { left: 15%; bottom: 23%; width: 103px; } .panda-note { left: 35%; bottom: 20%; } }
@media (max-height: 520px) and (orientation: landscape) { .presence--axolotl { bottom: 15%; } .panda-path { bottom: 17%; width: 96px; } }
@media (prefers-reduced-motion: reduce) { .presence--axolotl, .presence--axolotl.is-greeting img, .presence--panda img, .panda-path { animation: none; } .panda-note { transition: none; } }