/* =========================================================
   mascots.css - the animated scene, mascots, petals and dotted
   background. Shared by the login page, dashboards and 404.
   ========================================================= */

/* dotted paper background + falling petals */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image: radial-gradient(rgba(27, 37, 64, .09) 1.4px, transparent 1.6px);
  background-size: 26px 26px;
}
.petals { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.petal {
  position: absolute; top: -30px; width: var(--s); height: calc(var(--s) * .8);
  background: radial-gradient(circle at 30% 30%, #fff 0, #F7B9C4 55%, #F29AAB 100%);
  border-radius: 80% 0 80% 0; opacity: .8; animation: fall var(--t) linear var(--dl) infinite;
}
@keyframes fall {
  0% { transform: translate3d(0, -30px, 0) rotate(0); }
  50% { transform: translate3d(var(--dx), 55vh, 0) rotate(200deg); }
  100% { transform: translate3d(calc(var(--dx) * -.4), 110vh, 0) rotate(400deg); }
}

/* ---------- the illustrated stage ---------- */
.stage { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 1; margin-inline: auto; }
.sun {
  position: absolute; width: 64%; aspect-ratio: 1; left: 18%; top: 4%; border-radius: 50%;
  background: var(--red); border: 2.5px solid var(--ink); box-shadow: 8px 8px 0 var(--ink);
  animation: sunbob 7s ease-in-out infinite;
}
.sun::after { content: ""; position: absolute; inset: -6%; border-radius: 50%; border: 2px dashed rgba(27, 37, 64, .35); animation: spin 40s linear infinite; }
@keyframes sunbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes spin { to { transform: rotate(360deg); } }
.hill { position: absolute; border: 2.5px solid var(--ink); border-radius: 50%; }
.hill-back { width: 86%; height: 38%; right: -12%; bottom: -8%; background: #BBD895; }
.hill-front { width: 96%; height: 38%; left: -14%; bottom: -14%; background: var(--matcha); }

.stage .char { position: absolute; display: block; overflow: visible; }
.stage .scarecrow { width: 47%; left: 27%; bottom: 7%; }
.stage .daruma { width: 21%; right: 3%; bottom: 5%; }
.stage .neko { width: 24%; left: 1%; bottom: 3%; }

/* mascot animations */
.sc-sway { transform-origin: 120px 322px; animation: sway 5s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
.sc-wave { transform-origin: 160px 168px; animation: wave 1.6s ease-in-out infinite; }
@keyframes wave { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(12deg); } }
.blink { transform-origin: 120px 99px; animation: blink 4.6s infinite; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(.08); } }
.pupil { transition: transform .08s linear; }
.dr-rock { transform-origin: 65px 132px; animation: rock 2.6s ease-in-out infinite; }
@keyframes rock { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
.nk-paw { transform-origin: 104px 104px; animation: paw 1.1s ease-in-out infinite; }
@keyframes paw { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(14deg); } }
.nk-tail-wrap { transform-origin: 104px 130px; animation: tail 2.4s ease-in-out infinite; }
@keyframes tail { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }
.stage .neko { animation: hop 3.8s ease-in-out infinite; }
@keyframes hop { 0%, 86%, 100% { transform: translateY(0); } 92% { transform: translateY(-10px); } }

/* small mascot next to a page title */
.mascot-mini { width: 92px; margin: -26px 4px -14px 0; flex: none; }
.mascot-mini .char { width: 100%; height: auto; display: block; overflow: visible; }

/* speech bubble */
.bubble {
  position: absolute; right: 2%; top: 12%; z-index: 5; background: #fff;
  border: 2.5px solid var(--ink); border-radius: 18px; padding: 10px 16px; box-shadow: 4px 4px 0 var(--ink);
  display: flex; flex-direction: column; line-height: 1.2; min-width: 130px; animation: pop .5s ease;
}
.bubble::after {
  content: ""; position: absolute; left: 34px; bottom: -13px; width: 20px; height: 20px; background: #fff;
  border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(45deg) skew(8deg, 8deg);
}
.bubble b { font-size: 1.15rem; }
.bubble small { font-size: .74rem; color: var(--muted); font-family: var(--font-display); font-weight: 600; }
.bubble.swap { animation: pop .45s ease; }
@keyframes pop { 0% { transform: scale(.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* floating kana tiles */
.kana {
  position: absolute; z-index: 4; font-weight: 900; font-size: clamp(1.2rem, 2.6vw, 1.8rem);
  width: clamp(42px, 8vw, 58px); aspect-ratio: 1; display: grid; place-items: center;
  background: var(--sun); border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink);
  animation: float 5s ease-in-out infinite;
}
.k1 { left: 4%; top: 12%; background: var(--sakura); }
.k2 { left: 10%; top: 44%; animation-delay: -1.2s; background: var(--sky); }
.k3 { right: 6%; top: 46%; animation-delay: -2.2s; }
.k4 { left: 36%; top: 0; animation-delay: -3s; background: var(--matcha); }
.k5 { right: 20%; bottom: 36%; animation-delay: -.6s; background: var(--peach); }
@keyframes float { 0%, 100% { translate: 0 0; rotate: -4deg; } 50% { translate: 0 -14px; rotate: 5deg; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}