/* Маскот OPLOT (ёж). Префикс msc-. Анимируются только transform и opacity. */
.msc { --s: 96px; position: relative; display: inline-block; width: var(--s); height: var(--s); flex: none; pointer-events: none; user-select: none; vertical-align: middle; }
.msc-glow { position: absolute; inset: 8% 8% 2%; border-radius: 50%; background: radial-gradient(closest-side, rgba(198, 244, 50, .3), rgba(198, 244, 50, .08) 55%, transparent 75%); animation: msc-glow 3.4s ease-in-out infinite; }
.msc-sway, .msc-breath { position: absolute; inset: 0; transform-origin: 50% 100%; }
.msc-sway { animation: msc-sway 6s ease-in-out infinite; }
.msc-breath { animation: msc-breath 4.2s ease-in-out infinite; }
.msc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.msc-b { filter: drop-shadow(0 4px 10px rgba(198, 244, 50, .16)); }
.msc-d { transform-origin: 50% 60%; }
.msc-sleep .msc-breath { animation-duration: 6.4s; }
.msc-sleep .msc-d { animation: msc-z 4s ease-out infinite; }
.msc-think .msc-d, .msc-think2 .msc-d { animation: msc-q 2.4s ease-in-out infinite; }
.msc-happy .msc-d, .msc-king .msc-d { animation: msc-pulse 1.3s ease-in-out infinite; }
.msc-love .msc-d { animation: msc-heart 2.4s ease-out infinite; }
.msc-music .msc-d { animation: msc-note 3s ease-out infinite; }
.msc-sad .msc-breath { animation-duration: 5.2s; }
@keyframes msc-breath { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.004, 1.012); } }
@keyframes msc-sway { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-.6deg); } 50% { transform: translate3d(0, -2px, 0) rotate(.6deg); } }
@keyframes msc-glow { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes msc-z { 0% { opacity: 0; transform: translate3d(-3%, 5%, 0) scale(.85); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate3d(5%, -9%, 0) scale(1.12); } }
@keyframes msc-pulse { 0%, 100% { opacity: .4; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes msc-q { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-5deg); } 50% { transform: translate3d(1%, -5%, 0) rotate(6deg); } }
@keyframes msc-heart { 0% { opacity: 0; transform: translate3d(0, 6%, 0) scale(.8); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate3d(2%, -10%, 0) scale(1.15); } }
@keyframes msc-note { 0% { opacity: 0; transform: translate3d(-4%, 6%, 0) rotate(-8deg); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate3d(6%, -12%, 0) rotate(10deg); } }
@media (prefers-reduced-motion: reduce) { .msc *, .msc { animation: none !important; transition: none !important; } .msc-glow { opacity: .7; } }
.msc-hero { display: flex; justify-content: center; margin: 0 0 4px; min-height: 132px; }
.msc-status { --s: 76px; margin-right: 4px; }