/* v10 «QUIET IS OVER.» — история скроллом: тишина → звонок → заявки → реклама за звонком (концепт владельца 14.11, 52450).
   Сцены считает story.js: --a первый звонок, --b заявки, --c реклама за звонком (0..1). Палитра пока чёрно-белая — цвет выберет владелец. */
.rstory{--bg:#0b0b0c;--fg:#fff;--mute:#ffffff8c;--a:0;--b:0;--c:0;position:relative;height:420vh;background:var(--bg);color:var(--fg)}
.st-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;perspective:1400px}
.st-light{position:absolute;inset:-20%;background:radial-gradient(40% 32% at 50% 46%,#ffffff14,#0000 70%);animation:st-breathe 7s ease-in-out infinite}
@keyframes st-breathe{50%{transform:translateX(3%) scale(1.04);opacity:.7}}
.st-world{position:absolute;inset:0;transform:scale(calc(1 - var(--c) * .14));transform-origin:58% 52%}

/* логотип: в покое по центру; на первом звонке уходит влево-вверх и уменьшается; на третьей сцене гаснет */
.st-logo{--w:min(66vw,1040px);position:absolute;left:50%;top:44%;width:var(--w);aspect-ratio:1280/427;
  transform:translate(calc(-50% - var(--a) * 21vw),calc(-50% - var(--a) * 17vh)) scale(calc(1 - var(--a) * .5));
  opacity:calc(1 - var(--c))}
.st-logo>*{position:absolute}
.st-logo img{display:block}
.st-logo .lg-o img{width:100%;height:100%}
.st-logo .lg-ringo{left:9.06%;top:24.6%;width:40.47%;height:51.76%}
.st-logo .lg-o{left:48.91%;top:35.13%;width:10.63%;height:30.68%}
.st-logo .lg-ads{left:58.98%;top:26.46%;width:33.13%;height:39.34%}
.st-logo .lg-tag{left:48.67%;top:70.02%;width:42.42%;height:8.67%;opacity:calc(1 - var(--a) * 1.6)}
.lg-o i{position:absolute;inset:0;border-radius:50%;border:2px solid #fff;opacity:0;pointer-events:none}
.rstory.ringing .lg-o img{animation:st-buzz .11s linear infinite}
.rstory.ringing .lg-o i{animation:st-ring 1.6s cubic-bezier(.2,.6,.3,1) infinite}
.rstory.ringing .lg-o i:nth-child(3){animation-delay:.53s}
.rstory.ringing .lg-o i:nth-child(4){animation-delay:1.06s}
@keyframes st-buzz{25%{transform:translate(1.5%,-1%) rotate(-4deg)}75%{transform:translate(-1.5%,1%) rotate(4deg)}}
@keyframes st-ring{0%{transform:scale(1);opacity:.75}100%{transform:scale(3.4);opacity:0}}

/* телефон: из глубины справа, разворачивается к зрителю; мышь его наклоняет */
.st-phone{--mx:0;--my:0;position:absolute;left:62%;top:50%;width:min(22vw,330px);aspect-ratio:620/1269;
  transform:translate(-50%,-50%) translate3d(calc((1 - var(--a)) * 26vw),calc((1 - var(--a)) * 12vh),calc((1 - var(--a)) * -420px))
   rotateY(calc((1 - var(--a)) * -58deg + var(--mx) * 9deg)) rotateX(calc(var(--my) * -7deg));
  opacity:min(1,calc(var(--a) * 2.2));filter:drop-shadow(0 40px 60px #000c)}
.st-phone>img{position:relative;display:block;width:100%;height:100%;z-index:2;pointer-events:none}
.rcall{position:absolute;left:4.27%;right:4.27%;top:1.74%;bottom:1.74%;border-radius:13.5%/6.4%;overflow:hidden;container-type:inline-size;
  background:linear-gradient(170deg,#1b1b1d,#3a3a3e 60%,#6c6c72);color:#fff;text-align:center;opacity:calc(.25 + var(--a) * .75)}
.rcall .sb{display:flex;justify-content:space-between;padding:5.2cqw 10cqw 0 12cqw;font-size:3.9cqw;font-weight:600}
.rcall .who{margin-top:22cqw;font-size:4.2cqw;color:#ffffffb0}
.rcall .name{margin-top:2cqw;font-size:9.4cqw;font-weight:600;letter-spacing:-.02em;line-height:1.05}
.rcall .src{margin-top:2.4cqw;font-size:4cqw;color:#ffffffb0}
.rcall .btns{position:absolute;left:0;right:0;bottom:16cqw;display:flex;justify-content:space-around;padding:0 9cqw}
.rcall .btns span{display:grid;justify-items:center;gap:2.4cqw;font-size:3.6cqw;color:#ffffffd0}
.rcall .btns b{display:grid;place-items:center;width:19cqw;height:19cqw;border-radius:50%;background:#ff3b30}
.rcall .btns span+span b{background:#34c759}
.rcall .btns svg{width:8cqw;height:8cqw;fill:#fff}
.rcall .btns span:first-child svg{transform:rotate(135deg)}
.rstory.ringing .rcall .btns span+span b{animation:st-pulse 1.2s ease-in-out infinite}
@keyframes st-pulse{50%{box-shadow:0 0 0 3cqw #34c75933}}

/* заявки: три карточки на разной глубине вокруг телефона */
.st-card{--dx:0;--dy:0;--z:0;position:absolute;left:62%;top:50%;width:min(19vw,290px);display:flex;gap:12px;align-items:flex-start;
  padding:14px 16px;border-radius:18px;background:#ffffffeb;color:#111;box-shadow:0 24px 50px #0008;font-size:14px;line-height:1.3;
  --k:clamp(0,calc((var(--b) - var(--t)) * 3.2),1);
  opacity:calc(var(--k) * (1 - var(--c) * .25));
  transform:translate(-50%,-50%) translate3d(calc(var(--dx) + var(--mx,0) * var(--z) * .6px),calc(var(--dy) + (1 - var(--k)) * 40px),0) scale(calc(.86 + var(--k) * .14))}
.st-card i{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#111;color:#fff;font-style:normal;font-size:16px}
.st-card b{display:block;font-size:13px}
.st-card small{color:#666;font-weight:500;margin-left:6px}
.st-card p{margin:2px 0 0}
.c1{--t:0;--dx:19vw;--dy:-21vh;--z:18}
.c2{--t:.28;--dx:19vw;--dy:5vh;--z:30}
.c3{--t:.56;--dx:-15vw;--dy:17vh;--z:12}

/* реклама за звонком: макет слева, «Campaign live», импульс по проводу к телефону */
.st-ad{position:absolute;left:24%;top:52%;width:min(20vw,300px);aspect-ratio:4/5;border-radius:14px;overflow:hidden;box-shadow:0 30px 60px #000a;
  transform:translate(-50%,-50%) translateX(calc((1 - var(--c)) * -8vw)) scale(calc(.9 + var(--c) * .1));opacity:var(--c)}
.fb{position:absolute;inset:0;display:flex;flex-direction:column;background:#f4f4f4;color:#111;container-type:inline-size}
.fb-h{display:flex;gap:3cqw;align-items:center;padding:4cqw}
.fb-h i{width:10cqw;height:10cqw;border-radius:50%;background:#111}
.fb-h b{font-size:4.6cqw;line-height:1.15}.fb-h small{display:block;font-weight:500;color:#777;font-size:3.6cqw}
.fb-img{position:relative;flex:1;margin:0;background:linear-gradient(150deg,#1a1a1a,#3c3c3c);color:#fff;padding:7cqw}
.fb-img span{display:block;font-family:Anton,Impact,sans-serif;font-size:13cqw;line-height:.95;text-transform:uppercase}
.fb-img em{position:absolute;right:6cqw;bottom:6cqw;font-style:normal;font-family:Anton,Impact,sans-serif;font-size:15cqw;line-height:1;background:#fff;color:#111;padding:1cqw 3cqw;border-radius:2cqw}
.fb-cta{display:flex;justify-content:space-between;align-items:center;padding:4cqw}
.fb-cta span{font-size:4cqw;font-weight:600}.fb-cta small{display:block;color:#777;font-weight:500}
.fb-cta b{font-size:4cqw;padding:2.6cqw 4.4cqw;border-radius:2cqw;background:#111;color:#fff}
.st-ad .live{position:absolute;right:10px;top:12px;padding:6px 10px;border-radius:99px;background:#000c;color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em}
.st-ad .live::before{content:'';display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#fff;animation:st-blink 1s steps(2) infinite}
@keyframes st-blink{50%{opacity:.2}}
.st-wire{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:var(--c)}
.st-wire path{fill:none;stroke:#ffffff59;stroke-width:1.5;stroke-dasharray:3 6}
.st-wire circle{fill:#fff}

/* подписи сцен и выход к услугам */
.st-copy{position:absolute;left:0;right:0;bottom:7vh;display:grid;justify-items:center;gap:14px;text-align:center;padding:0 16px}
.st-cap{grid-area:1/1;margin:0;font-size:clamp(15px,1.2vw,19px);color:var(--mute);letter-spacing:.02em;transition:opacity .4s,transform .4s}
.st-cap:not(.on){opacity:0;transform:translateY(8px)}
.st-cap b{color:var(--fg);font-weight:700;margin-right:10px;letter-spacing:.12em;font-size:.8em}
.st-cta{display:flex;gap:18px;align-items:center;opacity:calc(var(--c) * 1.2 - .2)}
.st-cta .btn{pointer-events:auto}
.st-skip{position:absolute;right:24px;top:84px;color:var(--mute);font-size:14px;text-decoration:none;border-bottom:1px solid #ffffff40}
.st-skip:hover{color:#fff}
.st-dots{position:absolute;left:24px;top:50%;display:grid;gap:10px;transform:translateY(-50%)}
.st-dots i{width:6px;height:6px;border-radius:50%;background:#ffffff38;transition:background .3s,transform .3s}
.st-dots i.on{background:#fff;transform:scale(1.4)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* телефон: та же история, вертикально; наведения нет — всё от свайпа */
@media (max-width:760px){
  .rstory{height:460vh}
  .st-logo{--w:88vw;top:40%;transform:translate(-50%,calc(-50% - var(--a) * 23vh)) scale(calc(1 - var(--a) * .38))}
  .st-phone{left:50%;top:52%;width:40vw;transform:translate(-50%,-50%) translate3d(0,calc((1 - var(--a)) * 30vh),calc((1 - var(--a)) * -300px)) rotateY(calc((1 - var(--a)) * -40deg))}
  .st-card{left:50%;top:52%;width:66vw;font-size:13px;padding:11px 13px}
  .c1{--dx:10vw;--dy:-25vh}.c2{--dx:12vw;--dy:-2vh}.c3{--dx:-8vw;--dy:20vh}
  .st-ad .live{font-size:9px;padding:4px 7px;white-space:nowrap;right:6px;top:6px}
  .st-ad{left:25%;top:17%;width:38vw;transform:translate(-50%,-50%) translateY(calc((1 - var(--c)) * -6vh))}
  .st-world{transform-origin:50% 60%}
  .st-dots{display:none}
  .st-skip{top:76px;right:16px}
  .st-cta{flex-direction:column;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  html:not(.motion) .rstory{height:auto}
  html:not(.motion) .st-stage{position:relative;height:100vh;height:100svh}
  html:not(.motion) .st-light{animation:none}
}