/* Новый первый экран: фиолетовая обложка, схема программы, Виктор с подписью по бокам */

.wow-combo .wow-hero{--mx:0;--my:0;--sy:0;
  --bp-line:rgba(255,255,255,.85);--bp-node:rgba(40,32,140,.55);--bp-text:#fff;
  --giant-fill:rgba(255,255,255,.035);--giant-stroke:rgba(255,255,255,.16);
  padding-top:0!important;color:#fff;background:linear-gradient(130deg,#4940ba 0%,#5546c4 55%,#7961d9 100%);
  overflow:hidden;position:relative;isolation:isolate}
.wow-main{position:relative;padding-top:130px;min-height:clamp(640px,calc(100vh - 112px),820px);box-sizing:border-box;display:flex;flex-direction:column}
.wow-split{position:relative;flex:1;display:flex;align-items:center}
.wow-combo .wow-hero .new-copy{position:relative;z-index:4;flex:0 1 600px;width:600px;max-width:600px;padding:20px 0 64px}
.wow-combo .wow-hero h1{font-size:72px;color:#fff}
.wow-combo .wow-hero h1>span{color:#d6d0ff}
.wow-combo .wow-hero .new-eyebrow{color:#ece9ff;font-size:15px;line-height:1.45}
.wow-combo .wow-hero .new-promise{color:#e5e0ff}
.wow-combo .wow-hero .new-promise strong{color:#fff}
.wow-combo .wow-hero .new-action>p{color:#e4e0ff;font-size:14px;line-height:1.45}

/* фон: сетка чертежа */
.wow-paper{position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:160px 160px,160px 160px,32px 32px,32px 32px;
  background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(120% 90% at 78% 45%,#000 30%,transparent 85%);
  mask-image:radial-gradient(120% 90% at 78% 45%,#000 30%,transparent 85%)}

/* сцена справа: гигантское слово, схема, портрет с подписью */
.wow-stage{position:absolute;top:130px;bottom:0;right:max(20px,calc((100% - 1240px)/2 - 120px));width:min(760px,54%);container-type:size;pointer-events:none}
.wow-depth{position:absolute;inset:0;will-change:transform}
.d-bp{transform:translate3d(calc(var(--mx)*-8px),calc(var(--my)*-6px),0)}
.d-giant{transform:translate3d(calc(var(--mx)*-26px - var(--sy)*.35px),calc(var(--my)*-12px),0)}
.d-portrait{transform:translate3d(calc(var(--mx)*12px),calc(var(--my)*6px),0)}

.wow-bp{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wow-person{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;animation:wow-rise 1s cubic-bezier(.2,.7,.2,1) .15s forwards}

/* схема */
.bp-line{fill:none;stroke:var(--bp-line);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;
  animation:wow-draw .9s cubic-bezier(.6,0,.2,1) var(--d,0s) forwards}
.bp-node{opacity:0;transform-box:fill-box;transform-origin:center;
  animation:wow-pop .55s cubic-bezier(.2,1.4,.4,1) var(--d,0s) forwards}
.bp-node rect{fill:var(--bp-node);stroke:var(--bp-line);stroke-width:1.5}
.bp-node text{font:700 12px HarmonyOS,Arial,sans-serif;letter-spacing:.06em;fill:var(--bp-text);text-anchor:middle;dominant-baseline:central}
/* бегущие шарики: мягкий жёлто-белый, медленно */
.bp-dot{fill:#fff4cf}

/* гигантское слово, поднято на 4 клетки сетки (4 × 32px) */
.wow-giant{position:absolute;top:12%;right:-30px;margin:-128px 0 0;white-space:nowrap;font:700 40cqh/0.8 BrandDisplay,'Arial Narrow',sans-serif;text-transform:uppercase;letter-spacing:-.01em;color:var(--giant-fill);-webkit-text-stroke:1.5px var(--giant-stroke);user-select:none}
.wow-giant span{display:inline-block;opacity:0;transform:translateY(40%);animation:wow-letter .9s cubic-bezier(.2,.8,.2,1) calc(.25s + var(--i)*.05s) forwards}

/* подпись автора по бокам от фигуры */
.wow-name,.wow-name-rule{opacity:0;animation:wow-fade .9s ease .9s forwards}
.wow-name-big{font:700 42px/1 BrandDisplay,'Arial Narrow',sans-serif;letter-spacing:-.01em;fill:#fff}
.wow-name-label{font:700 12px HarmonyOS,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;fill:#e5e0ff}
.wow-label-mobile{display:none}
.wow-name-about{font:500 18px HarmonyOS,Arial,sans-serif;fill:#fff}
.wow-name-rule path{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.2}
.wow-name-link{pointer-events:auto;cursor:pointer}
.wow-name-link text{font:700 13px HarmonyOS,Arial,sans-serif;fill:#fdcb56}
.wow-name-link:hover text{text-decoration:underline}
.wow-name-link:focus-visible{outline:3px solid #8278ef;outline-offset:5px;border-radius:4px}

/* полоса с тремя галочками */
.wow-combo .wow-hero .new-benefit-band{background:#38309a!important;border-top:1px solid rgba(255,255,255,.14)}
.wow-combo .wow-hero .new-benefits strong{font-size:18px}
.wow-combo .wow-hero .new-benefits p{font-size:15px;line-height:1.45;color:#ece9ff}

/* появление текста */
.wow-combo .wow-hero .new-copy>*{opacity:0;transform:translateY(18px);animation:wow-up .8s cubic-bezier(.2,.7,.2,1) forwards}
.wow-combo .wow-hero .new-copy>:nth-child(1){animation-delay:.05s}
.wow-combo .wow-hero .new-copy>:nth-child(2){animation-delay:.15s}
.wow-combo .wow-hero .new-copy>:nth-child(3){animation-delay:.3s}
.wow-combo .wow-hero .new-copy>:nth-child(4){animation-delay:.45s}

@keyframes wow-draw{to{stroke-dashoffset:0}}
@keyframes wow-fade{to{opacity:1}}
@keyframes wow-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes wow-rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes wow-up{to{opacity:1;transform:none}}
@keyframes wow-letter{to{opacity:1;transform:none}}


/* ноутбук */
@media (max-width:1500px){
  .wow-combo .wow-hero h1{font-size:60px!important}
  .wow-combo .wow-hero .new-copy{flex-basis:520px;max-width:520px}
}

/* планшет: схема не помещается рядом с текстом, остаются Виктор и подпись */
@media (max-width:1100px){
  .wow-combo .wow-hero h1{font-size:54px!important}
  .wow-combo .wow-hero .new-copy{max-width:50%;flex-basis:50%}
  .wow-stage{width:46%}
  .d-bp{display:none}
}

/* телефон */
@media (max-width:760px){
  .wow-main{padding-top:125px;min-height:0}
  .wow-split{display:block;order:1}
  .wow-combo .wow-hero .new-copy{max-width:none;width:auto;padding:10px 0 8px}
  .wow-combo .wow-hero h1{font-size:44px!important}
  .wow-stage{order:2;position:relative;top:auto;right:auto;width:100%;height:calc(100vw * 670 / 760);margin-top:8px;overflow:hidden}
  /* Виктор по пояс: фото увеличено от макушки, ноги уходят за нижний край */
  .wow-person image{transform:scale(1.45);transform-box:fill-box;transform-origin:50% 0}
  .wow-giant{top:8%;left:0;right:0;margin:0;text-align:center;font-size:17cqw}
  .d-giant{transform:none}
  .wow-name-label{font-size:22px;letter-spacing:0;text-transform:none}
  .wow-label-desktop{display:none}
  .wow-label-mobile{display:inline}
  .wow-name-link,.wow-name-about,.wow-name-rule{display:none}
  .wow-combo .wow-hero .new-benefits strong{font-size:17px}
  .wow-combo .wow-hero .new-benefits p{font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  .wow-combo .wow-hero *{animation:none!important;transition:none!important}
  .wow-combo .wow-hero .wow-depth{transform:none!important}
  .wow-combo .wow-hero .new-copy>*,.wow-person,.bp-node,.wow-giant span,.wow-name,.wow-name-rule{opacity:1!important;transform:none!important}
  .bp-line{stroke-dashoffset:0}
  .bp-dot{display:none}
}