/* REQ-292 — Reusable D3 natal-wheel component styles.
 * Scoped under .nw-* class names so the rules don't leak to legacy
 * markup. Animations preserve REQ-267 dashboard idiom (halo-breathe,
 * spin-slow, sign-fade staggered, planet-pop staggered, aspect-draw
 * + aspect-pulse). Compatible with the legacy class names (.halo,
 * .spin-slow, .sign-glyph, .planet, .aspect-line) so existing CSS
 * keyframe rules in dashboard.css / natal-chart.css that target those
 * names continue to work — but we also mirror them under .nw-* below
 * so the component is fully self-contained when used standalone.
 */

.nw-svg { display: block; width: 100%; height: 100%; touch-action: manipulation; }

/* ── Animations ─────────────────────────────────────────── */
.nw-halo { animation: nw-halo-breathe 6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes nw-halo-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(0.98); }
}
.nw-spin { animation: nw-spin 120s linear infinite; }
@keyframes nw-spin { to { transform: rotate(360deg); } }

.nw-sign-glyph { opacity: 0; animation: nw-sign-fade 1.1s ease forwards; }
@keyframes nw-sign-fade { to { opacity: 0.9; } }

.nw-planet {
  opacity: 0;
  transform: scale(0.6);
  transform-box: fill-box;
  transform-origin: center;
  animation: nw-planet-pop 0.8s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes nw-planet-pop { to { opacity: 1; transform: scale(1); } }

.nw-aspect-line {
  stroke-dasharray: var(--len) var(--len);
  stroke-dashoffset: var(--len);
  animation: nw-aspect-draw 1.2s cubic-bezier(.2,.7,.2,1) forwards,
             nw-aspect-pulse 6s ease-in-out infinite 1.5s;
  animation-delay: var(--delay), 0s;
}
@keyframes nw-aspect-draw  { to { stroke-dashoffset: 0; } }
@keyframes nw-aspect-pulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.4; } }

/* ── Click zones (signs / houses) ──────────────────────── */
.nw-zone {
  fill: rgba(255,255,255,0);
  stroke: rgba(201,168,109,0);
  stroke-width: 1;
  cursor: pointer;
  transition: fill 180ms cubic-bezier(.2,.7,.2,1),
              stroke 180ms cubic-bezier(.2,.7,.2,1);
}
.nw-zone:hover {
  fill: rgba(201,168,109,0.08);
  stroke: rgba(201,168,109,0.4);
}
.nw-zone.is-selected {
  fill: rgba(228,201,138,0.14);
  stroke: #e4c98a;
}
.nw-zone--house.is-selected { fill: rgba(228,201,138,0.10); }

/* ── Aspect click zone (transparent stroke overlay) ───── */
.nw-aspect-zone {
  stroke: rgba(0,0,0,0);
  stroke-width: 10;
  fill: none;
  cursor: pointer;
  pointer-events: stroke;
}

/* ── Aspect hover/selected ─────────────────────────────── */
.nw-aspect-line.is-hovered {
  stroke-width: 1.8 !important;
  opacity: 1 !important;
  animation: none !important;
  stroke-dashoffset: 0 !important;
  filter: drop-shadow(0 0 3px currentColor);
}
.nw-aspect-line.is-selected {
  stroke-width: 2.4 !important;
  animation: none !important;
  stroke-dashoffset: 0 !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 5px currentColor);
}

/* ── Planet hover/selected ─────────────────────────────── */
.nw-planet, .nw-transit-planet { cursor: pointer; }
.nw-planet circle, .nw-transit-planet circle, .nw-transit-planet text, .nw-planet text {
  transition: stroke 180ms cubic-bezier(.2,.7,.2,1),
              filter 180ms cubic-bezier(.2,.7,.2,1);
}
.nw-planet:hover circle:nth-child(2),
.nw-transit-planet:hover circle:first-child {
  stroke: #e4c98a;
  stroke-width: 1.4;
  filter: drop-shadow(0 0 6px rgba(228,201,138,0.55));
}
.nw-planet.is-selected circle:nth-child(2),
.nw-transit-planet.is-selected circle:first-child {
  stroke: #e4c98a !important;
  stroke-width: 1.8 !important;
  filter: drop-shadow(0 0 8px rgba(228,201,138,0.75));
}
.nw-planet.is-selected circle:first-child { r: 18; }

/* ── Tooltip (component-owned, positioned in container) ── */
.nw-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(11,10,18,0.96);
  border: 1px solid rgba(201,168,109,0.18);
  border-radius: 4px;
  padding: 8px 12px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px;
  color: #e8e1d3;
  opacity: 0;
  transition: opacity 180ms cubic-bezier(.2,.7,.2,1);
  z-index: 100;
  white-space: nowrap;
  max-width: 260px;
}
.nw-tooltip.show { opacity: 1; }
.nw-tooltip .nw-tt-label {
  display: block;
  color: #e4c98a;
  font-style: italic;
}
.nw-tooltip .nw-tt-sub {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #7a7466;
  margin-top: 2px;
}

/* ── Axis labels ────────────────────────────────────────── */
.nw-axis-label { letter-spacing: 0.2em; }

/* ═══════════════════════════════════════════════════════════════
   REQ-301 — Time-axis slider toolbar shared by daily (REQ-295,
   removed) → weekly + monthly horoscope wheel animation. Styles
   live here so any page mounting NatalWheel can render the toolbar
   without loading the daily-only stylesheet.
   ═══════════════════════════════════════════════════════════════ */
