.hero-section {
    overflow: hidden;
    isolation: isolate;
    will-change: background-position;
    animation: hero-background-drift 18s ease-in-out infinite alternate;
}

.hero-section::before,
.hero-section::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    opacity: 0.55;
    z-index: 0;
    will-change: transform, opacity;
}

.hero-section::before {
    width: 340px;
    height: 340px;
    top: 8%;
    left: -80px;
    background: radial-gradient(circle, rgba(245, 201, 88, 0.22) 0%, rgba(245, 201, 88, 0) 72%);
    animation:
        hero-cloud-pop 1s ease-out 120ms both,
        hero-cloud-drift-left 14s ease-in-out 1.1s infinite;
}

.hero-section::after {
    width: 420px;
    height: 420px;
    right: 9%;
    bottom: -120px;
    background: radial-gradient(circle, rgba(103, 199, 244, 0.16) 0%, rgba(103, 199, 244, 0) 74%);
    animation:
        hero-cloud-pop 1s ease-out 240ms both,
        hero-cloud-drift-right 17s ease-in-out 1.2s infinite;
}

.hero-main-shell {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

/*
 * ⚠️ ПРОБВАНО И ОТХВЪРЛЕНО — 10.08.2026.
 *
 * Четирите променливи долу се сменят от animation.js на всеки кадър, а CSS
 * променливите се наследяват — тоест всяка смяна кара браузъра да пресметне
 * наново стила и на всичко вътре в заглавната кутия.
 *
 * Пробвах да ги обявя с `@property { inherits: false }`, за да спра това.
 * Премерено преди и след, процесор ÷4: 828 мс срещу 880 мс пресмятане на
 * стил. Тоест никаква разлика — цената е в самия елемент, не в клона под
 * него. Махнато, за да не стои в кода поправка, която не поправя нищо.
 *
 * Истинската цена на полюшването е описана в assets/js/animation.js.
 */
.hero-main-container {
    --hero-float-x: 0px;
    --hero-float-y: 0px;
    --hero-tilt: 0deg;
    --hero-scale: 1;
    --hero-shadow-y: 26px;
    --hero-shadow-blur: 38px;
    transform:
        translate3d(var(--hero-float-x), var(--hero-float-y), 0)
        rotate(var(--hero-tilt))
        scale(var(--hero-scale));
    transform-origin: center bottom;
    will-change: transform, filter;
    filter: drop-shadow(0 var(--hero-shadow-y) var(--hero-shadow-blur) rgba(76, 186, 229, 0.18));
}

.hero-balloons {
    z-index: 1;
    pointer-events: none;
    will-change: transform;
    animation: hero-balloons-float 7.2s ease-in-out infinite;
}

.hero-main-shell.hero-animate-in ~ .hero-balloons {
    animation:
        hero-balloons-appear 760ms cubic-bezier(0.22, 1, 0.36, 1) 140ms both,
        hero-balloons-float 7.2s ease-in-out 900ms infinite;
}

.hero-main-container::before,
.hero-main-container::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
}

.hero-main-container::before {
    width: 112px;
    height: 112px;
    top: 72px;
    left: 30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(229, 187, 76, 0.3) 0%, rgba(229, 187, 76, 0) 72%);
}

.hero-main-container::after {
    width: 126px;
    height: 126px;
    right: 48px;
    bottom: 96px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(233, 99, 175, 0.22) 0%, rgba(233, 99, 175, 0) 70%);
}

.hero-benefits-container,
.hero-title,
.hero-btn,
.hero-capacity-container {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
}

.hero-main-shell.hero-animate-in {
    animation: hero-pop-in 720ms cubic-bezier(0.22, 1, 0.36, 1.08) both;
}

.hero-main-shell.hero-animate-in .hero-main-container::before,
.hero-main-shell.hero-animate-in .hero-main-container::after {
    animation: hero-sparkle-fade 1.08s ease-out 110ms forwards;
}

.hero-main-shell.hero-animate-in .hero-benefits-container {
    animation: hero-content-pop 560ms cubic-bezier(0.22, 1, 0.36, 1) 100ms both;
}

.hero-main-shell.hero-animate-in .hero-title {
    animation: hero-content-pop 620ms cubic-bezier(0.22, 1, 0.36, 1) 170ms both;
}

.hero-main-shell.hero-animate-in .hero-btn {
    animation: hero-content-pop 600ms cubic-bezier(0.22, 1, 0.36, 1) 240ms both;
}

