/* Мини-игры (22 октября 2026): общее для games/case/casino/kristally — тёмная шапка и плавные переходы между страницами.
   Переход: страница мягко гаснет/проявляется, картинка игры перелетает из карточки в шапку (View Transitions). */
@view-transition { navigation: auto; }
/* страницы проявляются одна в другой одновременно (без тёмной паузы); шапка сайта и большой баннер стоят на месте
   и плавно перетекают, перелетает картинка игры. Без задержек — иначе между страницами мелькает пустой экран. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 300ms; animation-timing-function: ease; }
::view-transition-group(*) { animation-duration: 450ms; animation-timing-function: cubic-bezier(.2, .9, .25, 1); }
.top { view-transition-name: site-top; }
.vt-hero { view-transition-name: g-hero; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

.g-hero { position: relative; margin-top: 18px; border-radius: 26px; overflow: hidden; min-height: 260px; padding: 34px 36px; color: #f3ebe0;
  background: #15110d var(--bgimg, url(../img/keys/bg-case.webp)) 0% 45% / 175% auto no-repeat; box-shadow: 0 24px 50px -30px #000c; }
.g-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #15110df2 0%, #15110dcc 38%, #15110d33 70%, transparent); }
.g-hero > * { position: relative; }
.g-hero .eyebrow { color: #f2b86b; }
.g-hero h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(32px, 4.4vw, 48px); margin: 8px 0 6px; color: #fff7ec; max-width: 60%; }
.g-hero .lead, .g-hero p { color: #d9cdbd; max-width: 56ch; }
.g-hero .g-img { position: absolute; right: 6%; bottom: 8%; width: min(240px, 30%); aspect-ratio: 1; max-width: none; object-fit: contain; filter: drop-shadow(0 18px 30px #000c); z-index: 1; }
@media (max-width: 760px) { .g-hero { padding: 24px 20px 170px; } .g-hero h1 { max-width: none; } .g-hero .g-img { width: 150px; right: 50%; margin-right: -75px; bottom: 12px; } }

/* какие блоки во что превращаются */
.vt-case-img { view-transition-name: gi-case; }
.vt-casino-img { view-transition-name: gi-casino; }
.vt-tasks-img { view-transition-name: gi-tasks; }