/* ==========================================================================
   THEME TOKENS + KEYFRAMES + JS-TOGGLED STATE CLASSES ONLY.
   Everything else (layout, spacing, typography, colors, shadows, grids)
   now lives directly on elements as Tailwind utility classes.
   ========================================================================== */

:root[data-theme="dark"] {
  --bg-color: #06060f;
  --card-bg: rgba(20, 20, 45, 0.75);
  --card-border: rgba(255, 255, 255, 0.08);
  --primary-cyan: #00a8cc;
  --accent-gold: #d4af37;
  --text-main: #f4f5fb;
  --text-muted: #94a3b8;
  --header-bg: rgba(11, 11, 26, 0.85);
  --surface: rgba(20, 20, 45, 0.75);
  --dash-bg: #0c0f1d;
}

:root[data-theme="light"] {
  --bg-color: #f4f5fb;
  --card-bg: rgba(255, 255, 255, 0.85);
  --card-border: rgba(0, 0, 0, 0.08);
  --primary-cyan: #008b8b;
  --accent-gold: #008b8b;
  --text-main: #1e1e2f;
  --text-muted: #64748b;
  --header-bg: rgba(244, 245, 251, 0.85);
  --surface: rgba(255, 255, 255, 0.85);
  --dash-bg: #f4f5fb;
}

html {
  scroll-behavior: smooth;
}

body {
  background-image:
    radial-gradient(circle at 10% 20%, rgba(138, 43, 226, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(0, 198, 255, 0.08) 0%, transparent 40%);
}

/* ---- keyframes referenced via Tailwind arbitrary animate-[...] utilities ---- */
@keyframes marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes marquee-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* ---- JS-toggled state classes (classList.add/remove at runtime) ---- */
.marquee-row:hover .marquee-track,
.marquee-row.paused .marquee-track {
  animation-play-state: paused;
}

.nft-card-hero {
  transform: scale(1.2) rotateY(-40deg);
  transform-origin: right center;
  filter: brightness(0.75) saturate(0.75);
  opacity: 0.85;
  margin-left: -28px;
  margin-right: -28px;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 0.55s cubic-bezier(0.25,1,0.5,1), filter 0.55s ease,
              opacity 0.55s ease, box-shadow 0.4s ease, border-color 0.4s ease,
              margin 0.55s cubic-bezier(0.25,1,0.5,1);
}
.nft-card-hero.left-side {
  transform: scale(1.2) rotateY(40deg);
  transform-origin: left center;
}
.nft-card-hero.active {
  transform: scale(1.08) rotateY(0deg);
  filter: brightness(1) saturate(1);
  opacity: 1;
  z-index: 10;
  margin-left: 6px;
  margin-right: 6px;
  border-color: rgba(99, 102, 241, 0.45);
  box-shadow: 0 20px 45px rgba(0,0,0,0.6), 0 0 30px rgba(99,102,241,0.25);
}
@media (max-width: 768px) {
  .nft-card-hero { margin-left: -45px; margin-right: -45px; }
  .nft-card-hero.active { transform: scale(1.05); margin-left: 8px; margin-right: 8px; }
  .nft-card-hero.left-side { transform: scale(1.05) rotateY(30deg); }
  .nft-card-hero:not(.left-side):not(.active) { transform: scale(1.05) rotateY(-30deg); }
}

.carousel-track-container.dragging { cursor: grabbing; }
.carousel-track-container.dragging .carousel-track { transition: none; }
.carousel-track-container.dragging .nft-card-hero img { transition: none; }

#toast.show,
.toast.show {
  visibility: visible;
  opacity: 1;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.modal-overlay.active .modal-container {
  transform: translateY(0);
}

@media (max-width: 768px) {
  #nav-links.show { display: flex; }
}

/* Extracted from index */
.profile-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#profileChevron.open {
  transform: rotate(180deg);
}

.nft-avatar {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 5px 8px rgba(0, 0, 0, .12);
  overflow: hidden;
}
.nft-avatar svg {
  width: 30px;
  height: 30px;
}
.nft-avatar.a1 { background: linear-gradient(135deg, #667eea, #764ba2); }
.nft-avatar.a2 { background: linear-gradient(135deg, #f7971e, #ffd200); }
.nft-avatar.a3 { background: linear-gradient(135deg, #ff5f6d, #ffc371); }
.nft-avatar.a4 { background: linear-gradient(135deg, #00c6ff, #0072ff); }
.nft-avatar.a5 { background: linear-gradient(135deg, #43cea2, #185a9d); }
.nft-avatar.a6 { background: linear-gradient(135deg, #f857a6, #ff5858); }
.nft-avatar.a7 { background: linear-gradient(135deg, #232526, #414345); }
.nft-avatar.a8 { background: linear-gradient(135deg, #c471f5, #fa71cd); }
.nft-avatar.a9 { background: linear-gradient(135deg, #30cfd0, #330867); }
.nft-avatar.a10 { background: linear-gradient(135deg, #0ba360, #3cba92); }
.nft-avatar.a11 { background: linear-gradient(135deg, #ee0979, #ff6a00); }
.nft-avatar.a12 { background: linear-gradient(135deg, #7f00ff, #e100ff); }
.nft-avatar.a13 { background: linear-gradient(135deg, #fc466b, #3f5efb); }
.nft-avatar.a14 { background: linear-gradient(135deg, #f2994a, #f2c94c); }
.nft-avatar.a15 { background: linear-gradient(135deg, #8e2de2, #4a00e0); }
.nft-avatar.a16 { background: linear-gradient(135deg, #42275a, #734b6d); }