/* ============================================================
   Smart Bridge — Neuroanalysis interactive wallpaper (test)
   Styles the full-bleed hero shader canvas and the wallpaper
   switcher used to preview the six backgrounds before merge.
============================================================ */

.wallpaper-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none; /* interaction is captured on window; keeps links clickable */
}

/* keep hero text above the shader */
.hero__content,
.hero__scrollhint { z-index: 2; }
.hero__fade { z-index: 1; }

/* ---------------- section background (Why this matters) ---------------- */

.wallpaper-canvas--section { z-index: 0; }

.neuro-why {
  position: relative;
  background: var(--bg);
}

.neuro-why__fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--bg) 0%, transparent 18%, transparent 82%, var(--bg) 100%),
    linear-gradient(to right, rgba(5, 5, 8, 0.72) 0%, rgba(5, 5, 8, 0.35) 45%, rgba(5, 5, 8, 0.55) 100%);
}

.neuro-why > .container { position: relative; z-index: 2; }

.what > .container { position: relative; z-index: 2; }
.what > .orb { z-index: 1; }

/* ---------------- pane background (Explore → Podcast audio) ---------------- */

.wallpaper-canvas--pane { z-index: 0; }
.neuro-pane--stimulus .neuro-pane__frame > .neuro-pane__media { position: relative; z-index: 1; }
.neuro-pane__frame > .neuro-pulse { z-index: 2; }

/* brain card — enforce full black fill (loads after style.css) */
.neuro-pane.neuro-pane--brain,
.neuro-pane.neuro-pane--brain .neuro-pane__label,
.neuro-pane.neuro-pane--brain .neuro-pane__frame {
  background-color: #000 !important;
}

.neuro-pane.neuro-pane--brain .neuro-pane__frame {
  background-image: none !important;
}

.neuro-pane.neuro-pane--brain img.neuro-pane__media {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #000;
}

/* ---------------- true 3D brain (three.js orbit) ---------------- */

.neuro-brain3d-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100% !important;
  height: 100% !important;
  cursor: grab;
  touch-action: none;
}
.neuro-brain3d-canvas:active { cursor: grabbing; }

/* ---------------- draggable pseudo-3D brain (2D fallback) ---------------- */

.neuro-pane.neuro-pane--brain .neuro-pane__frame {
  perspective: 1100px;
}

.neuro-brain3d {
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.neuro-brain3d.is-grabbing { cursor: grabbing; }

.neuro-brain3d__inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: center center;
  will-change: transform;
}

.neuro-brain3d__hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 3;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(8, 10, 22, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-pale);
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.4s ease;
}
.neuro-brain3d__hint.is-hidden { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .neuro-brain3d__inner { will-change: auto; }
}

/* ---------------- podcast audio controls (Explore → Podcast audio) ---------------- */

.neuro-audio-controls {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 4;
  display: flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(8, 10, 22, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.neuro-audio-btn {
  appearance: none;
  cursor: pointer;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s var(--ease-spring);
}

.neuro-audio-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(159, 180, 255, 0.45);
  color: #fff;
  transform: translateY(-1px);
}

.neuro-audio-btn__icon {
  width: 18px;
  height: 18px;
  display: block;
}

.neuro-audio-btn__icon--play,
.neuro-audio-btn__icon--muted { display: none; }

.neuro-audio-btn.is-paused .neuro-audio-btn__icon--pause { display: none; }
.neuro-audio-btn.is-paused .neuro-audio-btn__icon--play { display: block; }

.neuro-audio-btn.is-muted .neuro-audio-btn__icon--vol { display: none; }
.neuro-audio-btn.is-muted .neuro-audio-btn__icon--muted { display: block; }

/* ---------------- switcher ---------------- */

.wp-switcher {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  max-width: min(440px, calc(100% - 48px));
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(8, 10, 22, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.wp-switcher__label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--blue-pale);
}

.wp-switcher__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wp-pill {
  appearance: none;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  transition: transform 0.3s var(--ease-spring), background 0.25s ease,
    color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.wp-pill:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}
.wp-pill.is-active {
  color: #fff;
  background: linear-gradient(180deg, var(--blue-soft), var(--blue));
  border-color: transparent;
  box-shadow: 0 8px 26px rgba(43, 76, 255, 0.4);
}

.wp-switcher__hint {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

@media (max-width: 720px) {
  .wp-switcher {
    left: 12px;
    right: 12px;
    bottom: 16px;
    max-width: none;
    padding: 12px 14px;
  }
  .wp-switcher__hint { display: none; }
  .wp-pill { padding: 7px 11px; font-size: 0.68rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wp-switcher__hint::after { content: " (static)"; }
}