/* ============================================================
   RHR · The Cycle — INTERACTIVE (SVG framework + hover panel)
   SVG nodes drawn in-SVG (geometry exact); ember current rotates,
   pulse ripples; hover/focus/tap a node -> panel populates.
   Off-palette tints removed; strict Earth & Ember.
   ============================================================ */

/* two-column lockup: wheel left, panel right (desktop) */
.cycle-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  max-width: var(--maxw);
  margin-inline: auto;
}
.cycle-stage .cycle-wheel {
  width: 100%; max-width: 560px; margin: 0 auto;
  position: relative;
}
.cyc-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* faint full track */
.cyc-track { fill: none; stroke: var(--bone-faint); stroke-width: 1.5; }

/* rotating ember current */
.cyc-current {
  fill: none; stroke: url(#emberFlow); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 62 40; transform-origin: 300px 300px;
  animation: cyc-spin 22s linear infinite;
}
@keyframes cyc-spin { to { transform: rotate(360deg); } }

/* outward pulse — faster cadence, multiple staggered rings so
   ripples emanate roughly every ~5s (independent of the slow spin) */
.cyc-pulse {
  fill: none; stroke: var(--hearth); stroke-width: 1.5;
  transform-origin: 300px 300px; animation: cyc-ripple 15s ease-out infinite;
}
.cyc-pulse-2 { animation-delay: 5s; }
.cyc-pulse-3 { animation-delay: 10s; }
@keyframes cyc-ripple {
  0%   { opacity: 0; r: 120; }
  4%   { opacity: 0.40; }
  20%  { opacity: 0; r: 300; }
  100% { opacity: 0; }
}

.cyc-arrow { fill: var(--hearth); }

/* clinical thread: fine dashed sage ring just outside the track,
   weaving behind the six nodes and slowly counter-rotating.
   Represents therapy + psychiatric care running through every
   element (and continuing after discharge). */
.cyc-thread {
  fill: none; stroke: var(--sage); stroke-width: 1.75;
  stroke-dasharray: 2 9; stroke-linecap: round; opacity: 0.85;
  transform-origin: 300px 300px;
  animation: cyc-thread-turn 46s linear infinite reverse;
}
@keyframes cyc-thread-turn { to { transform: rotate(360deg); } }

/* legend line beneath the wheel explaining the thread */
.cycle-thread-legend {
  display: flex; align-items: center; justify-content: center; gap: 0.7rem;
  flex-wrap: wrap; text-align: center;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bone-soft);
  margin: 1.8rem auto 0; max-width: 72ch;
}
.cycle-thread-legend .thread-swatch {
  width: 8px; height: 8px; background: var(--sage); transform: rotate(45deg); border-radius: 1px;
  display: inline-block; flex: none; opacity: 0.9;
}

/* hub */
.cyc-ring2 { fill: none; stroke: var(--bone-faint); stroke-width: 1.5; }
.cyc-w { font-family: var(--display); font-style: italic; font-size: 32px; fill: var(--bone); text-anchor: middle; }
.cyc-k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; fill: var(--bone-soft); text-anchor: middle; }

/* nodes */
.cyc-node { cursor: pointer; }
.cyc-node:focus { outline: none; }
.cyc-hit { fill: transparent; }                 /* generous hover/tap target */
.cyc-dot { fill: var(--oak); stroke: var(--hearth); stroke-width: 2;
  transition: fill var(--dur) var(--ease), stroke var(--dur) var(--ease), r var(--dur) var(--ease); }
.cyc-num { font-family: var(--display); font-style: italic; font-size: 18px; fill: var(--bone);
  text-anchor: middle; dominant-baseline: middle; transition: fill var(--dur) var(--ease); }
.cyc-nm { font-family: var(--display); font-size: 15px; fill: var(--bone); text-anchor: middle;
  transition: fill var(--dur) var(--ease); }
.cyc-nm .b { font-weight: 700; }
.cyc-nm.s { text-anchor: start; }
.cyc-nm.e { text-anchor: end; }
.cyc-tg { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; fill: var(--bone-soft);
  text-anchor: middle; text-transform: uppercase; }
.cyc-tg.s { text-anchor: start; }
.cyc-tg.e { text-anchor: end; }

/* hover / focus / active node */
.cyc-node:hover .cyc-dot,
.cyc-node:focus-visible .cyc-dot,
.cyc-node.is-active .cyc-dot { fill: var(--clay); stroke: var(--hearth); r: 19; }
.cyc-node:hover .cyc-num,
.cyc-node:focus-visible .cyc-num,
.cyc-node.is-active .cyc-num { fill: var(--bone); }
.cyc-node:hover .cyc-nm,
.cyc-node:focus-visible .cyc-nm,
.cyc-node.is-active .cyc-nm { fill: var(--hearth); }
.cyc-node:focus-visible .cyc-dot { stroke-width: 3; }

