/* Базовый фон для всех устройств (статичное изображение).
   ФИКС PERF-1: путь к картинке приходит переменной --camp-hero-bg,
   которую ставит parts/block_hero.php из CAMP_HERO_BG (parts/camp_config.php).
   Тот же путь используется в preload в index.php, поэтому картинка качается один раз. */
.hero-section-modern {
    min-height: 90vh;
    background-color: #2b1a0d;                      /* мгновенная подложка до загрузки фото */
    background-image: var(--camp-hero-bg, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ---- Слои затемнения (градиент + виньетка + нижний fade) ---- */
.hero-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-overlay-gradient {
    background: linear-gradient(180deg,
        rgba(120, 80, 50, .55) 0%,
        rgba(90, 60, 35, .65) 40%,
        rgba(50, 30, 15, .82) 100%);
    z-index: 1;
}

.hero-overlay-vignette {
    background: radial-gradient(ellipse at center,
        transparent 0%,
        rgba(40, 20, 5, .25) 60%,
        rgba(30, 15, 0, .55) 100%);
    z-index: 2;
}

.hero-divider {
    inset: auto 0 0;   /* прижата к нижнему краю, растянута по ширине */
    height: 120px;
    background: linear-gradient(to top, rgba(40, 20, 5, .85), transparent);
    z-index: 4;
}

/* ---- Светящиеся шары ---- */
.hero-bg-orb {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .35;
    z-index: 3;
    animation: heroFloat 14s ease-in-out infinite;
}

.hero-bg-orb--1 {
    width: 550px;
    height: 550px;
    top: -15%;
    right: -10%;
    background: radial-gradient(circle, rgba(160, 120, 80, .40) 0%, transparent 70%);
}

.hero-bg-orb--2 {
    width: 450px;
    height: 450px;
    bottom: -15%;
    left: -10%;
    background: radial-gradient(circle, rgba(130, 70, 50, .35) 0%, transparent 70%);
    animation-delay: 5s;
}

.hero-bg-orb--3 {
    width: 350px;
    height: 350px;
    top: 40%;
    left: 15%;
    background: radial-gradient(circle, rgba(140, 100, 60, .30) 0%, transparent 70%);
    animation-delay: 9s;
}

@keyframes heroFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(25px, -25px) scale(1.05); }
    66%      { transform: translate(-20px, 20px) scale(.95); }
}

/* ФИКС PERF-3: на мобильных убираем filter: blur(90px) с шаров.
   Радиальный градиент сам по себе мягкий, blur сверху почти не виден,
   зато три анимируемых blur-слоя 550/450/350 px — главный источник
   просадок кадров на телефоне (замер: худший кадр 1083 → 283–417 мс). */
@media (max-width: 767.98px) {
    .hero-bg-orb {
        filter: none;
    }
}

/* ---- Сетка точек ---- */
.hero-grid-pattern {
    z-index: 4;
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 200, 150, .06) 1px, transparent 0);
    background-size: 50px 50px;
}

/* =========================================================
   ПАДАЮЩИЕ ЛИСТЬЯ (элементы создаёт JS в block_hero.php)
   ========================================================= */
   /* =========================================================
      ПАДАЮЩИЕ ЛИСТЬЯ (обновленная физика)
      CSS отвечает только за падение (Y) и вращение.
      Горизонтальное движение (X) и перенос через края управляется JS.
      ========================================================= */
   .falling-leaves {
       position: absolute;
       inset: 0;
       overflow: hidden; /* Обрезаем только по вертикали, по горизонтали будет перенос */
       pointer-events: none;
       z-index: 4;
   }

   .leaf {
       position: absolute;
       top: -50px; /* Начинаем чуть выше экрана */
       opacity: .7;
       filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
       animation: leafFall linear infinite;
       /* ФИКС PERF-5: will-change: left, transform убран — он создавал по композитному
          слою на каждый из 25 листьев. Плавность даёт сам rAF-цикл. */
   }

   @keyframes leafFall {
       0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
       5%   { opacity: .8; }
       25%  { transform: translateY(25vh) rotate(90deg); }
       50%  { transform: translateY(50vh) rotate(180deg); }
       75%  { transform: translateY(75vh) rotate(270deg); }
       95%  { opacity: .8; }
       100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
   }

