/* The live 3D rabbit. The still render stays underneath as the poster, so the
   page looks right before the model loads and wherever it never does. */
.smp-bunny { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; cursor: pointer; overflow: hidden; }
.smp-bunny > img { display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity 420ms ease; }
.smp-bunny-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 420ms ease; touch-action: pan-y; }
.smp-bunny.is-live > img { opacity: 0; }
.smp-bunny.is-live > .smp-bunny-canvas { opacity: 1; }
/* what floats up from the rabbit on a click */
.smp-bunny-fx { position: absolute; z-index: 2; font-size: 26px; line-height: 1; font-weight: 700; color: #dc2626; pointer-events: none; opacity: 0; animation: smpBunnyFx 1100ms ease-out both; }
.smp-bunny-fx.is-z { font-size: 30px; color: #229ed9; animation-duration: 1300ms; }
.smp-bunny-fx.is-steam { font-size: 24px; color: #8c8c8c; }
@keyframes smpBunnyFx { 0% { opacity: 0; transform: translate(0, 12px) scale(.6); } 20% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--drift, 0), -70px) scale(1.1); } }
/* the clock behind the rabbit: normal clock hands, 24 hours at speed */
.smp-mascot { position: relative; }
.smp-clock { position: absolute; left: 50%; top: 8%; width: 74%; translate: -50% 0; }
.smp-mascot .smp-bunny { z-index: 1; }
.smp-clock-min, .smp-clock-hour { transform-origin: 50px 50px; animation: smpClockTurn 2s linear infinite; }
.smp-clock-hour { animation-duration: 24s; }
@keyframes smpClockTurn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .smp-clock-min, .smp-clock-hour { animation: none; } }