/* =========================================================
   AXON - "Luxe Plus" upgrade layer (v1.0.0)

   Loaded after static/css/luxe.css so it only adds/overrides rules.
   Drafted by OpenCode (big-pickle) from its own design review, then
   reviewed and corrected by Claude before being added to the project.
   Vanilla CSS only; logical properties for RTL; respects reduced motion.
   ========================================================= */


/* ---------- Idea 1: Editorial Type Scale ---------- */
:root {
  --lx-text-2xs: 0.72rem;
  --lx-text-xs: 0.82rem;
  --lx-text-sm: 0.92rem;
  --lx-text-base: clamp(1rem, 0.28vw + 0.95rem, 1.07rem);
  --lx-text-lg: clamp(1.12rem, 0.55vw + 1rem, 1.3rem);
  --lx-text-2xl: clamp(1.9rem, 3.4vw, 3rem);
  --lx-text-3xl: clamp(2.35rem, 4.8vw, 4.1rem);
  --lx-text-4xl: clamp(3rem, 7vw, 5.8rem);

  --lx-leading-tight: 1.04;
  --lx-leading-title: 1.1;
  --lx-leading-body: 1.7;
  --lx-track-tight: -0.03em;
  --lx-track-label: 0.24em;

  /* 0.58 alpha ≈ 5.9–6.3:1 on #070708; raised from 0.40 */
  --lx-faint: rgba(243, 239, 230, 0.58);
}

body {
  font-size: var(--lx-text-base);
  line-height: var(--lx-leading-body);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
}

:where(h1, h2, h3, h4, .section-title, .panel-title, .cx-title) {
  text-wrap: balance;
}

p, li, .section-subtitle, .cx-lead {
  text-wrap: pretty;
}

.section-title {
  font-size: var(--lx-text-2xl);
  line-height: var(--lx-leading-title);
  letter-spacing: var(--lx-track-tight);
}

.cx-title,
.hero--page h1 {
  font-size: var(--lx-text-3xl);
  line-height: var(--lx-leading-tight);
  letter-spacing: var(--lx-track-tight);
}

.cx-hero-line {
  font-size: var(--lx-text-lg);
  letter-spacing: 0.005em;
}

.cx-panel-name {
  font-size: var(--lx-text-lg);
}

.section-eyebrow,
.cx-panel-meta,
.cx-counts dd,
.lx-footer h4 {
  font-size: var(--lx-text-2xs);
  letter-spacing: var(--lx-track-label);
}

[dir="rtl"] :is(h1, h2, h3, h4, .section-title, .panel-title, .cx-title, .cx-panel-name) {
  letter-spacing: 0;
  line-height: 1.4;
}

[dir="rtl"] .section-eyebrow {
  letter-spacing: 0;
  font-size: var(--lx-text-xs);
}


/* ---------- Idea 2: Section Cadence ---------- */
:root {
  --lx-space-1: 0.25rem;
  --lx-space-2: 0.5rem;
  --lx-space-3: 0.75rem;
  --lx-space-4: 1rem;
  --lx-space-5: 1.5rem;
  --lx-space-6: 2rem;
  --lx-space-7: 3rem;
  --lx-space-8: clamp(3.5rem, 6vw, 5.5rem);

  --lx-section: clamp(84px, 9vw, 136px);
  --lx-section-tight: clamp(56px, 6vw, 88px);
  --lx-gutter: clamp(20px, 4vw, 56px);
}

.section {
  padding-block: var(--lx-section);
}

.lx-head,
.cx-showcase-head {
  margin-block-end: clamp(40px, 5vw, 72px);
}

.lx-head > div:first-child,
.cx-showcase-head > div:first-child {
  display: grid;
  gap: var(--lx-space-4);
  justify-items: start;
}

.lx-head .section-eyebrow,
.cx-showcase-head .section-eyebrow {
  margin: 0;
}

.lx-head .section-title,
.cx-showcase-head .cx-title {
  max-width: 20ch;
}

.category-grid,
.lx-bento,
.stat-grid {
  gap: clamp(14px, 1.6vw, 24px);
}

.lx-step {
  padding-block: var(--lx-space-5);
}


