/* Микро-взаимодействия и специальные эффекты */

/* Ripple эффект для кнопок */
.ripple-button {
    overflow: hidden;
    position: relative;
    -webkit-tap-highlight-color: transparent; /* Убираем стандартную подсветку на мобильных */
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(var(--accent-color-rgb), 0.3); /* Слегка уменьшил непрозрачность для более мягкого эффекта */
    transform: scale(0);
    animation: ripple-animation 0.75s cubic-bezier(0.22, 0.61, 0.36, 1); /* Скорректировал кривую Безье */
    pointer-events: none; /* Чтобы не мешал другим событиям */
}

@keyframes ripple-animation {
    to {
        transform: scale(4.5);
        opacity: 0;
    }
}

/* Эффект пульсации для кнопок (например, для основного CTA) */
.pulse-effect-target {
    animation: pulse-button-accent 2s infinite var(--transition-ease); /* Уменьшил длительность для более частого пульса */
}

@keyframes pulse-button-accent {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--accent-color-rgb), 0.55); /* Увеличил начальную непрозрачность */
    }
    70% {
        box-shadow: 0 0 0 14px rgba(var(--accent-color-rgb), 0); /* Увеличил радиус */
    }
    100% {
        box-shadow: 0 0 0 0 rgba(var(--accent-color-rgb), 0);
    }
}

/* Анимация вращения для иконок (например, иконка загрузки) */
.rotate-animation {
    animation: rotate 1.8s linear infinite;
    will-change: transform; /* Оптимизация */
}

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

/* Премиальные интерактивные эффекты */
.premium-hover-card {
    transition: all 0.4s var(--ease-premium);
    position: relative;
    overflow: hidden;
}

.premium-hover-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease-in-out;
    z-index: 1;
    pointer-events: none;
}

.premium-hover-card:hover::before {
    left: 100%;
}

.premium-hover-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 25px 50px rgba(var(--primary-color-rgb), 0.3),
        0 0 40px rgba(var(--accent-color-rgb), 0.2);
}

/* Магнетический эффект для кнопок */
.magnetic-button {
    /* отключено для CTA по требованию: эффекты магнитного курсора не применяются */
}

/* Градиентная граница с анимацией */
.animated-gradient-border {
    position: relative;
    background: var(--card-bg);
    border-radius: 16px;
    padding: 2px;
}

.animated-gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    background: conic-gradient(from 0deg, var(--primary-color), var(--accent-color), var(--secondary-color), var(--primary-color));
    border-radius: inherit;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: xor;
    animation: rotate-gradient 4s linear infinite;
}

@keyframes rotate-gradient {
    to { transform: rotate(360deg); }
}

/* Floating элементы с параллакс эффектом */
.floating-element {
    animation: float 6s ease-in-out infinite;
    will-change: transform;
}

.floating-element:nth-child(2n) {
    animation-delay: -2s;
    animation-duration: 8s;
}

.floating-element:nth-child(3n) {
    animation-delay: -4s;
    animation-duration: 7s;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-20px) rotate(1deg); }
    50% { transform: translateY(-10px) rotate(0deg); }
    75% { transform: translateY(-15px) rotate(-1deg); }
}

/* Эффект морфинга для иконок */
.morph-icon {
    transition: all 0.3s var(--ease-premium);
}

.morph-icon:hover {
    transform: scale(1.2) rotate(15deg);
    filter: hue-rotate(45deg) brightness(1.2);
}

/* Плавное изменение фона при наведении (для карточек, ссылок) */
.smooth-bg-hover {
    transition: background-color var(--transition-speed-fast) var(--transition-ease);
    will-change: background-color; /* Оптимизация */
}
.smooth-bg-hover:hover {
    background-color: rgba(var(--accent-color-rgb), 0.1); /* Уменьшил непрозрачность для более тонкого эффекта */
}

/* Стили для прелоадера */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: var(--background-color); */ /* Убираем фон, чтобы был виден canvas */
    background-color: transparent; /* Делаем фон прелоадера прозрачным */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10001; /* Выше всего */
    opacity: 1;
    transition: opacity 0.7s var(--transition-ease) 0.2s, visibility 0s linear 0.9s; /* Задержка перед исчезновением opacity, visibility мгновенно после */
    visibility: visible;
    will-change: opacity; /* Оптимизация */
}

