/* ==========================================================================
   DEPTH — bespoke cinematic components
   Hand-written where Tailwind utilities alone can't express the effect
   cleanly (layered atmosphere, scroll reveals, drawers, command palette).
   ========================================================================== */

/* ---------- Nav ---------- */
/* NOTE: deliberately a plain media query here rather than Tailwind's
   `hidden`/`sm:` utilities — those live in a CSS cascade layer, and our
   custom .btn-depth classes are unlayered (see tailwind-input.css for why),
   so an unlayered display:inline-flex would always beat a layered
   display:none regardless of breakpoint. Keeping this rule unlayered too
   (same file "weight class" as main.css/tailwind-input.css) makes normal
   source-order/specificity rules apply instead. */
@media (max-width: 639px) {
  .nav-discord-btn { display: none; }
}
.depth-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  padding: 22px 0;
  transition: padding 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease, border-color 0.35s ease;
  border-bottom: 1px solid transparent;
}
.depth-nav.is-scrolled {
  padding: 14px 0;
  background: rgb(5 5 6 / 0.82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: rgb(255 255 255 / 0.08);
}
.depth-nav-link {
  position: relative;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-mist);
  transition: color 0.2s ease;
}
.depth-nav-link:hover, .depth-nav-link.active { color: var(--color-paper); }
.depth-nav-link.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-signal), var(--color-current));
  border-radius: 2px;
}

/* ---------- Hero ---------- */
/* Colored atmospheric header for individual store category pages
   (VIP/Character/Gang Pack/Accessories/etc.) — a radial glow in that
   category's accent color behind the header, so each page reads as its
   own "world" instead of a plain title-on-black page. Lighter-weight
   than the homepage's full .depth-hero (no grain/lines/scroll-cue), this
   is a header treatment, not a full-viewport hero moment. */
.category-hero {
  position: relative;
  overflow: hidden;
  padding: 150px 0 60px;
  text-align: center;
}
.category-hero::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(560px 380px at 50% 0%, var(--hero-accent-glow, rgb(99 102 241 / 0.28)), transparent 70%);
}
.category-hero-icon {
  width: 64px; height: 64px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  background: rgb(255 255 255 / 0.06);
  border: 1.5px solid var(--hero-accent, rgb(255 255 255 / 0.16));
  box-shadow: 0 0 30px -8px var(--hero-accent-glow, transparent);
  font-size: 1.4rem;
}

/* Bordered/glowing product card, reused across the category pages —
   same visual language as the store tiles (colored border + top accent
   bar + colored hover glow) so a plain card grid never comes back. */
.product-card {
  position: relative;
  background: var(--color-bg-card);
  border: 1.5px solid var(--card-accent, var(--color-border));
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.3), 0 16px 32px -20px var(--card-accent, transparent);
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
  transform: translateY(-5px);
  border-color: var(--card-accent-bright, var(--card-accent));
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.3), 0 24px 45px -16px var(--card-accent-glow, transparent);
}
.product-card-bar {
  height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--card-accent, #6366f1), transparent);
  margin: -28px -28px 22px;
}

.depth-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.depth-hero-bg {
  position: absolute;
  inset: -10%;
  z-index: -2;
  background:
    radial-gradient(60% 50% at 22% 18%, rgb(99 102 241 / 0.22), transparent 60%),
    radial-gradient(55% 45% at 82% 8%, rgb(236 72 153 / 0.14), transparent 60%),
    radial-gradient(70% 60% at 50% 100%, rgb(34 211 238 / 0.10), transparent 65%),
    linear-gradient(180deg, #050506 0%, #0a0a0d 55%, #050506 100%);
  animation: depth-drift 24s ease-in-out infinite alternate;
}
@keyframes depth-drift {
  0% { transform: scale(1) translate3d(0,0,0); }
  100% { transform: scale(1.06) translate3d(-1.5%, -1%, 0); }
}
.depth-hero-vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 90% at 50% 40%, transparent 40%, rgb(5 5 6 / 0.85) 100%);
  pointer-events: none;
}
.depth-hero-lines {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(180deg, rgb(255 255 255 / 0.025) 0px, rgb(255 255 255 / 0.025) 1px, transparent 1px, transparent 64px);
  mask-image: linear-gradient(180deg, transparent, black 30%, black 70%, transparent);
}

.depth-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 0.95;
  font-size: clamp(3.2rem, 9vw, 8rem);
}
.depth-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  color: var(--color-mist);
}

