/* Стартовый экран загрузки мира (см. Стартовый экран.fig). * * Три слоя: * 1. запечённая статичная картинка сцены (blur + виньетка) + крупное * лого Sketchland — мир рендерится невидимо ПОД оверлеем; * 2. центрированное сообщение под лого: появляется слева направо, * исчезает справа налево (clip-path wipe, без морганий); * 3. лоадер под сообщением — iOS-спиннер из 10 палочек: ключевая 40% * альфы, её соседи по 70%, остальные непрозрачные; вращение * дискретными шагами steps(10). * * Perf: оверлей живёт только во время загрузки и удаляется из DOM после * финала — постоянной цены для Mali-G31 нет. Никаких backdrop-filter / * box-shadow (см. docs/diagnostics_2026-06-07/REPORT.md). */ #loading-screen { position: fixed; inset: 0; z-index: 2000; /* поверх PIXI, HUD и story windows (1200) */ display: flex; flex-direction: column; align-items: center; justify-content: center; /* Статичная запечённая картинка: пустая сцена мира + blur + виньетка * (assets/loading_bg.jpg, печётся из фона в Стартовый экран.fig). * Непрозрачная — зритель НЕ видит, как мир собирается по кускам; * когда всё готово, картинка растворяется вместе с оверлеем. * До загрузки jpg (мгновенно, 55КБ с того же хоста) — сплошной цвет. */ /* Фон по фигме (world-01/02): РЕЗКИЙ океан-арт + виньетка, запечённая в * файл при сборке из figma-export bg-ocean-original (см. SPEC.md) — * прежний вариант был с блюром, фигма блюрит только box-экраны гварда. */ background: #0d2440 url("/static/tv/assets/loading_bg.jpg?v=20260716") center / cover no-repeat; opacity: 1; transition: opacity 0.6s ease; } #loading-screen.ls-hidden { opacity: 0; pointer-events: none; } /* Пока стартовый экран жив, HUD-слой (QR-карточка, счётчик, статус, * FPS-метр, кнопка звука, сюжетные плашки) спрятан — иначе он * просвечивает сквозь градиент и спорит с лого. Класс ls-loading * вешает/снимает loading_screen.js на . */ body.ls-loading .hud, body.ls-loading .creature-counter, body.ls-loading .status-dot, body.ls-loading .fps-meter, body.ls-loading .audio-toggle, body.ls-loading #story-window { visibility: hidden !important; } /* Фигма world-01/02: Fredoka SB 120 (макет) => 169 физ.px на 1080p; у бокса * CSS-вьюпорт 1600 (density 1.2) => 141 CSS px = 15.7vmin. Белая обводка * OUTSIDE ~5.6 физ => центрированный -webkit-text-stroke 9.4 CSS px под * fill (paint-order) — как у гварда. */ .ls-logo { font-family: var(--font-brand); font-weight: 600; font-size: clamp(96px, 15.7vmin, 200px); line-height: 1.1; color: var(--brand-pink); paint-order: stroke fill; -webkit-text-fill-color: var(--brand-pink); -webkit-text-stroke: 9.4px #fff; /* Без drop-shadow: filter на крупном тексте = дорогой слой на Mali, а * лоадер живёт поверх уже рендерящегося PIXI (перф-правило в шапке). */ letter-spacing: 0.004em; user-select: none; margin-bottom: 6vmin; } /* слой 2: сообщение — двойной буфер; появление L→R, уход R→L. * Оба состояния «невидим» = правый inset 100%: входящий анимирует * 100%→0 (фронт открытия бежит слева направо), уходящий 0→100% * (фронт стирания бежит справа налево). */ .ls-msg-box { position: relative; width: 100%; height: clamp(36px, 5vmin, 60px); } .ls-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--font-ui); font-weight: 600; /* SPEC: статус 30 макет => 42 физ => 35 CSS (3.9vmin на 900) */ font-size: clamp(24px, 3.9vmin, 46px); color: rgba(255, 255, 255, 0.9); clip-path: inset(0 100% 0 0); opacity: 0; transition: clip-path 0.5s ease, opacity 0.35s ease; will-change: clip-path, opacity; } .ls-msg.ls-in { clip-path: inset(0 0 0 0); opacity: 1; transition-delay: 0.24s; /* даём уходящему тексту стереться первым */ } .ls-msg.ls-out { clip-path: inset(0 100% 0 0); opacity: 0; transition-delay: 0s; } /* слой 3: спиннер из фигмы — 8 белых лучей (SPEC: 45 макет => 63 физ => * 52.5 CSS = 5.85vmin), группа крутится дискретно steps(8) */ .ls-loader { width: clamp(36px, 5.85vmin, 66px); height: clamp(36px, 5.85vmin, 66px); margin-top: 6.4vmin; animation: ls-spin 1s steps(8, end) infinite; } @keyframes ls-spin { to { transform: rotate(360deg); } }