/* ---------- Idea 3: Materials (Foil, Grain & Glass) ---------- */
:root {
  --lx-gold-grad: linear-gradient(
    135deg,
    #fff1bf 0%,
    #e2bd63 20%,
    #c9a24b 44%,
    #8c6a25 66%,
    #e6c675 100%
  );
  --lx-gold-text: linear-gradient(
    100deg,
    #f9ecc4 0%,
    #e2bd63 24%,
    #b08632 50%,
    #f6dc9a 76%,
    #c9a24b 100%
  );
  --lx-gold-foil: var(--lx-gold-text);

  --lx-grain-opacity: 0.055;
  --lx-glass-top: rgba(255, 255, 255, 0.055);
  --lx-glass-bottom: rgba(255, 255, 255, 0.006);
  --lx-shadow-deep: 0 34px 80px -48px rgba(0, 0, 0, 0.95);
}

body {
  background:
    radial-gradient(120% 78% at 50% -8%, #15110a 0%, rgba(7, 7, 8, 0) 58%),
    var(--lx-ink);
}

body::after {
  opacity: var(--lx-grain-opacity);
  background-size: 180px 180px;
}

.glass,
.category-card,
.lx-bento-card,
.stat-card,
.panel-sidebar,
.nx-panel {
  background-image:
    linear-gradient(180deg, var(--lx-glass-top), transparent 16%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), var(--lx-glass-bottom));
  background-color: rgba(12, 12, 14, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    var(--lx-shadow-deep);
}

@supports (backdrop-filter: blur(1px)) {
  .glass,
  .nx-panel,
  .panel-sidebar,
  .axon-navbar {
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
  }
}

.hero--page h1,
.lx-bento-card:nth-child(1) .lx-bento-index,
.lx-wordmark {
  background-image: var(--lx-gold-text);
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  .hero--page h1 {
    animation: lx-foil-sheen 14s ease-in-out infinite alternate;
  }
}

@keyframes lx-foil-sheen {
  to { background-position: 100% 50%; }
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero--page h1 { color: var(--lx-gold-2); }
}

@media (forced-colors: active) {
  .hero--page h1 {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}


/* ---------- Idea 4: Image/Icon Treatment ---------- */
.category-card-image,
.cx-panel-art,
.sx-thumb,
.gx-admin-thumb {
  position: relative;
  background-size: cover;
  background-position: center;
  filter: saturate(0.78) contrast(1.06) brightness(0.9) sepia(0.06);
  transition: transform 1.2s var(--lx-ease), filter 0.7s ease;
}

.sx-thumb,
.gx-admin-thumb {
  aspect-ratio: auto;
}

.category-card-image::before,
.cx-panel-art::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 1;
  border: 1px solid rgba(230, 198, 117, 0.22);
  border-radius: calc(var(--lx-radius) - 8px);
  pointer-events: none;
  transition: inset 0.5s var(--lx-ease), border-color 0.5s ease;
}

.category-card-image::after,
.cx-panel-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 7, 8, 0) 46%, rgba(7, 7, 8, 0.52) 100%),
    radial-gradient(110% 90% at 50% 0%, transparent 55%, rgba(7, 7, 8, 0.45) 100%);
}

.category-card-image-fallback .icon,
.cx-panel-icon {
  position: relative;
  z-index: 2;
}

.category-card-image-fallback .icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 75, 0.42);
  background: radial-gradient(circle at 32% 24%, rgba(255, 236, 185, 0.18), transparent 62%);
  box-shadow:
    inset 0 0 0 5px rgba(7, 7, 8, 0.55),
    0 0 30px rgba(201, 162, 75, 0.16);
  font-size: 1.8rem;
}

@media (hover: hover) and (pointer: fine) {
  .category-card:hover .category-card-image,
  .cx-panel:hover .cx-panel-art {
    filter: saturate(0.98) contrast(1.04) brightness(1.02) sepia(0.02);
  }

  .category-card:hover .category-card-image::before,
  .cx-panel:hover .cx-panel-art::before {
    inset: 12px;
    border-color: rgba(230, 198, 117, 0.45);
  }
}


/* ---------- Idea 5: Museum Plate Cards ---------- */
.category-grid {
  counter-reset: lx-card;
}

.category-card {
  --lx-card-pad: 10px;
  display: flex;
  flex-direction: column;
  border-radius: var(--lx-radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.006) 62%),
    var(--lx-ink-2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 28px 70px -50px #000;
}

.category-card::after {
  counter-increment: lx-card;
  content: counter(lx-card, decimal-leading-zero);
  inset: auto;
  inset-block-start: 20px;
  inset-inline-end: 22px;
  width: auto;
  height: auto;
  z-index: 3;
  background: none;
  border: 0;
  opacity: 1;
  animation: none;
  font-size: var(--lx-text-2xs);
  letter-spacing: 0.2em;
  color: var(--lx-gold-2);
  pointer-events: none;
}