/* Live status pill, woven into the hero rather than a stat card */
.depth-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 14px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.1);
  backdrop-filter: blur(12px);
}
.depth-status-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: #34d399;
  box-shadow: 0 0 0 3px rgb(52 211 153 / 0.18), 0 0 10px rgb(52 211 153 / 0.6);
  animation: depth-pulse 2s ease-in-out infinite;
}
.depth-status-dot.offline {
  background: var(--color-smoke);
  box-shadow: none;
  animation: none;
}
@keyframes depth-pulse {
  0%, 100% { opacity: 1; } 50% { opacity: 0.4; }
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); }
.reveal.is-visible { opacity: 1; transform: translateY(0); transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1), transform 0.9s cubic-bezier(0.22,1,0.36,1); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Lifestyle / story cards ---------- */
.story-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  padding: 40px 32px;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid rgb(255 255 255 / 0.08);
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), border-color 0.4s ease;
}
.story-card:hover { transform: translateY(-6px); border-color: rgb(255 255 255 / 0.22); }
.story-card::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--story-gradient, linear-gradient(160deg, #16171b, #0b0c0f));
  transition: transform 0.6s ease;
  z-index: -2;
}
.story-card:hover::before { transform: scale(1.06); }
.story-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 20%, rgb(5 5 6 / 0.75) 100%);
  z-index: -1;
}
.story-card-num {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--color-mist);
  margin-bottom: 8px;
}
.story-card h3 {
  font-family: var(--font-display);
  font-size: 1.9rem;
  margin-bottom: 10px;
}

/* ---------- Store category tiles — big visual cards, not icon rows ---------- */
.store-tile {
  position: relative;
  display: block;
  border-radius: 20px;
  overflow: hidden;
  padding: 30px;
  min-height: 300px;
  border: 1.5px solid var(--tile-accent, rgb(255 255 255 / 0.08));
  /* Resting elevation is already layered — a tight dark contact shadow
     plus a wider soft one, not a single flat drop-shadow — so the card
     reads as sitting above the page even before any interaction. */
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.4),
    0 2px 6px rgb(0 0 0 / 0.5),
    0 20px 40px -20px var(--tile-accent, transparent);
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), border-color 0.4s ease, box-shadow 0.4s ease;
  will-change: transform;
}
/* JS (public/js/tilt.js) drives the live rotateX/rotateY/translateZ per
   mouse position via inline style — the transition above is what makes
   that feel smooth rather than snapping. Falls back to just the shadow
   change below with no tilt at all if JS is off or prefers-reduced-motion. */
.store-tile:hover {
  border-color: var(--tile-accent-bright, rgb(255 255 255 / 0.4));
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.4),
    0 10px 20px rgb(0 0 0 / 0.55),
    0 34px 60px -16px var(--tile-accent-glow, rgb(255 255 255 / 0.3));
}
.store-tile::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--tile-gradient, linear-gradient(160deg, #16171b, #0b0c0f));
  transition: transform 0.6s ease;
  z-index: -3;
}
.store-tile:hover::before { transform: scale(1.06); }
.store-tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 10%, rgb(5 5 6 / 0.8) 100%);
  z-index: -1;
}
/* Layering for the tilt: the accent bar and icon sit further "forward"
   in Z-space than the text, so tilting the card creates real parallax
   between them instead of everything moving as one flat plane. */
.store-tile-accent-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, transparent, var(--tile-accent, #6366f1), transparent);
  z-index: 2;
  transform: translateZ(35px);
}
.store-tile-icon-bg {
  position: absolute;
  top: -12%; right: -8%;
  font-size: 11rem;
  opacity: 0.14;
  transform: translateZ(60px) rotate(-10deg);
  pointer-events: none;
  z-index: -2;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), opacity 0.4s ease;
}
.store-tile:hover .store-tile-icon-bg { transform: translateZ(80px) rotate(-6deg) scale(1.08); opacity: 0.22; }
.store-tile-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  transform: translateZ(25px);
}
.store-tile-num {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: rgb(255 255 255 / 0.5);
}
.store-tile-price {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.35);
  border: 1px solid rgb(255 255 255 / 0.16);
  backdrop-filter: blur(6px);
  white-space: nowrap;
}
.store-tile-body {
  position: relative;
  margin-top: 130px;
  transform: translateZ(25px);
}
.store-tile h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.7rem;
  margin: 0 0 8px;
}
.store-tile p { margin: 0 0 16px; font-size: 0.92rem; }
.store-tile-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.82rem; font-weight: 700;
  color: var(--color-paper);
}
.store-tile-cta i { transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); }
.store-tile:hover .store-tile-cta i { transform: translateX(5px); }
@media (max-width: 640px) {
  .store-tile { min-height: 240px; }
  .store-tile-body { margin-top: 80px; }
  .store-tile-icon-bg { font-size: 8rem; }
}

/* ---------- Editorial store hub tiles ---------- */
.hub-tile {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgb(255 255 255 / 0.08);
  background: linear-gradient(160deg, var(--color-graphite), var(--color-ink));
  padding: 32px 28px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  /* Top-aligned, not space-between — with only an icon + text block as
     flex children, space-between stretched the gap between them based on
     how long each card's description happened to be, so 1-line and
     2-line cards sat at different heights across the same grid row. */
  justify-content: flex-start;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), border-color 0.3s ease;
}
.hub-tile > i { margin-bottom: 18px; }
.hub-tile:hover { transform: translateY(-5px); border-color: rgb(255 255 255 / 0.2); }
.hub-tile-glow {
  position: absolute; top: -30%; right: -20%;
  width: 260px; height: 260px; border-radius: 999px;
  background: var(--tile-glow, radial-gradient(circle, rgb(99 102 241 / 0.35), transparent 70%));
  filter: blur(10px);
  pointer-events: none;
}

