/* Kivolo motion primitives. All respect prefers-reduced-motion. CC0. */

@keyframes kv-float    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes kv-breathe  { 0%,100%{transform:scale(1)}      50%{transform:scale(1.03)} }
@keyframes kv-floatY   { 0%,100%{transform:translateY(-8px)} 50%{transform:translateY(8px)} }
@keyframes kv-wave     { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-18deg)} 75%{transform:rotate(18deg)} }
@keyframes kv-page-flip{ 0%,100%{transform:rotateY(0)} 50%{transform:rotateY(-35deg)} }
@keyframes kv-card-lift{ from{transform:translateY(0)} to{transform:translateY(-8px) rotate(-1deg)} }
@keyframes kv-drift    { from{transform:translateX(0)} to{transform:translateX(-50%)} }

.kv-cloud      { animation: kv-float 6s ease-in-out infinite; }
.kv-cloud.d2   { animation-delay: -2s; }
.kv-cloud.d3   { animation-delay: -4s; }

.kv-mascot         { animation: kv-breathe 3s ease-in-out infinite, kv-floatY 4s ease-in-out infinite; transform-origin: center bottom; }
.kv-wave-arm       { animation: kv-wave 2.4s ease-in-out infinite; transform-origin: 330px 200px; transform-box: fill-box; }
.kv-story-book     { animation: kv-page-flip 5s ease-in-out infinite; transform-origin: center center; transform-style: preserve-3d; }

.kv-tile           { transition: transform .2s ease, box-shadow .2s ease; }
.kv-tile:hover,
.kv-tile:focus-visible { transform: translateY(-8px) rotate(-1deg); }

.kv-games-tile:hover,
.kv-games-tile:focus-visible { transform: scale(1.05) rotate(-2deg); }

.kv-scroll-track   { animation: kv-drift 45s linear infinite; }
.kv-scroll-track:hover { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .kv-cloud, .kv-mascot, .kv-wave-arm, .kv-story-book, .kv-scroll-track,
  .kv-tile, .kv-games-tile { animation: none !important; transition: none !important; }
  .kv-tile:hover, .kv-games-tile:hover { transform: none !important; }
}