.category-card-image {
  margin: var(--lx-card-pad) var(--lx-card-pad) 0;
  border-radius: calc(var(--lx-radius-lg) - var(--lx-card-pad));
}

.category-card-body {
  position: relative;
  display: grid;
  gap: var(--lx-space-2);
  padding: 20px 22px 24px;
  padding-inline-end: 54px;
}

.category-card-body h3 {
  margin: 0;
  font-size: 1.08rem;
  letter-spacing: -0.015em;
}

.category-card-body h3::after {
  content: "";
  display: block;
  width: 22px;
  height: 1px;
  margin-block-start: 10px;
  background: var(--lx-gold-grad);
  transition: width 0.45s var(--lx-ease);
}

.category-card-body p {
  margin: 0;
  color: var(--lx-muted);
  font-size: var(--lx-text-sm);
  line-height: 1.62;
}

.category-card-body::after {
  content: "→";
  position: absolute;
  inset-block-end: 22px;
  inset-inline-end: 22px;
  color: var(--lx-gold-2);
  font-size: 1rem;
  transition: transform 0.4s var(--lx-ease);
}

[dir="rtl"] .category-card-body::after {
  content: "←";
}

.lx-bento-card {
  border-radius: var(--lx-radius-lg);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.006) 64%),
    var(--lx-ink-2);
}

.lx-bento-card h3 {
  letter-spacing: -0.015em;
}

.lx-bento-card p {
  max-width: 40ch;
}

@media (hover: hover) and (pointer: fine) {
  .category-card:hover .category-card-body h3::after {
    width: 52px;
  }

  .category-card:hover .category-card-body::after {
    transform: translateX(4px);
  }

  [dir="rtl"] .category-card:hover .category-card-body::after {
    transform: translateX(-4px);
  }
}


/* ---------- Idea 6: Micro-interactions + 44px Targets ---------- */
.nx-bell {
  width: 44px;
  height: 44px;
}

.nx-menu > summary {
  height: auto;
  min-height: 44px;
}

.sx-close,
.px-order,
.lang-switcher .lang-option,
.axon-navbar .nx-panel a {
  min-height: 44px;
}

.sx-close,
.lang-switcher .lang-option {
  display: inline-flex;
  align-items: center;
}

.sx-trigger-btn {
  min-width: 44px;
}

.axon-navbar a.brand {
  min-height: 44px;
}

.btn-gold,
.btn-outline,
.px-order,
.nx-links a,
.panel-nav a {
  transition:
    transform 0.45s var(--lx-ease),
    box-shadow 0.45s ease,
    background 0.35s ease,
    border-color 0.35s ease,
    color 0.25s ease;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn-gold:hover,
  .btn-outline:hover {
    transform: translateY(-2px);
  }

  .btn-gold:active,
  .btn-outline:active,
  .px-order:active {
    transform: translateY(0) scale(0.985);
  }

  .nx-links a:not(.nx-cta):hover {
    background: rgba(255, 255, 255, 0.035);
  }

  .nx-links a:not(.nx-cta)::after {
    transition: transform 0.45s var(--lx-ease);
  }

  .category-card:focus-visible,
  .cx-panel:focus-visible,
  .lx-bento-card:focus-visible {
    outline: 2px solid var(--lx-gold-2);
    outline-offset: 4px;
  }

  .sx-trigger:focus-within {
    box-shadow:
      0 0 0 1px rgba(201, 162, 75, 0.5),
      0 0 0 6px rgba(201, 162, 75, 0.08);
  }
}


/* ---------- Idea 8: Admin Polish ---------- */
.panel-shell {
  max-width: var(--lx-container);
  gap: clamp(20px, 2.4vw, 32px);
  padding-inline: var(--lx-gutter);
}

.panel-sidebar {
  inset-block-start: calc(var(--lx-nav-space, 110px) + 16px);
  border-radius: var(--lx-radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 24%),
    rgba(14, 14, 17, 0.78);
}

.panel-user {
  border-block-end: 1px solid var(--lx-line-strong);
}

.panel-user h3 {
  letter-spacing: -0.01em;
}

