/* =========================================================================
   express.css — слой выразительности поверх базовой style.css
   Подключается ПОСЛЕ style.css. Базовый дизайн референса не трогаем.
   ========================================================================= */

/* ---------- живой фон ---------- */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(620px 420px at 6% -6%,   rgba(240,160,30,.12), transparent 62%),
    radial-gradient(760px 520px at 96% 12%,  rgba(101,78,214,.14), transparent 62%),
    radial-gradient(900px 640px at 50% 112%, rgba(31,157,85,.10),  transparent 62%);
  animation:orb 20s ease-in-out infinite alternate;
}
@keyframes orb{from{opacity:.85}to{opacity:1;transform:translateY(-12px)}}

/* ---------- H1: градиент + драконье свечение ---------- */
.h1{
  background:linear-gradient(94deg,#ffffff 12%,#ffd479 52%,#f0a01e 88%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 4px 22px rgba(240,160,30,.22));
}

/* ---------- CTA: пульс + бегущий блик ---------- */
.btn-cta{position:relative;overflow:hidden;animation:ctaGlow 2.8s ease-in-out infinite}
.btn-cta::after{
  content:'';position:absolute;top:0;left:-90%;width:45%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-22deg);animation:ctaShine 3.4s ease-in-out infinite;
}
@keyframes ctaGlow{
  0%,100%{box-shadow:0 6px 22px rgba(240,160,30,.30)}
  50%{box-shadow:0 8px 36px rgba(240,160,30,.55)}
}
@keyframes ctaShine{0%{left:-90%}55%,100%{left:135%}}

/* ---------- карточки статистики ---------- */
.stat{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.stat:hover{transform:translateY(-3px);border-color:rgba(240,160,30,.5);box-shadow:0 14px 32px rgba(0,0,0,.45)}
.stat-ico{animation:statPop .55s cubic-bezier(.2,.9,.3,1.4) backwards}
.stat:nth-of-type(2) .stat-ico{animation-delay:.12s}
@keyframes statPop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.stat-value{
  background:linear-gradient(90deg,#ffffff 20%,#ffd479 90%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ---------- заголовок секции (h2) ---------- */
.sect{
  font-size:calc(21px * var(--s));font-weight:800;margin-top:calc(28px * var(--s));
  display:flex;align-items:center;gap:calc(12px * var(--s));letter-spacing:-.2px;
}
.sect::before{
  content:'';width:calc(7px * var(--s));height:calc(26px * var(--s));border-radius:4px;
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  box-shadow:0 0 14px rgba(240,160,30,.55);
}
.sect::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(240,160,30,.55),transparent)}

/* ---------- выразительные баннеры слайдера (вместо видео) ---------- */
.banner{position:absolute;inset:0;overflow:hidden}
.banner.b1{background:radial-gradient(120% 150% at 70% 45%,#ffb63c 0%,#d0631a 32%,#5e2a12 64%,#141317 100%)}
.banner.b2{background:radial-gradient(120% 150% at 28% 50%,#9a4fe8 0%,#4a1f8e 38%,#1b1030 78%,#110a1c 100%)}
.banner.b3{background:radial-gradient(120% 150% at 62% 55%,#17b566 0%,#0b6a45 36%,#0d2b26 78%,#0a1917 100%)}

.banner .glow{position:absolute;width:320px;height:320px;border-radius:50%;filter:blur(64px);opacity:.5}
.banner .g1{top:-120px;left:8%;background:rgba(255,255,255,.35);animation:glowA 6s ease-in-out infinite alternate}
.banner .g2{bottom:-140px;right:12%;background:rgba(0,0,0,.4);animation:glowA 8s ease-in-out infinite alternate-reverse}
@keyframes glowA{from{transform:scale(1)}to{transform:scale(1.35)}}

.banner .fly{
  position:absolute;font-size:calc(44px * var(--s));
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.45));
  animation:flyUp 9s linear infinite;
}
.banner .f1{right:13%;bottom:-40px;font-size:calc(96px * var(--s));animation:dragonFly 5.5s ease-in-out infinite}
.banner .f2{right:36%;bottom:-70px;animation-duration:7.5s}
.banner .f3{right:27%;bottom:-70px;animation-delay:3.6s;animation-duration:8.5s}
@keyframes flyUp{
  0%{transform:translateY(0) rotate(0);opacity:0}
  12%{opacity:.9}
  100%{transform:translateY(-300px) rotate(340deg);opacity:0}
}
@keyframes dragonFly{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-16px) rotate(4deg)}}

.slide-content{position:relative;z-index:3;padding:calc(30px * var(--s)) calc(34px * var(--s));max-width:70%}
.slide-content .badge{
  display:inline-block;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(4px);color:#ffe9c4;font-size:calc(11.5px * var(--s));font-weight:800;
  letter-spacing:1.4px;text-transform:uppercase;padding:calc(5px * var(--s)) calc(12px * var(--s));
  border-radius:999px;animation:riseIn .6s ease-out .1s backwards;
}
.slide-content .b-title{
  font-size:calc(31px * var(--s));font-weight:900;line-height:1.06;margin-top:calc(10px * var(--s));
  color:#fff;text-shadow:0 3px 18px rgba(0,0,0,.45);animation:riseIn .6s ease-out .2s backwards;
}
.slide-content .b-sub{
  font-size:calc(13.5px * var(--s));margin-top:calc(7px * var(--s));
  color:rgba(255,255,255,.85);animation:riseIn .6s ease-out .32s backwards;
}
@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.slide-go{z-index:4;animation:ctaGlow 2.8s ease-in-out infinite}

/* ---------- плитки игр: блик при ховере ---------- */
@media (hover:hover) and (pointer:fine){
  .tile::after{
    content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.16) 50%,transparent 58%);
    transform:translateX(-130%);transition:transform .65s ease;
  }
  .tile:hover::after{transform:translateX(130%)}
}

/* ---------- категории: фолбэк-фон + ховер ---------- */
.cat.cat--slots{background:linear-gradient(rgba(44,28,10,.88),rgba(20,13,6,.95)),url('/img/slots_bg_mobile-BKjAZFV1.webp');background-size:cover;background-position:center}
.cat.cat--live{background:linear-gradient(rgba(12,32,26,.88),rgba(6,16,13,.95)),url('/img/live_bg_mobile-CMh3ZkNT.webp');background-size:cover;background-position:center}
.cat{transition:transform .25s ease,box-shadow .25s ease}
.cat:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,0,0,.45)}
.dot-live{animation:livePulse 1.6s ease-in-out infinite}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(56,201,106,.6)}55%{box-shadow:0 0 0 7px rgba(56,201,106,0)}}

