/* ==========================================================
   FATALITY — анимация кнопок при наведении
   Что происходит при hover:
   1) кнопка трясётся,
   2) «кровь» заливает её сверху вниз (ступенчато, как пиксели),
   3) текст сменяется на FATALITY с глитч-эффектом,
   4) кнопка светится красным.
   Текст берётся из атрибута data-hover в HTML.
   ========================================================== */

.btn-fatality {
    position: relative;
    display: inline-block;
    min-width: 170px;
    padding: 14px 22px;
    overflow: hidden;
    isolation: isolate;
    font-family: 'Press Start 2P', 'Courier New', monospace;
    font-size: 11px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background: var(--mk-red, #c1121f);
    border: 4px solid #000;
    box-shadow: 0 0 0 3px var(--mk-gold, #f4c430), 6px 6px 0 #000;
    cursor: pointer;
}

/* Обычный текст кнопки */
.btn-fatality > span {
    position: relative;
    z-index: 2;
    transition: opacity .15s;
}

/* Слой «крови»: стекает сверху вниз ступеньками */
.btn-fatality::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 1;
    height: 0;
    background: linear-gradient(180deg, #5c0000, #8b0000 70%, #c1121f);
    transition: height .45s steps(6);
}

/* Текст FATALITY (скрыт, пока нет наведения) */
.btn-fatality::after {
    content: attr(data-hover);
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    color: var(--mk-gold, #f4c430);
    text-shadow: 2px 2px 0 #000;
}

/* --- Состояние наведения / фокуса с клавиатуры --- */
.btn-fatality:hover,
.btn-fatality:focus-visible {
    color: #fff;
    animation: mk-shake .35s steps(2) infinite, mk-glow 1s steps(2) infinite;
}
.btn-fatality:hover::before,
.btn-fatality:focus-visible::before { height: 100%; }

.btn-fatality:hover > span,
.btn-fatality:focus-visible > span { opacity: 0; }

.btn-fatality:hover::after,
.btn-fatality:focus-visible::after {
    opacity: 1;
    animation: mk-glitch .5s steps(3) infinite;
}

/* Эффект «нажатия» */
.btn-fatality:active {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 3px var(--mk-gold, #f4c430), 2px 2px 0 #000;
}

/* --- Ключевые кадры --- */
@keyframes mk-shake {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-2px, 1px); }
    50%  { transform: translate(2px, -1px); }
    75%  { transform: translate(-1px, -2px); }
    100% { transform: translate(1px, 2px); }
}
@keyframes mk-glow {
    0%, 100% { box-shadow: 0 0 0 3px #f4c430, 6px 6px 0 #000, 0 0 10px #c1121f; }
    50%      { box-shadow: 0 0 0 3px #f4c430, 6px 6px 0 #000, 0 0 28px 6px #ff2a2a; }
}
@keyframes mk-glitch {
    0%   { text-shadow: 2px 2px 0 #000, -2px 0 #0ff; transform: translateX(0); }
    33%  { text-shadow: 2px 2px 0 #000, 3px 0 #f0f;  transform: translateX(-2px); }
    66%  { text-shadow: 2px 2px 0 #000, -3px 0 #0ff; transform: translateX(2px); }
    100% { text-shadow: 2px 2px 0 #000, 2px 0 #f0f;  transform: translateX(0); }
}

/* Без анимации для тех, кто её отключил в системе */
@media (prefers-reduced-motion: reduce) {
    .btn-fatality:hover,
    .btn-fatality:focus-visible,
    .btn-fatality:hover::after { animation: none; }
}