:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
}

@view-transition { navigation: auto; }
header.site { view-transition-name: site-header; }
::view-transition-old(root) { animation: vtOut .16s ease-in both; }
::view-transition-new(root) { animation: vtIn .26s var(--ease-out) both; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(8px); } }

html { -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }

.btn, .hc-go, .hc-me, .tile, .zcard, .mc-row, .mc-states a, .mc-wallet a,
nav.main > a, .ord-filter a, .cart-btn, .burger, .topup button, .step button {
  transition: transform .14s var(--ease-out), background-color .14s, border-color .14s, color .14s, opacity .14s;
}
.btn:active:not(:disabled), .hc-go:active, .hc-me:active, .cart-btn:active, .burger:active,
.ord-filter a:active, .topup button:active, .step button:active { transform: scale(.97); }
.tile:active, .zcard:active { transform: scale(.985); }
.mc-row:active, nav.main > a:active, .mc-states a:active, .mc-wallet a:active { background-color: rgba(255, 255, 255, .04); }

:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

@media (hover: hover) {
  .tile:hover { transform: translateY(-3px); border-color: #5a3040; }
  .tile .art img { transition: transform .4s var(--ease-out); }
  .tile:hover .art img { transform: scale(1.04); }
  .hc-me:hover { border-color: #5e5078; }
  .hc-go:not(.is-main):hover { border-color: #5e5078; background-color: rgba(255, 255, 255, .03); }
}

.hcard > * { animation: riseIn .5s var(--ease-out) both; }
.hcard > :nth-child(2) { animation-delay: .05s; }
.hcard > :nth-child(3) { animation-delay: .1s; }
.hcard > :nth-child(4) { animation-delay: .15s; }
.hcard > :nth-child(5) { animation-delay: .2s; }
.hcard > :nth-child(6) { animation-delay: .25s; }
.hcard > :nth-child(7) { animation-delay: .3s; }
.hcard > :nth-child(8) { animation-delay: .35s; }
.hcard > .hc-art { animation: figIn .8s var(--ease-out) both; }
@keyframes riseIn { from { opacity: 0; transform: translateY(12px); } }
@keyframes figIn { from { opacity: 0; transform: scale(1.04); } }

.hc-member:empty, .sk {
  border-radius: 14px;
  background: linear-gradient(100deg, var(--ink-2) 30%, var(--ink-3) 50%, var(--ink-2) 70%) 0 0 / 300% 100%;
  animation: shimmer 1.3s linear infinite;
}
.sk { display: block; margin-bottom: 12px; border-radius: 10px; }
.sk-card { height: 150px; margin-top: 20px; }
.sk-row { height: 64px; }
.sk-tall { height: 210px; }
@keyframes shimmer { to { background-position: -150% 0; } }

.hc-me { animation: fadeIn .3s ease-out both; }
@keyframes fadeIn { from { opacity: 0; } }

html.motion .rv { opacity: 0; transform: translateY(18px); }
html.motion .rv.in {
  opacity: 1; transform: none;
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 45ms);
}

@media (max-width: 780px) {
  nav.main.open { animation: navDrop .22s var(--ease-out) both; }
  nav.main.open > * { animation: riseIn .3s var(--ease-out) both; }
  nav.main.open > :nth-child(2) { animation-delay: .02s; }
  nav.main.open > :nth-child(3) { animation-delay: .04s; }
  nav.main.open > :nth-child(4) { animation-delay: .06s; }
  nav.main.open > :nth-child(5) { animation-delay: .08s; }
  nav.main.open > :nth-child(6) { animation-delay: .1s; }
  nav.main.open > :nth-child(7) { animation-delay: .12s; }
  nav.main.open > :nth-child(8) { animation-delay: .14s; }
}
@keyframes navDrop { from { opacity: 0; transform: translateY(-10px); } }
.burger span { transition: transform .22s var(--ease-out), opacity .15s; }

details[open] > :not(summary) { animation: openDown .26s var(--ease-out); }
@keyframes openDown { from { opacity: 0; transform: translateY(-6px); } }
.qa summary, .gamegroup > summary { transition: color .14s, background-color .14s; }

.toast { animation: toastIn .32s var(--ease-spring) both; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.toast.is-out { animation: toastOut .2s ease-in forwards; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 14px) scale(.96); } }
@keyframes toastOut { to { opacity: 0; transform: translate(-50%, 8px); } }

.bump { animation: bump .4s var(--ease-spring); }
@keyframes bump { 40% { transform: scale(1.35); } }

.view-in { animation: viewIn .3s var(--ease-out) both; }
@keyframes viewIn { from { opacity: 0; transform: translateX(10px); } }
.view-back { animation: viewBack .3s var(--ease-out) both; }
@keyframes viewBack { from { opacity: 0; transform: translateX(-10px); } }

.topup.in-cart { transition: border-color .2s, background-color .2s; }
.hc-status.is-open .hc-clock { animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(6, 199, 85, .45); } 70%, 100% { box-shadow: 0 0 0 8px rgba(6, 199, 85, 0); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.motion .rv { opacity: 1; transform: none; }
}