/* =========================================================
   HERO МАРАФОНА — css/marathon-hero.css

   Собран по образцу css/camp-hero.css (страница осеннего лагеря):
   тот же набор слоёв (виньетка → светящиеся шары → сетка точек → нижний fade),
   та же типографика заголовка через clamp(), те же «стеклянные» чипы и кнопки.

   Отличия:
   • фон — бренд-градиент, а не фотография (у марафона нет постера),
     поэтому нет ни background-image, ни preload картинки;
   • нет падающих листьев и их rAF-физики — вместо них лёгкий дрейф шаров;
   • обратный отсчёт считает до дедлайна заявок (классы те же по смыслу).

   Все цвета и радиусы — из marathon-tokens.css.
   ========================================================= */

.mrv-hero {
    min-height: 90vh;
    /* мгновенная подложка: тот же тёмный синий, что в конце градиента */
    background-color: var(--mrv-hero-to);
    background-image: linear-gradient(135deg, var(--mrv-hero-from) 0%, var(--mrv-hero-to) 100%);
}

/* ---- Слои затемнения ---- */
.mrv-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

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

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

/* ---- Светящиеся шары ----
   Приём из hero лагеря. На мобильных filter: blur() отключается:
   три анимируемых blur-слоя — главный источник просадок кадров на телефоне. */
.mrv-bg-orb {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .35;
    z-index: 3;
    animation: mrvFloat 14s ease-in-out infinite;
}

.mrv-bg-orb--1 {
    width: 550px;
    height: 550px;
    top: -15%;
    right: -10%;
    background: radial-gradient(circle, rgba(255, 159, 68, .35) 0%, transparent 70%);
}

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

.mrv-bg-orb--3 {
    width: 350px;
    height: 350px;
    top: 40%;
    left: 15%;
    background: radial-gradient(circle, rgba(72, 199, 142, .28) 0%, transparent 70%);
    animation-delay: 9s;
}

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

@media (max-width: 767.98px) {
    .mrv-bg-orb { filter: none; }
}

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

/* =========================================================
   КОНТЕНТ
   Анимация двигает только transform (приём из hero лагеря —
   FIX PERF-2): контент виден с первого пейнта, а не после окончания fadeIn.
   ========================================================= */
.mrv-hero-content {
    position: relative;
    z-index: 5;
    animation: mrvRise .5s var(--camp-ease) both;
}

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

.mrv-hero-badge {
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(12px);
    -webkit-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;
}

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

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

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

.mrv-hero-accent {
    background: linear-gradient(135deg, var(--camp-orange) 0%, var(--camp-gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 10px rgba(255, 140, 66, .30));
}

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

/* ---- Мета-чипы ---- */
.mrv-hero-meta {
    color: rgba(255, 255, 255, .90);
    font-size: .95rem;
}

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

.mrv-meta-item i {
    color: var(--camp-gold);
    font-size: 1.1rem;
}

/* ---- Кнопки ---- */
.mrv-btn {
    border-radius: 12px;
    border: 0;
    transition: all var(--camp-transition);
}

.mrv-btn-primary {
    background: linear-gradient(135deg, #ff9f44 0%, var(--camp-orange-dark) 100%);
    box-shadow: 0 8px 24px rgba(255, 140, 66, .35);
    font-size: 1.1rem;
    letter-spacing: .02em;
}

.mrv-btn-primary:hover {
    background: linear-gradient(135deg, #ffb066 0%, #ff9f44 100%);
    box-shadow: 0 12px 32px rgba(255, 140, 66, .50);
    transform: translateY(-3px);
}

.mrv-btn-primary:disabled,
.mrv-btn-primary[aria-disabled="true"] {
    background: var(--camp-muted);
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

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

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

/* =========================================================
   ОБРАТНЫЙ ОТСЧЁТ ДО ДЕДЛАЙНА ЗАЯВОК
   ========================================================= */
.mrv-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;
}

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

/* фиксированная ширина цифр — текст не «дрожит» при тиканье секунд */
.mrv-countdown .countdown-days,
.mrv-countdown .countdown-hours,
.mrv-countdown .countdown-minutes,
.mrv-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;
}

/* Состояние «приём завершён» */
.mrv-countdown--closed {
    background: rgba(108, 117, 125, .20);
    border: 1px solid rgba(108, 117, 125, .50);
    box-shadow: none;
}

.mrv-countdown--closed i {
    color: #ced4da;
    animation: none;
}

/* =========================================================
   ПЛАШКА ЛИМИТА КОМАНД
   ========================================================= */
.mrv-limit-badge {
    background: rgba(72, 199, 142, .18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(72, 199, 142, .45);
    box-shadow: 0 4px 20px rgba(72, 199, 142, .15);
    font-size: .9rem;
    letter-spacing: .02em;
    animation: mrvLimitPulse 3s ease-in-out infinite;
}

.mrv-limit-badge i {
    color: #7cf0b3;
    animation: mrvPulse 1.5s ease-in-out infinite;
}

@keyframes mrvLimitPulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(72, 199, 142, .15); }
    50%      { box-shadow: 0 4px 28px rgba(72, 199, 142, .35); }
}

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

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

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

    .mrv-hero-actions { flex-direction: column; width: 100%; }
    .mrv-btn { width: 100%; justify-content: center; }
}

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

    .mrv-hero-badge {
        font-size: .75rem;
        margin-top: .5rem;
    }

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

    .mrv-hero-actions { margin-bottom: 2.5rem; }

    .mrv-countdown {
        font-size: .8rem;
        padding: .4rem .8rem;
    }

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

    .mrv-limit-badge {
        font-size: .8rem;
        padding: .4rem .8rem;
    }
}