/* utilities.css */
/* --- Animations --- */
@keyframes blink {
    50% {
        opacity: 0;
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 255, 106, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 255, 106, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 255, 106, 0);
    }
}

.cursor-block {
    animation: blink 1s step-end infinite;
    color: var(--accent);
    margin-left: 5px;
}

.cursor-text {
    animation: blink 1s step-end infinite;
    color: var(--text-main);
    margin-left: 2px;
}

.card:hover h3 {
    color: var(--accent);
    transition: color 0.3s ease;
}

/* Базовый класс для анимации */
.fade-in {
    opacity: 0;
    /* Сдвиг вниз + легкое уменьшение + размытие */
    transform: translateY(30px) scale(0.95);
    filter: blur(10px);

    /* Сложная кривая безье для "магнитного" эффекта */
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);

    will-change: opacity, transform, filter; /* Оптимизация для GPU */
}
/* Состояние видимости */
.fade-in.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}
.fade-in-left {
    opacity: 0;
    transform: translateX(-30px);
    filter: blur(5px);
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fade-in-left.visible {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
}

/* Вылет справа (например, для картинок) */
.fade-in-right {
    opacity: 0;
    transform: translateX(30px);
    filter: blur(5px);
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fade-in-right.visible {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
}
/* --- Modern Professional Hover (ex-Glitch) --- */
.glitch-effect {
    position: relative;
    overflow: hidden;
    /* Явное указание свойств вместо all */
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        border-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* Аппаратное ускорение */
    transform: translateZ(0);
    will-change: transform, box-shadow;
}

.glitch-effect::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(0, 255, 106, 0.2),
        transparent
    );
    transition: left 0.6s;
    z-index: 1;
    pointer-events: none; /* Чтобы не мешал кликам */
}

.glitch-effect:hover::before {
    left: 100%;
}

.glitch-effect:hover {
    transform: translateY(-3px) translateZ(0); /* Сохраняем GPU слой */
    box-shadow: 0 10px 20px -5px var(--accent-glow);
    border-color: var(--accent);
    color: var(--accent);
}

/* --- Fixes --- */
.btn-primary.glitch-effect:hover {
    color: var(--bg-color);
    text-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
/* Отключаем тяжелые эффекты (blur) на слабых устройствах, если нужно */
@media (max-width: 768px) {
    .fade-in,
    .fade-in-left,
    .fade-in-right {
        filter: none !important; /* Blur может тормозить на старых телефонах */
        transition-duration: 0.5s;
    }
}

/* --- Stagger Animation (Cascade) --- */
/* Классы для анимации "лесенкой" */
.stagger-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    will-change: opacity, transform;
}

/* Конечное состояние (добавляется через JS) */
.stagger-item.visible {
    opacity: 1;
    transform: translateY(0);
}