/* ══════════════════════════════════════════════════════════════════
   Логотип бренда: прямая слева-направо + проявление
   ──────────────────────────────────────────────────────────────────
   v4 — исправлено:

   1) ПОЧЕМУ НА СТРАНИЦАХ УСЛУГ ЛОГОТИП БЫЛ НАД ЗАГОЛОВКОМ.
      Страницы брендов (tpl12) задают геометрию логотипа в своём
      инлайн-<style>: position:absolute, right:0, top:50%, width:360px.
      Страницы услуг (tpl13) своих стилей НЕ имеют вовсе.
      Без position:absolute логотип оставался обычным блоком в потоке
      и вставал над заголовком, растягиваясь на натуральную ширину SVG.
      Теперь базовая геометрия живёт здесь — одинаково для всех шаблонов.

   2) ЛОГОТИП ВСЕГДА ОСТАЁТСЯ ВИДЕН СПРАВА.
      Конечное состояние фиксируется явно (opacity:1, transform:0),
      а не только через animation-fill-mode. Если анимация не
      запустится — логотип всё равно на месте и виден.

   3) Скрытое стартовое состояние взводится только классом
      .sunrise-armed, который ставит скрипт. Нет JS — логотип виден.
   ══════════════════════════════════════════════════════════════════ */

/* ─────────── БАЗОВАЯ ГЕОМЕТРИЯ (общая для tpl12 и tpl13) ───────────
   Специфичность 0,2,0 — перебивает инлайн-стили шаблона tpl12 (0,1,0),
   поэтому порядок в документе больше не важен. */
.hero-section .hero-brand-logo{
    position:absolute;
    right:0;
    top:50%;
    transform:translate(50%,-50%);
    width:360px;
    max-width:42vw;
    opacity:.5;
    z-index:1;
    pointer-events:none;
    overflow:visible;
}
.hero-section .hero-brand-logo img{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
    filter:grayscale(100%) brightness(1.5);
}

/* hero должен обрезать выезд за свои границы — без горизонтальной прокрутки */
.hero-section{overflow:hidden}

/* ─────────── прозрачность: лимит снят с родителя, перенесён на слой ─────────── */
.hero-section .hero-brand-logo--sunrise{opacity:1}
.hero-section .hero-brand-logo--sunrise .sunrise-track{opacity:.5}

.hero-brand-logo .sunrise-track,
.hero-brand-logo .sunrise-inner{display:block;position:relative;backface-visibility:hidden}
.hero-brand-logo .sunrise-track{z-index:2;will-change:transform}
.hero-brand-logo .sunrise-inner{z-index:2;will-change:opacity}

/* ─────────── мягкое свечение у точки прибытия ─────────── */
.hero-brand-logo .sunrise-glow{
    position:absolute;left:50%;top:50%;width:190%;height:190%;
    transform:translate(-50%,-50%) scale(.55);
    border-radius:50%;pointer-events:none;opacity:0;z-index:1;
    background:
        radial-gradient(closest-side, rgba(254,72,25,.95), rgba(254,72,25,.4) 46%, rgba(254,72,25,0) 74%),
        radial-gradient(closest-side, rgba(255,176,128,.6), rgba(255,176,128,0) 62%);
    filter:blur(16px);
    mix-blend-mode:screen;
}

/* ─────────── стартовое состояние (только когда JS взвёл анимацию) ───────────
   specificity 0,4,0 — надёжно перекрывает базовую геометрию */
.hero-section .hero-brand-logo--sunrise.sunrise-armed:not(.is-risen) .sunrise-track{
    transform:translate3d(-80vw,0,0);
}
.hero-section .hero-brand-logo--sunrise.sunrise-armed:not(.is-risen) .sunrise-inner{
    opacity:0;
}

/* ─────────── движение: прямая по горизонтали ─────────── */
.hero-section .hero-brand-logo--sunrise.is-risen .sunrise-track{
    animation:brandSlideIn 2210ms cubic-bezier(.22,.72,.28,1) 325ms both;
}
.hero-section .hero-brand-logo--sunrise.is-risen .sunrise-inner{
    animation:brandFadeIn 1625ms cubic-bezier(.3,.6,.4,1) 325ms both;
}
.hero-section .hero-brand-logo--sunrise.is-risen .sunrise-glow{
    animation:brandGlowIn 1950ms ease-out 1240ms both;
}

/* Финальное состояние продублировано явно:
   логотип остаётся НА СВОЁМ МЕСТЕ СПРАВА и видимым, даже если
   animation-fill-mode почему-то не сработает. */
