/* Алпатыч — ролики блока «Как это работает» (ORDER-199). Шрифт экранов продукта — Golos Text страницы. */
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400 900;font-display:swap;src:url("../golos-text.woff2") format("woff2")}
.alp-rolik{position:relative;width:100%;max-width:390px;margin:0 auto;overflow:hidden;background:#E8EAEF;border-radius:18px;aspect-ratio:1/1;font-family:"Golos Text",system-ui,sans-serif}
.alp-rolik[data-box="laptop"]{max-width:none;aspect-ratio:1440/900}
/* экран телефона целиком: на телефоне — во весь экран, на ноутбуке — телефоном по центру (ORDER-219) */
.alp-rolik[data-box="ekran"]{max-width:none;width:min(100%,430px,calc((100vh - 32px) * 390 / 844));aspect-ratio:390/844;border-radius:0;background:transparent}
.alp-scroll{position:relative}
.alp-scroll .alp-sticky{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:16px}
.alp-rolik .alp-poster{display:block;width:100%;height:auto;position:absolute;inset:0;z-index:3;transition:opacity .25s}
.alp-rolik .alp-poster.off{opacity:0;pointer-events:none}
.alp-rolik video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:4;opacity:0;transition:opacity .25s}
.alp-rolik video.on{opacity:1}
.alp-rolik .alp-live{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden}
.alp-rolik .alp-cam{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;transform-style:preserve-3d}
.alp-rolik .alp-dev{position:absolute;box-sizing:border-box;padding:14px;background:#14171A;overflow:hidden;will-change:transform;
  box-shadow:0 2px 0 1px rgba(255,255,255,.06) inset,0 30px 60px -30px rgba(20,23,26,.45),0 14px 28px -16px rgba(20,23,26,.35);will-change:opacity}
.alp-rolik .alp-scr{position:absolute;left:14px;top:14px;transform-origin:0 0;overflow:hidden;background:#E8EAEF;contain:layout paint}
@media (prefers-reduced-motion:reduce){.alp-rolik .alp-live,.alp-rolik video{display:none}.alp-rolik .alp-poster.off{opacity:1}}
.alp-rolik .alp-stamp{position:absolute;inset:0;display:none;flex-direction:column;gap:14px;align-items:center;justify-content:center;background:rgba(20,23,26,.38);z-index:5;pointer-events:none}
.alp-rolik .alp-stamp b{text-wrap:balance;text-align:center;padding:0 28px;line-height:1.25;display:none;color:#FFFFFF;font-size:22px;font-weight:800;letter-spacing:-.01em;text-shadow:0 2px 12px rgba(20,23,26,.4)}
.alp-rolik .alp-stamp i{display:flex;align-items:center;justify-content:center;width:124px;height:124px;border-radius:50%;background:#FFFFFF;color:#1A1C1E;box-shadow:0 18px 40px -16px rgba(20,23,26,.5)}
.alp-rolik .alp-stamp svg{width:66px;height:66px}
/* финал со знаком Алпатыча — фраза поверх экрана: затемнение плотнее, чтобы читалась */
.alp-rolik .alp-stamp[data-icon="logo"]{background:rgba(20,23,26,.8)}
.alp-rolik .alp-stamp[data-icon="logo"] b{font-size:21px;max-width:340px}
.alp-rolik .alp-stamp small{text-wrap:balance;display:none;max-width:320px;padding:0 28px;text-align:center;color:#fff;font-size:16px;line-height:1.35;font-weight:500;text-shadow:0 2px 10px rgba(20,23,26,.4)}
/* сцена от прокрутки: стрелки вниз, когда человек не листает (класс ставит roliki.js) */
.alp-vniz{position:absolute;left:50%;bottom:22px;z-index:6;display:flex;flex-direction:column;align-items:center;margin-left:-22px;width:44px;height:44px;
  border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 6px 18px -6px rgba(20,23,26,.35);opacity:0;transition:opacity .4s;pointer-events:none}
.alp-vniz i{display:block;width:10px;height:10px;margin-top:-3px;border-right:2.5px solid #2F6B3A;border-bottom:2.5px solid #2F6B3A;transform:rotate(45deg)}
.alp-vniz i:first-child{margin-top:12px}
.alp-zhdu .alp-vniz{opacity:1}
@media (prefers-reduced-motion:no-preference){.alp-zhdu .alp-vniz{animation:alp-vniz 1.4s ease-in-out infinite}
  @keyframes alp-vniz{50%{transform:translateY(6px)}}}
/* сцена от прокрутки досмотрена (`data-posle="video"`): обёртка схлопывается, кнопка ▶ — пересмотреть */
.alp-scroll.alp-skip{height:auto!important}
.alp-scroll.alp-skip .alp-sticky{position:static;min-height:0}
.alp-play{position:absolute;left:50%;bottom:7%;z-index:7;width:72px;height:72px;margin:0 0 0 -36px;border:0;border-radius:50%;
  background:rgba(255,255,255,.94);color:#2F6B3A;box-shadow:0 12px 30px -10px rgba(20,23,26,.5);cursor:pointer;display:flex;align-items:center;justify-content:center}
.alp-play svg{width:34px;height:34px;fill:currentColor;margin-left:4px}
.alp-play[hidden]{display:none}
.alp-play:focus-visible{outline:3px solid #2F6B3A;outline-offset:3px}
/* досмотрено: фраза и знак уходят, ▶ встаёт на место знака — того же размера, по центру */
.alp-gotovo .alp-stamp i,.alp-gotovo .alp-stamp b,.alp-gotovo .alp-stamp small{visibility:hidden}
.alp-gotovo .alp-play{top:var(--znak-y,50%);bottom:auto;width:124px;height:124px;margin:-62px 0 0 -62px}
.alp-gotovo .alp-play svg{width:58px;height:58px;margin-left:8px}