/* ===========================================================================
   Появяване при скролване — общата механика
   ===========================================================================
   Създаден на 20.08.2026, но правилата не са нови: стояха в animation.css от
   самото начало.

   ЗАЩО СЕ ОТДЕЛИХА

   animation.css е 603 реда и почти всичките са за заглавния екран на НАЧАЛНАТА
   страница — балоните, слънцето, подскачането на менюто. Само около шейсет
   реда в средата са общи и не знаят нищо за конкретна страница.

   Лендинг страниците искаха точно тези шейсет. Да заредят целия файл значеше
   13 килобайта, от които се ползват два — а за лендинга се плаща на клик.

   ⚠️ НЕ СЕ ПРЕПИСВАТ НИКЪДЕ. Появи ли се втори такъв блок, двата се разминават
   при първата промяна на времетраенето и половината сайт започва да се
   появява с друга скорост от другата половина.

   КОЙ ГО ЗАРЕЖДА
     index.php               (заедно с animation.css)
     трите лендинг страници  (само този файл)

   ⚠️ УВАЖАВА `prefers-reduced-motion`. Тук няма media заявка нарочно —
   спирането става в JavaScript, който изобщо не слага класовете, ако човекът е
   поискал по-малко движение. Виж assets/js/animation.js и скрипта в
   partials/landing.php.
   =========================================================================== */

.anim-reveal {
    --anim-delay: 0ms;
    opacity: 0;
    transition:
        opacity 760ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 860ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--anim-delay);
    will-change: transform, opacity;
}

.anim-reveal[data-anim="up"] {
    transform: translate3d(0, 42px, 0) scale(0.94);
}

.anim-reveal[data-anim="down"] {
    transform: translate3d(0, -34px, 0) scale(0.95);
}

.anim-reveal[data-anim="left"] {
    transform: translate3d(-44px, 0, 0) scale(0.95);
}

.anim-reveal[data-anim="right"] {
    transform: translate3d(44px, 0, 0) scale(0.95);
}

.anim-reveal[data-anim="pop"] {
    transform: translate3d(0, 30px, 0) scale(0.9) rotate(-1.8deg);
}

.anim-reveal.anim-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
}

/*
 * Лекото люшкане СЛЕД появяването. Ползва се пестеливо: върху карта, която
 * човек трябва да пипне. Сложено навсякъде, страницата започва да мърда цялата
 * и окото няма къде да спре.
 *
 * ⚠️ `--bob-delay` Е ОТДЕЛЕН ОТ `--anim-delay` — 25.08.2026.
 *
 * Дотук фазата на люшкането се вземаше от забавянето при появяване. То обаче
 * е нарочно кратко (70–90 ms на съсед), за да не се точи появяването — а
 * спрямо цикъл от 7,2 секунди 90 ms са 1,25%. Тоест всичко се люшкаше в такт
 * и шест снимки изглеждаха като едно клатещо се блокче.
 *
 * Който иска разбъркана фаза, задава `--bob-delay` с едра стъпка. Не го ли
 * зададе — и това е случаят на цялата начална страница — резервната стойност
 * е точно старата и нищо не се променя.
 */
.anim-reveal-bob.anim-visible {
    animation: site-card-bob 7.2s ease-in-out infinite;
    animation-delay: calc(var(--bob-delay, var(--anim-delay)) + 280ms);
}

@keyframes site-card-bob {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    20% {
        transform: translate3d(0, -6px, 0) rotate(-0.7deg);
    }

    50% {
        transform: translate3d(0, 2px, 0) rotate(0.55deg);
    }

    75% {
        transform: translate3d(0, -3px, 0) rotate(-0.35deg);
    }
}