.hero-main-shell.hero-animate-in .hero-capacity-container {
    animation: hero-content-pop 620ms cubic-bezier(0.22, 1, 0.36, 1) 300ms both;
}

.hero-main-shell.hero-animate-active .hero-benefits-container,
.hero-main-shell.hero-animate-active .hero-title,
.hero-main-shell.hero-animate-active .hero-btn,
.hero-main-shell.hero-animate-active .hero-capacity-container {
    animation: hero-content-wiggle 7.5s ease-in-out infinite;
}

.hero-main-shell.hero-animate-active .hero-title {
    animation-delay: 0.2s;
}

.hero-main-shell.hero-animate-active .hero-btn {
    animation-delay: 0.35s;
}

.hero-main-shell.hero-animate-active .hero-capacity-container {
    animation-delay: 0.5s;
}

@keyframes hero-pop-in {
    0% {
        opacity: 0;
        transform:
            translate3d(0, 20px, 0)
            rotate(-2.5deg)
            scale(0.94);
        filter: drop-shadow(0 10px 16px rgba(76, 186, 229, 0.08));
    }

    55% {
        opacity: 1;
        transform:
            translate3d(0, -4px, 0)
            rotate(1deg)
            scale(1.015);
        filter: drop-shadow(0 26px 38px rgba(76, 186, 229, 0.18));
    }

    78% {
        transform:
            translate3d(0, 1px, 0)
            rotate(-0.4deg)
            scale(0.996);
    }

    100% {
        opacity: 1;
        transform:
            translate3d(0, 0, 0)
            rotate(0deg)
            scale(1);
        filter: drop-shadow(0 26px 38px rgba(76, 186, 229, 0.18));
    }
}

@keyframes hero-sparkle-fade {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    40% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0.35;
        transform: scale(1.08);
    }
}

@keyframes hero-content-pop {
    0% {
        opacity: 0;
        transform: translate3d(0, 26px, 0) scale(0.88) rotate(-2deg);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, -4px, 0) scale(1.03) rotate(1deg);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
}

@keyframes hero-content-wiggle {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-2px) rotate(-0.8deg);
    }

    50% {
        transform: translateY(1px) rotate(0.8deg);
    }

    75% {
        transform: translateY(-1px) rotate(-0.4deg);
    }
}

