/* ==========================================================================
   KT Architect Theme — animations.css
   Эффект «всплытия из воды»: блоки всплывают при прокрутке (blur + подъём)
   и уплывают в воду при выходе из зоны видимости.
   Базовое состояние — «под водой»: размыт, смещён вниз, полупрозрачен,
   слегка увеличен по глубине (scale 0.97 = «под поверхностью воды»).
   ========================================================================== */

.reveal {
    opacity: 0;
    transform: translateY(72px) scale(0.97);
    filter: blur(12px);
    transition:
        opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1s cubic-bezier(0.16, 1, 0.3, 1),
        filter 1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform, filter;
}

/* Направления входа — все варианты «всплытия». */
.reveal[data-reveal="fade-up"] {
    transform: translateY(80px) scale(0.97);
}
.reveal[data-reveal="fade-down"] {
    transform: translateY(-56px) scale(0.98);
}
.reveal[data-reveal="fade-left"] {
    transform: translateX(56px) scale(0.98);
}
.reveal[data-reveal="fade-right"] {
    transform: translateX(-56px) scale(0.98);
}
.reveal[data-reveal="zoom"] {
    transform: scale(0.92);
}

/* Задержки каскада — «волна» всплытия по секциям. */
.reveal[data-delay="100"] { transition-delay: 0.1s; }
.reveal[data-delay="200"] { transition-delay: 0.2s; }
.reveal[data-delay="300"] { transition-delay: 0.3s; }
.reveal[data-delay="400"] { transition-delay: 0.4s; }
.reveal[data-delay="500"] { transition-delay: 0.5s; }
.reveal[data-delay="600"] { transition-delay: 0.6s; }

/* Блок «всплыл» из воды: чёткий, на месте, непрозрачный. */
.reveal.is-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    filter: blur(0);
}

/* Дополнительные эффекты */

/* Анимированный градиент заголовка hero */
@keyframes kt-gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.kt-hero-gradient {
    background-size: 200% 200%;
    animation: kt-gradient-shift 6s ease infinite;
}

/* Hover-glow для карточек */
.kt-skill-card,
.kt-project-card,
.kt-stat-card,
.kt-timeline-card,
.kt-contact-link,
.kt-erp-feature-card,
.kt-erp-slide {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s ease,
                box-shadow 0.4s ease,
                background 0.3s ease;
}

/* Нав-бар при скролле */
.kt-nav {
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.kt-nav.scrolled {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

/* Параллакс орбов */
@media (prefers-reduced-motion: no-preference) {
    .kt-orb {
        transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
    }
}

/* Иконка проекта при наведении */
.kt-project-icon {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.kt-project-card:hover .kt-project-icon {
    transform: scale(1.05) rotate(-3deg);
}

/* Подчёркивание ссылок в подвале */
.kt-footer-top {
    position: relative;
}
.kt-footer-top::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: var(--kt-cyan);
    transition: width 0.3s ease;
}
.kt-footer-top:hover::after { width: 100%; }

/* Анимированное подчёркивание роли в hero */
.kt-hero-role {
    position: relative;
    display: inline-block;
}
.kt-hero-role::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 40px;
    height: 2px;
    background: var(--kt-gradient);
    border-radius: 2px;
    animation: kt-underline-grow 1.2s 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes kt-underline-grow {
    from { width: 0; }
    to { width: 40px; }
}

/* Loader для формы (спиннер) */
.kt-submit-btn.loading .kt-submit-text::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    border: 2px solid rgba(10, 14, 26, 0.3);
    border-top-color: var(--kt-bg);
    border-radius: 50%;
    animation: kt-spin 0.8s linear infinite;
    vertical-align: middle;
}
@keyframes kt-spin {
    to { transform: rotate(360deg); }
}