/* ===== v4: лёгкие анимации (только transform/opacity, без blur/filter/backdrop) ===== */
:root{--ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.4,.5,1)}
#winners,.footer{content-visibility:auto;contain-intrinsic-size:auto 900px}
canvas#embers{will-change:auto}

.scrollbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#ff8a2b,#ff3b30);will-change:transform}

/* аватар */
.brand-ava{width:30px;height:30px;border-radius:9px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,140,80,.35)}
.hero-ava{display:block;width:96px;height:96px;margin:0 auto 22px;border-radius:28px;object-fit:cover;box-shadow:0 0 0 2px rgba(255,140,80,.5),0 0 0 8px rgba(255,90,31,.08),0 20px 50px -14px rgba(255,90,31,.7);animation:avaIn .8s var(--spring) both}
.hero-ava[hidden]{display:none}
@keyframes avaIn{from{opacity:0;transform:scale(.6) rotate(-8deg)}}

/* вход героя */
.hero-inner.reveal{opacity:1;transform:none;transition:none}
.hero-inner>*{animation:up .8s var(--ease) both}
.hero-inner>:nth-child(1){animation-delay:.04s}.hero-inner>:nth-child(2){animation-delay:.12s}.hero-inner>:nth-child(3){animation-delay:.22s}
.hero-inner>:nth-child(4){animation-delay:.32s}.hero-inner>:nth-child(5){animation-delay:.42s}
@keyframes up{from{opacity:0;transform:translate3d(0,26px,0);filter:blur(6px)}}
.hero-emblem{will-change:transform;transform:translate3d(-50%,-52%,0)}


/* пауза анимаций, когда шапка не на экране */
.hero-off .ring,.hero-off h1 .accent,.hero-off .dot{animation-play-state:paused}

/* появление при прокрутке */
.reveal{opacity:0;transform:translate3d(0,30px,0);filter:blur(5px);transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease)}
.reveal.in{opacity:1;transform:none;filter:none}

/* кнопки */
.btn{transition:transform .3s var(--ease),box-shadow .3s,background .3s;position:relative;overflow:hidden}
.btn:hover{transform:translate3d(0,-2px,0)}.btn:active{transform:scale(.97);transition-duration:.1s}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn-primary:hover::after{transform:translateX(120%)}

/* карточки призов */
.prize-grid{perspective:1100px}
.prize{transition:opacity .8s var(--ease),transform .45s var(--ease),border-color .3s,box-shadow .35s}
.prize.in{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.prize.in:hover{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-5px)}
.prize::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(var(--cg),.15),transparent 70%)}
.prize:hover::after{opacity:1}
.p-icon{transition:transform .35s var(--ease)}
.p-icon svg{width:30px;height:30px}
.prize:hover .p-icon{transform:translateY(-2px)}

/* таблица / модалка */
.row{transition:transform .25s var(--ease),background .2s,border-color .2s;animation:rise .5s var(--ease) both;contain:layout paint}
.row:hover{transform:translate3d(5px,0,0)}
.card{animation:pop .5s var(--spring)}
@keyframes pop{from{opacity:0;transform:translate3d(0,34px,0) scale(.92)}}
.card-body.swap{animation:swap .4s var(--ease)}
@keyframes swap{from{opacity:0;transform:translate3d(var(--dir,24px),0,0)}}
.card-rays{animation:spin 60s linear infinite;will-change:transform}
.m-icon{width:72px;height:72px;margin:0 auto 14px;border-radius:22px;color:var(--c);background:linear-gradient(145deg,rgba(var(--cg),.2),rgba(var(--cg),.04));border:1px solid rgba(var(--cg),.3)}
.m-icon svg{width:36px;height:36px;filter:none;animation:iconIn .5s var(--ease) both}
@keyframes iconIn{from{opacity:0;transform:scale(.7)}}
.card-rays{display:none}
.pending{animation:up .7s var(--ease) both}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.hero-inner>*{opacity:1!important;transform:none!important}
}