/* Premium motion layer: soft light, visual depth and calm interaction feedback. */
:root {
  --motion-ice: #d9efff;
  --motion-blue: #8ebdff;
  --motion-blue-strong: #6f9ff1;
  --motion-violet: #a59cff;
  --motion-mint: #7ce4ce;
  --motion-shadow: 0 24px 64px rgba(5, 12, 27, .28);
  --motion-soft-shadow: 0 14px 36px rgba(5, 12, 27, .2);
}

html { scroll-behavior: smooth; }
body { min-height: 100%; }

/* The vector texture is deliberately quiet; it reads as detail, not wallpaper. */
.ambient-sky::before {
  position: absolute;
  inset: -8% -4%;
  background: url('/assets/premium-constellation.svg') center top / min(960px, 78vw) auto repeat;
  content: '';
  opacity: .46;
  transform: translate3d(0, calc(var(--nexus-scroll-y, 0) * -.018px), 0);
  animation: premium-constellation-drift 42s ease-in-out infinite alternate;
  mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,.78) 46%, transparent 96%);
}

.ambient-sky::after {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 52% 12%, rgba(205, 235, 255, .1), transparent 1px) 0 0 / 42px 42px,
    linear-gradient(112deg, transparent 23%, rgba(221, 241, 255, .035) 49%, transparent 72%);
  content: '';
  opacity: .6;
  animation: premium-light-pan 28s linear infinite;
}

.ambient-aurora { mix-blend-mode: screen; }
.ambient-aurora-one { opacity: .16; }
.ambient-aurora-two { opacity: .13; }
.ambient-star { width: 4px; height: 4px; }

/* Header: one continuous glassy plane with a clear action hierarchy. */
.utility-bar {
  background: rgba(16, 24, 37, .84) !important;
  backdrop-filter: blur(18px) saturate(130%);
}

.site-header {
  background: linear-gradient(135deg, rgba(39, 51, 71, .95), rgba(29, 39, 56, .94)) !important;
  box-shadow: 0 18px 48px rgba(5, 12, 28, .22), inset 0 1px rgba(255,255,255,.055) !important;
  backdrop-filter: blur(24px) saturate(135%);
}

.site-header::after {
  position: absolute;
  right: 7%;
  bottom: 0;
  left: 7%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(193, 224, 255, .23), transparent);
  content: '';
  pointer-events: none;
}

.site-header .brand-symbol,
.footer .brand-symbol {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #415472, #2b394f) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.14), 0 9px 24px rgba(5,12,28,.2) !important;
}

.site-header .brand-symbol::after,
.footer .brand-symbol::after {
  position: absolute;
  inset: -35%;
  background: linear-gradient(110deg, transparent 28%, rgba(255,255,255,.33) 48%, transparent 68%);
  content: '';
  transform: translateX(-80%);
  animation: premium-brand-sheen 7.5s ease-in-out infinite;
}

.site-header .brand-word { text-shadow: 0 3px 22px rgba(190, 222, 255, .1); }

.site-header .global-search {
  position: relative;
  overflow: hidden;
  background: rgba(50, 64, 87, .76) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.065), 0 10px 30px rgba(4, 12, 27, .1) !important;
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}

.site-header .global-search::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 22%, rgba(208, 233, 255, .08) 48%, transparent 76%);
  content: '';
  transform: translateX(-100%);
  transition: transform .65s ease;
  pointer-events: none;
}

.site-header .global-search:hover::before,
.site-header .global-search:focus-within::before { transform: translateX(100%); }
.site-header .global-search:focus-within { transform: translateY(-1px); }
.site-header .global-search button { position: relative; overflow: hidden; }

.site-header :is(.sell-btn,.register-pill,.btn-primary),
.btn-primary,
.nexus-hero-primary,
.wheel-spin {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.site-header :is(.sell-btn,.register-pill)::after,
.btn-primary::after,
.nexus-hero-primary::after,
.wheel-spin::after {
  position: absolute;
  inset: -80% -50%;
  z-index: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.5) 49%, transparent 63%);
  content: '';
  transform: translateX(-90%) rotate(8deg);
  transition: transform .7s ease;
  pointer-events: none;
}

