/* ============================================================================
Stars TMA — fx.css · Слой AAA+ визуальных эффектов и плавности (120fps)
----------------------------------------------------------------------------
ПОДКЛЮЧАТЬ ПОСЛЕДНИМ (после style.css, juice.css, screens.css) —
тогда каскад отдаёт приоритет полировке без !important.
ЖЕЛЕЗНЫЕ ПРАВИЛА ЭТОГО ФАЙЛА:
• Анимируем ТОЛЬКО transform / opacity / filter. Никаких background-position,
width/height/top/left, box-shadow-в-цикле — всё это reflow/repaint.
• Движущиеся градиенты гоняем через transform самого слоя (translate/rotate/
scale), а не через смену background. Пятно рисуется один раз, двигается на GPU.
• Все keyframes с префиксом fx* — чтобы НЕ конфликтовать с juice.css/style.css.
• Фоновые слои строго на z-index:0 (под body::before-виньеткой и над body::after-
артом), pointer-events:none, contain:strict — они не трогают layout контента.
• will-change точечно и только на вечно живущих слоях.
• Низ файла — prefers-reduced-motion: глушим всё тяжёлое.
Использует переменные из style.css: --gold, --gold2, --gold3, --spring,
--ease-out, --r-rare/epic/legend, --safe-*.
========================================================================== */
/* Родня кривых — на случай, если fx.css подключат без juice.css.
Дублируем безопасно (значения идентичны). */
:root{
--fx-ease-out: cubic-bezier(.22, 1, .36, 1);
--fx-ease-in: cubic-bezier(.55, 0, .68, .35);
--fx-ease-back:cubic-bezier(.34, 1.56, .64, 1);
}
/* ============================================================================
0. ГЛОБАЛЬНАЯ ПЛАВНОСТЬ РЕНДЕРА
Сглаживаем субпиксельно, просим браузер держать композит-слои чистыми.
========================================================================== */
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
/* Плавный скролл ленты экранов без рывков (не мешает нативной инерции TMA) */
#app{ scroll-behavior:smooth; }
/* ============================================================================
1. «ШЕЙДЕРНЫЙ» ФОН БЕЗ WEBGL — три независимых fixed-слоя
----------------------------------------------------------------------------
Вставить в HTML ПЕРВЫМИ детьми (до #preloader), три пустых div:
Порядок в разметке не критичен — все на z-index:0.
----------------------------------------------------------------------------
Общая база слоёв: держим их фоном, вне потока, без реакций на тач.
========================================================================== */
.fx-aurora,
.fx-rays,
.fx-particles{
position:fixed; inset:-15%; /* с запасом за экран — при движении не оголяет края */
z-index:0;
pointer-events:none;
contain:strict; /* изоляция: слой не влияет на layout контента */
will-change:transform;
transform:translateZ(0);
backface-visibility:hidden;
}
/* ── 1.1 AURORA — медленно плывущие цветные пятна (золото / фиолет / синь) ──
Пятна нарисованы радиальными градиентами один раз; «дыхание» и дрейф —
через transform всего слоя. Второй набор пятен на ::after движется
контрфазно, отчего свет кажется живым и никогда не повторяется на глаз. */
.fx-aurora{ opacity:.9; }
.fx-aurora::before,
.fx-aurora::after{
content:""; position:absolute; inset:0;
will-change:transform, opacity;
}
.fx-aurora::before{
background:
radial-gradient(38% 42% at 22% 26%, rgba(255,210,74,.16), transparent 62%),
radial-gradient(34% 40% at 82% 20%, rgba(183,107,255,.14), transparent 60%),
radial-gradient(46% 48% at 70% 82%, rgba(74,163,255,.12), transparent 62%);
filter:blur(26px);
animation:fxAuroraA 34s ease-in-out infinite;
}
.fx-aurora::after{
background:
radial-gradient(30% 34% at 60% 14%, rgba(255,176,32,.12), transparent 60%),
radial-gradient(40% 44% at 14% 72%, rgba(140,90,255,.12), transparent 62%),
radial-gradient(34% 38% at 92% 60%, rgba(74,130,255,.10), transparent 60%);
filter:blur(34px);
animation:fxAuroraB 46s ease-in-out infinite;
}
/* Дрейф + лёгкое дыхание масштабом — амплитуды маленькие, ощущение «тёплого воздуха» */
@keyframes fxAuroraA{
0%,100%{ transform:translate3d(0,0,0) scale(1); }
33% { transform:translate3d(3.5%,-2.5%,0) scale(1.08); }
66% { transform:translate3d(-2.5%,3%,0) scale(1.04); }
}
@keyframes fxAuroraB{
0%,100%{ transform:translate3d(0,0,0) scale(1.05); opacity:.85; }
50% { transform:translate3d(-3%,-3.5%,0) scale(1); opacity:1; }
}
/* ── 1.2 RAYS — тонкий conic-градиентный световой веер, медленно вращается ──
Один conic-gradient, замаскирован в кольцо, крутится 90с. Едва заметный —
даёт ощущение «прожекторов казино» за сценой. */
.fx-rays{ opacity:.5; }
.fx-rays::before{
content:""; position:absolute;
top:-30%; left:50%; width:150vmax; height:150vmax;
transform:translateX(-50%) rotate(0deg);
transform-origin:50% 40%;
background:conic-gradient(from 0deg at 50% 40%,
transparent 0deg, rgba(255,210,74,.10) 8deg, transparent 20deg,
transparent 60deg, rgba(255,255,255,.06) 66deg, transparent 78deg,
transparent 130deg, rgba(183,107,255,.07) 138deg, transparent 150deg,
transparent 210deg, rgba(74,163,255,.07) 216deg, transparent 230deg,
transparent 300deg, rgba(255,210,74,.08) 306deg, transparent 320deg);
-webkit-mask-image:radial-gradient(circle at 50% 40%, transparent 8%, #000 26%, #000 55%, transparent 78%);
mask-image:radial-gradient(circle at 50% 40%, transparent 8%, #000 26%, #000 55%, transparent 78%);
filter:blur(2px);
will-change:transform;
animation:fxRaysSpin 90s linear infinite;
}
@keyframes fxRaysSpin{ to{ transform:translateX(-50%) rotate(360deg); } }
/* ── 1.3 PARTICLES — мерцающие звёзды (box-shadow-россыпь, ДВА слоя параллакса) ──
Звёзды нарисованы box-shadow'ом ОДИН раз (не анимируем сами тени — дорого).
Двигаем контейнеры целиком через transform: ближний слой быстрее и ярче,
дальний медленнее и тусклее → глубина. Мерцание — через opacity слоя. */
.fx-particles{ opacity:.7; }
.fx-particles::before,
.fx-particles::after{
content:""; position:absolute; top:0; left:0;
width:2px; height:2px; border-radius:50%;
will-change:transform, opacity;
}
/* Дальний слой — мелкие тусклые звёзды, медленный вертикальный дрейф */
.fx-particles::before{
background:transparent;
box-shadow:
12vw 8vh rgba(255,255,255,.55), 28vw 22vh rgba(255,255,255,.35),
44vw 5vh rgba(255,210,74,.55), 61vw 17vh rgba(255,255,255,.4),
77vw 11vh rgba(255,255,255,.5), 90vw 26vh rgba(183,107,255,.5),
7vw 38vh rgba(255,255,255,.35), 33vw 44vh rgba(255,255,255,.5),
52vw 40vh rgba(74,163,255,.5), 69vw 49vh rgba(255,255,255,.35),
85vw 43vh rgba(255,255,255,.45), 19vw 58vh rgba(255,255,255,.4),
40vw 63vh rgba(255,210,74,.45), 58vw 57vh rgba(255,255,255,.5),
73vw 66vh rgba(255,255,255,.35), 94vw 61vh rgba(255,255,255,.4),
15vw 78vh rgba(255,255,255,.45), 37vw 84vh rgba(183,107,255,.4),
55vw 80vh rgba(255,255,255,.35), 80vw 87vh rgba(255,255,255,.5);
animation:fxDriftFar 42s linear infinite, fxTwinkleFar 6s ease-in-out infinite;
}
/* Ближний слой — крупнее, ярче, быстрее (параллакс 1.5×) */
.fx-particles::after{
width:3px; height:3px;
background:transparent;
box-shadow:
22vw 14vh rgba(255,255,255,.9), 48vw 9vh rgba(255,210,74,.85),
66vw 20vh rgba(255,255,255,.8), 84vw 12vh rgba(255,255,255,.9),
10vw 30vh rgba(255,255,255,.75), 38vw 34vh rgba(255,255,255,.85),
72vw 40vh rgba(255,210,74,.8), 92vw 33vh rgba(255,255,255,.8),
18vw 52vh rgba(255,255,255,.85), 50vw 56vh rgba(255,255,255,.75),
78vw 60vh rgba(255,255,255,.9), 30vw 72vh rgba(255,210,74,.8),
60vw 76vh rgba(255,255,255,.85), 88vw 80vh rgba(255,255,255,.8);
animation:fxDriftNear 28s linear infinite, fxTwinkleNear 4.4s ease-in-out infinite;
}
/* Вертикальный дрейф: слой уезжает на свою высоту и бесшовно повторяется */
@keyframes fxDriftFar { from{ transform:translate3d(0,0,0); } to{ transform:translate3d(0,-30vh,0); } }
@keyframes fxDriftNear{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(0,-46vh,0); } }
/* Мерцание — контрфаза у слоёв, чтобы «дышало» без единого ритма */
@keyframes fxTwinkleFar { 0%,100%{ opacity:.45; } 50%{ opacity:.85; } }
@keyframes fxTwinkleNear{ 0%,100%{ opacity:.9; } 50%{ opacity:.55; } }
/* ============================================================================
2. КИНЕМАТОГРАФИЧНЫЙ ВХОД ЭКРАНОВ
----------------------------------------------------------------------------
style.css задаёт .screen{animation:fade}. Здесь усиливаем именно активный
экран: fade + масштаб из глубины + снятие блюра (расфокус → фокус).
Селектор .screen.active специфичнее .screen → перебивает без !important.
========================================================================== */
.screen.active{
animation:fxScreenIn .44s var(--fx-ease-out) both;
transform-origin:50% 30%;
}
@keyframes fxScreenIn{
0% { opacity:0; transform:translate3d(0,14px,0) scale(.985); filter:blur(6px); }
60% { opacity:1; }
100%{ opacity:1; transform:translate3d(0,0,0) scale(1); filter:blur(0); }
}
/* ============================================================================
3. МИКРОВЗАИМОДЕЙСТВИЯ — упругий отклик + свет на hover/active
----------------------------------------------------------------------------
Дополняем существующие :active-сжатия из style.css более «сочной» пружиной
и световым ответом. Класс не нужен — работает на существующих селекторах.
========================================================================== */
/* Кнопки: упругий возврат с лёгким перелётом + глубже проседание при нажатии */
.btn{ transition:transform .16s var(--fx-ease-back), filter .2s var(--fx-ease-out), box-shadow .2s var(--fx-ease-out); }
.btn:active{ transform:scale(.94); filter:brightness(1.06); }
/* Золотая кнопка при удержании — тёплая вспышка света */
.btn.gold:active{ filter:brightness(1.12) saturate(1.1); }
/* Карточка кейса: чуть подсветляется и приподнимается при нажатии,
упругий откат. Дополняет .breath/.press из juice.css, не спорит с ними. */
.case-card{ transition:transform .2s var(--fx-ease-back), box-shadow .25s var(--fx-ease-out), filter .25s; }
.case-card:active{ filter:brightness(1.08) saturate(1.05); }
/* Вкладки таббара: иконка «клюёт» при нажатии, подпись теплеет */
.tab{ transition:color .2s var(--fx-ease-out), transform .16s var(--fx-ease-back); }
.tab:active{ transform:scale(.9); }
.tab:active span{ transform:scale(.86); }
/* Быстрые ставки crash + степперы — единый упругий тактильный язык */
.crash-quick button:active,
.crash-step:active{ transform:scale(.92); filter:brightness(1.08); }
/* ============================================================================
4. ЖИВОЕ ЗОЛОТОЕ СВЕЧЕНИЕ — баланс и активная вкладка
----------------------------------------------------------------------------
Иерархия движения: баланс — «источник ценности», ему можно дышать светом.
Свечение через box-shadow/filter в медленном 4.5с-цикле (не в кадре игры,
поэтому по стоимости допустимо; ниже — глушим в reduced-motion).
========================================================================== */
/* Баланс-чип звёзд: тёплый золотой ореол дышит + иконка искрит */
.chip.stars{
border-color:rgba(255,210,74,.45);
animation:fxChipGlow 4.5s ease-in-out infinite;
will-change:box-shadow;
}
@keyframes fxChipGlow{
0%,100%{ box-shadow:var(--e1), inset 0 1px 0 rgba(255,220,120,.22), 0 0 12px rgba(255,210,74,.14); }
50% { box-shadow:var(--e1), inset 0 1px 0 rgba(255,220,120,.3), 0 0 22px rgba(255,210,74,.34); }
}
.chip.stars b{
background:linear-gradient(180deg,var(--gold3),var(--gold));
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.chip.stars img{ animation:fxStarSpark 5s ease-in-out infinite; will-change:filter; }
@keyframes fxStarSpark{
0%,100%{ filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
50% { filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)) drop-shadow(0 0 6px rgba(255,210,74,.7)); }
}
/* Активная вкладка: индикатор-пилюля пульсирует золотым */
.tab.active::before{ animation:fxTabPulse 2.6s ease-in-out infinite; will-change:opacity, box-shadow; }
@keyframes fxTabPulse{
0%,100%{ box-shadow:0 2px 10px rgba(255,210,74,.55); opacity:.9; }
50% { box-shadow:0 2px 18px rgba(255,210,74,.95); opacity:1; }
}
/* ============================================================================
5. ПЛАВНЫЕ ПОЯВЛЕНИЯ (то, чего нет в juice.css)
----------------------------------------------------------------------------
Модалки прилетают из глубины со снятием блюра — как «фокус камеры».
========================================================================== */
/* Оверлеи модалок: фон проявляется мягче, чем дефолтный fade */
.modal-overlay.open{ animation:fxOverlayIn .3s var(--fx-ease-out) both; }
@keyframes fxOverlayIn{ from{ opacity:0; backdrop-filter:blur(0); } to{ opacity:1; } }
/* Сама коробка модалки — влёт из глубины с overshoot и расфокусом.
Работает и для .roulette-box, и для .refgate. */
.modal-overlay.open .roulette-box{
animation:fxModalPop .5s var(--fx-ease-back) both;
will-change:transform, opacity;
}
@keyframes fxModalPop{
0% { opacity:0; transform:translate3d(0,24px,0) scale(.9); filter:blur(8px); }
60% { opacity:1; }
100%{ opacity:1; transform:translate3d(0,0,0) scale(1); filter:blur(0); }
}
/* Тост: лёгкий upbeat при появлении (дополняет transition из style.css) */
.toast.show{ animation:fxToastPop .34s var(--fx-ease-back) both; }
@keyframes fxToastPop{
0% { transform:translateX(-50%) translateY(20px) scale(.94); }
100%{ transform:translateX(-50%) translateY(0) scale(1); }
}
/* ============================================================================
6. GLASSMORPHISM-ПОЛИРОВКА — тонкие внутренние блики
----------------------------------------------------------------------------
Верхняя кромка карточек ловит свет (1px-хайлайт), нижняя уходит в тень.
Реализация через box-shadow inset (статичная, без анимации) — бесплатно.
Не трогаем существующие ::before/::after этих карточек (заняты в style.css) —
добавляем блик отдельным box-shadow к элементу.
========================================================================== */
.timer-card,
.friends-card,
.inv-summary,
.hist-row,
.crash-live,
.withdraw-card{
box-shadow:
inset 0 1px 0 rgba(255,255,255,.1), /* верхний световой кант */
inset 0 -1px 0 rgba(0,0,0,.28), /* нижняя огранка */
var(--e2);
}
/* Стеклянный блик-полоса по верхней кромке модалки */
.roulette-box{ box-shadow:var(--e4), inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.03); }
/* ============================================================================
7. ЖИВОЙ СВЕТ ПРЕЛОАДЕРА (мягкий бонус)
Золотое гало логотипа дышит — первая секунда задаёт тон «премиум».
Класс .pl-glow уже есть в HTML; анимируем только opacity/transform.
========================================================================== */
.pl-glow{ animation:fxPreloadGlow 3.2s ease-in-out infinite; will-change:transform, opacity; }
@keyframes fxPreloadGlow{
0%,100%{ transform:translateZ(0) scale(1); opacity:.6; }
50% { transform:translateZ(0) scale(1.12); opacity:1; }
}
/* ============================================================================
8. ДОСТУПНОСТЬ — prefers-reduced-motion
Глушим все бесконечные/тяжёлые эффекты. Мгновенный отклик нажатий оставляем —
интерфейс не должен ощущаться мёртвым даже в щадящем режиме.
========================================================================== */
@media (prefers-reduced-motion: reduce){
/* Фон замирает, но остаётся красивым статичным градиентом */
.fx-aurora::before, .fx-aurora::after,
.fx-rays::before,
.fx-particles::before, .fx-particles::after,
.chip.stars, .chip.stars img,
.tab.active::before,
.pl-glow{
animation:none !important;
}
/* Входы экранов/модалок — мгновенные, без блюр-переходов (дёшево и без тошноты) */
.screen.active,
.modal-overlay.open,
.modal-overlay.open .roulette-box,
.toast.show{
animation-duration:.01ms !important;
filter:none !important;
}
/* Убираем блюр-фильтры из финальных состояний на всякий случай */
.screen.active{ filter:none !important; }
/* Нажатия оставляем — это тактильный отклик, а не «движение» */
}