/* ---------- появление блоков при загрузке ---------- */
.h1,.hero,.sect,.slider,.cats,.footer{animation:riseIn .6s ease-out backwards}
.hero{animation-delay:.07s}
.sect{animation-delay:.13s}
.slider{animation-delay:.19s}
.cats{animation-delay:.25s}
.footer{animation-delay:.3s}

/* ---------- шапка и рейл ---------- */
.logo-header{transition:filter .25s ease}
.brand:hover .logo-header{filter:drop-shadow(0 0 12px rgba(240,160,30,.7))}
.rail-btn{transition:transform .18s ease,background .18s ease,color .18s ease}
.rail-btn:hover{transform:scale(1.14)}
.nav a.active{animation:navGlow 3s ease-in-out infinite}
@keyframes navGlow{0%,100%{border-bottom-color:var(--accent)}50%{border-bottom-color:var(--accent-2)}}

/* ---------- чат: мелкая жизнь ---------- */
.chat-auth b{text-shadow:0 0 18px rgba(240,160,30,.45)}
.event-prize{
  background-image:linear-gradient(100deg,var(--accent) 0%,#ffdd8a 45%,var(--accent) 70%);
  background-size:200% 100%;animation:prizeShine 2.6s linear infinite;
}
@keyframes prizeShine{from{background-position:120% 0}to{background-position:-60% 0}}
.hide-tag{cursor:pointer;transition:filter .2s}
.hide-tag:hover{filter:brightness(1.15)}

/* ---------- мобильные доработки ---------- */
@media (max-width:900px){
  .slide-content{padding:18px;max-width:78%}
  .slide-content .b-title{font-size:24px}
  .slide-content .b-sub{font-size:12.5px}
  .banner .f1{font-size:76px;right:8%}
  .banner .f2,.banner .f3{display:none}
  .sect{font-size:20px;margin-top:18px}
}

/* ---------- уважение к reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}