.role-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding-inline: 10px;
  border-radius: 999px;
  border: 1px solid rgba(201, 162, 75, 0.35);
  background: rgba(201, 162, 75, 0.08);
  color: var(--lx-gold-2);
  font-size: var(--lx-text-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

[dir="rtl"] .role-badge {
  letter-spacing: 0;
  font-size: var(--lx-text-xs);
}

.panel-nav a {
  position: relative;
  border-radius: 12px;
  transition: color 0.25s ease, background 0.3s ease;
}

.panel-nav a.active {
  color: var(--lx-gold-2);
  background: linear-gradient(90deg, rgba(201, 162, 75, 0.14), rgba(201, 162, 75, 0.025));
}

.panel-nav a.active::before {
  content: "";
  position: absolute;
  inset-block: 10px;
  inset-inline-start: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--lx-gold-grad);
}

.panel-title {
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  letter-spacing: -0.025em;
  background: var(--lx-gold-text);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .panel-title { color: var(--lx-gold-2); }
}

.panel-subtext {
  color: var(--lx-muted);
  font-size: var(--lx-text-sm);
}

.panel-subtitle {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--lx-text-lg);
  letter-spacing: -0.01em;
}

.panel-subtitle::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--lx-line-strong), transparent);
}

[dir="rtl"] .panel-subtitle::after {
  background: linear-gradient(-90deg, var(--lx-line-strong), transparent);
}

.stat-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}

.stat-card {
  position: relative;
  overflow: hidden;
  padding: 22px 22px 20px;
  text-align: start;
  border-radius: var(--lx-radius);
  border: 1px solid var(--lx-line);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.006) 66%),
    var(--lx-ink-2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 22px 54px -44px #000;
}

.stat-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230, 198, 117, 0.55), transparent);
}

.stat-value {
  font-size: clamp(1.7rem, 2.2vw, 2.15rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--lx-gold-2);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  margin-block-start: 8px;
  font-size: var(--lx-text-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lx-muted);
}

[dir="rtl"] .stat-label {
  letter-spacing: 0;
  font-size: var(--lx-text-xs);
}

.stat-grid:not(.stat-grid-small) .stat-card:first-child {
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(201, 162, 75, 0.16), transparent 60%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.006) 66%),
    var(--lx-ink-2);
}

.stat-grid:not(.stat-grid-small) .stat-card:first-child .stat-value {
  font-size: clamp(2.2rem, 3.4vw, 3rem);
}

@media (hover: hover) and (pointer: fine) {
  a.stat-card {
    transition: transform 0.4s var(--lx-ease), border-color 0.4s ease;
  }

  a.stat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(201, 162, 75, 0.42);
  }
}

.panel-table th {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--lx-text-2xs);
  color: var(--lx-faint);
}

[dir="rtl"] .panel-table th {
  letter-spacing: 0;
  font-size: var(--lx-text-xs);
}

.panel-table td {
  padding-block: 14px;
  color: var(--lx-muted);
}

.panel-table tbody tr {
  transition: background 0.25s ease;
}

.panel-table tbody tr:hover {
  background: rgba(201, 162, 75, 0.045);
}

/* Plain text links only — button links (.btn-*) keep their own border */
.panel-table a:not([class]) {
  color: var(--lx-text);
  border-block-end: 1px solid rgba(201, 162, 75, 0.35);
}

@media (max-width: 780px) {
  .panel-nav a.active::before {
    inset-block: auto;
    inset-inline: 12px;
    inset-block-end: 0;
    width: auto;
    height: 2px;
  }

  .panel-subtitle {
    font-size: var(--lx-text-base);
  }
}


/* ---------- Cross-cutting: prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero--page h1 {
    animation: none;
  }

  .category-card:hover,
  .cx-panel:hover,
  .lx-bento-card:hover {
    transform: none;
  }

  .category-card:hover .category-card-image,
  .cx-panel:hover .cx-panel-art {
    filter: saturate(0.78) contrast(1.06) brightness(0.9) sepia(0.06);
  }

  .category-card:hover .category-card-image::before,
  .cx-panel:hover .cx-panel-art::before {
    inset: 8px;
    border-color: rgba(230, 198, 117, 0.22);
  }

  .category-card:hover .category-card-body h3::after {
    width: 22px;
  }

  .category-card:hover .category-card-body::after {
    transform: none;
  }

  [dir="rtl"] .category-card:hover .category-card-body::after {
    transform: none;
  }

  .btn-gold:hover,
  .btn-outline:hover {
    transform: none;
  }

  .btn-gold:active,
  .btn-outline:active,
  .px-order:active {
    transform: none;
  }

  a.stat-card:hover {
    transform: none;
  }
}