/* Анимация логотипа Service plus. Запускается классом .play на .la-stage.
   Все размеры в единицах контейнера (cqw/cqh), поэтому ролик масштабируется под любой экран. */
.la-stage{--yellow-a:#ffe44d;--yellow-b:#ffd21f;--yellow-c:#f3bf00;--ink:#12303a;
  position:relative;overflow:hidden;container-type:size;width:100%;height:100%;
  background:radial-gradient(70% 80% at 50% 42%,var(--yellow-a) 0%,var(--yellow-b) 55%,var(--yellow-c) 100%)}
.la-stage *{box-sizing:border-box}

/* полосы света слева */
.la-streaks i{position:absolute;left:-10%;top:var(--y);width:var(--w);height:.7cqh;border-radius:99px;opacity:0;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95) 85%,#fff);filter:drop-shadow(0 0 .8cqh rgba(255,255,255,.9))}
.play .la-streaks i{animation:la-streak 1.15s cubic-bezier(.2,.7,.2,1) var(--d) both}
@keyframes la-streak{0%{opacity:0;transform:translateX(-30%)}25%{opacity:1}100%{opacity:0;transform:translateX(75%)}}

/* сборка: знак + надпись по центру */
.la-lockup{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3.2cqh;transform:translateY(5.5cqh)}
.play .la-lockup{animation:la-lift .9s cubic-bezier(.3,.7,.2,1) 2.35s both}
@keyframes la-lift{from{transform:translateY(5.5cqh)}to{transform:translateY(0)}}

.la-mark{position:relative;width:min(30cqw,52cqh)}
.la-mark svg{display:block;width:100%;height:auto;overflow:visible}
.la-shadow{position:absolute;left:12%;right:12%;bottom:-3%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(90,50,0,.32),rgba(90,50,0,0));opacity:0;filter:blur(.6cqh)}
.play .la-shadow{animation:la-fade .9s ease 1.7s both}
@keyframes la-fade{from{opacity:0}to{opacity:1}}

/* линии знака прорисовываются */
.la-p,.la-c{stroke-dasharray:1;stroke-dashoffset:1}
.la-p{opacity:0}
.play .la-p{animation:la-draw .8s cubic-bezier(.45,.05,.2,1) both,la-on .01s linear both}
.play .la-p.p3{animation-delay:.35s,.35s}.play .la-p.p2{animation-delay:.55s,.55s}
.play .la-p.p1{animation-delay:.75s,.75s}.play .la-p.po{animation-delay:.95s,.95s;animation-duration:1s,.01s}
@keyframes la-draw{to{stroke-dashoffset:0}}
@keyframes la-on{to{opacity:1}}

/* комета: короткий яркий отрезок, едущий по линии вместе с её кончиком */
.la-c{stroke-dasharray:.07 1.2;stroke-dashoffset:.07;opacity:0}
.play .la-c{animation:la-comet .8s cubic-bezier(.45,.05,.2,1) both}
.play .la-c.p3{animation-delay:.35s}.play .la-c.p2{animation-delay:.55s}.play .la-c.p1{animation-delay:.75s}
.play .la-c.po{animation-delay:.95s;animation-duration:1s}
@keyframes la-comet{0%{stroke-dashoffset:.07;opacity:1}88%{opacity:1}100%{stroke-dashoffset:-1;opacity:0}}

/* вспышки на концах */
.sp{opacity:0;transform-box:fill-box;transform-origin:center}
.play .sp{animation:la-spark .6s ease-out both}
.play .sp.s3{animation-delay:1.05s}.play .sp.s2{animation-delay:1.25s}.play .sp.s1{animation-delay:1.45s}.play .sp.so{animation-delay:1.75s}
@keyframes la-spark{0%{opacity:0;transform:scale(.3)}35%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(.8)}}

/* световая дуга вокруг дома */
.la-swirl,.la-swirl2{stroke-dasharray:.38 1.4;stroke-dashoffset:.38;opacity:0}
.la-swirl2{opacity:0}
.play .la-swirl,.play .la-swirl2{animation:la-swirl 1.25s cubic-bezier(.35,.1,.2,1) 1.65s both}
@keyframes la-swirl{0%{stroke-dashoffset:.38;opacity:0}15%{opacity:1}80%{opacity:.9}100%{stroke-dashoffset:-1.02;opacity:0}}

/* знак «зажигается» после сборки */
.la-lines{filter:drop-shadow(0 0 0 rgba(255,255,255,0))}
.play .la-lines{animation:la-shine 1.1s ease 1.9s both}
@keyframes la-shine{0%{filter:drop-shadow(0 0 0 rgba(255,255,255,0)) brightness(1)}40%{filter:drop-shadow(0 0 1.6cqh rgba(255,255,255,.95)) brightness(1.25)}100%{filter:drop-shadow(0 .6cqh .9cqh rgba(120,40,40,.25)) brightness(1)}}

/* надпись */
.la-word{overflow:hidden;padding:0 1cqw .6cqh;opacity:0}
.la-word span{display:block;font:800 clamp(14px,11.5cqh,260px)/1.08 "Onest","SF Pro Display",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;letter-spacing:-.025em;color:var(--ink);
  background:linear-gradient(100deg,var(--ink) 0 42%,#fff 50%,var(--ink) 58% 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.play .la-word{animation:la-word .85s cubic-bezier(.2,.8,.2,1) 2.5s both}
.play .la-word span{animation:la-word-in .85s cubic-bezier(.2,.8,.2,1) 2.5s both,la-glint 1s ease 3.3s both}
@keyframes la-word{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes la-word-in{from{transform:translateY(55%);letter-spacing:.04em}to{transform:translateY(0);letter-spacing:-.025em}}
@keyframes la-glint{from{background-position:100% 0}to{background-position:0 0}}

/* без анимации: сразу итоговая картинка */
@media (prefers-reduced-motion:reduce){
  .la-p{opacity:1;stroke-dashoffset:0}.la-word{opacity:1}.la-shadow{opacity:1}.la-lockup{transform:none}
  .la-word span{-webkit-text-fill-color:var(--ink);background:none}
}