/* ============================================================================ СТАРТОВАЯ ЗАСТАВКА ГЛАВНОЙ ЛЕНТЫ Clike.ru Подключается ТОЛЬКО на главной («/» и ?page=home, флаг DC_PUB_FEED) — см. includes/clike_feed_splash.php и includes/shell/page_header.php. Это НЕ картинка и НЕ видео: каждый элемент сцены — отдельный слой DOM/SVG/Canvas. Слои снизу вверх: 0 __backdrop — атмосферный градиентный холст 2 __grid — перспективная сетка (десктоп, низ экрана) 3 __background-ui — панели интерфейса и карточки публикаций (декор, aria-hidden) 4 __wave — цифровая волна (canvas, мобильный низ экрана) 6 __particles — светящиеся частицы (canvas) 10 __center — логотип, орбиты, шлейф, clike.ru, статус, прогресс Адаптив по стандарту проекта (CLAUDE.md): desktop-first, брейкпоинты 1100/767/420 + ландшафт, резиновая сетка и clamp() вместо per-breakpoint хардкодов px. Заставка всегда тёмная (это фирменный стартовый экран), НЕЗАВИСИМО от темы сайта: тема пользователя открывается уже под ней, после закрытия. ========================================================================== */ :root{ --clike-splash-bg:#050505; --clike-splash-orange:#ff7300; --clike-splash-orange-bright:#ffb830; --clike-splash-red:#ff3f00; --clike-splash-white:#f7f7f7; --clike-splash-muted:rgba(255,255,255,.78); /* Поверхности декоративных карточек — те же, что у реальной карточки ленты (pub-feed.css: --pub-panel/--pub-bd/--pub-radius), чуть светлее ровно настолько, чтобы читаться сквозь размытие на чёрном холсте заставки. */ --clike-splash-panel:rgba(26,36,50,.98); --clike-splash-panel-bd:rgba(255,255,255,.09); /* Скелет внутри карточек намеренно контрастный: весь слой уже приглушён собственной прозрачностью (--clike-deck-op) и размытием, и без этого силуэт карточки исчезал. */ --clike-splash-skeleton:rgba(255,255,255,.34); --clike-splash-z:2147483000; } /* Без boot-скрипта (JS выключен, сессия уже видела заставку, возврат Back) класс .clike-splash-on на не появляется — разметка заставки просто не существует визуально и не участвует в раскладке. Лента при этом полностью работоспособна. */ html:not(.clike-splash-on) .clike-feed-splash{display:none!important} /* ============================================================================ 1. БЛОКИРОВКА ВЗАИМОДЕЙСТВИЯ, ПОКА ЗАСТАВКА ОТКРЫТА Класс снимается контроллером при закрытии — невидимого слоя поверх интерфейса и заблокированной прокрутки после заставки не остаётся. ========================================================================== */ html.clike-splash-active, body.clike-splash-active{ overflow:hidden!important; overscroll-behavior:none!important} body.clike-splash-active{touch-action:none} /* ============================================================================ 2. ПОДГОТОВКА ЛЕНТЫ ПОД ЗАСТАВКОЙ И ПЕРЕХОД К НЕЙ Шапка и нижнее меню НЕ ПЕРЕДЕЛЫВАЮТСЯ: здесь только временная прозрачность на время показа заставки. Все правила живут под .clike-splash-on и гаснут вместе с .clike-feed-is-ready — после закрытия от заставки не остаётся ни одного стиля. ========================================================================== */ /* Заставка анимирует ТОЛЬКО контент ленты. Постоянные элементы оболочки — нижняя капсула .pnav, боковое меню, шапка и подшапка — из этой группы убраны намеренно: они живут на всех страницах, а не только на ленте, и гасить их на КАЖДОЙ полной загрузке нельзя. Из-за этого единое нижнее меню исчезало в ноль и проявлялось за 520 мс при каждом переходе Лента ↔ Личные сообщения — это и читалось как прыжок. Собственный вход у ленты остаётся: .pub-login — её кнопка, а не системная навигация. Капсула гасится отдельным правилом ниже: без фейда и только на время заставки. */ /* Единственное исключение — нижняя капсула. Она перестала быть частью содержимого ленты: после выноса за пределы #dcShellMain это прямой ребёнок и постоянный узел оболочки. Перекрытия по z-index (заставка 2147483000 против капсулы 5000) на iOS оказалось недостаточно — капсула остаётся нарисованной поверх заставки. Поэтому гасим её ЯВНО и ЖЁСТКО, и только пока заставка действительно активна. Класс именно .clike-splash-active, а НЕ .clike-splash-on: первый снимается в finish() вместе с удалением разметки заставки, второй остаётся навсегда как признак состояния — на нём капсула больше никогда бы не появилась. visibility+opacity, а не прежний фейд: анимация появления через transition уже создавала отдельный дефект (капсула проявлялась за 520 мс на КАЖДОЙ полной загрузке и читалась как прыжок). Здесь геометрия не меняется вовсе, transition запрещён — капсула просто оказывается на месте в тот же кадр, в котором заставка исчезла. Все выходы контроллера (обычный, аварийный и boot-страховка на 9 с) этот класс снимают, поэтому навсегда скрытой капсула остаться не может. */ /* :not(.clike-feed-is-revealing) — тот же признак, что у остального интерфейса. Пока его не было, капсула висела скрытой до самого finish() и появлялась на 620 мс позже ленты — отдельным кадром, с пересчётом нижнего отступа. Теперь лента, шапка и капсула открываются ОДНОВРЕМЕННО, в начале растворения. Геометрия капсулы к этому моменту уже посчитана: узел всё время в DOM, скрыт только визуально. */ html.clike-splash-active:not(.clike-feed-is-revealing) nav.pnav, /* Признак растворения ставится на , поэтому у body-варианта он проверяется ТОЖЕ на html. Иначе body.clike-splash-active:not(...) совпадал всегда — body этот класс не получает — и капсула оставалась скрытой до самого finish(). */ html:not(.clike-feed-is-revealing) body.clike-splash-active nav.pnav{ visibility:hidden!important; opacity:0!important; pointer-events:none!important; transition:none!important} html.clike-splash-on:not(.clike-feed-is-ready) body.pub-feed-open .pub-login{ opacity:0!important; transition:opacity 520ms cubic-bezier(.22,.8,.22,1)!important} html.clike-splash-on:not(.clike-feed-is-ready) body.pub-feed-open .pub-list, html.clike-splash-on:not(.clike-feed-is-ready) body.pub-feed-open .pub-empty, html.clike-splash-on:not(.clike-feed-is-ready) body.pub-feed-open .pub-more, html.clike-splash-on:not(.clike-feed-is-ready) body.pub-feed-open .pub-back{ opacity:0; transform:translateY(14px); transition:opacity 560ms cubic-bezier(.22,.8,.22,1),transform 560ms cubic-bezier(.22,.8,.22,1)} /* Открытие ленты. Идёт ОДНОВРЕМЕННО с растворением заставки — белой вспышки и скачка страницы не возникает, потому что лента уже собрана в правильных размерах. */ html.clike-splash-on.clike-feed-is-revealing body.pub-feed-open .pub-login{opacity:1!important} html.clike-splash-on.clike-feed-is-revealing body.pub-feed-open .pub-list, html.clike-splash-on.clike-feed-is-revealing body.pub-feed-open .pub-empty, html.clike-splash-on.clike-feed-is-revealing body.pub-feed-open .pub-more, html.clike-splash-on.clike-feed-is-revealing body.pub-feed-open .pub-back{ opacity:1;transform:none} /* ============================================================================ 3. КОРНЕВОЙ СЛОЙ ========================================================================== */ .clike-feed-splash{ position:fixed; inset:0; z-index:var(--clike-splash-z); width:100%; height:100%; height:100dvh; overflow:hidden; isolation:isolate; display:grid; place-items:center; /* Слой не влияет на раскладку страницы под собой и не перерисовывает её: layout+paint+style. Размерная изоляция НЕ включается намеренно — высота приходит из inset/100dvh, и лишнее ограничение только скрывало бы ошибки геометрии. */ contain:layout paint style; color:var(--clike-splash-white); font-family:Inter,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,Arial,sans-serif; background:var(--clike-splash-bg); opacity:0; visibility:hidden; pointer-events:auto; -webkit-tap-highlight-color:transparent; transition:opacity 380ms ease,visibility 380ms ease} .clike-feed-splash.is-visible{opacity:1;visibility:visible} .clike-feed-splash *{box-sizing:border-box} /* Атмосфера: тёплое ядро под логотипом, тёмные углы, лёгкое зарево у нижней кромки. */ .clike-feed-splash__backdrop{ position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(circle at 50% 40%,rgba(255,104,0,.13),transparent 38%), radial-gradient(circle at 50% 104%,rgba(255,66,0,.10),transparent 46%), radial-gradient(circle at 8% 12%,rgba(255,120,0,.05),transparent 34%), radial-gradient(circle at 94% 84%,rgba(255,80,0,.05),transparent 32%), linear-gradient(145deg,#030303 0%,#0a0a0b 46%,#020202 100%); animation:clikeSplashBackdropIn 460ms ease both} /* Виньетка отдельным слоем: собирает взгляд к центру и «гасит» края фоновых панелей. */ .clike-feed-splash__backdrop::after{ content:"";position:absolute;inset:0; background:radial-gradient(ellipse 78% 62% at 50% 46%,transparent 40%,rgba(0,0,0,.62) 100%)} /* ============================================================================ 4. ФОНОВЫЙ ИНТЕРФЕЙС: панели и карточки публикаций Реальная вёрстка (радиусы/поверхности/бордеры взяты из pub-feed.css), но текста в них нет — только скелет-линии. Плотность и читаемость намеренно низкие. ========================================================================== */ .clike-feed-splash__background-ui{ position:absolute;inset:0;z-index:3;pointer-events:none; transform:translate3d(var(--clike-splash-px,0px),var(--clike-splash-py,0px),0); transition:transform 420ms cubic-bezier(.22,.8,.22,1); will-change:transform} .clike-feed-splash__panel, .clike-feed-splash__feed-card{ /* Одна переменная задаёт «глубину» фонового слоя: её же читает и кадр появления, и бесконечный дрейф — двух разных значений прозрачности возникнуть не может. */ --clike-deck-op:.16; position:absolute; border-radius:16px; background:var(--clike-splash-panel); border:1px solid var(--clike-splash-panel-bd); box-shadow:0 18px 50px rgba(0,0,0,.55); padding:14px; filter:blur(4px); opacity:0; animation:clikeSplashDeckIn 900ms cubic-bezier(.22,.8,.22,1) both} .clike-feed-splash__panel-head, .clike-feed-splash__card-head{display:flex;align-items:center;gap:9px;margin-bottom:11px} .clike-feed-splash__card-lines, .clike-feed-splash__panel-lines{display:flex;flex-direction:column;gap:5px;flex:1 1 auto;min-width:0} .clike-feed-splash__ava{ flex:0 0 auto;width:32px;height:32px;border-radius:50%; background:linear-gradient(150deg,rgba(255,164,60,.72),rgba(255,63,0,.42)); border:1px solid rgba(255,255,255,.14)} .clike-feed-splash__ava--sm{width:22px;height:22px} .clike-feed-splash__ln{ display:block;height:7px;border-radius:99px;background:var(--clike-splash-skeleton)} .clike-feed-splash__ln--name{width:52%;height:8px;background:rgba(255,255,255,.50)} .clike-feed-splash__ln--meta{width:32%;height:6px;background:rgba(255,255,255,.24)} .clike-feed-splash__ln--short{width:64%} .clike-feed-splash__ln--tiny{width:44%;height:6px} .clike-feed-splash__ln--accent{background:linear-gradient(90deg,rgba(255,150,40,.95),rgba(255,63,0,.35))} .clike-feed-splash__card-text{display:flex;flex-direction:column;gap:6px;margin-bottom:11px} .clike-feed-splash__card-media{ height:96px;border-radius:12px; background: radial-gradient(circle at 30% 28%,rgba(255,150,45,.40),transparent 62%), linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05)); border:1px solid rgba(255,255,255,.10)} .clike-feed-splash__card-actions{display:flex;gap:16px;margin-top:11px} .clike-feed-splash__card-actions i{ display:block;width:26px;height:7px;border-radius:99px;background:rgba(255,255,255,.24)} .clike-feed-splash__card-actions i:first-child{background:rgba(255,120,10,.72);width:30px} .clike-feed-splash__panel-rows{display:flex;flex-direction:column;gap:11px} .clike-feed-splash__panel-row{display:flex;align-items:center;gap:9px} .clike-feed-splash__panel-row i{ flex:0 0 auto;width:16px;height:16px;border-radius:5px;background:rgba(255,255,255,.24)} .clike-feed-splash__panel-row .clike-feed-splash__ln{flex:1 1 auto} .clike-feed-splash__panel-row--on i{background:rgba(255,120,10,.85)} /* ---------- ДЕСКТОПНАЯ РАСКЛАДКА (горизонтальная композиция макета) ---------- */ /* Слева — затемнённая боковая навигация, «Популярное сейчас» и карточка активности. */ .clike-feed-splash__panel--nav{ left:clamp(14px,3.4vw,74px);top:clamp(74px,14vh,150px); width:clamp(196px,16.5vw,272px); animation-delay:220ms} .clike-feed-splash__panel--trending{ left:clamp(14px,3.4vw,74px);top:clamp(330px,52vh,560px); width:clamp(196px,16.5vw,272px); animation-delay:320ms} .clike-feed-splash__panel--activity{ left:clamp(26px,5.6vw,118px);bottom:clamp(46px,9vh,104px); width:clamp(178px,14.5vw,240px); animation-delay:400ms} /* Справа — карточки публикаций и блок рекомендаций. */ .clike-feed-splash__feed-card--one{ right:clamp(14px,3.4vw,74px);top:clamp(64px,11vh,124px); width:clamp(220px,19vw,330px); animation-delay:260ms} .clike-feed-splash__feed-card--two{ right:clamp(26px,5.8vw,124px);bottom:clamp(52px,10vh,120px); width:clamp(210px,18vw,312px); animation-delay:360ms} .clike-feed-splash__panel--reco{ right:clamp(14px,3.4vw,74px);top:clamp(392px,58vh,640px); width:clamp(190px,16vw,266px); animation-delay:440ms} /* Третья карточка нужна мобильной композиции; на десктопе её место занимают панели. */ .clike-feed-splash__feed-card--three{display:none} /* Каждый слой дышит по-своему: разные амплитуды, скорости и задержки. */ .clike-feed-splash__panel--nav{--clike-drift-y:9px;--clike-drift-t:15s} .clike-feed-splash__panel--trending{--clike-drift-y:-7px;--clike-drift-t:18s} .clike-feed-splash__panel--activity{--clike-drift-y:6px;--clike-drift-t:13s} .clike-feed-splash__panel--reco{--clike-drift-y:-8px;--clike-drift-t:16s} .clike-feed-splash__feed-card--one{--clike-drift-y:-10px;--clike-drift-t:14s} .clike-feed-splash__feed-card--two{--clike-drift-y:8px;--clike-drift-t:17s} .clike-feed-splash__feed-card--three{--clike-drift-y:-9px;--clike-drift-t:16s} /* ============================================================================ 5. ПЕРСПЕКТИВНАЯ СЕТКА (десктопный макет, нижняя часть экрана) ========================================================================== */ .clike-feed-splash__grid{ position:absolute;left:-30%;right:-30%;bottom:0;height:36vh; z-index:2;pointer-events:none;overflow:hidden; perspective:300px;perspective-origin:50% 0%; opacity:.20; -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.68) 52%,transparent 100%); mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.68) 52%,transparent 100%)} .clike-feed-splash__grid::before{ content:"";position:absolute;left:0;right:0;top:-60%;bottom:-120%; background-image: repeating-linear-gradient(90deg,rgba(255,140,30,1) 0 1.5px,transparent 1.5px 88px), repeating-linear-gradient(0deg,rgba(255,110,15,.85) 0 1.5px,transparent 1.5px 88px); transform-origin:50% 100%; animation:clikeSplashGridFlow 6.5s linear infinite; will-change:transform} /* ============================================================================ 6. CANVAS-СЛОИ (частицы и цифровая волна). Оба рисует ОДИН rAF-цикл. ========================================================================== */ .clike-feed-splash__particles{ position:absolute;inset:0;z-index:6;pointer-events:none; width:100%;height:100%; opacity:0;animation:clikeSplashFadeIn 700ms 200ms ease both} /* Цифровая волна — приём МОБИЛЬНОГО макета; на компьютере её место занимает перспективная сетка, поэтому здесь она выключена (и контроллер её не рисует). */ .clike-feed-splash__wave{ display:none; position:absolute;left:0;right:0;bottom:0;z-index:4;pointer-events:none; width:100%;height:30vh; /* Волна не должна «упираться» в индикатор: верхняя кромка растворяется в фоне. */ -webkit-mask-image:linear-gradient(to top,#000 0%,#000 52%,transparent 100%); mask-image:linear-gradient(to top,#000 0%,#000 52%,transparent 100%); opacity:0;animation:clikeSplashFadeIn 900ms 320ms ease both} /* ============================================================================ 7. ЦЕНТР СЦЕНЫ ========================================================================== */ .clike-feed-splash__center{ position:relative; z-index:10; display:flex; flex-direction:column; align-items:center; width:min(92vw,960px); padding:max(24px,env(safe-area-inset-top)) 20px max(26px,env(safe-area-inset-bottom)); text-align:center; /* Только МАСШТАБ, без вертикали. Замер входа: единственное, что двигалось в самом начале, — translateY(10px): центр сцены 436 → 426, логотип 360 → 347.9, при том что высота контейнера, его верх, вьюпорт и фон давали Δ 0. На тёмном стартовом фоне эти 10 px и читались как маленький скачок. Проявление, масштаб, кольца, орбиты, декор, статус, полоса и все тайминги не тронуты. */ transform:scale(.975); opacity:0; animation:clikeSplashCenterIn 560ms 120ms cubic-bezier(.22,.8,.22,1) forwards} /* ---------- логотип, орбиты, световой шлейф ---------- */ .clike-feed-splash__logo-stage{ position:relative; width:clamp(280px,26vw,460px); aspect-ratio:1; display:grid; place-items:center; filter:drop-shadow(0 0 20px rgba(255,104,0,.26)) drop-shadow(0 0 52px rgba(255,65,0,.17))} /* Тёплое ядро за знаком — глубина, а не плоская подложка. */ .clike-feed-splash__logo-stage::before{ content:"";position:absolute;inset:20%;border-radius:50%; background:radial-gradient(circle,rgba(255,122,0,.24) 0%,rgba(255,60,0,.10) 42%,transparent 70%); animation:clikeSplashCoreBreath 3200ms ease-in-out infinite} /* viewBox знака плотно обжимает контуры и симметричен по центру кольца, поэтому ширина картинки = диаметр кольца. Орбиты ниже расставлены вокруг именно этого значения. */ .clike-feed-splash__symbol{ position:relative;z-index:5; width:56%;height:auto;display:block; filter:drop-shadow(0 0 14px rgba(255,120,0,.45)); animation:clikeSplashLogoBreath 2200ms ease-in-out infinite; will-change:transform,filter} .clike-feed-splash__orbit{ position:absolute;inset:0; border-radius:50%; pointer-events:none; will-change:transform} /* Светящаяся точка, едущая по орбите: живёт на самом кольце, поэтому её путь — ровно та окружность, которую видит глаз. */ .clike-feed-splash__orbit::after{ content:"";position:absolute;top:-3px;left:50%; width:6px;height:6px;margin-left:-3px;border-radius:50%; background:#fff3df; box-shadow:0 0 8px #ffa53a,0 0 18px rgba(255,88,0,.85)} .clike-feed-splash__orbit--outer{ border:1px solid rgba(255,112,0,.30); box-shadow:inset 0 0 18px rgba(255,90,0,.07),0 0 20px rgba(255,90,0,.07); animation:clikeSplashOrbitCw 9s linear infinite} .clike-feed-splash__orbit--middle{ inset:8%; border:1px dashed rgba(255,128,0,.26); animation:clikeSplashOrbitCcw 12.5s linear infinite} .clike-feed-splash__orbit--middle::after{width:5px;height:5px;margin-left:-2.5px;top:-2.5px} .clike-feed-splash__orbit--inner{ inset:16%; border-top:2px solid rgba(255,147,32,.80); border-right:1px solid transparent; border-bottom:1px solid rgba(255,67,0,.30); border-left:1px solid transparent; filter:drop-shadow(0 0 8px rgba(255,105,0,.6)); animation:clikeSplashOrbitCw 6.4s linear infinite} .clike-feed-splash__orbit--inner::after{width:4px;height:4px;margin-left:-2px;top:-2px} /* Световой шлейф — SVG-дуга с бегущим stroke-dashoffset и размытым дублем под ней. */ .clike-feed-splash__light-trail{ position:absolute;inset:-2%;width:104%;height:104%; overflow:visible;pointer-events:none;z-index:4} .clike-feed-splash__trail-arc{ fill:none; stroke:url(#clikeSplashTrailGrad); stroke-width:2.4; stroke-linecap:round; stroke-dasharray:96 457; animation:clikeSplashTrailRun 4.2s linear infinite; will-change:stroke-dashoffset} .clike-feed-splash__trail-arc--halo{ stroke-width:8; opacity:.42; filter:url(#clikeSplashTrailBlur)} .clike-feed-splash__trail-arc--thin{ stroke-width:1; opacity:.55; stroke-dasharray:36 517; animation-duration:3.1s; animation-direction:reverse} /* ---------- clike.ru ---------- Это БРЕНДОВЫЙ вектор (assets/brand/clike-wordmark-vector.svg), а не набранный текст. Пропорции заданы в самом viewBox, поэтому задаём только ширину: буквы не растянутся, межбуквенные просветы не поедут, строчный бокс ничего не обрежет. */ .clike-feed-splash__wordmark{ display:block; width:clamp(230px,23vw,420px); height:auto; margin-top:clamp(2px,1vh,16px); filter:drop-shadow(0 6px 20px rgba(0,0,0,.45))} /* ---------- статус ---------- */ .clike-feed-splash__status{ min-height:1.5em; margin-top:clamp(20px,2.3vh,32px); color:var(--clike-splash-muted); font-size:clamp(18px,1.6vw,28px); font-weight:400; line-height:1.35; transition:opacity 160ms ease,transform 160ms ease} .clike-feed-splash__status.is-changing{opacity:0;transform:translateY(5px)} /* ---------- прогресс ---------- */ .clike-feed-splash__progress{ position:relative; overflow:visible; width:clamp(460px,40vw,760px); max-width:100%; margin-top:clamp(22px,3vh,40px)} /* ДВА РЕЖИМА ИНДИКАТОРА, ПО ОДНОМУ НА МАКЕТ. Компьютерный макет — сегментированная линия и процент; мобильный — тонкая линия с бегущим бликом и точками справа. Оба режима НИКОГДА не показываются вместе: иначе получается два индикатора одной и той же загрузки. Базовое (десктопное) состояние — сегменты; тонкую линию включает мобильная медиа ниже. */ .clike-feed-splash__progress-track{ display:none; position:relative;width:100%;height:4px; border-radius:999px;overflow:visible; background:rgba(255,255,255,.10)} .clike-feed-splash__progress-fill{ position:absolute;inset:0; transform:scaleX(0);transform-origin:left center; border-radius:inherit; background:linear-gradient(90deg,#ff3c18 0%,#ff7300 54%,#ffb000 100%); box-shadow:0 0 8px rgba(255,91,0,.75),0 0 18px rgba(255,91,0,.36); will-change:transform} .clike-feed-splash__progress-glow{ position:absolute;top:50%;left:0; width:36px;height:12px;border-radius:50%; background:rgba(255,236,190,.92); filter:blur(5px); transform:translate(-50%,-50%); box-shadow:0 0 12px #ff9b00,0 0 26px #ff5a00; will-change:left} /* Точки-сегменты справа от линии (мобильный макет). */ .clike-feed-splash__progress-dots{ position:absolute;top:50%;right:-22px;transform:translateY(-50%); display:flex;gap:5px} .clike-feed-splash__progress-dots i{ width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.18); animation:clikeSplashDotPulse 1.4s ease-in-out infinite} .clike-feed-splash__progress-dots i:nth-child(2){animation-delay:.18s} .clike-feed-splash__progress-dots i:nth-child(3){animation-delay:.36s} /* Сегментированная линия (компьютерный макет). */ .clike-feed-splash__progress-segments{ display:grid; grid-template-columns:repeat(var(--clike-splash-seg,28),minmax(0,1fr)); gap:4px; width:100%} .clike-feed-splash__seg{ height:8px;border-radius:3px; background:rgba(255,255,255,.09); transition:background 180ms ease,box-shadow 180ms ease,transform 180ms ease} .clike-feed-splash__seg.is-on{ background:linear-gradient(180deg,#ff9524,#ff5200); box-shadow:0 0 8px rgba(255,90,0,.45)} .clike-feed-splash__seg.is-head{ background:linear-gradient(180deg,#fff2dd,#ffab3d); box-shadow:0 0 12px rgba(255,175,60,.95),0 0 24px rgba(255,90,0,.6); transform:scaleY(1.35)} .clike-feed-splash__progress-value{ margin-top:16px; color:#ff7100; font-size:clamp(20px,1.8vw,30px); font-weight:500; font-variant-numeric:tabular-nums; text-shadow:0 0 18px rgba(255,113,0,.45)} /* ============================================================================ 8. ЗАКРЫТИЕ ========================================================================== */ .clike-feed-splash.is-completing{ opacity:0; transition:opacity 620ms cubic-bezier(.22,.8,.22,1)} .clike-feed-splash.is-completing .clike-feed-splash__logo-stage{ animation:clikeSplashFinalGlow 620ms ease forwards} .clike-feed-splash.is-completing .clike-feed-splash__backdrop, .clike-feed-splash.is-completing .clike-feed-splash__background-ui, .clike-feed-splash.is-completing .clike-feed-splash__grid{ opacity:0; transition:opacity 420ms ease} /* Финальный блик пробегает по индикатору — в обоих его режимах, поэтому живёт на общей обёртке, а не на конкретной линии. */ .clike-feed-splash.is-completing .clike-feed-splash__progress::after{ content:"";position:absolute;top:-4px;height:16px;width:72px;left:-72px; border-radius:999px; background:linear-gradient(90deg,transparent,rgba(255,244,222,.95),transparent); filter:blur(4px); pointer-events:none; animation:clikeSplashFinalSweep 520ms cubic-bezier(.4,0,.2,1) forwards} /* ============================================================================ 9. КЛЮЧЕВЫЕ КАДРЫ (только transform / opacity / filter) ========================================================================== */ @keyframes clikeSplashBackdropIn{from{opacity:0}to{opacity:1}} @keyframes clikeSplashFadeIn{to{opacity:1}} @keyframes clikeSplashCenterIn{to{opacity:1;transform:scale(1)}} @keyframes clikeSplashDeckIn{ from{opacity:0;transform:translate3d(0,18px,0) scale(.965)} to{opacity:var(--clike-deck-op,.16);transform:translate3d(0,0,0) scale(1)}} @keyframes clikeSplashLogoBreath{ 0%,100%{transform:scale(1);filter:brightness(1) drop-shadow(0 0 14px rgba(255,120,0,.42))} 50%{transform:scale(1.025);filter:brightness(1.08) drop-shadow(0 0 22px rgba(255,140,20,.6))}} @keyframes clikeSplashCoreBreath{ 0%,100%{opacity:.72;transform:scale(1)} 50%{opacity:1;transform:scale(1.07)}} @keyframes clikeSplashOrbitCw{to{transform:rotate(360deg)}} @keyframes clikeSplashOrbitCcw{to{transform:rotate(-360deg)}} @keyframes clikeSplashTrailRun{to{stroke-dashoffset:-553}} @keyframes clikeSplashGridFlow{ from{transform:rotateX(72deg) translate3d(0,0,0)} to{transform:rotateX(72deg) translate3d(0,88px,0)}} @keyframes clikeSplashDotPulse{ 0%,100%{opacity:.28;transform:scale(1)} 50%{opacity:1;transform:scale(1.35)}} @keyframes clikeSplashDrift{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(0,var(--clike-drift-y,8px),0) scale(1.012)}} @keyframes clikeSplashFinalGlow{ 0%{transform:scale(1);filter:brightness(1)} 52%{transform:scale(1.055);filter:brightness(1.26) drop-shadow(0 0 40px rgba(255,109,0,.72))} 100%{transform:scale(1.08);filter:brightness(1.12)}} @keyframes clikeSplashFinalSweep{ from{left:-64px;opacity:0} 30%{opacity:1} to{left:100%;opacity:0}} /* Дрейф фоновых слоёв включается ПОСЛЕ их появления: у одного элемента не может быть двух анимаций transform одновременно, поэтому вторую вешает контроллер классом. */ .clike-feed-splash__background-ui.is-drifting .clike-feed-splash__panel, .clike-feed-splash__background-ui.is-drifting .clike-feed-splash__feed-card{ animation:clikeSplashDrift var(--clike-drift-t,15s) ease-in-out infinite; opacity:var(--clike-deck-op,.16)} /* ============================================================================ 10. ПЛАНШЕТ (≤1100px): десктопная композиция сжимается, дальние панели уходят ========================================================================== */ @media (max-width:1100px){ .clike-feed-splash__panel--activity, .clike-feed-splash__panel--reco{display:none} .clike-feed-splash__logo-stage{width:clamp(280px,42vw,420px)} .clike-feed-splash__wordmark{width:clamp(215px,31vw,350px)} .clike-feed-splash__progress{width:min(64vw,560px)} .clike-feed-splash__panel--nav{width:clamp(168px,20vw,220px);top:clamp(84px,13vh,150px)} .clike-feed-splash__panel--trending{width:clamp(168px,20vw,220px)} .clike-feed-splash__feed-card--one, .clike-feed-splash__feed-card--two{width:clamp(190px,23vw,260px)} } /* ============================================================================ 11. ТЕЛЕФОН (≤767px): ВЕРТИКАЛЬНАЯ композиция мобильного макета Корпуса нарисованного смартфона нет — заставка занимает реальный экран. ========================================================================== */ @media (max-width:767px){ /* Панели десктопного макета на телефоне не показываются вовсе. */ .clike-feed-splash__panel{display:none} /* Перспективная сетка — десктопный приём; на телефоне её место занимает волна. */ .clike-feed-splash__grid{display:none} .clike-feed-splash__center{ width:100%;min-height:100%; justify-content:center; padding-left:18px;padding-right:18px} .clike-feed-splash__logo-stage{ width:clamp(220px,72vw,340px); margin-top:-6vh} .clike-feed-splash__wordmark{ width:min(46vw,285px); margin-top:6px} .clike-feed-splash__status{ margin-top:22px; font-size:clamp(15px,4vw,22px); opacity:.84} .clike-feed-splash__progress{width:min(72vw,420px);margin-top:28px} /* Мобильный макет: тонкая линия с бегущим бликом вместо сегментов. */ .clike-feed-splash__progress-track{display:block;height:3px} /* На телефоне процент не показывается — точное соответствие мобильному макету. */ .clike-feed-splash__progress-value, .clike-feed-splash__progress-segments{display:none} /* Карточки публикаций по краям экрана, частично за кадром — как в макете. */ .clike-feed-splash__feed-card{ --clike-deck-op:.21; filter:blur(5px); padding:12px} .clike-feed-splash__feed-card--one{ display:block;left:-16%;right:auto;top:6vh;width:62vw; --clike-drift-y:-8px;--clike-drift-t:14s} .clike-feed-splash__feed-card--two{ display:block;right:-18%;left:auto;top:26vh;bottom:auto;width:60vw; --clike-drift-y:9px;--clike-drift-t:17s} .clike-feed-splash__feed-card--three{ display:block;left:-12%;right:auto;bottom:12vh;top:auto;width:58vw; --clike-drift-y:-7px;--clike-drift-t:15s} .clike-feed-splash__feed-card .clike-feed-splash__card-media{height:74px} .clike-feed-splash__wave{display:block;height:30vh} } /* Узкий телефон (≤420px): плотность эффектов та же, масштаб ниже. */ @media (max-width:420px){ .clike-feed-splash__logo-stage{width:min(76vw,300px);margin-top:-4vh} .clike-feed-splash__wordmark{width:min(52vw,230px)} .clike-feed-splash__status{margin-top:18px;font-size:clamp(14px,4.2vw,18px)} .clike-feed-splash__progress{width:min(78vw,340px);margin-top:24px} .clike-feed-splash__feed-card .clike-feed-splash__card-media{height:60px} .clike-feed-splash__feed-card--three{display:none} } /* ============================================================================ 12. ЛАНДШАФТ НИЗКОЙ ВЫСОТЫ (телефон боком) — центр не должен обрезаться ========================================================================== */ @media (orientation:landscape) and (max-height:560px){ .clike-feed-splash__center{padding-top:12px;padding-bottom:12px} .clike-feed-splash__logo-stage{width:min(34vh,240px);margin-top:0} .clike-feed-splash__wordmark{width:clamp(150px,38vh,240px);margin-top:4px} .clike-feed-splash__status{margin-top:10px;font-size:clamp(13px,3.4vh,18px)} .clike-feed-splash__progress{margin-top:14px;width:min(56vw,480px)} .clike-feed-splash__progress-segments{margin-top:10px} .clike-feed-splash__progress-value{margin-top:8px;font-size:clamp(15px,3.4vh,22px)} .clike-feed-splash__wave{height:22vh} .clike-feed-splash__grid{height:26vh} } /* ============================================================================ 13. ОБЛЕГЧЁННЫЙ РЕЖИМ (слабое устройство / упавший эффект / нет Canvas) Остаётся фирменный минимум: фон, логотип, название, статус, прогресс. ========================================================================== */ .clike-feed-splash.is-lite .clike-feed-splash__particles, .clike-feed-splash.is-lite .clike-feed-splash__wave, .clike-feed-splash.is-lite .clike-feed-splash__grid, .clike-feed-splash.is-lite .clike-feed-splash__light-trail{display:none} .clike-feed-splash.is-lite .clike-feed-splash__panel, .clike-feed-splash.is-lite .clike-feed-splash__feed-card{filter:none;box-shadow:none} .clike-feed-splash.is-lite .clike-feed-splash__background-ui.is-drifting .clike-feed-splash__panel, .clike-feed-splash.is-lite .clike-feed-splash__background-ui.is-drifting .clike-feed-splash__feed-card{ animation:none} /* ============================================================================ 14. PREFERS-REDUCED-MOTION Заставка остаётся (это брендированная загрузка), но перестаёт двигаться. ========================================================================== */ @media (prefers-reduced-motion:reduce){ .clike-feed-splash *, .clike-feed-splash *::before, .clike-feed-splash *::after{ animation-duration:1ms!important; animation-iteration-count:1!important; animation-delay:0ms!important; scroll-behavior:auto!important} .clike-feed-splash__particles, .clike-feed-splash__light-trail, .clike-feed-splash__wave, .clike-feed-splash__grid{display:none!important} .clike-feed-splash__background-ui{transition:none!important;transform:none!important} .clike-feed-splash__panel, .clike-feed-splash__feed-card{opacity:.15;filter:blur(4px)} .clike-feed-splash__center{opacity:1;transform:none} .clike-feed-splash__orbit::after{display:none} html.clike-splash-on:not(.clike-feed-is-ready) body.pub-feed-open .pub-list, html.clike-splash-on:not(.clike-feed-is-ready) body.pub-feed-open .pub-empty, html.clike-splash-on:not(.clike-feed-is-ready) body.pub-feed-open .pub-more, html.clike-splash-on:not(.clike-feed-is-ready) body.pub-feed-open .pub-back{transform:none} } /* ============================================================================ 15. ПЕЧАТЬ — заставка не печатается ========================================================================== */ @media print{.clike-feed-splash{display:none!important}}