/* mariusson — design tokens */

:root,
[data-theme="light"] {
  /* Palette: Pure museum white + ink + ochre accent */
  --paper: #FAFAF7;
  --paper-2: #F2F0EA;
  --paper-3: #E8E5DC;
  --paper-veil: rgba(250, 250, 247, 0.65);  /* atlas backdrop wash */
  --ink: #0E0E0C;
  --ink-2: #2A2723;
  --graphite: #6B6760;
  --graphite-2: #9A958B;
  --rule: #D9D5CB;
  --rule-soft: #E6E2D8;
}

/* Dark theme — flips paper/ink, softens lines, keeps Bauhaus primaries
   so the red/yellow/blue still snap. The atlas backdrop ends up like a
   late-evening museum gallery. */
[data-theme="dark"] {
  --paper: #0E0E0C;
  --paper-2: #1A1A17;
  --paper-3: #24221D;
  --paper-veil: rgba(14, 14, 12, 0.55);
  --ink: #FAFAF7;
  --ink-2: #D4D0C4;
  --graphite: #9A958B;
  --graphite-2: #6B6760;
  --rule: #2A2723;
  --rule-soft: #1F1D19;
}

:root {

  /* Single oklch accent — deep sienna/ochre */
  --accent: oklch(0.58 0.12 50);
  --accent-soft: oklch(0.92 0.04 60);
  --accent-ink: oklch(0.32 0.08 45);

  /* Bauhaus primaries — used sparingly for tags, indicators, key accents */
  --bauhaus-red: oklch(0.58 0.18 28);
  --bauhaus-yellow: oklch(0.85 0.15 92);
  --bauhaus-blue: oklch(0.45 0.16 250);

  /* Verification blue (single use) */
  --verified: oklch(0.62 0.12 245);

  /* Type */
  --serif: "Cormorant Garamond", "EB Garamond", Garamond, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", Menlo, ui-monospace, monospace;

  /* Scale */
  --x: 8px;
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* Soft elevation — bigger, blurrier, lower-opacity than hard Bauhaus shadows */
  --shadow-soft:   0 20px 60px -22px rgba(0, 0, 0, 0.22), 0 6px 16px -8px rgba(0, 0, 0, 0.10);
  --shadow-softer: 0 30px 80px -30px rgba(0, 0, 0, 0.24), 0 10px 24px -12px rgba(0, 0, 0, 0.10);

  /* Easing — gentler curves to match the fluid direction */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-fluid: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base */
.an-root,
.an-root * {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Touch / app posture — kill the 300 ms tap delay and accidental
   double-tap-zoom inside the canvas. Tap highlight off so taps don't
   leave grey rectangles on the wheel. */
html, body, #root {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}
button { touch-action: manipulation; }

/* Mobile breakpoint — adjust dimensions that don't survive inline
   styles. Every panel/drawer/dialog in the app carries
   `data-atlas-panel`; on small screens we cap each to the viewport so
   nothing slides off-screen, and shrink the density slider to match
   the tightened chrome.
   The `!important` is unavoidable here because the drawers set width
   via inline `style={{ width: 380 }}` and we need to win over that. */
@media (max-width: 760px) {
  input[type="range"].an-density { width: 60px; }
  [data-atlas-panel] {
    max-width: 100vw !important;
  }
  /* The radial wheel is a 536 × 536 CSS box positioned with a
     -268 px margin so it centres around its anchor. Clamping it to
     100vw on mobile collapses the box AROUND its left edge, which
     leaves the SVG (still 536 px) overflowing right and the HTML hub
     overlay centring on the clipped box — i.e. visually left of where
     the SVG draws the disc. Exempt the wheel so it stays its native
     size and centres cleanly. */
  [data-rw-wheel] {
    max-width: none !important;
  }
  /* Right-side drawers (artist/collector/user profile, room, saved,
     studio, etc.) commonly use `right: 0` + a fixed width. On phones
     they take the whole screen and slide up from the bottom. */
  [data-atlas-drawer] {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    border-left: none !important;
  }
  /* Modals + centred dialogs — keep them contained inside the viewport
     and let their bodies scroll if content is taller than the screen. */
  [data-atlas-dialog] {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 16px) !important;
    overflow-y: auto;
    box-sizing: border-box;
  }
  /* Inline multi-column grids inside dialogs collapse to one column. */
  [data-atlas-dialog][data-atlas-stack] {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* iOS Safari auto-zooms inputs below 16 px font-size on focus. */
  [data-atlas-panel] input[type="text"],
  [data-atlas-panel] input[type="email"],
  [data-atlas-panel] input[type="password"],
  [data-atlas-panel] input[type="search"],
  [data-atlas-panel] input[type="number"],
  [data-atlas-panel] input:not([type]),
  [data-atlas-panel] textarea {
    font-size: 16px !important;
  }
}

.an-root {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  height: 100%;
}

.an-root .display {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.95;
}
.an-root .display-it { font-style: italic; font-family: var(--serif); }

.an-root .mono {
  font-family: var(--mono);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.08em;
}

.an-root .eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite);
}

