/* ============================================================
   Optimized resonance selector overrides (/resonance_optimized)
   Imports the full selector stylesheet, then patches the hotspots
   that hurt performance on older GPUs.
   ============================================================ */

@import url("/css/resonance-selector.css");

/* ---------- Canvas atmosphere layer ---------- */
.rsel-opt .rsel-atmosphere {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Compositor / paint containment ---------- */
.rsel-opt .rsel-stage {
  contain: layout style;
}
.rsel-opt .rsel-mandala {
  contain: layout style;
}
/* No paint containment on nodes — coins magnify via transform: scale() and the
   static grain extends past the 7% slot; paint containment clipped both. */
.rsel-opt .rsel-node {
  overflow: visible;
  will-change: auto;
}
.rsel-opt .rsel-float {
  overflow: visible;
  will-change: auto;
}
.rsel-opt .rsel-coin {
  opacity: var(--coin-o, 0.75);
  /* Magnifier sets --coin-o; skip the idle pulse animation from the base sheet. */
  animation: none;
  transition:
    transform 1.7s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    opacity 0.55s ease;
  will-change: auto;
}

/* ---------- Rim static: animated grain dissolve (matches original) ---------- */
.rsel-opt .rsel-static {
  mix-blend-mode: overlay;
  animation: rselStatic 0.85s steps(6) infinite;
  opacity: 0.62;
  background-size: 132px 132px;
}
.rsel-opt .rsel-node.is-over .rsel-coin {
  opacity: 1;
}

/* ---------- Ring focus glow (lighter than multi-layer box-shadow) ---------- */
.rsel-opt .rsel-ring.in-focus {
  box-shadow: 0 0 22px color-mix(in srgb, var(--rc, #e8651e) 50%, transparent);
}

/* ---------- Detail mode: drop mandala blur (very expensive on 36 nodes) ---------- */
.rsel-root.rsel-opt[data-mode="detail"] .rsel-mandala {
  filter: saturate(0.88);
  opacity: 0.34;
}

/* ---------- Connector: skip SVG filter drop-shadow ---------- */
.rsel-opt .rsel-links line {
  filter: none;
}

/* ---------- Float label: skip heavy shadow stack ---------- */
.rsel-opt .rsel-floatlab {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* ---------- Badge in bar ---------- */
.rsel-opt .rsel-brand .rsel-opt-badge {
  font-family: var(--display, "Poppins", sans-serif);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--teal, #1c8a86) 18%, var(--card, #fffdf6));
  border: 1px solid color-mix(in srgb, var(--teal, #1c8a86) 35%, transparent);
  color: var(--teal, #1c8a86);
}

@media (prefers-reduced-motion: reduce) {
  .rsel-opt .rsel-float,
  .rsel-opt .rsel-coin {
    animation: none !important;
  }
}