/* assets/error-map/hero-card.css — the live error-map card in the landing hero.
 *
 * Loaded ONLY on the Russian landing, from the same guard that renders the
 * markup (landing_v2.php). Do not move these rules into landing.css: that ships
 * them to the English page too, and on 2026-08-15 exactly that mistake sent the
 * dashboard card's CSS into the English output while its markup was guarded.
 *
 * Sizing rule: every dimension here is fixed or aspect-locked, and the canvas
 * has width/height attributes in the markup. The card must occupy its final
 * size before any data arrives — data landing must not move the page.
 */

/* Якорь — САМ ряд кнопок. Верх карточки обязан стоять вровень с кнопкой
 * «Начать тренировки» (Алекс, 20.08), и привязка к ряду держит это сама:
 * top:0 внутри .hero__buttons — это и есть верх кнопки. Числом (top:298px от
 * контейнера) было бы то же самое ровно до первой смены шрифта или длины
 * подзаголовка.
 * Карточка лежит ВНУТРИ ряда, но absolute — из флекс-потока она вынута и
 * ширину кнопки не двигает.
 * Появление общее с цитатой Каца: та же fadeUp с той же задержкой, иначе
 * карточка выпрыгивает раньше и они читаются как два разных элемента. */
.hero__buttons { position: relative; }

.em-hero {
    position: absolute;
    top: 0;
    right: -40px;      /* сдвинута левее зеркального положения цитаты (Алекс,
                          20.08): у правого края она упиралась в кромку кадра */
    width: 390px;      /* та же ширина, что у цитаты Каца (landing.css:474) */
    z-index: 4;
    opacity: 0;
    animation: fadeUp 1s var(--ease-5) 1.5s forwards;
    display: block;
    padding: 12px 14px 9px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(18, 18, 22, .80), rgba(10, 10, 13, .90));
    overflow: hidden;   /* пятна подложки не должны вылезать за скругление */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-decoration: none;
    color: inherit;
    /* Only colour and border move on hover. Anything that changes the box would
     * shift the hero on every mouse-over — the screen must not jump, and size
     * counts as jumping. */
    transition: border-color .18s ease, background-color .18s ease;
}

.em-hero:hover,
.em-hero:focus-visible {
    border-color: rgba(255, 255, 255, .22);
}

/* Подложка: два мягких цветных пятна, медленно дрейфующих по карточке.
 * Пятна взяты из прототипа (там их рисовал сам холст) — здесь они в CSS и
 * двигаются transform'ом, то есть считаются видеокартой и не отнимают ни
 * одного кадра у рельефа.
 * Держать их слабыми обязательно: под карточкой фотография пульта, и
 * заметный цвет тут же начинает спорить с рельефом, ради которого всё
 * и затевалось. inset отрицательный — иначе на краю дрейфа видно, как
 * пятно кончается. */
.em-hero::before {
    content: '';
    position: absolute;
    inset: -35%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(38% 44% at 76% 26%, rgba(150, 90, 235, .30), rgba(150, 90, 235, 0) 70%),
        radial-gradient(34% 40% at 22% 74%, rgba(0, 130, 255, .24), rgba(0, 130, 255, 0) 70%),
        radial-gradient(30% 34% at 52% 92%, rgba(0, 210, 190, .14), rgba(0, 210, 190, 0) 70%);
    animation: em-hero-drift 19s ease-in-out infinite alternate;
}

@keyframes em-hero-drift {
    0%   { transform: translate3d(-3%, -2%, 0) scale(1);    }
    50%  { transform: translate3d( 2%,  3%, 0) scale(1.10); }
    100% { transform: translate3d( 4%, -3%, 0) scale(1.04); }
}

/* Содержимое поверх подложки: без этого пятна легли бы на текст. */
.em-hero__head,
.em-hero__sub,
.em-hero__plot,
.em-hero__axis { position: relative; z-index: 1; }

.em-hero__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.em-hero__title {
    font-family: var(--font-h);
    font-size: 15px;
    font-weight: 500;
    color: #f3f1ec;
    letter-spacing: .01em;
}

/* The LIVE badge is the whole pitch: the relief is what is happening now. It is
 * honest only while the canvas really re-reads the window — if the feed ever
 * becomes a snapshot, this badge has to go with it. */
.em-hero__live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-h);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .10em;
    color: #4ade80;
}

.em-hero__live::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px rgba(74, 222, 128, .9);
    animation: em-hero-pulse 2.4s ease-in-out infinite;
}

@keyframes em-hero-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

.em-hero__go {
    margin-left: auto;
    font-size: 20px;
    line-height: 1;
    color: rgba(243, 241, 236, .55);
    transition: color .18s ease;
}

.em-hero:hover .em-hero__go { color: rgba(243, 241, 236, .95); }

.em-hero__sub {
    display: block;
    margin-top: 3px;
    font-family: var(--font-b);
    font-size: 11.5px;
    line-height: 1.4;
    /* Тот же цвет, что у подписи «(c) Bob Katz» в карточке слева
       (landing.css:530) — карточки стоят парой, и обещание на правой должно
       звучать тем же голосом, что автор на левой. Свой оттенок здесь сделал
       бы их двумя разными элементами. */
    color: var(--accent-2);
}

/* aspect-ratio locks the slot before the canvas paints: no reflow when the
 * first window arrives. Wide and low on purpose — the relief is wide and low,
 * and a taller box only adds empty sky above the peaks. The exact ratio is
 * what brings the whole card to the height of the Katz quote beside it
 * (Алекс, 20.08: «размер примерно как у карточки слева»). */
.em-hero__plot {
    display: block;
    margin-top: 8px;
    aspect-ratio: 27 / 10;
}

.em-hero__canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.em-hero__axis {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
    font-family: var(--font-b);
    font-size: 10px;
    letter-spacing: .04em;
    color: rgba(243, 241, 236, .34);
}

/* Phones do not get the card at all (Alex, 2026-08-20). Grounds: of the six
 * mobile guests who opened the map before registering, none registered, and a
 * third of landing guests are on a phone. The hero keeps a single button there.
 * display:none also stops the renderer — hero-card.js refuses to start when the
 * canvas has no layout box, so a hidden card costs no polling either. */
@media (max-width: 820px) {
    .em-hero { display: none; }
}

/* Рубильник app_config['error_map_now'] выключен: движения не будет, значит
 * и обещать его нельзя. Карточка остаётся ссылкой на страницу — там своя
 * заглушка, — но перестаёт называться живой. */
.em-hero--static .em-hero__live { display: none; }
.em-hero--static::before { animation: none; }

@media (prefers-reduced-motion: reduce) {
    .em-hero__live::before,
    .em-hero::before { animation: none; }
}