:root {
  --motion-fast: 200ms;
  --motion-normal: 380ms;
  --motion-reveal: 620ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

.motion-ready .reveal-item {
  opacity: 0;
  filter: blur(6px);
  transform: translate3d(0, 28px, 0) scale(.97);
  transition:
    opacity var(--motion-reveal) var(--motion-ease),
    transform var(--motion-reveal) var(--motion-ease),
    filter 520ms var(--motion-ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.motion-ready .reveal-item.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.site-header {
  animation: header-enter 520ms var(--motion-ease) both;
  transition:
    background-color var(--motion-normal) ease,
    border-color var(--motion-normal) ease,
    box-shadow var(--motion-normal) ease,
    backdrop-filter var(--motion-normal) ease;
}

.site-header.is-scrolled {
  border-bottom-color: rgba(96, 215, 255, .2);
  background: rgba(5, 8, 22, .95);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .3);
  backdrop-filter: blur(22px) saturate(130%);
}

@keyframes header-enter {
  from { opacity: 0; transform: translate3d(0, -14px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.hero-shell::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 430px;
  height: 430px;
  left: var(--pointer-x, 76%);
  top: var(--pointer-y, 22%);
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, rgba(34, 211, 238, .12), rgba(153, 102, 255, .055) 38%, transparent 69%);
  transform: translate(-50%, -50%);
  transition: opacity 350ms ease;
}

.hero-shell.has-pointer-glow::after { opacity: 1; }

.motion-ready .hero.reveal-item {
  filter: none;
  transform: none;
}

.motion-ready .hero.reveal-item .hero-art,
.motion-ready .hero.reveal-item .hero-copy > * {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 650ms var(--motion-ease),
    transform 650ms var(--motion-ease);
}

.motion-ready .hero.reveal-item .hero-art {
  transform: scale(.985);
  transition-delay: 40ms;
}

.motion-ready .hero.reveal-item .hero-copy .eyebrow { transition-delay: 120ms; }
.motion-ready .hero.reveal-item .hero-copy h1 { transition-delay: 200ms; }
.motion-ready .hero.reveal-item .hero-copy p { transition-delay: 280ms; }
.motion-ready .hero.reveal-item .hero-copy .row-wrap { transition-delay: 360ms; }
.motion-ready .hero.reveal-item .hero-copy .hero-trust { transition-delay: 440ms; }

.motion-ready .hero.reveal-item.is-visible .hero-art,
.motion-ready .hero.reveal-item.is-visible .hero-copy > * {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.motion-ready .section-head .eyebrow::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 560ms var(--motion-ease) 130ms;
}

.motion-ready .section-head.is-visible .eyebrow::before { transform: scaleX(1); }

.card,
.button,
.icon-button,
.pill,
.nav-link,
.support-button,
.quantity-stepper button {
  transition:
    transform var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    opacity var(--motion-fast) ease;
}

.product-thumb img,
.game-cover img {
  transform: scale(1);
  transition: transform 420ms var(--motion-ease), filter 300ms ease;
}

.button:not(:disabled):not(.disabled):hover,
.icon-button:not(:disabled):hover {
  transform: translate3d(0, -1px, 0) scale(1.025);
  box-shadow: 0 14px 34px rgba(34, 211, 238, .16);
}

.button:not(:disabled):not(.disabled):active,
.icon-button:not(:disabled):active,
.pill:not(:disabled):active,
.quantity-stepper button:not(:disabled):active {
  transform: scale(.97);
  transition-duration: 110ms;
}

.catalog-toolbar {
  transition:
    transform var(--motion-fast) var(--motion-ease),
    border-color var(--motion-normal) ease,
    box-shadow var(--motion-normal) ease;
}

.catalog-toolbar:focus-within {
  border-color: rgba(34, 211, 238, .42);
  box-shadow: 0 22px 64px rgba(0, 0, 0, .34), 0 0 0 3px rgba(34, 211, 238, .07);
  transform: scale(1.006);
}

.category-pills { scroll-behavior: smooth; }
.pill { position: relative; overflow: hidden; }
.pill:hover:not(:disabled) { border-color: rgba(34, 211, 238, .42); color: var(--text); transform: translateY(-1px); }
.pill.active {
  background-size: 180% 180%;
  box-shadow: 0 8px 24px rgba(34, 211, 238, .16);
}

.game-grid,
.product-grid,
.feature-grid,
.steps {
  transition: opacity 180ms ease, transform 240ms var(--motion-ease);
}

.game-grid.grid-refreshing,
.product-grid.grid-refreshing,
.feature-grid.grid-refreshing,
.steps.grid-refreshing {
  opacity: .82;
  transform: translate3d(0, 4px, 0);
}

.badge-special-stock {
  animation: special-stock-pulse 3.8s ease-in-out infinite;
}

.product-card-special {
  box-shadow: 0 16px 44px rgba(96, 0, 15, .18), 0 0 0 1px rgba(255, 63, 80, .05);
}

@keyframes special-stock-pulse {
  0%, 100% { box-shadow: 0 0 14px rgba(255, 51, 73, .16); }
  50% { box-shadow: 0 0 24px rgba(255, 51, 73, .3); }
}

.empty-icon { animation: empty-float 3.4s ease-in-out infinite; }

@keyframes empty-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -5px, 0); }
}