@keyframes hero-balloons-float {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    25% {
        transform: translate3d(-6px, -10px, 0) rotate(-1.2deg);
    }

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

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

@keyframes hero-balloons-appear {
    0% {
        opacity: 0;
        transform: translate3d(18px, 28px, 0) scale(0.9) rotate(-3deg);
    }

    55% {
        opacity: 1;
        transform: translate3d(-4px, -6px, 0) scale(1.03) rotate(1deg);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
}

@keyframes hero-background-drift {
    0% {
        background-position: 50% 50%;
    }

    35% {
        background-position: 51.8% 47.8%;
    }

    68% {
        background-position: 49.2% 46.8%;
    }

    100% {
        background-position: 47.8% 52.4%;
    }
}

@keyframes hero-cloud-pop {
    0% {
        opacity: 0;
        transform: scale(0.72);
    }

    65% {
        opacity: 0.6;
        transform: scale(1.04);
    }

    100% {
        opacity: 0.55;
        transform: scale(1);
    }
}

@keyframes hero-cloud-drift-left {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    25% {
        transform: translate3d(18px, -10px, 0) scale(1.04);
    }

    50% {
        transform: translate3d(34px, 14px, 0) scale(0.98);
    }

    75% {
        transform: translate3d(10px, 24px, 0) scale(1.03);
    }
}

@keyframes hero-cloud-drift-right {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    30% {
        transform: translate3d(-16px, -18px, 0) scale(1.05);
    }

    60% {
        transform: translate3d(-38px, 6px, 0) scale(0.97);
    }

    85% {
        transform: translate3d(-12px, 20px, 0) scale(1.02);
    }
}

/*
 * ⚠️ ОБЩАТА МЕХАНИКА ЗА ПОЯВЯВАНЕ ВЕЧЕ НЕ Е ТУК — 20.08.2026.
 *
 * `.anim-reveal`, вариантите `data-anim`, `.anim-visible`, `.anim-reveal-bob`
 * и кадрите `site-card-bob` се преместиха в assets/css/anim.css.
 *
 * Причината: лендинг страниците искат точно тези шейсет реда, а този файл е
 * 600 и почти всичките са за заглавния екран на началната. Виж дългата
 * бележка в началото на anim.css.
 *
 * ⚠️ ТОЗИ ФАЙЛ СЕ ЗАРЕЖДА СЛЕД anim.css. Правилата долу, които доуточняват
 * появяването за конкретни елементи (.party-address-container и другите),
 * разчитат на този ред.
 */

.anim-float {
    --float-duration: 8s;
    --float-delay: 0s;
    animation-duration: var(--float-duration);
    animation-delay: var(--float-delay);
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
    will-change: transform;
}

.anim-float[data-float="cloud"] {
    animation-name: site-cloud-float;
}

.anim-float[data-float="toy"] {
    animation-name: site-toy-float;
}

.anim-float[data-float="scribble"] {
    animation-name: site-scribble-float;
}

.navbar-main-container.anim-visible {
    animation: navbar-bounce-in 880ms cubic-bezier(0.2, 0.9, 0.22, 1.15) both;
}

.menu-info-button.anim-visible,
.pricing-package-button.anim-visible,
.contact-inquiry-form .main-button.anim-visible {
    animation: site-button-bob 5.8s ease-in-out infinite;
    animation-delay: calc(var(--anim-delay) + 420ms);
}

.party-address-container.anim-reveal {
    transition:
        opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 780ms cubic-bezier(0.22, 1, 0.36, 1);
}

.party-address-container.anim-reveal[data-anim="left"] {
    transform: translate3d(-34px, 14px, 0) rotate(4deg) scale(0.96);
}

.party-address-container.pink.anim-reveal[data-anim="left"] {
    transform: translate3d(34px, 14px, 0) rotate(4deg) scale(0.96);
}

.party-address-container.anim-reveal.anim-visible,
.party-address-container.pink.anim-reveal.anim-visible {
    transform: translate3d(0, 0, 0) rotate(4deg) scale(1);
}

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

    30% {
        transform: translate3d(0, -4px, 0) rotate(-0.7deg) scale(1.012);
    }

    65% {
        transform: translate3d(0, 1px, 0) rotate(0.5deg) scale(0.998);
    }
}

@keyframes navbar-bounce-in {
    0% {
        transform: translate3d(0, -24px, 0) scale(0.96);
    }

    55% {
        transform: translate3d(0, 3px, 0) scale(1.01);
    }

    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes site-cloud-float {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    30% {
        transform: translate3d(12px, -12px, 0) scale(1.03);
    }

    60% {
        transform: translate3d(-8px, 10px, 0) scale(0.985);
    }
}

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

    25% {
        transform: translate3d(-6px, -10px, 0) rotate(-1.4deg);
    }

    50% {
        transform: translate3d(4px, -18px, 0) rotate(0.9deg);
    }

    75% {
        transform: translate3d(8px, -6px, 0) rotate(1.1deg);
    }
}

@keyframes site-scribble-float {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }

    33% {
        transform: translate3d(8px, -6px, 0) scale(1.03) rotate(-4deg);
    }

    66% {
        transform: translate3d(-6px, 5px, 0) scale(0.97) rotate(3deg);
    }
}

@media (max-width: 750px) {
    .hero-main-shell {
        width: 100%;
        max-width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .hero-main-container {
        max-width: 100%;
        --hero-scale: 0.985;
    }
}

@media (max-width: 500px) {
    .hero-main-shell {
        padding: 0 8px;
    }

    .hero-main-container {
        --hero-scale: 0.975;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-section,
    .hero-section::before,
    .hero-section::after,
    .hero-main-shell,
    .hero-balloons,
    .hero-main-container::before,
    .hero-main-container::after,
    .anim-reveal,
    .anim-float,
    .navbar-main-container.anim-visible,
    .party-address-container.anim-visible,
    .menu-info-button.anim-visible,
    .pricing-package-button.anim-visible,
    .contact-inquiry-form .main-button.anim-visible,
    .anim-reveal-bob.anim-visible,
    .hero-main-shell.hero-animate-active .hero-benefits-container,
    .hero-main-shell.hero-animate-active .hero-title,
    .hero-main-shell.hero-animate-active .hero-btn,
    .hero-main-shell.hero-animate-active .hero-capacity-container {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }

    .anim-reveal {
        opacity: 1 !important;
    }
}