/* description panel (right column) */
.cycle-panel {
  position: relative; min-height: 240px;
  border-left: var(--rule-clay);
  padding: 0.5rem 0 0.5rem clamp(1.5rem, 3vw, 2.75rem);
}
.cycle-panel .cp-eyebrow {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--hearth);
  display: flex; align-items: center; gap: 0.6rem;
}
.cycle-panel .cp-eyebrow::before {
  content: ""; width: 8px; height: 8px; background: var(--clay);
  transform: rotate(45deg); display: inline-block;
}
.cycle-panel .cp-title {
  font-family: var(--display); font-size: clamp(1.7rem, 3vw, 2.4rem);
  color: var(--bone); line-height: 1.06; margin-top: 0.9rem;
}
.cycle-panel .cp-title em { font-style: italic; color: var(--hearth); }
.cycle-panel .cp-anchor {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--sage); margin-top: 0.6rem; display: block;
}
.cycle-panel .cp-body {
  font-family: var(--body); font-size: var(--fs-body); line-height: 1.7;
  color: var(--bone-soft); margin-top: 1.3rem; max-width: 46ch;
}
.cp-swap { transition: opacity 0.32s var(--ease-soft), transform 0.32s var(--ease-soft); }
.cp-swap.is-out { opacity: 0; transform: translateY(6px); }

/* mobile / tablet: stack, panel below wheel */
@media (max-width: 860px) {
  .cycle-stage { grid-template-columns: 1fr; gap: 2.25rem; }
  .cycle-stage .cycle-wheel { max-width: 460px; }
  .cycle-panel {
    border-left: none; border-top: var(--rule-clay);
    padding: 1.75rem 0 0; min-height: 0; text-align: center;
  }
  .cycle-panel .cp-eyebrow { justify-content: center; }
  .cycle-panel .cp-body { margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .cyc-current, .cyc-pulse, .cyc-thread { animation: none; }
  .cyc-current { stroke-dasharray: none; opacity: 0.7; }
  .cyc-dot, .cyc-num, .cyc-nm, .cp-swap { transition: none; }
}

/* ============================================================
   RHR · Cycle section — deep "oak-black" ground
   Takes the Cycle band from medium oak to the near-black radial
   ground the framework was designed on, so the ember ring pops.
   ============================================================ */
.cycle-section.cycle-dark {
  background: radial-gradient(120% 100% at 50% 38%, #1f1610 0%, #14100b 60%, #0f0c08 100%);
}
/* lift the faint elements so they read on the darker field */
.cycle-dark .cyc-track { stroke: rgba(246,240,226,0.14); }
/* lift the sage thread so it reads on the near-black field */
.cycle-dark .cyc-thread { stroke: #97A683; }
.cycle-dark .cycle-thread-legend .thread-swatch { background: #97A683; }
.cycle-dark .cyc-ring2 { stroke: rgba(246,240,226,0.16); }
.cycle-dark .cyc-dot { fill: #14100b; }
/* lift the small SVG labels so they read on the near-black ground */
.cycle-dark .cyc-tg { fill: rgba(246,240,226,0.86); }
.cycle-dark .cyc-k  { fill: rgba(246,240,226,0.78); }
.cycle-dark .cyc-nm { fill: #FBF7EC; }
.cycle-dark .cyc-node:hover .cyc-dot,
.cycle-dark .cyc-node:focus-visible .cyc-dot,
.cycle-dark .cyc-node.is-active .cyc-dot { fill: var(--clay); }
/* the p-ruled hairlines were tuned for oak; soften on the darker ground */
.cycle-dark.p-ruled-oak::before,
.cycle-dark.p-ruled-oak::after { opacity: 0.5; }

/* ============================================================
   Mobile tap cue — invites tapping a node since the description
   panel sits below the wheel on mobile (hidden until tapped).
   Desktop: hidden (hover already reveals). Hides after first tap.
   ============================================================ */
.cycle-tapcue { display: none; }

@media (max-width: 860px) {
  .cycle-tapcue {
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    position: relative; margin: 0.4rem auto 0; padding: 0.7rem 1.3rem;
    background: none; border: 1px solid rgba(217,120,66,0.45); border-radius: 100px;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    animation: tapcue-breathe 2.4s var(--ease-soft) infinite;
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  }
  /* expanding ring behind the cue, like a ripple inviting touch */
  .tapcue-ring {
    position: absolute; left: 1.45rem; top: 50%; width: 14px; height: 14px;
    transform: translate(-50%,-50%); border-radius: 50%;
    border: 1.5px solid var(--hearth); opacity: 0;
    animation: tapcue-ripple 2.4s var(--ease-soft) infinite;
  }
  .tapcue-dot {
    width: 9px; height: 9px; border-radius: 50%; background: var(--hearth);
    box-shadow: 0 0 8px 1px rgba(217,120,66,0.6); flex: none;
  }
  .tapcue-text {
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--hearth);
  }
  .tapcue-arrow {
    font-size: 0.9rem; color: var(--hearth); line-height: 1;
    animation: tapcue-nudge 1.6s var(--ease-soft) infinite;
  }
  /* once a node has been chosen, retire the cue */
  .cycle-section.has-selection .cycle-tapcue {
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    animation: none; height: 0; margin: 0; padding: 0; border-color: transparent; overflow: hidden;
  }
}
@keyframes tapcue-breathe { 0%,100% { border-color: rgba(217,120,66,0.30); } 50% { border-color: rgba(217,120,66,0.7); } }
@keyframes tapcue-ripple { 0% { width:14px; height:14px; opacity:0.7; } 80% { width:40px; height:40px; opacity:0; } 100% { opacity:0; } }
@keyframes tapcue-nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

@media (prefers-reduced-motion: reduce) {
  .cycle-tapcue { animation: none; }
  .tapcue-ring, .tapcue-arrow { animation: none; }
}