/* ==========================================================================
   Theme: AURORA — matches the "RAW.CSS" showcase aesthetic:
   Unbounded + DM Mono, near-black bg, mint/pink/blue triad, aurora-blob mesh
   + noise, glitch headline, glass cards w/ spinning conic borders, custom
   cursor (see aurora-fx.js for the JS-driven cursor / tilt / scramble).
   Only loaded when "Aurora" is selected, so plain selectors are safe.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@200;400;700;900&family=DM+Mono:ital@0;1&display=swap");

:root {
  --accent:  #b3ffc8;   /* mint  */
  --accent2: #8a6bff;   /* violet — techy third accent (pink kept to the bg blob only) */
  --accent3: #5eadff;   /* blue  */
  --text: #e8e6f0;
  --muted: rgba(232,230,240,0.4);
  --border: rgba(255,255,255,0.1);
  --border-strong: rgba(255,255,255,0.22);
  --glow: 0 0 24px rgba(179,255,200,0.4);
}

body {
  font-family: "DM Mono", monospace;
  color: var(--text);
  background: #070709;
}

/* Aurora bg = drifting blobs + a faint, theme-tinted pixel field.
   Hide the loud nexus gradient/haze/vignette; keep the pixel canvas subtle so
   it picks up the blob colors via soft-light. */
#nexus-gradient, #nexus-haze, #nexus-vignette, .pixel-glow { display: none !important; }
#nexus-pixels { opacity: 0.30; mix-blend-mode: soft-light; }

/* ── Aurora mesh + noise (elements injected by aurora-fx.js) ── */
.aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.aurora-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.20;
  animation: aurora-drift 16s ease-in-out infinite alternate; }
.aurora-blob:nth-child(1){ width:70vw; height:60vh; background:radial-gradient(circle,#b3ffc8 0%,transparent 70%); top:-20%; left:-10%; animation-duration:14s; }
.aurora-blob:nth-child(2){ width:50vw; height:70vh; background:radial-gradient(circle,#ff6ef7 0%,transparent 70%); top:20%; right:-15%; animation-duration:18s; animation-delay:-6s; }
.aurora-blob:nth-child(3){ width:55vw; height:55vh; background:radial-gradient(circle,#5eadff 0%,transparent 70%); bottom:-10%; left:30%; animation-duration:20s; animation-delay:-3s; }
@keyframes aurora-drift {
  0%   { transform: translate(0,0) scale(1); }
  33%  { transform: translate(6vw,-4vh) scale(1.08); }
  66%  { transform: translate(-4vw,5vh) scale(0.95); }
  100% { transform: translate(3vw,2vh) scale(1.05); }
}
.noise { position: fixed; inset: 0; z-index: 1; opacity: 0.045; pointer-events: none;
  background-size: 200px 200px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ── Typography ── */
.site-logo, .section h2, .nav-panel-title strong, .nav-bubble .label,
.thought-text, .cta, .thought-link, .stream-status {
  font-family: "Unbounded", sans-serif !important;
}
.site-links a, .cmdk-input, .cmdk-item, .cmdk-trigger { font-family: "DM Mono", monospace; }

/* ── Headline → soft-white over a shimmering pixel field (no glitch / gradient) ──
   The pixel-canvas behind the letters is injected by pixel-hover.js; it shimmers
   in when the title is hovered. See `.pixel-title` below. */
.headline { text-align: center; }
.headline h1 {
  display: inline-block;
  position: relative;
  font-family: "Unbounded", sans-serif !important;   /* same face as the BILLOGNA.LOL logo */
  font-weight: 900;
  line-height: 1.25;            /* roomy enough for Unbounded's deep descenders (g) */
  padding-bottom: 0.14em;
  letter-spacing: -0.03em;
  color: var(--text);
  -webkit-text-fill-color: currentColor;
  text-shadow:
    0 0 18px rgba(179,255,200,0.22),
    0 0 44px rgba(94,173,255,0.16);
}

/* ── Section headings ── */
.section h2 { color: var(--text); text-shadow: none; letter-spacing: -0.02em; }
.section > p { color: var(--muted); }

/* ── Hero CTAs → glass pills ──
   `.thought-link` is the old class name for these. The homepage moved to `.cta`,
   but discord/modview render their own CTAs from templates that live on the
   server, not in this repo — so both names stay styled here until those pages
   are updated. Dropping it un-hid their thought-bubble tail dots. */
.cta, .thought-link {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  color: var(--text);
  box-shadow: none;
  text-shadow: none;
  font-weight: 700;
}
/* Tail dots are left visible — they're what makes these read as thought
   bubbles rather than pills floating next to the artwork. Each page positions
   its own via custom properties. */
.cta:hover, .cta:focus-visible,
.thought-link:hover, .thought-link:focus-visible {
  color: #fff;
  border-color: var(--accent2);
  box-shadow: 0 0 26px rgba(138,107,255,0.30);
}
/* The primary keeps the triad wash so the row still has a clear lead action. */
.cta.is-primary {
  background: linear-gradient(120deg, rgba(179,255,200,0.14), rgba(94,173,255,0.13), rgba(138,107,255,0.15));
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 0 22px rgba(179,255,200,0.12);
}
.cta.is-primary:hover { border-color: var(--accent); box-shadow: 0 0 30px rgba(179,255,200,0.24); }

/* ── Hero tagline ── */
.tagline { color: var(--muted); }

/* ── Glass cards with spinning conic border: stream embeds + social chips ── */
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes border-spin { to { --angle: 360deg; } }
.media-embed, .social-link {
  position: relative;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}
/* Spinning conic border stays on the stream embeds only. Social icons drop it
   so their hover is just the pixel fill + a subtle violet edge, like the chips. */
.media-embed::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
  opacity: 0; transition: opacity 0.4s; animation: border-spin 4s linear infinite;
  background: conic-gradient(from var(--angle,0deg), var(--accent), var(--accent2), var(--accent3), var(--accent));
}
.media-embed:hover::after { opacity: 1; }
.social-link:hover {
  color: var(--text);
  border-color: var(--accent2);
  box-shadow: 0 0 22px rgba(138,107,255,0.22);
  transform: translateY(-3px) scale(1.06);
}

/* ── Stream status pill ── */
.stream-status { border-color: var(--border); color: var(--muted); background: rgba(255,255,255,0.04); }
/* Live = a true red so it reads as "live", not candy pink */
.stream-status.is-live { color: #fff; border-color: rgba(255,90,110,0.55); box-shadow: 0 0 22px rgba(255,90,110,0.32);
  background: linear-gradient(100deg, rgba(255,90,110,0.20), rgba(94,173,255,0.16)); }
.stream-status.is-live .ss-dot { background: #ff5a6e; }

/* ── Header → glass capsule (reuses --nav-p from hud-header.js) ── */
.site-header { background: transparent; border-bottom: none; backdrop-filter: none; }
.site-header::after { display: none; }
.site-nav {
  /* Capsule shrink tuned so the wider Unbounded wordmark + 5 links + ⌘K chip
     still fit without the Home pill colliding with the logo (was 360px). */
  max-width: calc(1200px - 220px * var(--nav-p, 0));
  margin-inline: auto;
  margin-top: calc(9px * var(--nav-p, 0));
  padding: calc(14px - 2px * var(--nav-p, 0)) calc(20px + 10px * var(--nav-p, 0));
  /* Soft pill instead of a hard-edged box */
  border-radius: calc(999px * var(--nav-p, 0));
  background: rgb(14 14 20 / calc(0.16 + 0.50 * var(--nav-p, 0)));
  border: 1px solid rgb(255 255 255 / calc(0.02 + 0.06 * var(--nav-p, 0)));
  box-shadow:
    0 calc(18px * var(--nav-p, 0)) calc(50px * var(--nav-p, 0)) rgb(0 0 0 / calc(0.45 * var(--nav-p, 0))),
    0 0 calc(46px * var(--nav-p, 0)) rgb(179 255 200 / calc(0.10 * var(--nav-p, 0))),
    inset 0 1px 0 rgb(255 255 255 / calc(0.07 * var(--nav-p, 0)));
  backdrop-filter: blur(calc(4px + 14px * var(--nav-p, 0)));
  -webkit-backdrop-filter: blur(calc(4px + 14px * var(--nav-p, 0)));
}
/* Logo → soft-white to match the headline (gradient dropped); pixels fill in on hover */
.site-logo {
  background: none;
  color: var(--text);
  -webkit-text-fill-color: currentColor;
  text-shadow: 0 0 14px rgba(179,255,200,0.16);
  /* Unbounded is a wide face — tighten spacing/size so the wordmark stays compact */
  letter-spacing: 0.01em;
  font-size: 1.02em;
}
.site-links { position: relative; gap: 14px; }
.site-links a { position: relative; z-index: 1; color: var(--text); }
.site-links a::after { display: none !important; }
.site-links a:hover, .site-links a.active { color: #fff; text-shadow: none; }
/* Sliding pill picks up the whole triad rather than a single mint tint */
.nav-indicator {
  position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; z-index: 0;
  border-radius: 999px; opacity: 0; pointer-events: none; transform: translateX(0);
  background: linear-gradient(120deg, rgba(179,255,200,0.18), rgba(94,173,255,0.16), rgba(138,107,255,0.18));
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 0 18px rgba(179,255,200,0.18), 0 0 26px rgba(138,107,255,0.12);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), width .3s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
}

/* ── Header chrome recolored to the theme (was neutral gray / leftover purple) ── */
.cmdk-trigger {
  color: var(--text);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
}
.cmdk-trigger:hover { color: #fff; border-color: var(--accent); background: rgba(255,255,255,0.08); }
.cmdk-trigger kbd {
  color: var(--accent);
  background: rgba(179,255,200,0.12);
  border: 1px solid rgba(179,255,200,0.30);
}
/* Mobile portal menu */
.nav-toggle { border-color: rgba(179,255,200,0.40); color: var(--text); background: rgba(255,255,255,0.04); }
.nav-toggle:hover { border-color: var(--accent2); box-shadow: 0 0 22px rgba(138,107,255,0.25); }
.nav-panel { border-color: rgba(255,255,255,0.14); }
.nav-panel-title strong {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.nav-bubble { border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); }
.nav-bubble:hover, .nav-bubble:focus-visible { border-color: var(--accent2); background: rgba(138,107,255,0.08); }
.nav-bubble::after { background: linear-gradient(90deg, var(--accent), var(--accent3), var(--accent2)); }

/* ── Pixel hero intro overlay — retinted from purple to the aurora palette ── */
#intro {
  background:
    radial-gradient(circle at 38% 32%, rgba(179,255,200,0.10), transparent 55%),
    radial-gradient(circle at 72% 70%, rgba(255,110,247,0.10), transparent 60%),
    radial-gradient(circle at 50% 55%, rgba(94,173,255,0.09), transparent 70%),
    #070709;
}
#transition {
  background:
    radial-gradient(circle at 50% 45%, rgba(94,173,255,0.10), transparent 60%),
    #070709;
}

/* ── Pixel-fill on hover (pixel-canvas web component, wired by pixel-hover.js) ──
   Each interactive element becomes a clipped stacking context with the canvas
   tucked behind its content (z-index:-1), so hovering fills it with shimmering
   pixels without covering text/icons or intercepting clicks. */
.pixel-host {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.pixel-host > pixel-canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* Borderless text hosts (logo, nav links): no hard box to clip to, so fade the
   pixels out toward the edges with a radial mask instead of a sharp rectangle. */
.pixel-soft > pixel-canvas {
  -webkit-mask-image: radial-gradient(ellipse at center, #000 28%, transparent 72%);
          mask-image: radial-gradient(ellipse at center, #000 28%, transparent 72%);
}
/* Hero title field: a touch larger than the letters, not clipped, and faded at
   the edges so it dissolves into the background rather than ending in a box. */
.pixel-title {
  position: relative;
  isolation: isolate;
}
.pixel-title > pixel-canvas {
  position: absolute;
  inset: -16% -8%;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 34%, transparent 78%);
          mask-image: radial-gradient(ellipse at center, #000 34%, transparent 78%);
}
@media (prefers-reduced-motion: reduce) {
  /* The component already freezes shimmer under reduced-motion; keep the field
     from popping in by hiding it entirely for these users. */
  .pixel-host > pixel-canvas,
  .pixel-title > pixel-canvas { display: none; }
}

/* ── Commands UI (discord dashboard + modview, via commands.css) ──
   Those pages build their primary buttons from a mint→violet gradient with
   white text, which is unreadable across the mint half of the ramp. Swap in the
   same translucent triad wash the nav indicator and hero CTAs use.

   Scoped under [data-theme] deliberately: commands.css is a component sheet
   that loads AFTER the theme, so a bare `.tab-btn.active` here would lose the
   cascade to it at equal specificity. */
[data-theme="aurora"] .tab-btn.active,
[data-theme="aurora"] .category-edit-modal .btn-primary {
  background: linear-gradient(120deg, rgba(179,255,200,0.20), rgba(94,173,255,0.18), rgba(138,107,255,0.20));
  color: #fff;
  border-color: rgba(255,255,255,0.30);
  box-shadow: 0 0 22px rgba(179,255,200,0.16);
}
[data-theme="aurora"] .tab-btn.active:hover,
[data-theme="aurora"] .category-edit-modal .btn-primary:hover { border-color: var(--accent); }
/* The --glow drop-shadow muddies the gradient text on the page heading. */
[data-theme="aurora"] .command-management-title h1 { filter: none; }

/* ── Footer ── */
.site-footer { color: var(--muted); border-top-color: rgba(255,255,255,0.08); }
.site-footer .footer-links a { color: var(--muted); }
.site-footer .footer-links a:hover, .site-footer .footer-links a:focus-visible { color: var(--text); }
/* The all-caps mono treatment belongs to the one-liner, not the whole footer —
   it used to squash the links and the copyright line too. */
.site-footer .footer-note {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.8em;
}