/* ========================================================= SPLASH SCREEN — общий загрузочный экран для skins / records / achievements / webapp. Подключается ПЕРЕД styles.css в . ========================================================= */ @font-face { font-family: 'Polyplast-Splash'; /* Только OTF: woff2 на сервере, похоже, собран криво и Safari его отвергает (как и в основном styles.css). OTF читают и Safari, и Chrome. */ src: url('assets/fonts/Polyplast-Medium.otf') format('opentype'), url('assets/fonts/Polyplast-Semibold.otf') format('opentype'); font-weight: normal; font-style: normal; font-display: swap; } /* --- Оверлей: накрывает всю страницу до сигнала «готово» --------------- */ .app-splash { position: fixed; inset: 0; z-index: 9999; background: #f0f0f0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; transition: opacity 0.3s ease; } .app-splash.hide { opacity: 0; pointer-events: none; } /* --- Обёртка для персонажа + земли ------------------------------------ */ .app-splash-character-wrap { position: relative; width: 72px; height: 72px; } /* --- Бегущий персонаж: 2 кадра анимации -------------------------------- Кадры берутся из CSS-переменных --splash-run-1 и --splash-run-2. splash.js выставляет их на documentElement в зависимости от того, какой скин у юзера в localStorage. Если переменные не заданы — fallback на default (dino_run1/2). */ .app-splash-character { position: absolute; top: 0; left: 0; width: 72px; height: 72px; background-image: var(--splash-run-1, url('assets/img/dino_run1.webp')); background-size: contain; background-position: center; background-repeat: no-repeat; image-rendering: pixelated; animation: splashRun 0.3s infinite; z-index: 2; /* персонаж ПОВЕРХ земли */ /* Масштаб скина (как в игре) — splash.js выставляет --splash-scale из config.json. origin по нижнему центру, чтобы при увеличении персонаж «рос» вверх и ноги оставались на линии земли, а не уезжали. */ transform: scale(var(--splash-scale, 1)); transform-origin: center bottom; } @keyframes splashRun { 0%, 49.99% { background-image: var(--splash-run-1, url('assets/img/dino_run1.webp')); } 50%, 100% { background-image: var(--splash-run-2, url('assets/img/dino_run2.webp')); } } /* --- Земля под ногами: бегущая текстура из ground.webp ---------------- ground.webp — длинная горизонтальная пиксельная полоса (3088×50, прозрачный фон). Показываем «окошко», ставим background-size: auto 100% (высота строго фиксируется, ширина масштабируется пропорционально). Mask-image гасит видимость к краям, чтобы текстура «появлялась из ничего» и «уходила в ничто» по бокам. */ .app-splash-ground { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 120px; height: 24px; background-image: url('assets/img/ground.webp'); background-size: auto 100%; background-repeat: repeat-x; image-rendering: pixelated; z-index: 1; /* за персонажем */ -webkit-mask-image: linear-gradient( to right, transparent 0%, black 25%, black 75%, transparent 100% ); mask-image: linear-gradient( to right, transparent 0%, black 25%, black 75%, transparent 100% ); animation: splashGroundScroll 5.0s linear infinite; } @keyframes splashGroundScroll { from { background-position-x: 0; } to { background-position-x: -988px; } } /* --- Текст «Хинкали готовится…» ---------------------------------------- */ .app-splash-text { font-family: 'Polyplast-Splash', Arial, sans-serif; font-size: 18px; color: #1a1a1a; white-space: nowrap; } .app-splash-text::after { content: '.'; display: inline-block; width: 1.4em; text-align: left; animation: splashDots 1.2s steps(1) infinite; } @keyframes splashDots { 0% { content: '.'; } 33% { content: '..'; } 66% { content: '...'; } 100% { content: '.'; } }