/* =============================================
   ASK RUSKOM v3.0 — Animations
   IntersectionObserver fade-in, keyframes, particles,
   cursor glow, hover effects
   ============================================= */

/* === KEYFRAMES (без opacity:0 — контент видим даже если JS/IO не сработал, особенно критично для ботов Яндекса) === */
@keyframes fadeInUp {
    from { transform: translateY(30px); }
    to { transform: translateY(0); }
}

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

@keyframes fadeInLeft {
    from { transform: translateX(-40px); }
    to { transform: translateX(0); }
}

@keyframes fadeInRight {
    from { transform: translateX(40px); }
    to { transform: translateX(0); }
}

@keyframes scaleIn {
    from { transform: scale(0.95); }
    to { transform: scale(1); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px var(--askrus-accent-glow); }
    50% { box-shadow: 0 0 40px rgba(47, 129, 247, 0.4); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes bounce-arrow {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-12px); }
    60% { transform: translateX(-50%) translateY(-6px); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes particle-float {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-100vh) translateX(50px); opacity: 0; }
}

/* === IntersectionObserver ANIMATE SYSTEM ===
   По умолчанию элементы видимы (opacity: 1).
   JS добавляет .askrus-will-animate → скрывает (opacity: 0).
   При пересечении viewport JS добавляет .askrus-animated → проигрывает анимацию.
   Если JS не загрузился — всё видимо (progressive enhancement). */

.askrus-animate {
    opacity: 1;
}

/* will-animate сохранён для backwards compat, но opacity:0 убран —
   контент всегда видим, анимация только transform-based. */
.askrus-will-animate {
    will-change: transform;
}

.askrus-animated {
    animation-duration: 0.6s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.askrus-animated[data-animate="fadeInUp"] { animation-name: fadeInUp; }
.askrus-animated[data-animate="fadeInDown"] { animation-name: fadeInDown; }
.askrus-animated[data-animate="fadeInLeft"] { animation-name: fadeInLeft; }
.askrus-animated[data-animate="fadeInRight"] { animation-name: fadeInRight; }
.askrus-animated[data-animate="scaleIn"] { animation-name: scaleIn; }

/* === STAGGER DELAYS === */
.askrus-delay-1 { animation-delay: 0.1s; }
.askrus-delay-2 { animation-delay: 0.2s; }
.askrus-delay-3 { animation-delay: 0.3s; }
.askrus-delay-4 { animation-delay: 0.4s; }
.askrus-delay-5 { animation-delay: 0.5s; }
.askrus-delay-6 { animation-delay: 0.6s; }

/* === HOVER EFFECTS === */
.askrus-hover-lift {
    transition: var(--askrus-transition-base);
}

.askrus-hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: var(--askrus-shadow-lg);
}

.askrus-hover-glow {
    transition: var(--askrus-transition-base);
}

.askrus-hover-glow:hover {
    box-shadow: var(--askrus-shadow-glow-hover);
}

/* === INDUSTRIAL GRID BACKGROUND === */
.askrus-grid-bg {
    position: relative;
}

.askrus-grid-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(47, 129, 247, 0.03) 59px, rgba(47, 129, 247, 0.03) 60px),
        repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(47, 129, 247, 0.03) 59px, rgba(47, 129, 247, 0.03) 60px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

/* === CSS PARTICLES FOR HERO === */
.askrus-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.askrus-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(47, 129, 247, 0.4);
    border-radius: var(--askrus-radius-full);
    animation: particle-float linear infinite;
}

