/* Each object responds to exploration. The rest of the room remains still. */
@keyframes ball-bounce { 0%,100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-19%) rotate(-9deg); } 65% { transform: translateY(-3%) rotate(5deg); } }
@keyframes books-rock { 0%,100% { transform: rotate(0); } 35% { transform: translateY(-5%) rotate(-6deg); } 70% { transform: rotate(2deg); } }
@keyframes chair-invite { 0%,100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(-5%) rotate(-3deg); } }
@keyframes mic-nod { 0%,100% { transform: rotate(0); } 40% { transform: rotate(-7deg); } 75% { transform: rotate(3deg); } }
@keyframes steam-rise { 0% { transform: translateY(15%) scale(.65); opacity: 0; } 35% { opacity: .8; } 100% { transform: translateY(-90%) scale(1.1); opacity: 0; } }
@keyframes sound-wave { 0%,100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
@keyframes poster-sweep { from { transform: translateX(-160%) rotate(-23deg); } to { transform: translateX(450%) rotate(-23deg); } }
@keyframes shirt-shimmer { 0%,100% { opacity: 0; transform: translateX(-15%); } 50% { opacity: .7; transform: translateX(15%); } }
@keyframes screen-cursor { 0%,40%,100% { opacity: .2; } 50%,90% { opacity: .9; } }
.hotspot-rugby .object-layer { transform-origin: 50% 100%; }
.hotspot-books .object-layer { transform-origin: 10% 100%; }
.hotspot-consulting .object-layer { transform-origin: 50% 96%; filter: drop-shadow(0 10px 5px #33231e38); }
.hotspot-podcast .object-layer { transform-origin: 48% 91%; }
.hotspot:is(.hotspot-rugby,.hotspot-books,.hotspot-consulting,.hotspot-podcast)::before { display: none; }
.hotspot-rugby:is(:hover,:focus-visible,.selected) .object-layer { animation: ball-bounce .9s var(--ease); filter: drop-shadow(0 0 9px #ffe1b9); }
.hotspot-books:is(:hover,:focus-visible,.selected) .object-layer { animation: books-rock 1s var(--ease); filter: drop-shadow(0 0 7px #ffe0a0); }
.hotspot-consulting:is(:hover,:focus-visible,.selected) .object-layer { animation: chair-invite 1.1s var(--ease) both; filter: drop-shadow(0 0 12px #ffe6c790); }
.hotspot-podcast:is(:hover,:focus-visible,.selected) .object-layer { animation: mic-nod .9s var(--ease); }
.object-effect { position: absolute; pointer-events: none; opacity: 0; }
.hotspot:is(:hover,:focus-visible,.selected) .object-effect { opacity: 1; }
.steam { width: 65%; height: 80%; left: 20%; top: -38%; display: flex; justify-content: space-around; }
.steam i { width: 20%; border-left: 2px solid #fff9e8; border-radius: 50%; opacity: 0; }
.hotspot:is(:hover,:focus-visible,.selected) .steam i { animation: steam-rise 1.8s ease-out infinite; }
.steam i:nth-child(2) { animation-delay: .35s !important; }
.steam i:nth-child(3) { animation-delay: .7s !important; }
.sound-bars { left: 90%; top: 8%; width: 38%; height: 36%; display: flex; align-items: center; gap: 15%; }
.sound-bars i { height: 100%; width: 20%; border-radius: 5px; background: #ffdfad; transform: scaleY(.25); }
.hotspot:is(:hover,:focus-visible,.selected) .sound-bars i { animation: sound-wave .7s ease-in-out infinite; }
.sound-bars i:nth-child(2) { animation-delay: -.2s !important; }
.sound-bars i:nth-child(3) { animation-delay: -.4s !important; }
.poster-reflection { inset: 3% 6%; overflow: hidden; }
.poster-reflection i:first-child { display: block; width: 30%; height: 130%; background: linear-gradient(90deg,transparent,#fff9e853,transparent); }
.hotspot:is(:hover,:focus-visible,.selected) .poster-reflection i:first-child { animation: poster-sweep 1.2s ease-out both; }
.shirt-light { top: 51%; left: 13%; width: 76%; height: 22%; border-radius: 25%; background: linear-gradient(105deg,transparent,#fff6cb70,transparent); mix-blend-mode: screen; }
.hotspot:is(:hover,:focus-visible,.selected) .shirt-light { animation: shirt-shimmer 1.3s ease-in-out both; }
.screen-signal { inset: 10% 12% 39%; background: #b8dfff22; box-shadow: 0 0 20px #b8dfff50; }
.screen-signal i:first-child { position: absolute; left: 12%; bottom: 18%; width: 6%; height: 17%; background: #e2f6cf; }
.hotspot:is(:hover,:focus-visible,.selected) .screen-signal i:first-child { animation: screen-cursor 1.4s ease infinite; }
.hotspot-mug .object-label { max-width: 220px; white-space: normal; }
.object-offscreen *, .object-offscreen::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .steam i { opacity: .6; }
  .poster-reflection i:first-child { background: #fff3; transform: none; }
  .hotspot:is(:hover,:focus-visible,.selected) .shirt-light { opacity: .3 !important; }
}