/* ===== KEYFRAME ANIMATIONS ===== */

/* Электричество течет по проводам */
@keyframes electricity {
    0% {
        stroke-dashoffset: 0;
        filter: drop-shadow(0 0 5px currentColor);
    }
    50% {
        filter: drop-shadow(0 0 15px currentColor);
    }
    100% {
        stroke-dashoffset: 1000;
        filter: drop-shadow(0 0 5px currentColor);
    }
}

/* Импульс энергии */
@keyframes energyPulse {
    0% {
        opacity: 1;
        r: 5px;
        filter: drop-shadow(0 0 5px currentColor);
    }
    50% {
        opacity: 0.8;
        r: 8px;
        filter: drop-shadow(0 0 20px currentColor);
    }
    100% {
        opacity: 1;
        r: 5px;
        filter: drop-shadow(0 0 5px currentColor);
    }
}

/* Пульсирующее свечение ядра */
@keyframes corePulse {
    0%, 100% {
        filter: drop-shadow(0 0 20px currentColor);
        opacity: 0.9;
    }
    50% {
        filter: drop-shadow(0 0 40px currentColor);
        opacity: 1;
    }
}

/* Вращение */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Вращение в обратном направлении */
@keyframes spinReverse {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}

/* Левитация */
@keyframes levitate {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Мерцание */
@keyframes flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        opacity: 1;
    }
    20%, 24%, 55% {
        opacity: 0.5;
    }
}

/* Интенсивное мерцание */
@keyframes flickerIntense {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        opacity: 1;
    }
    19%, 24%, 54%, 56% {
        opacity: 0.3;
    }
}

/* Возникновение элемента */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Исчезновение */
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Скачок при успехе */
@keyframes successBounce {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 50px var(--neon-green);
    }
}

/* Качание при ошибке */
@keyframes errorShake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-10px);
    }
    75% {
        transform: translateX(10px);
    }
}

/* Жидкое движение */
@keyframes flow {
    0% {
        position: relative;
    }
    100% {
        position: relative;
    }
}

/* Волна */
@keyframes wave {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Молния бьет */
@keyframes lightning {
    0%, 10%, 15%, 100% {
        opacity: 1;
    }
    12%, 13% {
        opacity: 0.3;
    }
}

/* Распространение волны */
@keyframes ripple {
    0% {
        r: 5px;
        opacity: 1;
    }
    100% {
        r: 50px;
        opacity: 0;
    }
}

/* Загрузка */
@keyframes loading {
    0% {
        transform: rotate(0deg);
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: rotate(360deg);
        opacity: 0.6;
    }
}

/* Звездный блеск */
@keyframes starTwinkle {
    0%, 100% {
        opacity: 0.3;
        filter: drop-shadow(0 0 2px white);
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 8px white);
    }
}

/* Переход между цветами */
@keyframes colorShift {
    0% {
        filter: hue-rotate(0deg);
    }
    50% {
        filter: hue-rotate(60deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

/* Взрыв/вспышка */
@keyframes explode {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 1;
    }
    100% {
        transform: scale(0.8);
        opacity: 0;
    }
}

/* Свец энергии поднимается */
@keyframes energyRise {
    from {
        transform: translateY(0);
        opacity: 0;
    }
    to {
        transform: translateY(-30px);
        opacity: 0;
    }
}

/* ===== UTILITY ANIMATION CLASSES ===== */

.animate-slide-in-up {
    animation: slideInUp var(--transition-slow) ease-out forwards;
}

.animate-slide-in-down {
    animation: slideInDown var(--transition-slow) ease-out forwards;
}

.animate-slide-in-left {
    animation: slideInLeft var(--transition-slow) ease-out forwards;
}

.animate-slide-in-right {
    animation: slideInRight var(--transition-slow) ease-out forwards;
}

.animate-fade-out {
    animation: fadeOut var(--transition-normal) ease-out forwards;
}

.animate-success {
    animation: successBounce 0.6s ease-out;
}

.animate-error {
    animation: errorShake 0.4s ease-out;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

.animate-pulse {
    animation: corePulse 2s ease-in-out infinite;
}

.animate-flicker {
    animation: flicker 3s ease-in-out infinite;
}

.animate-levitate {
    animation: levitate 3s ease-in-out infinite;
}

.animate-electricity {
    animation: electricity 1s linear infinite;
}

/* ===== TRANSITION STATES ===== */

/* Для перемещения между экранами */
.screen {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-slow) ease-out;
}

.screen.active {
    opacity: 1;
    pointer-events: auto;
}

/* ===== HOVER EFFECTS ===== */

button:not(:disabled) {
    transition: all var(--transition-normal);
}

button:not(:disabled):hover {
    transform: translateY(-2px);
}

button:not(:disabled):active {
    transform: translateY(0);
}

/* Hover для элементов на перетаскивание */
.draggable:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 15px currentColor);
}

.draggable.dragging {
    transform: scale(1.1);
    opacity: 0.8;
    z-index: 1000;
}

/* ===== RESPONSE ANIMATIONS ===== */

/* Правильный ответ */
.response-correct {
    animation: successBounce 0.6s ease-out;
    background: rgba(0, 255, 136, 0.2) !important;
    border-color: var(--neon-green) !important;
    box-shadow: 
        inset 0 0 20px rgba(0, 255, 136, 0.3),
        0 0 30px var(--neon-green) !important;
    color: var(--neon-green) !important;
    text-shadow: 0 0 10px var(--neon-green) !important;
}

/* Неправильный ответ */
.response-incorrect {
    animation: errorShake 0.4s ease-out;
    background: rgba(255, 0, 85, 0.2) !important;
    border-color: var(--neon-red) !important;
    box-shadow: 
        inset 0 0 20px rgba(255, 0, 85, 0.3),
        0 0 30px var(--neon-red) !important;
    color: var(--neon-red) !important;
    text-shadow: 0 0 10px var(--neon-red) !important;
}

/* ===== SCREEN TRANSITIONS ===== */

@keyframes screenFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes screenFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.screen-enter {
    animation: screenFadeIn var(--transition-slow) ease-out;
}

.screen-exit {
    animation: screenFadeOut var(--transition-normal) ease-out;
}