/* ==========================================================================
   China-CIS Theme — Анимации
   Декоративные часы, самолёт, корабль, орнамент, fade-in при скролле
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Декоративные часы — подложка
   -------------------------------------------------------------------------- */
.decorative-clock {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 60vmin;
    height: 60vmin;
    max-width: 600px;
    max-height: 600px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: var(--z-background);
    opacity: 0.6;
    animation: clockFloat 30s ease-in-out infinite;
}

.clock-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Плавное «плавание» часов по экрану */
@keyframes clockFloat {
    0%   { transform: translate(-50%, -50%) rotate(0deg); }
    25%  { transform: translate(-40%, -55%) rotate(2deg); }
    50%  { transform: translate(-55%, -45%) rotate(-1deg); }
    75%  { transform: translate(-45%, -52%) rotate(1deg); }
    100% { transform: translate(-50%, -50%) rotate(0deg); }
}

/* Стрелки часов — ускоренные/замедленные для декоративности */
.clock-hand {
    transform-origin: 200px 200px;
}

.clock-hand--hour {
    animation: rotateHour 720s linear infinite;   /* Очень медленная */
}

.clock-hand--minute {
    animation: rotateMinute 2700s linear infinite; /* На 30% быстрее реальной (3600 × 0.75) */
}

.clock-hand--second {
    animation: rotateSecond 30s linear infinite;   /* В 2 раза быстрее реальной (60 / 2) */
}

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

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

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

/* --------------------------------------------------------------------------
   2. Китайский орнамент в шапке (вокруг флага)
   -------------------------------------------------------------------------- */
.ornament-ring--outer {
    transform-origin: 200px 200px;
    animation: ornamentRotate 60s linear infinite;
}

.ornament-ring--inner {
    transform-origin: 200px 200px;
    animation: ornamentRotate 45s linear infinite reverse;
}

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

/* Пульсация орнамента */
.flag-china__ornament {
    animation: ornamentPulse 8s ease-in-out infinite;
}

@keyframes ornamentPulse {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.03); }
}

/* --------------------------------------------------------------------------
   3. Анимация самолёта
   -------------------------------------------------------------------------- */
.animation-plane {
    position: fixed;
    top: 40%;
    left: -200px;
    width: 120px;
    height: 60px;
    pointer-events: none;
    z-index: calc(var(--z-background) + 1);
    opacity: 0;
    will-change: transform, opacity;
}

.plane-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Класс для активного полёта — добавляется JS */
.animation-plane--flying {
    animation: planeFly 12s linear forwards;
}

@keyframes planeFly {
    0% {
        transform: translate(0, 0) rotate(-8deg);
        opacity: 0;
    }
    10% {
        opacity: 0.7;
    }
    90% {
        opacity: 0.7;
    }
    100% {
        transform: translate(calc(100vw + 200px), -300px) rotate(-8deg);
        opacity: 0;
    }
}

/* --------------------------------------------------------------------------
   4. Анимация корабля
   -------------------------------------------------------------------------- */
.animation-ship {
    position: fixed;
    bottom: 25%;
    right: -200px;
    width: 140px;
    height: 80px;
    pointer-events: none;
    z-index: calc(var(--z-background) + 1);
    opacity: 0;
    will-change: transform, opacity;
}

.ship-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Класс для активного плавания — добавляется JS */
.animation-ship--sailing {
    animation: shipSail 20s linear forwards;
}

@keyframes shipSail {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0;
    }
    5% {
        opacity: 0.6;
    }
    95% {
        opacity: 0.6;
    }
    100% {
        transform: translate(calc(-100vw - 200px), 0) rotate(0deg);
        opacity: 0;
    }
}

/* Покачивание корабля (синусоида) */
.animation-ship--sailing .ship-svg {
    animation: shipRock 3s ease-in-out infinite;
}

@keyframes shipRock {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50%      { transform: translateY(-8px) rotate(1deg); }
}

/* --------------------------------------------------------------------------
   5. Декоративный орнамент (волнистая линия)
   -------------------------------------------------------------------------- */
.chinese-ornament {
    width: 100%;
    overflow: hidden;
    pointer-events: none;
    margin: var(--spacing-lg) 0;
}

.ornament-full-svg {
    width: 100%;
    height: auto;
    display: block;
}

.ornament-clouds {
    animation: ornamentDrift 25s linear infinite;
}

@keyframes ornamentDrift {
    from { transform: translateX(0); }
    to   { transform: translateX(-100px); }
}

/* --------------------------------------------------------------------------
   6. Fade-in при скролле (Intersection Observer)
   -------------------------------------------------------------------------- */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in--visible {
    opacity: 1;
    transform: translateY(0);
}

/* Варианты направлений */
.fade-in--left {
    transform: translateX(-30px);
}

.fade-in--left.fade-in--visible {
    transform: translateX(0);
}

.fade-in--right {
    transform: translateX(30px);
}

.fade-in--right.fade-in--visible {
    transform: translateX(0);
}

.fade-in--scale {
    transform: scale(0.95);
}

.fade-in--scale.fade-in--visible {
    transform: scale(1);
}

/* --------------------------------------------------------------------------
   7. Hover-эффекты на кликабельных элементах
   -------------------------------------------------------------------------- */
a, button {
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* Лёгкий подъём при hover для карточек */
.card,
.flags-cis-grid__item,
.flag-china {
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

/* --------------------------------------------------------------------------
   8. Уменьшение анимаций для пользователей с preference
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .decorative-clock,
    .animation-plane,
    .animation-ship,
    .flag-china__ornament,
    .ornament-clouds {
        animation: none !important;
    }

    .fade-in {
        opacity: 1;
        transform: none;
    }
}