/* Экран 00 · Заставка при входе (≈3 секунды) и плавное появление первого экрана */
html.sp-lock,html.sp-lock body{overflow:hidden}
#splash{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;overflow:hidden;background:radial-gradient(120% 90% at 50% 42%,#3340d6 0%,#2531BE 42%,#121766 100%);color:#fff;cursor:pointer;transition:opacity .7s ease .2s;animation:spKill .4s 12s forwards}

/* Фон: мягкое северное сияние, светящиеся частицы и уходящая в перспективу сетка */
.sp-aur{position:absolute;border-radius:50%;pointer-events:none;will-change:transform}
.sp-aur1{width:58vmax;height:58vmax;left:52%;top:46%;background:radial-gradient(closest-side,rgba(252,80,37,.42),transparent);animation:spAur1 6s ease-in-out infinite alternate}
.sp-aur2{width:64vmax;height:64vmax;left:-18%;top:-24%;background:radial-gradient(closest-side,rgba(140,110,255,.45),transparent);animation:spAur2 7s ease-in-out infinite alternate}
.sp-aur3{width:44vmax;height:44vmax;left:18%;top:58%;background:radial-gradient(closest-side,rgba(90,200,255,.22),transparent);animation:spAur3 8s ease-in-out infinite alternate}
@keyframes spAur1{from{transform:translate(-50%,-50%) scale(.9)}to{transform:translate(-62%,-40%) scale(1.15)}}
@keyframes spAur2{to{transform:translate(12%,10%) scale(1.1)}}
@keyframes spAur3{to{transform:translate(18%,-14%) scale(1.2)}}
.sp-parts{position:absolute;inset:0;pointer-events:none}
.sp-p{position:absolute;bottom:-20px;border-radius:50%;background:radial-gradient(circle,#fff 0,rgba(255,255,255,.85) 30%,rgba(255,255,255,0) 70%);opacity:0;animation:spRise linear infinite;will-change:transform,opacity}
.sp-p.o{background:radial-gradient(circle,#FFD2C2 0,rgba(252,80,37,.85) 35%,rgba(252,80,37,0) 70%)}
@keyframes spRise{0%{opacity:0;transform:translate3d(0,0,0) scale(.6)}15%{opacity:var(--o,.7)}80%{opacity:var(--o,.7)}100%{opacity:0;transform:translate3d(var(--dx,20px),-105vh,0) scale(1)}}
.sp-grid{position:absolute;left:-10%;right:-10%;bottom:-6%;height:46%;pointer-events:none;opacity:0;background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);background-size:56px 56px;transform:perspective(420px) rotateX(62deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(to top,#000,transparent 85%);mask-image:linear-gradient(to top,#000,transparent 85%);animation:spIn 1.2s .2s forwards,spGridRun 2.4s linear infinite}
@keyframes spGridRun{to{background-position:0 56px,0 0}}

/* Сцена */
.sp-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:28px;width:min(600px,84vw)}
.sp-gwrap{position:relative;width:min(230px,50vw);display:grid;place-items:center}
.sp-globe{width:100%;height:auto;overflow:visible;position:relative;transition:transform .8s cubic-bezier(.7,0,.2,1),opacity .5s;animation:spFloat 3.2s ease-in-out .9s infinite alternate}
@keyframes spFloat{to{transform:translateY(-6px)}}
.sp-halo{position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(.4);background:radial-gradient(closest-side,rgba(255,255,255,.28),rgba(120,140,255,.12) 55%,transparent);opacity:0;animation:spHalo 1.2s .25s cubic-bezier(.2,.7,.2,1) forwards,spBreath 2.6s 1.45s ease-in-out infinite alternate}
@keyframes spHalo{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes spBreath{to{opacity:.55;transform:translate(-50%,-50%) scale(1.08)}}
.sp-sphere > *{stroke-dasharray:1;stroke-dashoffset:1;opacity:0;animation:spDraw .8s cubic-bezier(.6,.05,.3,1) .15s both}
.sp-sphere > :nth-child(2){animation-delay:.27s}
.sp-sphere > :nth-child(3){animation-delay:.35s}
.sp-sphere > :nth-child(4){animation-delay:.43s}
.sp-sphere > :nth-child(5){animation-delay:.51s}
.sp-sphere > :nth-child(6){animation-delay:.59s}
.sp-orbit{stroke-dasharray:1;stroke-dashoffset:1;opacity:0;animation:spDraw .9s .45s cubic-bezier(.6,.05,.3,1) both}
.sp-comet{opacity:0;animation:spIn .35s 1.02s forwards}
.sp-ring{transform-origin:120px 105px;transform-box:view-box;opacity:0;animation:spIn .6s .9s forwards,spSpin 14s linear infinite}

/* Вспышка в финале */
.sp-burst{position:absolute;left:50%;top:50%;width:100%;aspect-ratio:1;border-radius:50%;border:3px solid #FC5025;transform:translate(-50%,-50%) scale(.3);opacity:0;pointer-events:none}
.sp-burst2{border-color:rgba(255,255,255,.7);border-width:2px}
#splash.boom .sp-burst{animation:spBoom .9s cubic-bezier(.2,.7,.2,1) forwards}
#splash.boom .sp-burst2{animation-delay:.12s}
@keyframes spBoom{0%{opacity:.95;transform:translate(-50%,-50%) scale(.4)}100%{opacity:0;transform:translate(-50%,-50%) scale(4.2)}}

/* Логотип: буквы поднимаются по очереди (задержки ставит скрипт) */
.sp-word{width:100%;height:auto;overflow:visible}
.sp-word path{opacity:0;transform-box:fill-box;transform-origin:50% 100%;transform:translateY(46px) scale(.9);animation:spLetter .7s cubic-bezier(.2,.8,.2,1.08) forwards;animation-delay:calc(.95s + var(--i,0) * 55ms)}
@keyframes spLetter{to{opacity:1;transform:none}}
.sp-word.lit{animation:spLit 1.4s ease-in-out}
@keyframes spLit{40%{filter:drop-shadow(0 0 14px rgba(255,255,255,.55)) drop-shadow(0 0 2px rgba(255,255,255,.9))}}
#splash .lg .b,.sp-fly .b{fill:#fff}
#splash .lg .o,.sp-fly .o{fill:#FC5025}
.sp-fly path{opacity:1!important;transform:none!important;animation:none!important}

/* Прогресс и подписи */
.sp-foot{display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0;transform:translateY(8px);animation:spFoot .5s 1.2s cubic-bezier(.2,.7,.2,1) forwards;transition:opacity .3s}
@keyframes spFoot{to{opacity:1;transform:none}}
.sp-row{display:flex;align-items:center;gap:12px}
.sp-bar{position:relative;width:220px;height:4px;border-radius:4px;background:rgba(255,255,255,.16);overflow:visible}
.sp-bar i{position:relative;display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,#FC5025,#FF9A6E,#FC5025);background-size:200% 100%;animation:spShine 1.2s linear infinite;box-shadow:0 0 12px rgba(252,80,37,.7)}
.sp-bar i::after{content:"";position:absolute;right:-5px;top:50%;width:10px;height:10px;border-radius:50%;transform:translateY(-50%);background:#fff;box-shadow:0 0 10px 3px rgba(255,170,140,.9)}
.sp-pct{min-width:42px;font:700 14px/1 var(--font);font-variant-numeric:tabular-nums;color:#fff;text-align:right}
.sp-msg{font:500 15px/1.3 var(--font);color:#D6DAFF;min-height:1.3em;text-align:center;letter-spacing:.01em;transition:opacity .22s,transform .22s,filter .22s}
.sp-msg.sw{opacity:0;transform:translateY(6px);filter:blur(3px)}
@keyframes spShine{to{background-position:-200% 0}}
/* линия проявляется вместе с отрисовкой — иначе круглый конец штриха успевает мелькнуть точкой */
@keyframes spDraw{0%{stroke-dashoffset:1;opacity:0}12%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes spIn{to{opacity:1}}
@keyframes spSpin{to{transform:rotate(360deg)}}
@keyframes spKill{to{opacity:0;visibility:hidden;pointer-events:none}}

/* Уход заставки */
#splash.out{opacity:0;pointer-events:none}
#splash.out .sp-globe{transform:scale(1.5);opacity:0}
#splash.out .sp-foot{opacity:0}
#splash.out .sp-halo{opacity:0;transition:opacity .4s}

/* Появление первого экрана после заставки */
html.sp-run .hdr,html.sp-run .hero .h1t,html.sp-run .hero .lead,html.sp-run .orbit-search,html.sp-run .hero .quick,html.sp-run .author-line,html.sp-run .hero .issue,html.sp-run .hero-orbits{opacity:0;transform:translateY(18px)}
html.sp-run .hdr{transform:translateY(-8px)}
html.sp-run .hero .h1logo{opacity:0}
html.sp-landed .hero .h1logo{opacity:1}
html.sp-done .hdr,html.sp-done .hero .h1t,html.sp-done .hero .lead,html.sp-done .orbit-search,html.sp-done .hero .quick,html.sp-done .author-line,html.sp-done .hero .issue,html.sp-done .hero-orbits{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
html.sp-done .hdr{transition-delay:.25s}
html.sp-done .hero .h1t{transition-delay:.35s}
html.sp-done .hero .lead{transition-delay:.85s}
html.sp-done .orbit-search{transition-delay:.95s}
html.sp-done .hero .quick{transition-delay:1.05s}
html.sp-done .author-line{transition-delay:1.12s}
html.sp-done .hero .issue{transition-delay:.7s}
html.sp-done .hero-orbits{transition-delay:.6s;transition-duration:1.4s}
html.sp-run .hero-glow{opacity:0}
html.sp-done .hero-glow{opacity:1;transition:opacity 1.6s .4s}

@media (max-width:560px){
  .sp-bar{width:170px}
  .sp-msg{font-size:14px}
  .sp-grid{background-size:40px 40px}
}
@media (prefers-reduced-motion:reduce){
  #splash *,#splash *::before,#splash *::after{animation:none!important;transition:none!important}
  .sp-sphere > *,.sp-orbit{stroke-dashoffset:0;opacity:1}
  .sp-word path,.sp-foot,.sp-comet,.sp-ring,.sp-halo{opacity:1;transform:none}
  .sp-halo{transform:translate(-50%,-50%)}
  .sp-grid{opacity:1}
  .sp-p{display:none}
}

/* ---------- Плавность заставки ----------
   Всё, что движется каждый кадр, — только transform и opacity: их рисует видеокарта, главный поток браузера свободен
   для загрузки страницы. Сетка, полоса загрузки и подсветка логотипа больше не перерисовываются покадрово. */
#splash{contain:strict}
.sp-grid{--cell:56px;background:none;overflow:hidden}
.sp-grid::before{content:"";position:absolute;left:0;right:0;top:calc(var(--cell) * -1);bottom:0;background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);background-size:var(--cell) var(--cell);animation:spGridMove 2.4s linear infinite;will-change:transform}
@keyframes spGridMove{to{transform:translate3d(0,var(--cell),0)}}
.sp-bar{--bw:220px}
.sp-bar i{width:100%;transform:scaleX(var(--p,0));transform-origin:0 50%;will-change:transform;overflow:hidden;background:linear-gradient(90deg,#FC5025,#FF9A6E);animation:none}
.sp-bar i::after{content:none}
.sp-bar i::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));transform:translateX(-100%);animation:spShineMove 1.2s linear infinite}
@keyframes spShineMove{to{transform:translateX(100%)}}
.sp-knob{position:absolute;left:-5px;top:-3px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px rgba(255,170,140,.9);transform:translate3d(calc(var(--p,0) * var(--bw)),0,0);will-change:transform;pointer-events:none}
.sp-pct{width:42px;min-width:0;contain:layout paint}
.sp-msg{transition:opacity .22s,transform .22s}
.sp-msg.sw,.sp-msg.sp-swap{filter:none}
.sp-word{position:relative}
.sp-word.lit{animation:none}
.sp-wglow{position:absolute;left:-4%;right:-4%;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.34),rgba(255,255,255,.1) 55%,rgba(255,255,255,0));opacity:0;will-change:opacity}
.sp-wglow.on{animation:spGlow 1.4s ease-in-out}
@keyframes spGlow{40%{opacity:1}}
@media (max-width:560px){.sp-grid{--cell:40px}.sp-bar{--bw:170px}}
/* пока идёт заставка, анимации страницы под ней стоят на паузе — они всё равно не видны, а кадры отнимают */
html.sp-run .hero,html.sp-run .hero *,html.sp-run .hero *::before,html.sp-run .hero *::after,html.sp-run .ticker *,html.sp-run .hero-orbits,html.sp-run .hero-glow{animation-play-state:paused!important}

/* буквы логотипа — отдельные слои на время подъёма (см. splash.js) */
.sp-wwrap{position:relative;width:100%}
.sp-word.sp-static path{animation:none!important;opacity:1!important;transform:none!important}
.sp-word.sp-hide{visibility:hidden}
.sp-l{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;opacity:0;transform:translate3d(0,34.33%,0) scale(.9);animation:spLetter .7s cubic-bezier(.2,.8,.2,1.08) forwards;animation-delay:calc(.95s + var(--i,0) * 55ms);will-change:transform,opacity;pointer-events:none}

/* короткая заставка — переход из кабинета (?sp=q): то же движение, только быстрее */
#splash.sp-quick .sp-sphere > *,#splash.sp-quick .sp-orbit{animation-duration:.4s;animation-delay:0s}
#splash.sp-quick .sp-l,#splash.sp-quick .sp-word path{animation-duration:.45s;animation-delay:calc(.12s + var(--i,0) * 22ms)}
#splash.sp-quick .sp-foot{animation-delay:.15s}
#splash.sp-quick .sp-comet{animation-delay:.4s}
#splash.sp-quick .sp-halo{animation-delay:0s,.6s}
#splash.sp-quick .sp-ring{animation-delay:.2s,0s}
#splash.sp-quick .sp-grid{animation-delay:0s}
/* Заставка закрывает и место под полосу прокрутки (scrollbar-gutter: stable), иначе справа видна светлая полоса страницы */
#splash{right:auto;width:100vw}
html.sp-run,html.sp-lock{background:#121766}