/* ===== 小花火 (js/mascot.js) =====
   Six stacked layers from images/mascot/ (the owner's drawing). .mascot-full is
   the whole figure (244×491); .mascot-bust shows the head inside a circle and
   takes its size from its container. */
.mascot-slot, .mascot { display: block; }
.mascot { position: relative; --mascot-ratio: 244 / 491; }
.mascot .mc-fig { display: block; position: relative; aspect-ratio: var(--mascot-ratio); }
.mascot-full .mc-fig { width: 100%; }
.mascot-bust {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: #fbf2ec;
}
.mascot-bust .mc-fig { position: absolute; width: 118%; left: -9%; top: -12%; }
.mc-rig {
    position: absolute;
    inset: 0;
    transform-origin: 50% 100%;
    animation: mc-breathe 3.2s ease-in-out infinite;
}
.mc-rig img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
.mc-eyes_closed, .mc-mouth_closed, .mc-blush { visibility: hidden; }
.mascot.mc-blink .mc-eyes_open { visibility: hidden; }
.mascot.mc-blink .mc-eyes_closed { visibility: visible; }
.mascot.mc-shut .mc-mouth_smile { visibility: hidden; }
.mascot.mc-shut .mc-mouth_closed { visibility: visible; }
.mascot.mc-hop .mc-rig { animation: mc-hop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1); }
/* poke faces (js/rails.js) */
.mascot.mc-happy .mc-eyes_open { visibility: hidden; }
.mascot.mc-happy .mc-eyes_closed { visibility: visible; }
.mascot.mc-shy .mc-blush { visibility: visible; }
.mascot.mc-angry .mc-mouth_smile { visibility: hidden; }
.mascot.mc-angry .mc-mouth_closed { visibility: visible; }
.mascot.mc-angry .mc-rig { animation: mc-shake 0.36s ease-in-out 3; }

@keyframes mc-breathe {
    0%, 100% { transform: translateY(0) scaleY(1); }
    50% { transform: translateY(-1.2%) scaleY(1.012); }
}
@keyframes mc-hop {
    0% { transform: none; }
    20% { transform: scale(1.06, 0.94); }
    50% { transform: translateY(-12%) scale(0.96, 1.04); }
    80% { transform: scale(1.04, 0.96); }
    100% { transform: none; }
}
@keyframes mc-shake {
    0%, 100% { transform: translateX(0) rotate(0); }
    25% { transform: translateX(-3%) rotate(-2deg); }
    75% { transform: translateX(3%) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
    .mc-rig, .mascot.mc-hop .mc-rig, .mascot.mc-angry .mc-rig { animation: none; }
}