.wheel-time-toolbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 12px 16px;
  border: 1px solid rgba(201,168,109,0.18);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(28,25,48,0.5), rgba(22,19,36,0.5));
}
.wtt-btn {
  background: transparent;
  color: #c9a86d;
  border: 1px solid rgba(201,168,109,0.32);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: color 180ms cubic-bezier(.2,.7,.2,1),
              border-color 180ms cubic-bezier(.2,.7,.2,1),
              background 180ms cubic-bezier(.2,.7,.2,1);
}
.wtt-btn:hover { color: #e4c98a; border-color: #c9a86d; }
.wtt-btn.is-playing {
  color: #0b0a12; background: #c9a86d; border-color: #c9a86d;
}
.wtt-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  background: transparent;
  cursor: pointer;
}
.wtt-slider::-webkit-slider-runnable-track {
  height: 3px;
  background: linear-gradient(90deg, #8a7649, #c9a86d);
  border-radius: 2px;
}
.wtt-slider::-moz-range-track {
  height: 3px;
  background: linear-gradient(90deg, #8a7649, #c9a86d);
  border-radius: 2px;
}
.wtt-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  background: #e4c98a;
  border: 2px solid #0b0a12;
  border-radius: 50%;
  margin-top: -5px;
  box-shadow: 0 0 8px rgba(228,201,138,0.5);
}
.wtt-slider::-moz-range-thumb {
  width: 14px; height: 14px;
  background: #e4c98a;
  border: 2px solid #0b0a12;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(228,201,138,0.5);
}
.wtt-readout {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: #e4c98a;
  min-width: 56px;
  text-align: right;
}

@media (max-width: 768px) {
  .wheel-time-toolbar { gap: 10px; padding: 10px 12px; }
  .wtt-btn { width: 30px; height: 30px; font-size: 12px; }
  .wtt-readout { font-size: 11px; min-width: 50px; }
}

/* ──────────────────────────────────────────────────────────────────────
 * Scene-based highlight (prototype).
 *
 * NatalWheel.highlight(scene) toggles these two classes on the SVG
 * elements that already carry [data-element-type]/[data-element-key].
 * .nw-faded   — element is OFF the current scene → dim + desaturate.
 * .nw-emphasised — element IS on the scene → keep full opacity, add
 *   a subtle glow so it reads against the faded background.
 *
 * The transitions are CSS-only so live updates from a streaming popup
 * feel like the chart is breathing in time with the text.
 * ────────────────────────────────────────────────────────────────────── */

.nw-faded {
  opacity: 0.18;
  filter: saturate(0.4);
  transition: opacity 380ms ease, filter 380ms ease;
}

.nw-emphasised {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(228, 201, 138, 0.45));
  transition: opacity 380ms ease, filter 380ms ease;
}

/* Aspect lines emphasised — make them louder against the dim layer. */
.nw-aspect-line.nw-emphasised {
  stroke-width: 2.2;
  filter: drop-shadow(0 0 4px rgba(228, 201, 138, 0.65));
}

/* Planet badges emphasised — soft pulse so the eye lands on them. */
.nw-planet.nw-emphasised .nw-planet-halo,
.nw-planet.nw-emphasised .planet-halo {
  animation: nw-emph-pulse 1.8s ease-in-out infinite;
}

/* House zone emphasised — the click zone is normally transparent, so a
 * cited house ({h:[7]}) needs a visible wedge fill to register on the
 * eye. Mirrors the .is-selected interactive style but slightly louder
 * and with an outline so the slice reads as a distinct lit segment. */
.nw-zone--house.nw-emphasised {
  fill: rgba(228, 201, 138, 0.14);
  stroke: rgba(228, 201, 138, 0.55);
  stroke-width: 0.6;
}
.nw-house-num.nw-emphasised {
  fill: #e4c98a;
  font-weight: 700;
  filter: drop-shadow(0 0 4px rgba(228, 201, 138, 0.7));
}

/* Sign zone emphasised — same treatment so a cited sign ({s:["Leo"]})
 * lights up its 30° rim slice, matching the house wedge effect. */
.nw-zone--sign.nw-emphasised {
  fill: rgba(228, 201, 138, 0.10);
  stroke: rgba(228, 201, 138, 0.45);
  stroke-width: 0.6;
}
@keyframes nw-emph-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.95; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .nw-faded, .nw-emphasised { transition: none !important; }
  .nw-planet.nw-emphasised .nw-planet-halo,
  .nw-planet.nw-emphasised .planet-halo { animation: none !important; }
}

/* "reveal" highlightMode — non-cited elements are removed visually so
 * the chart appears EMPTY at deep-dive open and fills in fact by fact
 * as the LLM streams sidecars (REQ-prototype, deep-dive UX). Uses
 * `visibility: hidden` rather than `display: none` so the SVG layout
 * never shifts; planets reappear in their canonical positions. */
.nw-hidden {
  visibility: hidden;
  opacity: 0;
}

/* PROTOTYPE — precision marker (gold pointer triangle) drawn at the
 * EXACT longitude of a rich-form object reference (`{id, deg, sign}`
 * in the sidecar grammar). The marker sits just outside the outer
 * sign rim and reads as a "you are exactly here" pointer alongside
 * the standard glyph emphasis. */
.nw-precision-marker {
  filter: drop-shadow(0 0 3px rgba(228, 201, 138, 0.85));
  animation: nw-precision-pulse 2.4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes nw-precision-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .nw-precision-marker { animation: none !important; }
}

/* PROTOTYPE — axis labels (ASC/MC/IC/DSC) become highlightable elements,
 * so a sidecar `{x:["DSC"]}` reveals only the DSC axis in reveal mode.
 * The label glow mirrors the planet emphasis style. */
.nw-axis.nw-emphasised .nw-axis-label {
  fill: #e4c98a !important;
  filter: drop-shadow(0 0 4px rgba(228, 201, 138, 0.7));
}
.nw-axis.nw-emphasised .nw-axis-halo {
  fill: rgba(228, 201, 138, 0.10);
}