/**
 * RSite — Effects & Animations  v1.0
 * Depends on: base.css (variables), components.css (selectors)
 *
 * Keyframes and motion that enhance interaction, never distract.
 * Hover states, pulse feedback, organic morphing for visual feedback.
 * Only what moves: `.hover-wut`, `.is-pulsing`, `.is-blinking`.
 */

/* 
   ANIMATIONS — Pulse & Blink
*/

/* Pulse — rhythmic scale + shadow via ::after */
@keyframes anim-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4);
        border-radius: 50%;
    }

    100% {
        transform: scale(1.08);
        box-shadow: 0 0 0 10px rgba(212, 175, 55, 0);
        border-radius: 45%;
    }
}

/* Blink — opacity fade via ::after */
@keyframes anim-blink {
    0% {
        opacity: 1;
    }

    20% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

/* Utility classes for applying animations */
.is-pulsing {
    position: relative;
}

.is-pulsing::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: inherit;
    background: inherit;
    animation: anim-pulse 0.4s ease infinite alternate;
    z-index: -1;
}

.is-blinking {
    position: relative;
}

.is-blinking::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: inherit;
    background: inherit;
    animation: anim-blink 1.33s ease-out infinite;
    z-index: -1;
}

/* 
   HOVER EFFECTS — Wut (Organic Morphing)
*/

/* Wut effect - organic morphing hover */
.hover-wut {
    position: relative;
    transition: all 0.3s ease;
    /* Сохраняем контекст для псевдоэлементов */
}

.hover-wut:hover {
    /* ТРЕТИЙ СЛОЙ - основной элемент (без opacity, чтобы текст был виден) */
    border: none !important;
    box-shadow: none !important;
    animation: hover-wut-main 1.5s ease-in-out infinite;
}

.hover-wut:hover::before,
.hover-wut:hover::after {
    content: '';
    position: absolute;
    /* Псевдоэлементы РАСТУТ наружу */
    top: -4px;
    left: -4px;
    bottom: -4px;
    right: -4px;
    border-radius: inherit;
    /* These will be set by element-specific styles */
    z-index: -1;
    /* Позади содержимого */
    pointer-events: none;
    mix-blend-mode: multiply;
}

/* ТРЕТИЙ СЛОЙ - основной элемент */
.hover-wut.btn-primary:hover {
    animation: hover-wut-main 1.5s 0.05s ease-in-out infinite;
}

.hover-wut.glass-card:hover {
    animation: hover-wut-main 1.5s 0.05s ease-in-out infinite;
}

.hover-wut.back-link:hover {
    animation: none;
    /* Для ссылки не нужен */
}

/* First ghost layer - moves left/up */
.hover-wut:hover::before {
    animation: hover-wut-before 1.5s ease-in-out infinite;
}

/* Second ghost layer - moves right/down */
.hover-wut:hover::after {
    animation: hover-wut-after 1.5s 0.2s ease-in-out infinite;
}

/* Gentle rotation for main element */
@keyframes hover-wut-rotate {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(2deg);
    }

    75% {
        transform: rotate(-2deg);
    }
}

/* ТРЕТИЙ СЛОЙ - основной элемент, тоже искажается */
@keyframes hover-wut-main {

    0%,
    100% {
        transform: translate(0, 0) skew(0deg) scale(1);
    }

    30% {
        transform: translate(1px, -1px) skew(0.5deg) scale(1.005);
    }

    60% {
        transform: translate(-1px, 1px) skew(-0.5deg) scale(0.995);
    }
}

/* First ghost layer - moves left/up, БОЛЬШЕЕ искажение */
@keyframes hover-wut-before {

    0%,
    100% {
        transform: translate(0, 0) skew(0deg) scale(1);
    }

    25% {
        transform: translate(-6px, 4px) skew(-4deg) scale(1.02);
    }

    50% {
        transform: translate(-4px, -3px) skew(2deg) scale(0.99);
    }

    75% {
        transform: translate(-2px, 2px) skew(-1deg) scale(1.01);
    }
}

/* Second ghost layer - moves right/down, БОЛЬШЕЕ искажение */
@keyframes hover-wut-after {

    0%,
    100% {
        transform: translate(0, 0) skew(0deg) scale(1);
    }

    25% {
        transform: translate(6px, -4px) skew(4deg) scale(1.02);
    }

    50% {
        transform: translate(4px, 3px) skew(-2deg) scale(0.99);
    }

    75% {
        transform: translate(2px, -2px) skew(1deg) scale(1.01);
    }
}

/* Element-specific styles */

/* Glass cards - 3 слоя */
.hover-wut.glass-card:hover {
    /* ТРЕТИЙ СЛОЙ - основной элемент (без opacity!) */
    background: var(--glass-bg-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.hover-wut.glass-card:hover::before {
    background: var(--glass-bg-strong);
    border: none;
    opacity: 0.5;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.hover-wut.glass-card:hover::after {
    background: var(--glass-bg-strong);
    border: none;
    opacity: 0.45;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Buttons - 3 слоя с разными opacity */
.hover-wut.btn-primary:hover {
    /* ТРЕТИЙ СЛОЙ - основной (без opacity, текст яркий) */
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), rgba(212, 175, 55, 0.03));
}

.hover-wut.btn-primary:hover::before {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.04));
    border: none;
    opacity: 0.55;
}

.hover-wut.btn-primary:hover::after {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.07), rgba(212, 175, 55, 0.02));
    border: none;
    opacity: 0.5;
}

.hover-wut.btn-nav:hover {
    background: rgba(255, 255, 255, 0.015);
}

.hover-wut.btn-nav:hover::before {
    background: rgba(255, 255, 255, 0.02);
    border: none;
    opacity: 0.5;
}

.hover-wut.btn-nav:hover::after {
    background: rgba(255, 255, 255, 0.015);
    border: none;
    opacity: 0.45;
}

/* Audio navigation buttons */
.hover-wut.audio-nav-btn:hover {
    background: rgba(255, 255, 255, 0.015);
}

.hover-wut.audio-nav-btn:hover::before {
    background: rgba(255, 255, 255, 0.02);
    border: none;
    opacity: 0.45;
}

.hover-wut.audio-nav-btn:hover::after {
    background: rgba(255, 255, 255, 0.015);
    border: none;
    opacity: 0.4;
}

/* Play/autoplay buttons */
.hover-wut.audio-toggle:hover::before {
    opacity: 0.5;
}

.hover-wut.audio-toggle:hover::after {
    opacity: 0.45;
}

/* Links - оставим нижнюю линию (без третьего слоя) */
.hover-wut.back-link:hover::before,
.hover-wut.back-link:hover::after {
    background: transparent;
    border-bottom: 2px solid rgba(212, 175, 55, 0.3);
    opacity: 0.5;
    /* Для ссылки не расширяем так сильно */
    top: -2px;
    left: 0;
    bottom: -2px;
    right: 0;
}