.preloader.loaded {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.7s var(--transition-ease), visibility 0s linear 0.7s;
}

.preloader-content {
    text-align: center;
    animation: preloader-fade-in 0.5s var(--transition-ease) forwards;
}

@keyframes preloader-fade-in {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.preloader-star {
    width: 65px; /* Увеличил размер */
    height: 65px;
    background: var(--accent-gradient); 
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: pulse-preloader-star 1.5s infinite ease-in-out, rotate 10s linear infinite alternate; /* Добавил alternate для вращения */
    margin: 0 auto 30px; /* Увеличил отступ */
    will-change: transform, opacity; /* Оптимизация */
    display: none; /* Скрываем по умолчанию, т.к. будет использоваться анимация фона */
}

.preloader-text {
    color: var(--text-light-color);
    font-family: var(--heading-font);
    font-size: 1.2rem; /* Увеличил шрифт */
    letter-spacing: 0.1em; /* Увеличил */
    text-transform: uppercase; /* Для стилистики */
    opacity: 0.85;
    display: none; /* Скрываем по умолчанию */
}

@keyframes pulse-preloader-star {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.3) rotate(18deg); /* Усилил эффект */
        opacity: 0.7;
    }
}

/* Стили для перехода между страницами (если будут использоваться) */
.page-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--accent-color); /* Цвет акцента для "шторки" */
    z-index: 10000; /* Чуть ниже прелоадера, но выше всего остального */
    transform: scaleY(0);
    transform-origin: bottom; /* Начальная точка анимации - снизу */
    transition: transform 0.6s cubic-bezier(0.86, 0, 0.07, 1); 
    pointer-events: none;
    will-change: transform;
}

.page-transition-overlay.active {
    transform: scaleY(1); /* Показываем шторку, растягивая ее сверху вниз */
    transform-origin: top; /* При активности, растягиваем сверху */
}

/* Старый .page-transition убираем или переделываем на overlay */
.page-transition {
    display: none; /* Скрываем старый вариант, если новый overlay используется */
}

/* Эффект свечения для кликабельных элементов */
.glow-click-effect {
    position: relative;
    overflow: hidden; 
}

.glow-click-effect::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 70px;  /* Уменьшил для более локального эффекта */
    height: 70px;
    background: radial-gradient(circle, rgba(var(--accent-color-rgb), 0.3) 0%, rgba(var(--accent-color-rgb), 0) 65%); /* Чуть мягче градиент */
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform 0.55s var(--transition-ease), opacity 0.55s var(--transition-ease); /* Увеличил длительность */
    pointer-events: none;
    z-index: 0; 
}

.glow-click-effect.clicked::after {
    transform: translate(-50%, -50%) scale(3.2); /* Немного изменил масштаб */
    opacity: 1;
    animation: click-glow-fadeout 0.6s var(--transition-ease) forwards 0.15s; /* Скорректировал */
}

@keyframes click-glow-fadeout {
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(3.8); /* Увеличил конечный масштаб */
    }
}

/* Эффекты при наведении для карточек и интерактивных блоков */
/* .scale-on-hover уже определен в style.css, удаляем отсюда для избежания дублирования 
.scale-on-hover {
    transition: transform var(--transition-speed, 0.35s) var(--transition-ease); 
    will-change: transform;
}

.scale-on-hover:hover {
    transform: scale(1.035); 
}
*/

/* Эффект "дрожания" для привлечения внимания */
.shake-animation {
    /* Можно применять по событию или при загрузке */
}

.shake-animation.shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
    will-change: transform;
}

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
  40%, 60% { transform: translate3d(3px, 0, 0); }
}

