/* ============================================================
   css/effects.css — премиум-эффекты (Ken Burns, параллакс,
   стаггер-анимации, шум, shine на кнопках, доступность)
   Подключать ПОСЛЕДНИМ в <head>, после всех остальных стилей.
   ============================================================ */

/* ---------- Фикс белой полосы под футером ---------- */
html {
    background: var(--color-plum-dark, #3E1F32);
}

/* ---------- Типографика: акцентная гарнитура ---------- */
:root {
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
}
.hero__title,
.section-badge__title {
    font-family: var(--font-display), var(--font-main);
}
.hero__title { font-weight: 700; letter-spacing: .002em; }
.section-badge__title { font-weight: 700; }

/* ---------- Единый скролл-отступ под фикс. хедер ---------- */
section[id] {
    scroll-margin-top: var(--header-height, 88px);
}

/* ============================================================
   KEN BURNS для hero-фото
   ============================================================ */
.hero__image {
    animation: heroKenBurns 22s ease-in-out infinite alternate;
    will-change: transform;
    transform-origin: 50% 40%;
}
@keyframes heroKenBurns {
    0%   { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.12) translate(-1.5%, -1%); }
}

/* ============================================================
   ПАРАЛЛАКС: hero__deco (мышь) + dz-deco (скролл)
   JS выставляет CSS-переменные --px/--py, здесь только "вплетаем"
   их в уже существующие transform без потери rotate/keyframes.
   ============================================================ */
.hero__deco,
.dz-deco {
    --px: 0px;
    --py: 0px;
}

.hero__deco--leaf-left {
    transform: rotate(-20deg) translate3d(var(--px), var(--py), 0);
}

/* Переопределяем keyframes floatY: @keyframes с одинаковым именем
   не сливаются, а полностью заменяются последним объявлением в каскаде —
   это безопасно переопределяет анимацию из main.css, добавляя параллакс. */
@keyframes floatY {
    0%, 100% { transform: translate3d(var(--px), var(--py), 0) translateY(0); }
    50%      { transform: translate3d(var(--px), var(--py), 0) translateY(-16px); }
}

.dz-deco--heart {
    transform: translate3d(var(--px), var(--py), 0);
}
.dz-deco--petal-1,
.dz-deco--petal-2,
.dz-deco--petal-3 {
    transform: translate3d(var(--px), var(--py), 0);
}
.dz-deco--leaf {
    transform: rotate(160deg) translate3d(var(--px), var(--py), 0);
}

/* ============================================================
   ШУМ (noise) НА ТЁМНОЙ ЗОНЕ — убирает "полосатость" градиента
   ============================================================ */
.dark-zone { position: relative; }
.dark-zone::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 160px 160px;
}

/* ============================================================
   SHINE-ЭФФЕКТ НА ОСНОВНЫХ КНОПКАХ
   ============================================================ */
.btn--primary {
    position: relative;
    overflow: hidden;
}
.btn--primary::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-20deg);
    transition: left .65s ease;
    pointer-events: none;
}
.btn--primary:hover::after { left: 130%; }

/* ============================================================
   АНИМИРОВАННЫЙ ПРОГРЕСС-БАР СБОРА СРЕДСТВ
   ============================================================ */
.progress-bar__fill {
    transition: width 1.2s cubic-bezier(.2, .8, .2, 1);
}

/* ============================================================
   СТАГГЕР fade-in (бейджи, кнопки, декор, карточки)
   ============================================================ */
.fade-in-on-scroll {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.2, .8, .2, 1),
    transform .7s cubic-bezier(.2, .8, .2, 1);
}
.fade-in-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Для декоративных элементов (без transform-конфликтов с параллаксом) */
.fade-in-opacity {
    opacity: 0;
    transition: opacity 1s ease;
}
.fade-in-opacity.visible {
    opacity: var(--target-opacity, 1);
}

/* ============================================================
   PREFERS-REDUCED-MOTION — отключаем декоративное движение
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .hero__image { animation: none !important; }
    .hero__deco--heart { animation: none !important; }
    .sponsors-carousel-track { animation: none !important; }

    .fade-in-on-scroll,
    .fade-in-opacity {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .progress-bar__fill { transition: none !important; }

    * { scroll-behavior: auto !important; }
}

.header {
    overflow: visible;
}
.header__decor {
    overflow: hidden;
}