/**
 * Темы фона героя на главной (см. админка → Настройки → Тема блока «Герой»).
 * Частицы создаёт /js/hero-theme.js (кроме default).
 */

.hero-with-categories {
    position: relative;
    overflow: hidden;
    /* Запасной фон, если не сработал селектор по data-hero-theme или не подгрузился brand.css */
    background: linear-gradient(135deg, #f7ede2 0%, #ffffff 100%);
}

.hero-theme-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.hero-with-categories > .container {
    position: relative;
    z-index: 3;
}

/* Декор поверх снега, под контентом */
.hero-theme-deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

/* --- Фоны по темам --- */
.hero-with-categories[data-hero-theme="default"] {
    background: linear-gradient(135deg, var(--cream) 0%, #fff 100%);
}

.hero-with-categories[data-hero-theme="spring"] {
    background: linear-gradient(145deg, #fff5f8 0%, #fff9f0 45%, #ffffff 100%);
}

.hero-with-categories[data-hero-theme="summer"] {
    background: linear-gradient(135deg, #f0fff4 0%, #f8fff0 40%, #fffef8 100%);
}

.hero-with-categories[data-hero-theme="autumn"] {
    background: linear-gradient(135deg, #fff6ed 0%, #ffefd9 50%, #fffaf5 100%);
}

.hero-with-categories[data-hero-theme="winter"] {
    background: #ffffff;
}

.hero-with-categories[data-hero-theme="newyear"] {
    background: linear-gradient(145deg, #0d1b2a 0%, #1b263b 35%, #2d3a4f 70%, #1a2332 100%);
    color: #e8e8e8;
}

.hero-with-categories[data-hero-theme="newyear"] .hero-title,
.hero-with-categories[data-hero-theme="newyear"] .hero-tagline,
.hero-with-categories[data-hero-theme="newyear"] .hero-subtitle,
.hero-with-categories[data-hero-theme="newyear"] .seo-context-line,
.hero-with-categories[data-hero-theme="newyear"] .hero-categories-title {
    color: #f5f5f5;
}

.hero-with-categories[data-hero-theme="newyear"] .hero-categories-title {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Карточки белые — текст только тёмный для читаемости */
.hero-with-categories[data-hero-theme="newyear"] .hero-category-name {
    color: #3d3d5c;
}

.hero-with-categories[data-hero-theme="newyear"] .hero-category-desc {
    color: #5c5c6e;
}

.hero-with-categories[data-hero-theme="newyear"] .hero-category-item {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 215, 100, 0.35);
}

.hero-with-categories[data-hero-theme="newyear"] .hero-category-item:hover {
    border-color: #ffd54f;
    box-shadow: 0 8px 28px rgba(255, 193, 7, 0.25);
}

.hero-with-categories[data-hero-theme="newyear"] .btn-outline.btn-hero {
    border-color: rgba(255, 255, 255, 0.88);
    color: #fff;
}

.hero-with-categories[data-hero-theme="newyear"] .btn-outline.btn-hero:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
    color: #fff;
}

.hero-with-categories[data-hero-theme="march8"] {
    background: linear-gradient(135deg, #fff0f5 0%, #ffe4ef 40%, #fff8fb 100%);
}

/* --- Частицы (базовые) --- */
.hero-particle {
    position: absolute;
    top: -5%;
    opacity: 0;
    will-change: transform, opacity;
    animation-name: hero-particle-fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes hero-particle-fall {
    0% {
        transform: translate3d(0, -2vh, 0) rotate(0deg);
        opacity: 0;
    }
    8% {
        opacity: 0.9;
    }
    100% {
        transform: translate3d(var(--drift, 0px), 105vh, 0) rotate(var(--spin, 720deg));
        opacity: 0.15;
    }
}

/* Сакура — читаемо на фоне, без «невидимых» лепестков */
.hero-particle--petal-sakura {
    width: 9px;
    height: 12px;
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    background: linear-gradient(145deg, #ffb7c5 0%, #ffc9d9 50%, #ffe0e8 100%);
    box-shadow: 0 0 1px rgba(255, 105, 135, 0.35);
}

/* Лето */
.hero-particle--petal-summer {
    width: 11px;
    height: 14px;
    border-radius: 40% 60% 50% 50%;
    background: linear-gradient(160deg, #81c784 0%, #a5d6a7 60%, #c8e6c9 100%);
}

.hero-particle--spark-summer {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 235, 120, 0.85);
    box-shadow: 0 0 6px rgba(255, 220, 100, 0.6);
}

/* Осень */
.hero-particle--leaf-autumn {
    width: 13px;
    height: 17px;
    border-radius: 0 80% 0 80%;
    background: linear-gradient(135deg, #d84315 0%, #ff8a65 50%, #ffcc80 100%);
}

/* Снег (общий; тема «Зима» переопределяет ниже — крупнее и голубой) */
.hero-particle--snow {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.9);
}

/* Зима: узорные снежинки (SVG в /images/home/snowflake-w*.svg) */
.hero-with-categories[data-hero-theme="winter"] .hero-particle--snow-w1,
.hero-with-categories[data-hero-theme="winter"] .hero-particle--snow-w2,
.hero-with-categories[data-hero-theme="winter"] .hero-particle--snow-w3,
.hero-with-categories[data-hero-theme="winter"] .hero-particle--snow-w4,
.hero-with-categories[data-hero-theme="winter"] .hero-particle--snow-w5 {
    width: 20px;
    height: 20px;
    border-radius: 0;
    background: transparent center / contain no-repeat;
    box-shadow: none;
    filter: drop-shadow(0 1px 3px rgba(66, 165, 245, 0.45));
}

.hero-with-categories[data-hero-theme="winter"] .hero-particle--snow-w1 {
    background-image: url('/images/home/snowflake-w1.svg');
}

.hero-with-categories[data-hero-theme="winter"] .hero-particle--snow-w2 {
    background-image: url('/images/home/snowflake-w2.svg');
}

.hero-with-categories[data-hero-theme="winter"] .hero-particle--snow-w3 {
    background-image: url('/images/home/snowflake-w3.svg');
}

.hero-with-categories[data-hero-theme="winter"] .hero-particle--snow-w4 {
    background-image: url('/images/home/snowflake-w4.svg');
}

.hero-with-categories[data-hero-theme="winter"] .hero-particle--snow-w5 {
    background-image: url('/images/home/snowflake-w5.svg');
}

@media (max-width: 576px) {
    .hero-with-categories[data-hero-theme="winter"] .hero-particle--snow-w1,
    .hero-with-categories[data-hero-theme="winter"] .hero-particle--snow-w2,
    .hero-with-categories[data-hero-theme="winter"] .hero-particle--snow-w3,
    .hero-with-categories[data-hero-theme="winter"] .hero-particle--snow-w4,
    .hero-with-categories[data-hero-theme="winter"] .hero-particle--snow-w5 {
        width: 16px;
        height: 16px;
    }
}

/* Новый год: те же SVG-снежинки, что у зимы, но белые (тёмный фон) */
.hero-with-categories[data-hero-theme="newyear"] .hero-particle--snow-w1,
.hero-with-categories[data-hero-theme="newyear"] .hero-particle--snow-w2,
.hero-with-categories[data-hero-theme="newyear"] .hero-particle--snow-w3,
.hero-with-categories[data-hero-theme="newyear"] .hero-particle--snow-w4,
.hero-with-categories[data-hero-theme="newyear"] .hero-particle--snow-w5 {
    width: 22px;
    height: 22px;
    border-radius: 0;
    background: transparent center / contain no-repeat;
    box-shadow: none;
    filter: brightness(0) invert(1) drop-shadow(0 0 7px rgba(255, 255, 255, 0.65));
}

.hero-with-categories[data-hero-theme="newyear"] .hero-particle--snow-w1 {
    background-image: url('/images/home/snowflake-w1.svg');
}

.hero-with-categories[data-hero-theme="newyear"] .hero-particle--snow-w2 {
    background-image: url('/images/home/snowflake-w2.svg');
}

.hero-with-categories[data-hero-theme="newyear"] .hero-particle--snow-w3 {
    background-image: url('/images/home/snowflake-w3.svg');
}

.hero-with-categories[data-hero-theme="newyear"] .hero-particle--snow-w4 {
    background-image: url('/images/home/snowflake-w4.svg');
}

.hero-with-categories[data-hero-theme="newyear"] .hero-particle--snow-w5 {
    background-image: url('/images/home/snowflake-w5.svg');
}

@media (max-width: 576px) {
    .hero-with-categories[data-hero-theme="newyear"] .hero-particle--snow-w1,
    .hero-with-categories[data-hero-theme="newyear"] .hero-particle--snow-w2,
    .hero-with-categories[data-hero-theme="newyear"] .hero-particle--snow-w3,
    .hero-with-categories[data-hero-theme="newyear"] .hero-particle--snow-w4,
    .hero-with-categories[data-hero-theme="newyear"] .hero-particle--snow-w5 {
        width: 17px;
        height: 17px;
    }
}

/* Блёстки (НГ) */
.hero-particle--sparkle {
    width: 7px;
    height: 7px;
    background: linear-gradient(135deg, #ffe082, #ffca28);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    box-shadow: 0 0 5px rgba(255, 213, 79, 0.8);
}

/* 8 марта — классическое «двухкруглое» сердце (два полукруга + сход внизу) */
.hero-particle--heart-march {
    width: 16px;
    height: 14px;
    background: transparent !important;
    box-shadow: none !important;
    filter: drop-shadow(0 1px 2px rgba(194, 24, 91, 0.4));
}

.hero-particle--heart-march::before,
.hero-particle--heart-march::after {
    content: '';
    position: absolute;
    top: 0;
    width: 8px;
    height: 12px;
    background: linear-gradient(165deg, #fce4ec 0%, #f06292 45%, #c2185b 100%);
    border-radius: 8px 8px 0 0;
}

.hero-particle--heart-march::before {
    left: 8px;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}

.hero-particle--heart-march::after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}

/* Новый год: гирлянда сверху + ёлка слева у текста */
.hero-theme-deco--newyear .hero-ny-garland {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 52px;
    background: url('/images/home/garland-newyear.svg') center top / 100% 100% no-repeat;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
    opacity: 0.98;
}

.hero-theme-deco--newyear .hero-ny-tree {
    position: absolute;
    left: 0;
    bottom: 0;
    width: min(140px, 36vw);
    height: min(180px, 42vw);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130'%3E%3Crect x='44' y='108' width='12' height='22' fill='%235d4037'/%3E%3Cpath d='M50 8 L78 42 H62 L85 72 H68 L92 102 H8 L32 72 H15 L38 42 H22 Z' fill='%231b5e20'/%3E%3Cpath d='M50 22 L70 48 H58 L76 74 H60 L88 102 H12 L36 74 H24 L42 48 H30 Z' fill='%232e7d32'/%3E%3Cpath d='M50 38 L64 58 H54 L74 78 H62 L84 102 H16 L36 78 H26 L46 58 H38 Z' fill='%234caf50'/%3E%3Cpolygon points='50 2 56 14 44 14' fill='%23ffeb3b'/%3E%3C/svg%3E")
        left bottom / contain no-repeat;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
    opacity: 0.92;
}

/* Планшет: ёлка средняя */
@media (min-width: 577px) and (max-width: 991px) {
    .hero-theme-deco--newyear .hero-ny-tree {
        width: min(220px, 40vw);
        height: min(280px, 50vw);
    }
}

/* Десктоп: крупная ёлка слева (у колонки с текстом) */
@media (min-width: 992px) {
    .hero-theme-deco--newyear .hero-ny-tree {
        width: min(400px, 36vw);
        height: min(520px, 58vh);
        max-height: 90%;
        left: 0;
        bottom: 0;
    }
}

@media (max-width: 576px) {
    .hero-theme-deco--newyear .hero-ny-tree {
        width: 72px;
        height: 96px;
        left: 0;
        opacity: 0.75;
    }

    .hero-theme-deco--newyear .hero-ny-garland {
        height: 40px;
    }
}

/* 8 марта — бант на первой карточке */
.hero-with-categories[data-hero-theme="march8"] .hero-categories-grid .hero-category-item:first-child .hero-category-icon {
    position: relative;
}

.hero-with-categories[data-hero-theme="march8"] .hero-categories-grid .hero-category-item:first-child .hero-category-icon::after {
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%) rotate(-4deg);
    width: 42px;
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, #c2185b, #f48fb1 50%, #ec407a);
    box-shadow: 0 2px 10px rgba(194, 24, 91, 0.35);
    pointer-events: none;
    z-index: 3;
}

.hero-with-categories[data-hero-theme="march8"] .hero-categories-grid .hero-category-item:first-child .hero-category-icon::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fce4ec;
    box-shadow: 0 0 0 2px #f8bbd0;
    z-index: 4;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .hero-theme-particles {
        display: none;
    }

    .hero-particle {
        animation: none !important;
    }
}