/* Общий стиль для элементов с эффектом свечения границы при наведении */
/* .glow-border-hover уже определен в style.css, удаляем отсюда */
/*
.glow-border-hover {
    position: relative;
    border: 1px solid var(--border-color);
    transition: border-color var(--transition-speed-fast) var(--transition-ease), box-shadow var(--transition-speed-fast) var(--transition-ease); 
    border-radius: var(--border-radius-sm); 
    z-index: 0; 
    will-change: border-color, box-shadow; 
}

.glow-border-hover::before, .glow-border-hover::after {
    content: '';
    position: absolute;
    top: -2px; left: -2px; 
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.45s var(--transition-ease); 
    background-repeat: no-repeat;
    will-change: opacity; 
}

.glow-border-hover::before {
    background-image: 
        radial-gradient(circle at top left, var(--accent-color), transparent 30%),
        radial-gradient(circle at top right, var(--primary-color), transparent 35%),
        radial-gradient(circle at bottom left, var(--primary-color), transparent 35%),
        radial-gradient(circle at bottom right, var(--accent-color), transparent 35%);
    background-size: 55% 55%; 
    background-position: top left, top right, bottom left, bottom right;
}

.glow-border-hover::after {
    background-image: 
        radial-gradient(circle at top left, var(--accent-color), transparent 30%),
        radial-gradient(circle at top right, var(--primary-color), transparent 35%),
        radial-gradient(circle at bottom left, var(--primary-color), transparent 35%),
        radial-gradient(circle at bottom right, var(--accent-color), transparent 35%);
    background-size: 55% 55%;
    background-position: top left, top right, bottom left, bottom right;
    filter: blur(8px) brightness(1.2); 
    opacity: 0;
}

.glow-border-hover:hover {
    border-color: rgba(var(--accent-color-rgb), 0.5);
    box-shadow: 0 0 15px rgba(var(--accent-color-rgb),0.1), 
                0 0 25px rgba(var(--primary-color-rgb),0.1); 
}

.glow-border-hover:hover::before {
    opacity: 0.35; 
}

.glow-border-hover:hover::after {
    opacity: 0.5; 
    transition-duration: 0.5s; 
}
*/

/* Эффект градиентной тени при наведении (для некоторых карточек) */
.gradient-shadow-hover {
    /* Можно применять по событию или при загрузке */
}

/* Удаляем эффекты курсора, т.к. они были убраны из JS и могут конфликтовать */
.hero-glow, .mouse-glow, .cursor-glow, .cursor-trail {
    display: none !important;
}

/* Текстовый эффект для ввода */
.typewriter-text-effect {
    overflow: hidden; 
    border-right: .12em solid var(--accent-color); 
    white-space: nowrap; 
    letter-spacing: .07em; /* Немного увеличил */
    animation: 
        typing-effect 3s steps(33, end) 0.6s forwards, /* Скорректировал */
        blink-caret-effect .8s step-end infinite;
    display: inline-block; 
    font-family: var(--heading-font); 
    color: var(--text-heading-color); /* Сделал текст по умолчанию видимым, если JS/анимация не сработает */
    line-height: 1.2; /* Для лучшего выравнивания с кареткой */
}

@keyframes typing-effect {
    from { width: 0; color: var(--text-heading-color); } /* Начинаем с видимым цветом */
    to { width: 100%; }
}

@keyframes blink-caret-effect {
    50% { border-color: transparent; }
}

/* === Эффект ауры курсора === */
.cursor-aura {
    position: fixed;
    top: 0; /* Начальное положение, будет обновляться JS */
    left: 0;
    width: 35px;
    height: 35px;
    background: radial-gradient(circle, rgba(var(--primary-color-rgb), 0.2) 0%, rgba(var(--primary-color-rgb), 0) 70%);
    border-radius: 50%;
    pointer-events: none; /* Чтобы не мешала кликам */
    z-index: 9998; /* Высокий, но ниже прелоадера, модальных окон и т.д. */
    opacity: 0; /* Начально скрыта, пока не будет движения мыши */
    transition: opacity 0.4s var(--transition-ease), transform 0.05s linear; /* Плавное появление/исчезновение, быстрое следование */
    will-change: transform, opacity;
    mix-blend-mode: screen; /* Попробуем режим наложения для лучшего эффекта на темном фоне */
    filter: blur(2px); /* Небольшое размытие */
}

/* Опционально: изменение ауры при наведении на интерактивные элементы */
/* a:hover ~ .cursor-aura, button:hover ~ .cursor-aura { ... } */
/* Это потребует более сложной логики в JS для отслеживания hover-событий на элементах */

/* УДАЛЕНЫ стили для .feature-icon и .feature-item:hover .feature-icon,
   т.к. они теперь управляются из style.css и animations.css для консистентности 
   и избежания дублирования.
*/