.site-header :is(.sell-btn,.register-pill) > *,
.btn-primary > *,
.nexus-hero-primary > *,
.wheel-spin > * { position: relative; z-index: 1; }

.site-header :is(.sell-btn,.register-pill):hover::after,
.btn-primary:hover::after,
.nexus-hero-primary:hover::after,
.wheel-spin:hover::after { transform: translateX(90%) rotate(8deg); }

.site-header .icon-action,
.site-header .admin-chip,
.site-header .account-chip {
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.site-header :is(.icon-action,.admin-chip,.account-chip):hover { transform: translateY(-2px); }
.site-header .main-nav a { position: relative; transition: color .2s ease, background .2s ease; }
.site-header .main-nav a::after {
  position: absolute;
  right: 14px;
  bottom: 5px;
  left: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--motion-blue), transparent);
  content: '';
  opacity: 0;
  transform: scaleX(.4);
  transition: opacity .2s ease, transform .24s ease;
}
.site-header .main-nav a:hover::after { opacity: .7; transform: scaleX(1); }

/* Hero becomes the visual focus without relying on excessive rounded boxes. */
.nexus-hero-slider {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at calc(74% + var(--hero-x, 0px)) calc(32% + var(--hero-y, 0px)), rgba(142, 189, 255, .2), transparent 27%),
    radial-gradient(circle at 15% 4%, rgba(124, 228, 206, .08), transparent 25%),
    linear-gradient(138deg, rgba(39, 50, 70, .98), rgba(25, 34, 50, .98)) !important;
  box-shadow: var(--motion-shadow), inset 0 1px rgba(255,255,255,.07) !important;
}

.nexus-hero-slider::before {
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    url('/assets/premium-constellation.svg') right 24% center / 680px auto no-repeat,
    linear-gradient(112deg, transparent 52%, rgba(223, 241, 255, .045) 53%, transparent 70%);
  content: '';
  opacity: .62;
  transform: translate3d(calc(var(--hero-x, 0px) * .08), calc(var(--hero-y, 0px) * .08), 0);
  transition: transform .22s ease-out;
}

.nexus-hero-slider::after {
  position: absolute;
  top: -35%;
  right: 27%;
  z-index: -1;
  width: 1px;
  height: 170%;
  background: linear-gradient(transparent, rgba(207, 234, 255, .28), transparent);
  content: '';
  transform: rotate(28deg);
  animation: premium-hero-scan 10s ease-in-out infinite;
}

.nexus-hero-slide { overflow: hidden; }
.nexus-hero-copy { position: relative; z-index: 2; }
.nexus-hero-eyebrow { color: #b9d9ff !important; }
.nexus-hero-eyebrow i {
  height: 17px;
  background: linear-gradient(#dff4ff, #86b9fb);
  box-shadow: 0 0 15px rgba(148, 199, 255, .6);
  animation: premium-eyebrow-pulse 3.4s ease-in-out infinite;
}
.nexus-hero-copy h1 { text-wrap: balance; text-shadow: 0 8px 36px rgba(4, 10, 23, .2); }
.nexus-hero-copy h1 strong {
  background: linear-gradient(105deg, #e7f5ff 0%, #9dcbff 42%, #b7adff 76%, #e7f5ff 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: premium-text-flow 8s ease-in-out infinite;
}
.nexus-hero-primary,
.nexus-hero-secondary { position: relative; overflow: hidden; transition: transform .22s ease, background .22s ease, box-shadow .22s ease !important; }
.nexus-hero-primary:hover,
.nexus-hero-secondary:hover { transform: translateY(-2px) !important; }
.nexus-hero-primary:hover { box-shadow: 0 12px 30px rgba(126, 174, 238, .22); }
.nexus-hero-product {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(24, 33, 49, .98), rgba(16, 24, 39, .96)) !important;
  box-shadow: 0 24px 60px rgba(5, 12, 27, .32), inset 0 1px rgba(255,255,255,.08) !important;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease !important;
}
.nexus-hero-slide.is-active .nexus-hero-product { animation: premium-hero-float 6.5s ease-in-out infinite; }
.nexus-hero-product::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(222, 241, 255, .11) 47%, transparent 70%);
  content: '';
  transform: translateX(-120%);
  animation: premium-art-sheen 8s ease-in-out infinite;
  pointer-events: none;
}
.nexus-hero-product > picture img { transition: transform .65s cubic-bezier(.2,.8,.2,1), filter .65s ease; }
.nexus-hero-product:hover > picture img { transform: scale(1.025) !important; filter: brightness(1.06) saturate(1.06); }
.nexus-hero-product-tag {
  background: rgba(21, 31, 47, .76) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 8px 20px rgba(4,10,22,.18);
  backdrop-filter: blur(16px) saturate(145%);
}
.nexus-hero-footer { background: rgba(31, 42, 60, .74) !important; backdrop-filter: blur(18px); }
.nexus-hero-progress i { box-shadow: 0 0 14px rgba(143, 191, 255, .72); }

