/* HPACE v3: новый первый экран, логотип и анимации поверх прежних блоков. Фирменный цвет: --hp-accent. */

/* Логотип */
.hp-logo{display:block;height:22px;width:auto;overflow:visible;color:var(--hp-ink)}
.hp-footer .hp-logo,.hp-preloader__logo .hp-logo{color:currentColor}
.hp-logo__c{transition:stroke .3s}
.hp-logo__e rect{transition:transform .45s var(--hp-ease)}
a:hover>.hp-logo .hp-logo__c{stroke:var(--hp-accent)}
a:hover>.hp-logo .hp-logo__e rect:nth-child(1){transform:translateX(-3px)}
a:hover>.hp-logo .hp-logo__e rect:nth-child(2){transform:translateX(3.3px)}
a:hover>.hp-logo .hp-logo__e rect:nth-child(3){transform:translateX(-1.5px)}
html.hp-v3:not(.hp-logo-seen) .hp-top__logo .hp-logo__l{animation:hpLogoRise .85s var(--hp-ease) both}
html.hp-v3:not(.hp-logo-seen) .hp-top__logo .hp-logo__l:nth-of-type(2){animation-delay:.07s}
html.hp-v3:not(.hp-logo-seen) .hp-top__logo .hp-logo__l:nth-of-type(3){animation-delay:.14s}
html.hp-v3:not(.hp-logo-seen) .hp-top__logo .hp-logo__c{stroke-dasharray:1;animation:hpLogoDraw .9s .2s var(--hp-ease) both}
html.hp-v3:not(.hp-logo-seen) .hp-top__logo .hp-logo__e rect{transform-box:fill-box;transform-origin:left;animation:hpLogoBar .6s var(--hp-ease) both}
html.hp-v3:not(.hp-logo-seen) .hp-top__logo .hp-logo__e rect:nth-child(1){animation-delay:.34s}
html.hp-v3:not(.hp-logo-seen) .hp-top__logo .hp-logo__e rect:nth-child(2){animation-delay:.42s}
html.hp-v3:not(.hp-logo-seen) .hp-top__logo .hp-logo__e rect:nth-child(3){animation-delay:.5s}
@keyframes hpLogoRise{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}
@keyframes hpLogoDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes hpLogoBar{from{transform:scaleX(0)}to{transform:none}}

/* Первый экран */
.hp-site .hp-v3-hero{position:relative;min-height:calc(100svh - 122px);padding:clamp(40px,8vh,88px) 0 0;background:var(--hp-bg);color:var(--hp-ink);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;transform-origin:50% 0}
.hp-v3-field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hp-v3-hero__in{position:relative;z-index:1;width:100%;max-width:1560px;margin-inline:auto;padding-inline:var(--hp-pad)}
.hp-v3-hero__eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 clamp(20px,3vh,36px);font-size:15px;color:var(--hp-muted)}
.hp-v3-hero__eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--hp-accent);box-shadow:0 0 0 0 color-mix(in srgb,var(--hp-accent) 55%,transparent);animation:hpPulse 2.2s infinite}
@keyframes hpPulse{to{box-shadow:0 0 0 12px transparent}}
.hp-v3-hero__title{margin:0;font-family:var(--hp-display);font-weight:400;font-size:clamp(30px,4.7vw,84px);line-height:1.16;letter-spacing:-.02em;color:var(--hp-ink)}
.hp-v3-line{display:block}
.hp-v3-nb{white-space:nowrap}
.hp-split-w-mask,.hp-v3-roll{padding-block:.14em .18em;margin-block:-.14em -.18em}
.hp-v3-roll{display:inline-block;vertical-align:baseline;overflow:clip;color:var(--hp-accent);white-space:nowrap}
.hp-v3-roll__w{display:inline-block}
.hp-v3-pill{display:inline-block;vertical-align:-.08em;width:2.05em;height:.84em;margin-inline:.06em .1em;border-radius:.42em;overflow:hidden;position:relative;background:var(--hp-accent)}
.hp-v3-pill__in{position:absolute;inset:0;display:block}
.hp-v3-pill img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .6s}
.hp-v3-pill img.is-on{opacity:1}
.hp-v3-hero__foot{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:18px 48px;margin-top:clamp(28px,5vh,56px)}
.hp-v3-hero__lead{margin:0;max-width:34em;font-size:clamp(17px,1.5vw,22px);line-height:1.4;color:var(--hp-ink)}
.hp-v3-hero__cta{display:flex;flex-wrap:wrap;gap:12px;grid-row:span 2;justify-self:end}
.hp-v3-hero__trust{margin:0;font-size:15px;color:var(--hp-muted)}
.hp-v3-reel{position:relative;z-index:1;margin-top:clamp(36px,6vh,72px);overflow:hidden;padding-bottom:clamp(20px,3vh,36px)}
.hp-v3-reel__track{display:flex;gap:14px;width:max-content;will-change:transform}
.hp-v3-reel img{width:clamp(220px,23vw,400px);height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:14px;background:var(--hp-card)}
@media (min-width:761px){.hp-v3-line:first-child{white-space:nowrap}}
@media (max-width:760px){.hp-v3-pill{display:none}.hp-v3-hero__foot{grid-template-columns:1fr}.hp-v3-hero__cta{justify-self:start;grid-row:auto}.hp-site .hp-v3-hero{padding-top:36px;min-height:0}}

/* Скрыто до старта сцены, с запасным показом, если скрипт не выполнится */
html.hp-v3 [data-hp-in],html.hp-v3 .hp-v3-hero__title,html.hp-v3 .hp-v3-reel{visibility:hidden;animation:hpFailsafe 0s 7s forwards}
@keyframes hpFailsafe{to{visibility:visible}}

/* Общие приёмы */
.hp-v3-line{overflow:clip;padding-bottom:.16em;margin-bottom:-.16em}
.hp-v3-progress{display:none}
.hp-case__media{overflow:hidden}
.hp-case__media img{transition:transform .9s var(--hp-ease)}
.hp-case:hover .hp-case__media img{transform:scale(1.035)}
[data-hp-magnet]{will-change:transform}
@media (prefers-reduced-motion:reduce){.hp-v3-hero__eyebrow i{animation:none}::view-transition-old(root),::view-transition-new(root){animation:none}}