/* ---------- Store menu — editorial list, not a card grid ---------- */
.store-menu { border-top: 1px solid rgb(255 255 255 / 0.08); }
.store-menu-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 26px 8px;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  overflow: hidden;
  transition: padding-left 0.35s cubic-bezier(0.22,1,0.36,1);
}
.store-menu-row::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--row-glow, rgb(99 102 241 / 0.10)), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.store-menu-row:hover { padding-left: 22px; }
.store-menu-row:hover::before { opacity: 1; }
.store-menu-num {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-smoke);
  width: 34px;
  flex-shrink: 0;
  transition: color 0.3s ease;
}
.store-menu-row:hover .store-menu-num { color: var(--color-current); }
.store-menu-icon {
  width: 46px; height: 46px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.1);
  flex-shrink: 0;
  font-size: 1.05rem;
}
.store-menu-body { flex: 1; min-width: 0; }
.store-menu-body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  margin: 0 0 4px;
}
.store-menu-body p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-mist);
}
.store-menu-meta {
  display: flex; align-items: center; gap: 18px;
  flex-shrink: 0;
}
.store-menu-price {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-paper);
  white-space: nowrap;
}
.store-menu-arrow {
  color: var(--color-smoke);
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), color 0.3s ease;
}
.store-menu-row:hover .store-menu-arrow { transform: translateX(6px); color: var(--color-current); }
@media (max-width: 640px) {
  .store-menu-row { gap: 16px; padding: 20px 4px; }
  .store-menu-body h3 { font-size: 1.05rem; }
  .store-menu-price { display: none; }
}

/* ---------- Cart drawer ---------- */
.cart-backdrop {
  position: fixed; inset: 0; background: rgb(0 0 0 / 0.6);
  z-index: 90; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.cart-backdrop.open { opacity: 1; pointer-events: auto; }
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(420px, 100vw);
  background: var(--color-charcoal);
  border-left: 1px solid rgb(255 255 255 / 0.08);
  z-index: 91;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.cart-drawer.open { transform: translateX(0); }
@media (max-width: 640px) {
  .cart-drawer { width: 100vw; top: auto; height: 82vh; border-radius: 20px 20px 0 0; border-left: none; border-top: 1px solid rgb(255 255 255 / 0.08); transform: translateY(100%); }
  .cart-drawer.open { transform: translateY(0); }
}
.cart-item {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 14px 0; border-bottom: 1px solid rgb(255 255 255 / 0.06);
}
.cart-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 55;
  width: 56px; height: 56px; border-radius: 999px;
  background: var(--color-paper); color: var(--color-ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.95rem;
  box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.6);
  cursor: pointer;
}
.cart-fab-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--color-ember); color: #fff;
  width: 20px; height: 20px; border-radius: 999px;
  font-size: 0.7rem; display: flex; align-items: center; justify-content: center;
}
.cart-fab.bump { animation: cart-fab-bump 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes cart-fab-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.22); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cart-fab.bump { animation: none; }
}

/* ---------- Command palette (search) ---------- */
.cmdk-backdrop {
  position: fixed; inset: 0; background: rgb(0 0 0 / 0.65);
  z-index: 95; display: none; align-items: flex-start; justify-content: center;
  padding: 12vh 20px 20px;
}
.cmdk-backdrop.open { display: flex; }
.cmdk-panel {
  width: 100%; max-width: 560px;
  background: var(--color-charcoal);
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.7);
}
.cmdk-input {
  width: 100%; background: transparent; border: none; border-bottom: 1px solid rgb(255 255 255 / 0.08);
  padding: 18px 20px; font-size: 1rem; color: var(--color-paper);
}
.cmdk-input:focus { outline: none; }
.cmdk-results { max-height: 360px; overflow-y: auto; padding: 8px; }
.cmdk-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border-radius: 10px; cursor: pointer; font-size: 0.9rem;
}
.cmdk-item:hover, .cmdk-item.active { background: rgb(255 255 255 / 0.06); }
.cmdk-empty { padding: 30px 20px; text-align: center; color: var(--color-smoke); font-size: 0.88rem; }

/* ---------- Sticky mobile purchase CTA ---------- */
.sticky-buy-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: rgb(5 5 6 / 0.92); backdrop-filter: blur(14px);
  border-top: 1px solid rgb(255 255 255 / 0.1);
  padding: 12px 16px; display: none;
}
@media (max-width: 760px) { .sticky-buy-bar.show { display: flex; gap: 12px; align-items: center; } }

/* ---------- Skeleton loader ---------- */
.skeleton {
  background: linear-gradient(90deg, var(--color-ash) 0%, var(--color-ash-light) 50%, var(--color-ash) 100%);
  background-size: 200% 100%;
  animation: skeleton-sheen 1.4s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes skeleton-sheen { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }