/* Gentle illustration-only motion. Layout, text and game boards stay stationary. */
html [data-scene-motion] {
  animation-duration: 7s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: var(--scene-delay, 0s);
  animation-play-state: paused;
  transform-origin: 50% 65%;
}
html [data-scene-motion="float"] { animation-name: scene-float; }
html [data-scene-motion="breathe"] { animation-name: scene-breathe; animation-duration: 7s; }
html [data-scene-motion="greet"] { animation-name: scene-greet; animation-duration: 5.5s; }
html [data-scene-motion="pan"] { animation-name: scene-pan; animation-duration: 9s; }
html [data-scene-motion="sparkle"] { animation-name: scene-sparkle; animation-duration: 5s; }
html[data-scene-motion-paused="false"] .scene-motion-inview { animation-play-state: running; }
body:has(dialog[open]) [data-scene-motion] { animation-play-state: paused; }
.scene-sparkles {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; opacity: .35;
  background: radial-gradient(circle at 6% 19%, #fff6bd 0 2px, transparent 4px),
    radial-gradient(circle at 93% 34%, #fffdf1 0 2px, transparent 5px),
    radial-gradient(circle at 9% 83%, #fffdf1 0 2px, transparent 5px),
    radial-gradient(circle at 91% 79%, #ffe9a3 0 2px, transparent 4px);
}
.hero-portal > .scene-sparkles { inset: 6% 4%; }
.scene-sparkles::before,.scene-sparkles::after { content: "✦"; position: absolute; color: #e7b638; font: 24px/1 'Fredoka',Arial,sans-serif; text-shadow: 0 0 8px #fff9cf; }
.scene-sparkles::before { top: 18%; right: 5%; }
.scene-sparkles::after { bottom: 22%; left: 6%; font-size: 19px; }
@keyframes scene-float { 0%,100% { translate: 0 0; rotate: -1deg; } 50% { translate: 0 -7px; rotate: 1deg; } }
@keyframes scene-breathe { 0%,100% { scale: 1; } 50% { scale: 1.02; } }
@keyframes scene-greet { 0%,100% { translate: 0 2px; scale: 1; rotate: -.4deg; } 50% { translate: 0 -7px; scale: 1.025; rotate: .4deg; } }
@keyframes scene-pan { 0%,100% { scale: 1.025; translate: -2px 0; } 50% { scale: 1.04; translate: 2px -2px; } }
@keyframes scene-sparkle { 0%,100% { opacity: .32; translate: 0 0; } 50% { opacity: .85; translate: 0 -5px; } }
@media (hover:hover) and (pointer:fine) {
  .friend-card:hover .school-character,.friend-card:focus-visible .school-character,
  .stage-button:hover .animal-sprite,.stage-button:focus-visible .animal-sprite,
  .subject-orb:hover .subject-character,.subject-orb:focus-visible .subject-character { scale: 1.055; }
}
.friend-card:active .school-character,.stage-button:active .stage-icon,.subject-orb:active .subject-character { scale: .97; }
.music-dock.has-scene-motion { display: grid; grid-template-columns: minmax(0,1fr) auto; }
.music-dock.has-scene-motion .scene-motion-control {
  grid-column: 1 / -1; min-height: 44px; border-top: 1px solid #e7dcef;
  border-radius: 0 0 13px 13px; font: 14px/1.4 'Fredoka', Arial, sans-serif;
  color: #573775; background: #f5eefb;
}
.scene-motion-control { cursor: pointer; touch-action: manipulation; }
.scene-motion-standalone {
  position: fixed; z-index: 25; left: 16px; bottom: max(14px, env(safe-area-inset-bottom));
  min-height: 44px; max-width: calc(100vw - 32px); padding: 10px 17px;
  border: 2px solid #fff; border-radius: 22px; background: #f4eafb; color: #573775;
  box-shadow: 0 3px 0 #b9a1cb, 0 7px 18px #49315f20;
  font: 500 15px/1.4 'Fredoka', Arial, sans-serif;
}
body:has(dialog[open]) .scene-motion-control { visibility: hidden; }
body:has(.music-dock.has-scene-motion) .footer { padding-bottom: 132px !important; }
html[data-reduce-motion="true"] [data-scene-motion],
html[data-reduce-motion="true"] .scene-sparkles { animation: none !important; translate: none !important; rotate: none !important; scale: none !important; }
html[data-reduce-motion="true"] .scene-sparkles { display: none; }
@media (prefers-reduced-motion: reduce) {
  [data-scene-motion],.scene-sparkles { animation: none !important; translate: none !important; rotate: none !important; scale: none !important; }
  .scene-sparkles { display: none; }
}
@media (forced-colors: active) {
  .scene-sparkles { display: none; }
  .scene-motion-control { border: 2px solid ButtonText; }
}