.hero-section .hero-brand-logo--sunrise.is-risen .sunrise-track{
    transform:translate3d(0,0,0);
}
.hero-section .hero-brand-logo--sunrise.is-risen .sunrise-inner{
    opacity:1;
}

@keyframes brandSlideIn{
    0%  {transform:translate3d(-80vw,0,0)}
    100%{transform:translate3d(0,0,0)}
}
@keyframes brandFadeIn{
    0%  {opacity:0}
    18% {opacity:.12}
    45% {opacity:.48}
    72% {opacity:.82}
    100%{opacity:1}
}
@keyframes brandGlowIn{
    0%  {opacity:0;transform:translate(-50%,-50%) scale(.7)}
    35% {opacity:.75;transform:translate(-50%,-50%) scale(1)}
    100%{opacity:.22;transform:translate(-50%,-50%) scale(1.15)}
}

/* ══════════ ПЛАНШЕТ: до 991px ══════════ */
@media(max-width:991px){
    .hero-section .hero-brand-logo{
        width:240px;
        transform:translate(48%,-50%);
    }
    .hero-section .hero-brand-logo--sunrise.sunrise-armed:not(.is-risen) .sunrise-track{
        transform:translate3d(-78vw,0,0);
    }
    .hero-section .hero-brand-logo--sunrise.is-risen .sunrise-track{
        animation-name:brandSlideInSm;
    }
    .hero-brand-logo .sunrise-glow{filter:blur(12px)}
}
@keyframes brandSlideInSm{
    0%  {transform:translate3d(-78vw,0,0)}
    100%{transform:translate3d(0,0,0)}
}

/* ══════════ ТЕЛЕФОН: до 767px ══════════ */
@media(max-width:767px){
    .hero-section .hero-brand-logo{
        width:118px;
        max-width:34vw;
        transform:translate(12%,-50%);
    }
    .hero-section .hero-brand-logo--sunrise .sunrise-track{opacity:.55}

    .hero-section .hero-brand-logo--sunrise.sunrise-armed:not(.is-risen) .sunrise-track{
        transform:translate3d(-72vw,0,0);
    }
    .hero-section .hero-brand-logo--sunrise.is-risen .sunrise-track{
        animation-name:brandSlideInPhone;
        animation-duration:1950ms;
    }
    .hero-section .hero-brand-logo--sunrise.is-risen .sunrise-inner{
        animation-duration:1430ms;
    }
    .hero-section .hero-brand-logo--sunrise.is-risen .sunrise-glow{
        animation-name:brandGlowInPhone;
        animation-duration:1690ms;
        animation-delay:1070ms;
    }
    .hero-brand-logo .sunrise-glow{filter:blur(9px)}
}
@keyframes brandSlideInPhone{
    0%  {transform:translate3d(-72vw,0,0)}
    100%{transform:translate3d(0,0,0)}
}
@keyframes brandGlowInPhone{
    0%  {opacity:0;transform:translate(-50%,-50%) scale(.75)}
    38% {opacity:.6;transform:translate(-50%,-50%) scale(1)}
    100%{opacity:.2;transform:translate(-50%,-50%) scale(1.12)}
}

/* ══════════ «меньше движения» ══════════ */
@media(prefers-reduced-motion:reduce){
    .hero-section .hero-brand-logo--sunrise.sunrise-armed:not(.is-risen) .sunrise-track{transform:none}
    .hero-section .hero-brand-logo--sunrise.sunrise-armed:not(.is-risen) .sunrise-inner{opacity:1}
    .hero-section .hero-brand-logo--sunrise.is-risen .sunrise-track,
    .hero-section .hero-brand-logo--sunrise.is-risen .sunrise-inner{animation:none}
    .hero-section .hero-brand-logo--sunrise.is-risen .sunrise-track{transform:none}
    .hero-section .hero-brand-logo--sunrise.is-risen .sunrise-inner{opacity:1}
    .hero-brand-logo--sunrise .sunrise-glow{display:none}
}

/* ══════════ Логотип VIP AUTO на страницах услуг ══════════
   Логотип сайта шире брендовых (1265×665, ~1.9:1 против 1:1 у Acura),
   поэтому при той же ширине он был бы визуально крупнее — уменьшаем. */
.hero-section .hero-brand-logo--site{width:250px;max-width:30vw}
@media(max-width:991px){
    .hero-section .hero-brand-logo--site{width:190px;max-width:32vw}
}
@media(max-width:767px){
    .hero-section .hero-brand-logo--site{width:132px;max-width:36vw}
}
/* белый логотип не нужно обесцвечивать — он уже белый */
.hero-section .hero-brand-logo--site img{filter:none;opacity:.85}