/* 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; }
/* The book stands on the desk; its layer runs a little past the button so the base meets the desk. */
@keyframes book-lift { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-2.5%) rotate(-1deg); } }
@keyframes tag-sway { 0%,100% { transform: rotate(-24deg); } 30% { transform: rotate(-31deg); } 65% { transform: rotate(-19deg); } }
.hotspot-book::before { display: none; }
.hotspot-book .object-layer { height: 105.5%; transform-origin: 40% 98%; }
.hotspot-book:is(:hover,:focus-visible,.selected) .object-layer { animation: book-lift .9s var(--ease); filter: drop-shadow(0 0 9px #ffe0a0b0); }
/* The tag hangs by its string from the cover's top-right corner and sways around that point. */
.book-tag { position: absolute; left: 82.2%; top: 12.7%; width: 0; height: 0; transform: rotate(-24deg); transform-origin: 0 0; font: calc(max(100vw, 100dvh * 2688 / 1520) * .0078)/1.05 Georgia, serif; animation: tag-sway 3.2s ease-in-out 1.2s 3; pointer-events: none; }
.book-tag::before { content: ''; position: absolute; left: -.06em; top: 0; width: .12em; height: 2.1em; border-radius: .06em; background: #9c7b56; }
.book-tag-card { position: absolute; top: 2em; left: 0; transform: translateX(-50%) rotate(16deg); transform-origin: 50% 0; padding: .75em .62em .42em; border-radius: .22em; background: linear-gradient(160deg, #fbf5e8, #eadcc1); box-shadow: .15em .35em .6em #4a2c1440, 0 0 0 1px #c9b28c66; color: #29251f; letter-spacing: -.01em; text-align: center; white-space: nowrap; }
.book-tag-card::before { content: ''; position: absolute; top: .22em; left: 50%; width: .3em; height: .3em; margin-left: -.15em; border-radius: 50%; background: #8a6a4a; box-shadow: 0 0 0 .1em #d9c6a1; }
.hotspot-book:is(:hover,:focus-visible,.selected) .book-tag { animation: tag-sway 1.6s ease-in-out infinite; }
.hotspot-book:is(:hover,:focus-visible,.selected) .book-tag-card { box-shadow: .15em .35em .6em #4a2c1440, 0 0 0 1px #c9b28c66, 0 0 1.1em #ffe0a0; }
.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; }
}