.skeleton-card {
  min-height: 270px;
  padding: .8rem;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: rgba(13, 20, 42, .72);
}

.skeleton-media { height: 154px; margin-bottom: .8rem; }
.skeleton-line { height: 13px; margin-top: .55rem; }
.skeleton-line.short { width: 58%; }

body::before {
  animation: ambient-grid 28s linear infinite alternate;
  will-change: background-position;
}

@keyframes ambient-grid {
  from { background-position: 0 0, 0 0; }
  to { background-position: 56px 28px, 28px 56px; }
}

@media (hover: hover) and (pointer: fine) {
  .motion-ready .product-card.is-visible:hover,
  .motion-ready .game-card.is-visible:hover {
    border-color: rgba(72, 218, 255, .48);
    box-shadow: 0 24px 58px rgba(0, 0, 0, .4), 0 0 28px rgba(96, 83, 255, .11);
    transform: translate3d(0, -6px, 0) scale(1.008);
  }

  .motion-ready .product-card-special.is-visible:hover {
    border-color: rgba(255, 82, 98, .62);
    box-shadow: 0 25px 60px rgba(55, 0, 12, .38), 0 0 28px rgba(255, 51, 73, .13);
  }

  .product-card:hover .product-thumb img,
  .game-card:hover .game-cover img {
    transform: scale(1.045);
  }
}

@media (max-width: 800px) {
  .motion-ready .reveal-item {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }

  .motion-ready .reveal-item.is-visible {
    opacity: 1;
    filter: none;
    transform: none;
  }

  .hero-shell::after { display: none; }
  body::before { animation: none; }
  .badge-special-stock,
  .empty-icon { animation: none; }
}

@media (max-width: 640px) {
  /* The mobile hero must never reserve an empty block while reveal motion initializes. */
  .motion-ready .home-page .hero.reveal-item .hero-art,
  .motion-ready .home-page .hero.reveal-item .hero-copy > * {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .reveal-item,
  .motion-ready .hero.reveal-item .hero-art,
  .motion-ready .hero.reveal-item .hero-copy > * {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }

  .site-header,
  .badge-special-stock,
  .empty-icon,
  body::before {
    animation: none !important;
  }

  .hero-shell::after { display: none; }
  .category-pills { scroll-behavior: auto; }
}


/* Admin uses dynamic nested views; never leave its functional content waiting on viewport observation. */
.motion-ready .admin-layout .reveal-item {
  opacity: 1;
  filter: none;
  transform: none;
  transition-delay: 0ms;
}

.motion-ready #admin-content > * {
  animation: admin-content-enter 420ms var(--motion-ease) both;
}

@keyframes admin-content-enter {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready #admin-content > * { animation: none !important; }
}