/* Transform and opacity carry motion. Nothing flashes or starts music on load. */
@keyframes parrot-greeting { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-4deg) translateY(-2%); } 60% { transform: rotate(3deg); } }
@keyframes page-corner { 0% { transform: rotate(0); opacity: 0; } 45% { transform: rotate(-18deg); opacity: .9; } 100% { transform: rotate(-9deg); opacity: .7; } }
@keyframes invitation { 0%,100% { opacity: .15; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes reflections { 0% { transform: translate(-7%, -4%) rotate(-10deg); } 100% { transform: translate(8%, 5%) rotate(10deg); } }
.hotspot-parrot:is(:hover,:focus-visible,.selected) .parrot-layer { animation: parrot-greeting .8s var(--ease) 1; filter: drop-shadow(0 0 10px #d0f79580); }
@keyframes turtle-greeting { 0%,100% { transform: translate(0,0) rotate(0); } 30% { transform: translate(3%,-3%) rotate(-4deg); } 65% { transform: translate(1%,0) rotate(2deg); } }
@keyframes gi-sway { 0%,100% { transform: rotate(0); } 25% { transform: rotate(4deg); } 65% { transform: rotate(-3deg); } }
.object-layer { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: contain; pointer-events: none; }
.turtle-layer { transform-origin: 53% 84%; filter: drop-shadow(0 7px 4px #35202335); }
.jitsai-layer { transform-origin: 49% 3%; filter: drop-shadow(3px 7px 5px #35202330); }
.hotspot-turtle:is(:hover,:focus-visible,.selected) .turtle-layer { animation: turtle-greeting 1.5s var(--ease) infinite; filter: drop-shadow(0 0 2px #eacfff) drop-shadow(0 0 13px #d6a5ff); }
.hotspot-jitsai:is(:hover,:focus-visible,.selected) .jitsai-layer { animation: gi-sway 2s ease-in-out infinite; filter: drop-shadow(0 0 2px #eef6ff) drop-shadow(0 0 14px #83b6ff); }
.hotspot-turtle::before, .hotspot-jitsai::before, .hotspot-parrot::before { display: none; }
.object-offscreen .object-layer, .object-offscreen .record-glint { animation-play-state: paused !important; }
.hotspot-writing:is(:hover,:focus-visible,.selected)::after { animation: page-corner .55s var(--ease) both; }
.record-glint { animation: invitation 3.5s ease-in-out 4; }
.record-offscreen .record-glint { animation-play-state: paused; }
.hotspot-record:is(:hover,:focus-visible) .record-glint { opacity: 1; }
.night-shade { position: absolute; inset: 0; z-index: 5; background: #130d22; opacity: 0; pointer-events: none; transition: opacity 1.2s ease; }
.disco-lights { position: absolute; inset: 0; z-index: 6; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 1.2s ease; mix-blend-mode: screen; }
.disco-lights i { position: absolute; inset: -15%; background-image: radial-gradient(ellipse at center, #ffe1b9a0 0 10%, transparent 26%); background-size: 120px 95px; transform: rotate(-10deg); animation: reflections 12s ease-in-out infinite alternate; animation-play-state: paused; }
.disco-lights i:nth-child(2) { background-image: radial-gradient(ellipse at center, #a0bafcaf 0 6%, transparent 20%); background-size: 160px 110px; animation-duration: 16s; animation-direction: alternate-reverse; }
.disco-lights i:nth-child(3) { background-image: radial-gradient(ellipse at center, #f6a5c778 0 5%, transparent 19%); background-size: 95px 130px; animation-duration: 20s; }
.is-playing .night-shade { opacity: .55; }
.is-playing .disco-lights { opacity: .7; }
.is-playing .disco-lights i { animation-play-state: running; }
.is-playing .record-disc::after, .music-on .mini-record { animation: spin 3s linear infinite; }
.is-playing .record-glint { animation: none; opacity: 0; }
.is-hidden *, .is-hidden *::before, .is-hidden *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .record-glint { opacity: .7; }
  .disco-lights { display: none; }
  .is-playing .night-shade { opacity: .3; }
  .hotspot-writing:is(:hover,:focus-visible,.selected)::after { opacity: .7; }
}
@media (hover: none) {
  .hotspot:not(.selected) .object-label { opacity: 0; }
  .hotspot:not(.selected):focus-visible .object-label { opacity: 1; }
}