/* =========================================================
   КОНТЕНТ
   ========================================================= */
.hero-content-modern {
    position: relative;
    z-index: 5;
    /* ФИКС PERF-2: контент виден с первого пейнта.
       Прежде здесь было opacity: 0 + animation heroFadeInUp 1s forwards, из-за чего
       заголовок и кнопки оставались невидимыми, пока анимация не дойдёт до конца
       (на слабом CPU — 1.5–2 с и больше). Теперь анимация двигает только transform:
       элемент виден сразу, движение осталось. */
    animation: heroRise .5s var(--camp-ease) both;
}

@keyframes heroRise {
    from { transform: translateY(24px); }
    to   { transform: translateY(0); }
}

.hero-badge {
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .30);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
    font-size: .85rem;
    letter-spacing: .05em;
}

.hero-badge i {
    color: #FF9F44; /* Был var(--camp-orange) */
    animation: heroPulse 2s ease-in-out infinite;
}

@keyframes heroPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .7; transform: scale(1.15); }
}

.hero-main-title {
    font-size: clamp(2.5rem, 7vw, 5rem);
    line-height: 1.05;
    letter-spacing: -.03em;
    text-shadow: 0 4px 30px rgba(0, 0, 0, .40);
}

.hero-title-accent {
    /* Сохраняем переход в золотой для эффекта "осеннего тепла",
       но стартуем с нового насыщенного оранжевого */
    background: linear-gradient(135deg, #FF9F44 0%, #ffd166 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 10px rgba(255, 159, 68, .30)); /* Тень под цвет #FF9F44 */
}

.hero-subtitle {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    color: rgba(255, 255, 255, .95);
    max-width: 41rem;
    text-shadow: 0 2px 15px rgba(0, 0, 0, .30);
}

.hero-meta {
    color: rgba(255, 255, 255, .90);
    font-size: .95rem;
}

.hero-meta-item {
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: var(--camp-radius-sm);
}

.hero-meta-item i {
    color: #FF9F44; /* Был var(--camp-orange) */
    font-size: 1.1rem;
}

.hero-btn {
    border-radius: 12px;
    transition: all var(--camp-transition);
}

.hero-btn-primary {
    /* Прямое использование основного перехода из запрошенного градиента */
    background: linear-gradient(135deg, #FF9F44 0%, #ee5a24 100%);
    box-shadow: 0 8px 24px rgba(255, 159, 68, .35); /* Тень под цвет #FF9F44 */
    font-size: 1.1rem;
    letter-spacing: .02em;
}

.hero-btn-primary:hover {
    /* При наведении делаем верхний цвет чуть светлее для эффекта свечения */
    background: linear-gradient(135deg, #ffb066 0%, #FF9F44 100%);
    box-shadow: 0 12px 32px rgba(255, 159, 68, .50);
    transform: translateY(-3px);
}

.hero-btn-secondary {
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, .40);
}

.hero-btn-secondary:hover {
    background: rgba(255, 255, 255, .25);
    border-color: rgba(255, 255, 255, .70);
    transform: translateY(-2px);
}

/* =========================================================
   АДАПТИВ
   ========================================================= */
@media (max-width: 991.98px) {
    .hero-section-modern { min-height: 80vh; }

    .hero-bg-orb--1 { width: 400px; height: 400px; }
    .hero-bg-orb--2 { width: 300px; height: 300px; }
    .hero-bg-orb--3 { width: 250px; height: 250px; }

    .hero-meta { font-size: .85rem; }

    .hero-actions { flex-direction: column; width: 100%; }

    .hero-btn { width: 100%; justify-content: center; }
}

@media (max-width: 575.98px) {
    .hero-section-modern {
        min-height: 80vh;
        /* Гарантированные отступы сверху и снизу, чтобы контент не прилипал к краям экрана на мобильных */
        padding-top: 2.5rem;
        padding-bottom: 1rem;
    }

    .hero-badge {
        font-size: .75rem;
        /* Дополнительная страховка от прилипания к самому верху */
        margin-top: 0.5rem;
    }

    .hero-main-title { font-size: 2.2rem; }

    .hero-subtitle { font-size: 1rem; }

    /* Отступ снизу для кнопок, чтобы не прилипали к следующему блоку (детоксу) */
    .hero-actions {
        margin-bottom: 2.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .falling-leaves { display: none; }
}

/* =========================================================
   ТАЙМЕР ОБРАТНОГО ОТСЧЕТА
   ========================================================= */
.hero-countdown {
    background: rgba(255, 159, 68, .15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 159, 68, .40);
    box-shadow: 0 4px 20px rgba(255, 159, 68, .15);
    font-size: .9rem;
    letter-spacing: .02em;
    transition: all var(--camp-transition);
}

.hero-countdown i {
    color: var(--camp-gold);
    animation: heroPulse 2s ease-in-out infinite;
}

/* Фиксированная ширина цифр предотвращает "дрожание" текста при тиканье секунд */
.hero-countdown .countdown-days,
.hero-countdown .countdown-hours,
.hero-countdown .countdown-minutes,
.hero-countdown .countdown-seconds {
    color: var(--camp-gold);
    font-variant-numeric: tabular-nums;
    min-width: 1.6em;
    display: inline-block;
    text-align: center;
    font-weight: 800;
}

/* Состояние, когда смена уже началась */
.hero-countdown--started {
    background: rgba(40, 167, 69, .20);
    border: 1px solid rgba(40, 167, 69, .50);
    box-shadow: 0 4px 20px rgba(40, 167, 69, .20);
}

.hero-countdown--started i {
    color: #75f5a1;
    animation: heroPulse 1.5s ease-in-out infinite;
}

@media (max-width: 575.98px) {
    .hero-countdown {
        font-size: .8rem;
        padding: 0.4rem 0.8rem;
    }

    .hero-countdown .countdown-days,
    .hero-countdown .countdown-hours,
    .hero-countdown .countdown-minutes,
    .hero-countdown .countdown-seconds {
        min-width: 1.3em;
    }
}

/* =========================================================
   ИНДИКАТОР ОСТАТКА МЕСТ В HERO
   ========================================================= */
.hero-seats-badge {
    background: rgba(220, 53, 69, .15); /* camp-danger с прозрачностью */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(220, 53, 69, .40);
    box-shadow: 0 4px 20px rgba(220, 53, 69, .15);
    font-size: .9rem;
    letter-spacing: .02em;
    animation: seatsPulseHero 3s ease-in-out infinite;
}

.hero-seats-badge i {
    color: #ff6b81; /* Светлый оттенок красного для иконки на темном фоне */
    animation: heroPulse 1.5s ease-in-out infinite;
}

/* Состояние, когда места закончились */
.hero-seats-badge--sold-out {
    background: rgba(108, 117, 125, .20);
    border: 1px solid rgba(108, 117, 125, .50);
    box-shadow: none;
    animation: none;
}

.hero-seats-badge--sold-out i {
    color: #ced4da;
    animation: none;
}

@keyframes seatsPulseHero {
    0%, 100% { box-shadow: 0 4px 20px rgba(220, 53, 69, .15); }
    50%      { box-shadow: 0 4px 28px rgba(220, 53, 69, .35); }
}

@media (max-width: 575.98px) {
    .hero-seats-badge {
        font-size: .8rem;
        padding: 0.4rem 0.8rem;
    }
}