.askrus-particle:nth-child(1)  { left: 5%;  top: 90%; animation-duration: 12s; animation-delay: 0s; }
.askrus-particle:nth-child(2)  { left: 10%; top: 85%; animation-duration: 15s; animation-delay: 1s; }
.askrus-particle:nth-child(3)  { left: 15%; top: 95%; animation-duration: 10s; animation-delay: 2s; width: 3px; height: 3px; }
.askrus-particle:nth-child(4)  { left: 20%; top: 80%; animation-duration: 18s; animation-delay: 0.5s; }
.askrus-particle:nth-child(5)  { left: 25%; top: 92%; animation-duration: 14s; animation-delay: 3s; }
.askrus-particle:nth-child(6)  { left: 30%; top: 88%; animation-duration: 11s; animation-delay: 1.5s; width: 3px; height: 3px; }
.askrus-particle:nth-child(7)  { left: 35%; top: 96%; animation-duration: 16s; animation-delay: 4s; }
.askrus-particle:nth-child(8)  { left: 40%; top: 82%; animation-duration: 13s; animation-delay: 2.5s; }
.askrus-particle:nth-child(9)  { left: 45%; top: 90%; animation-duration: 19s; animation-delay: 0.8s; width: 3px; height: 3px; }
.askrus-particle:nth-child(10) { left: 50%; top: 87%; animation-duration: 12s; animation-delay: 5s; }
.askrus-particle:nth-child(11) { left: 55%; top: 93%; animation-duration: 17s; animation-delay: 1.2s; }
.askrus-particle:nth-child(12) { left: 60%; top: 84%; animation-duration: 14s; animation-delay: 3.5s; width: 3px; height: 3px; }
.askrus-particle:nth-child(13) { left: 65%; top: 91%; animation-duration: 11s; animation-delay: 6s; }
.askrus-particle:nth-child(14) { left: 70%; top: 86%; animation-duration: 15s; animation-delay: 2s; }
.askrus-particle:nth-child(15) { left: 75%; top: 94%; animation-duration: 20s; animation-delay: 4.5s; }
.askrus-particle:nth-child(16) { left: 80%; top: 89%; animation-duration: 13s; animation-delay: 7s; width: 3px; height: 3px; }
.askrus-particle:nth-child(17) { left: 85%; top: 83%; animation-duration: 16s; animation-delay: 1.8s; }
.askrus-particle:nth-child(18) { left: 90%; top: 97%; animation-duration: 11s; animation-delay: 5.5s; }
.askrus-particle:nth-child(19) { left: 95%; top: 85%; animation-duration: 18s; animation-delay: 3s; width: 3px; height: 3px; }
.askrus-particle:nth-child(20) { left: 8%;  top: 78%; animation-duration: 14s; animation-delay: 8s; }
.askrus-particle:nth-child(21) { left: 22%; top: 75%; animation-duration: 12s; animation-delay: 6.5s; }
.askrus-particle:nth-child(22) { left: 38%; top: 98%; animation-duration: 19s; animation-delay: 2.2s; width: 3px; height: 3px; }
.askrus-particle:nth-child(23) { left: 48%; top: 76%; animation-duration: 15s; animation-delay: 9s; }
.askrus-particle:nth-child(24) { left: 58%; top: 99%; animation-duration: 10s; animation-delay: 4s; }
.askrus-particle:nth-child(25) { left: 68%; top: 81%; animation-duration: 17s; animation-delay: 7.5s; }
.askrus-particle:nth-child(26) { left: 78%; top: 95%; animation-duration: 13s; animation-delay: 1s; width: 3px; height: 3px; }
.askrus-particle:nth-child(27) { left: 88%; top: 79%; animation-duration: 16s; animation-delay: 5s; }
.askrus-particle:nth-child(28) { left: 3%;  top: 93%; animation-duration: 20s; animation-delay: 3.8s; }
.askrus-particle:nth-child(29) { left: 42%; top: 77%; animation-duration: 11s; animation-delay: 8.5s; width: 3px; height: 3px; }
.askrus-particle:nth-child(30) { left: 72%; top: 96%; animation-duration: 14s; animation-delay: 6s; }

/* === CURSOR GLOW === */
.askrus-cursor-glow {
    position: fixed;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 129, 247, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    will-change: transform;
}

.askrus-cursor-glow.is-active {
    opacity: 1;
}

/* === REDUCE MOTION === */
@media (prefers-reduced-motion: reduce) {
    .askrus-animate,
    .askrus-will-animate {
        opacity: 1 !important;
    }

    .askrus-animated {
        animation: none !important;
    }

    .askrus-particle {
        animation: none;
    }

    .askrus-cursor-glow {
        display: none;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}