/* Cards share a cinematic light response while preserving image containment. */
body .product-card {
  --card-x: 50%;
  --card-y: 30%;
  isolation: isolate;
  overflow: hidden !important;
  background:
    radial-gradient(circle at var(--card-x) var(--card-y), rgba(171, 211, 255, .1), transparent 30%),
    linear-gradient(155deg, #293449, #222c3e) !important;
  box-shadow: 0 14px 34px rgba(5, 12, 27, .16), inset 0 1px rgba(255,255,255,.045) !important;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, filter .3s ease !important;
}

body .product-card::after {
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(115deg, transparent 23%, rgba(225, 243, 255, .075) 48%, transparent 72%);
  content: '';
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity .3s ease, transform .65s ease;
  pointer-events: none;
}

body .product-card:hover {
  transform: translateY(-7px) !important;
  background:
    radial-gradient(circle at var(--card-x) var(--card-y), rgba(174, 215, 255, .17), transparent 34%),
    linear-gradient(155deg, #303d55, #273247) !important;
  box-shadow: 0 24px 55px rgba(4, 11, 25, .29), inset 0 1px rgba(255,255,255,.07) !important;
}
body .product-card:hover::after { opacity: 1; transform: translateX(100%); }
body .product-card .product-image-wrap { overflow: hidden; background: linear-gradient(145deg, #1a2434, #141c2a); }
body .product-card .product-image-wrap::after {
  position: absolute;
  inset: auto 10% 0;
  height: 34%;
  background: radial-gradient(ellipse at bottom, rgba(139, 187, 247, .16), transparent 70%);
  content: '';
  pointer-events: none;
}
body .product-card .product-image-wrap > img { position: relative; z-index: 1; transition: transform .48s cubic-bezier(.2,.8,.2,1), filter .48s ease !important; }
body .product-card:hover .product-image-wrap > img { transform: scale(1.035) !important; filter: brightness(1.06) saturate(1.08); }
body .product-card .product-content { position: relative; z-index: 4; }
body .product-card .card-title { transition: color .2s ease; }
body .product-card:hover .card-title { color: #fff !important; }
body .product-card .card-store-avatar { box-shadow: 0 7px 18px rgba(4, 11, 24, .23); }
body .product-card .card-price strong { text-shadow: 0 3px 18px rgba(191, 218, 255, .1); }
body .product-card .quick-cart {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #5875a0, #405779) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.15), 0 8px 18px rgba(5,12,27,.2) !important;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
body .product-card .quick-cart:hover:enabled { transform: translateY(-2px) scale(1.04); filter: brightness(1.12); box-shadow: 0 11px 24px rgba(75,119,183,.28) !important; }
body .product-card .card-fav { backdrop-filter: blur(12px); transition: transform .2s ease, background .2s ease, color .2s ease; }
body .product-card .card-fav:hover { transform: scale(1.08); background: rgba(49, 68, 97, .94); color: #fff; }
body .product-card :is(.game-label,.card-meta,.card-meta span,.card-seller-copy small) { font-size: 11px !important; }
body .product-card .promotion-ribbon {
  background: linear-gradient(100deg, rgba(48, 106, 102, .96), rgba(55, 76, 116, .96), rgba(84, 62, 121, .96)) !important;
  background-size: 200% 100% !important;
  box-shadow: 0 7px 20px rgba(3,10,22,.18);
  animation: premium-promotion-flow 9s ease-in-out infinite;
}
body .product-card .promotion-ribbon svg { filter: drop-shadow(0 0 6px rgba(207, 242, 255, .5)); }

/* Open sections get animated hierarchy instead of more containers. */
.section-title h2,
.home-recent-head h2,
.recommendation-home-head h2 { text-wrap: balance; }
.section-kicker .nexus-line-icon,
.home-recent-icon .nexus-line-icon,
.benefit-icon .nexus-line-icon { filter: drop-shadow(0 0 9px rgba(150, 199, 255, .22)); }
.section-title > a { transition: color .2s ease, transform .2s ease; }
.section-title > a:hover { color: #e4f3ff !important; transform: translateX(3px); }
.game-strip-item { transition: transform .22s ease, color .22s ease, filter .22s ease !important; }
.game-strip-item:hover { transform: translateY(-3px); filter: drop-shadow(0 9px 15px rgba(5,12,26,.22)); }
.v5-category-grid a { position: relative; }
.v5-category-grid a::after {
  position: absolute;
  right: 0;
  bottom: 5px;
  left: 48px;
  height: 1px;
  background: linear-gradient(90deg, rgba(157, 202, 255, .4), transparent);
  content: '';
  opacity: 0;
  transform: scaleX(.4);
  transform-origin: left;
  transition: opacity .2s ease, transform .25s ease;
}
.v5-category-grid a:hover::after { opacity: .8; transform: scaleX(1); }
.v5-benefits > div { transition: transform .25s ease, color .25s ease; }
.v5-benefits > div:hover { transform: translateY(-3px); }
.v5-benefits > div:hover .benefit-icon { color: #d8eeff; }
.trust-grid > div { transition: transform .25s ease; }
.trust-grid > div:hover { transform: translateY(-3px); }
.trust-grid > div:hover .trust-icon { color: #dbf0ff; }

/* Consistent depth and readable text in application workspaces. */
body :is(.account-content,.admin-content,.security-panel,.settings-card,.wallet-panel,.support-card,.order-card,.notification-center,.message-workspace) {
  background-image: linear-gradient(145deg, rgba(255,255,255,.018), transparent 42%);
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 16px 40px rgba(4,11,25,.08) !important;
}
body :is(.account-content,.admin-content,.security-panel,.settings-card,.wallet-panel,.support-card,.order-card) :is(p,small,label) { line-height: 1.55; }
body :is(.account-content,.admin-content) small { font-size: max(11px, .72rem); }
body :is(.account-content,.admin-content) label { font-size: max(12px, .78rem); }
body :is(.account-content,.admin-content) :is(button,.btn,a) { transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease; }
body :is(.account-content,.admin-content) :is(button,.btn):hover:not(:disabled) { transform: translateY(-1px); }

/* Elements become visible once instead of constantly moving. */
.nexus-motion-ready :is(.content-section,.v5-category-section,.v5-benefits,.recommendation-home,.home-recent,.trust-strip,.account-head,.account-content,.admin-content).motion-watch {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .62s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.nexus-motion-ready :is(.content-section,.v5-category-section,.v5-benefits,.recommendation-home,.home-recent,.trust-strip,.account-head,.account-content,.admin-content).motion-watch.motion-visible {
  opacity: 1;
  transform: none;
}
.nexus-motion-ready .product-card.motion-card { animation: premium-card-arrive .55s both cubic-bezier(.2,.8,.2,1); animation-delay: min(calc(var(--motion-index, 0) * 48ms), 336ms); }

.toast { backdrop-filter: blur(20px) saturate(145%); box-shadow: 0 18px 50px rgba(4,11,25,.3) !important; }

/* The managed announcement adopts the same sharper visual language. */
.nexus-announcement {
  border-radius: 10px !important;
  border-color: rgba(184, 215, 247, .2) !important;
  background:
    radial-gradient(circle at 90% 0, rgba(143, 190, 255, .12), transparent 28%),
    linear-gradient(145deg, #303c52, #20293b) !important;
  box-shadow: 0 46px 110px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.08) !important;
}
.nexus-announcement::backdrop { background: rgba(7, 13, 24, .7); backdrop-filter: blur(10px) saturate(115%); }
.nexus-announcement .announcement-image { position: relative; overflow: hidden; }
.nexus-announcement .announcement-image::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 25%, rgba(220,241,255,.1) 48%, transparent 70%);
  content: '';
  transform: translateX(-110%);
  animation: premium-art-sheen 8s 1s ease-in-out infinite;
  pointer-events: none;
}
.nexus-announcement .announcement-image img { transition: transform .55s ease, filter .55s ease; }
.nexus-announcement:hover .announcement-image img { transform: scale(1.018); filter: brightness(1.04); }
.nexus-announcement .announcement-content > span { color: #b9d9ff; }
.nexus-announcement .announcement-cta { position: relative; overflow: hidden; border-radius: 6px; box-shadow: 0 10px 25px rgba(5,12,27,.18); }
.nexus-announcement .announcement-close { box-shadow: 0 8px 22px rgba(4,10,22,.25); }

@keyframes premium-constellation-drift { to { transform: translate3d(2.5%, 2%, 0) scale(1.025); } }
@keyframes premium-light-pan { to { background-position: 42px 42px, 130vw 0; } }
@keyframes premium-brand-sheen { 0%,68%,100% { transform: translateX(-90%); } 82% { transform: translateX(90%); } }
@keyframes premium-hero-scan { 0%,100% { translate: -28vw 0; opacity: 0; } 25%,68% { opacity: .65; } 82% { translate: 44vw 0; opacity: 0; } }
@keyframes premium-eyebrow-pulse { 0%,100% { opacity: .65; scale: 1 .74; } 50% { opacity: 1; scale: 1 1; } }
@keyframes premium-text-flow { 0%,100% { background-position: 0 50%; } 50% { background-position: 100% 50%; } }
@keyframes premium-hero-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes premium-art-sheen { 0%,55%,100% { transform: translateX(-120%); } 72% { transform: translateX(120%); } }
@keyframes premium-promotion-flow { 0%,100% { background-position: 0 50%; } 50% { background-position: 100% 50%; } }
@keyframes premium-card-arrive { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .ambient-sky::before { background-size: 720px auto; opacity: .35; }
  .nexus-hero-slider::before { background-size: 540px auto; background-position: right -100px center; }
  body .product-card:hover { transform: translateY(-4px) !important; }
}

@media (max-width: 620px) {
  .ambient-sky::before { opacity: .25; }
  .nexus-hero-slider { box-shadow: 0 18px 42px rgba(4,11,25,.22), inset 0 1px rgba(255,255,255,.06) !important; }
  .nexus-hero-slider::after { display: none; }
  .nexus-hero-slide.is-active .nexus-hero-product { animation-duration: 7.5s; }
  .site-header :is(.icon-action,.admin-chip,.account-chip):hover { transform: none; }
  body .product-card :is(.game-label,.card-meta,.card-meta span,.card-seller-copy small) { font-size: 11px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ambient-sky::before,
  .ambient-sky::after,
  .site-header .brand-symbol::after,
  .footer .brand-symbol::after,
  .nexus-hero-slider::after,
  .nexus-hero-eyebrow i,
  .nexus-hero-copy h1 strong,
  .nexus-hero-slide.is-active .nexus-hero-product,
  .nexus-hero-product::after,
  body .product-card .promotion-ribbon,
  .nexus-motion-ready .product-card.motion-card { animation: none !important; }
  .nexus-motion-ready :is(.motion-watch,.motion-visible) { opacity: 1 !important; transform: none !important; transition: none !important; }
  body .product-card:hover,
  body .product-card:hover .product-image-wrap > img,
  .game-strip-item:hover,
  .v5-benefits > div:hover,
  .trust-grid > div:hover { transform: none !important; }
}