.an-root .rule { background: var(--rule); height: 1px; width: 100%; }
.an-root .rule-soft { background: var(--rule-soft); height: 1px; width: 100%; }

/* Wordmark */
.an-wordmark {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
  font-style: italic;
  display: inline-flex;
  align-items: baseline;
}
.an-wordmark .dot {
  display: inline-block;
  width: 0.18em;
  height: 0.18em;
  border-radius: 50%;
  background: var(--accent);
  margin: 0 0.04em 0.08em 0.04em;
  transform: translateY(0.05em);
}

/* Buttons */
.an-root .btn {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  padding: 10px 18px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.an-root .btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.an-root .btn.ghost { background: transparent; color: var(--ink); }
.an-root .btn.ghost:hover { background: var(--ink); color: var(--paper); }
.an-root .btn.tiny { font-size: 11px; padding: 6px 12px; }
.an-root .btn.link {
  background: transparent; border: none; color: var(--ink);
  padding: 4px 0; border-radius: 0;
  border-bottom: 1px solid var(--ink); border-top: 0; border-left: 0; border-right: 0;
}
.an-root .btn.link:hover { color: var(--accent-ink); border-color: var(--accent-ink); }

/* Pill */
.an-root .pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--graphite);
  background: var(--paper);
}
.an-root .pill .dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}

/* Verified mark */
.an-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--verified);
  color: white;
  font-size: 9px;
  flex-shrink: 0;
}

/* SVG-stripe placeholder for artwork */
.an-artwork {
  position: relative;
  background: var(--paper-2);
  overflow: hidden;
}
.an-artwork::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--art-img, none);
  background-size: cover;
  background-position: center;
  opacity: var(--art-op, 1);
}
.an-artwork .meta {
  position: absolute;
  left: 10px; bottom: 8px; right: 10px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  mix-blend-mode: difference;
  filter: invert(1);
  opacity: 0.85;
}

/* Hover lifts */
.an-root .lift { transition: transform 0.4s var(--ease-out); }
.an-root .lift:hover { transform: translateY(-2px); }

/* Scrollbar reset within artboards */
.an-root *::-webkit-scrollbar { width: 6px; height: 6px; }
.an-root *::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }
.an-root *::-webkit-scrollbar-track { background: transparent; }

/* Keyframes used across artboards-v2 */
@keyframes an-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes an-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes an-tunnel-pulse {
  0%   { opacity: 0; transform: scale(1); }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.4); }
}
@keyframes an-pop {
  0%   { transform: scale(0.985); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes an-slide-in {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes an-slide-in-l {
  from { transform: translateX(-40px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes an-tunnel-bg {
  0%   { opacity: 0; transform: scale(1); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: scale(2.6); }
}
@keyframes an-streak {
  from { opacity: 0; stroke-dasharray: 0 600; }
  60%  { opacity: 0.55; }
  to   { opacity: 0; stroke-dasharray: 600 0; }
}

/* Subtle drill-in halo — fades in to the configured opacity, holds, fades out */
@keyframes an-drill-halo {
  0%   { opacity: 0; }
  35%  { opacity: 0.12; }
  100% { opacity: 0; }
}

/* Tile opacity envelopes — driven by classNames so animations always
   trigger deterministically. */
@keyframes an-tile-mount-fade {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes an-tile-leave-fade {
  from { opacity: 1; } to { opacity: 0; }
}
.an-tile-mount {
  animation: an-tile-mount-fade var(--an-tile-dur, 800ms) cubic-bezier(0.4, 0, 0.2, 1) var(--an-tile-delay, 0ms) forwards;
}
.an-tile-leave {
  animation: an-tile-leave-fade var(--an-tile-dur, 800ms) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Density slider — rounded organic: 2px track, round ink thumb */
input[type="range"].an-density {
  -webkit-appearance: none;
  appearance: none;
  width: 84px;
  height: 14px;
  background: transparent;
  cursor: pointer;
  margin: 0;
  padding: 0;
}
input[type="range"].an-density:focus { outline: none; }
input[type="range"].an-density::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--ink);
  border: none;
  border-radius: 999px;
}
input[type="range"].an-density::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: var(--ink);
  border: none;
  border-radius: 50%;
  margin-top: -5px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
input[type="range"].an-density::-moz-range-track {
  height: 2px;
  background: var(--ink);
  border: none;
  border-radius: 999px;
}
input[type="range"].an-density::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: var(--ink);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

/* Radial wheel keyframes ────────────────────────────────────── */
@keyframes an-wheel-bloom {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes an-wheel-collapse {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.7); }
}
@keyframes an-ring-grow {
  from { opacity: 0; transform: scale(0.86); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes an-wedge-pulse {
  0%   { filter: brightness(1); }
  50%  { filter: brightness(1.15); }
  100% { filter: brightness(1); }
}