/* ============================================================
   Swiss Wealth Cloud — Modern flourishes
   Cohesive, restrained "agency" touches layered on top of the
   base site. All honour prefers-reduced-motion.
   ============================================================ */

/* ---------------- Side section rail (wayfinding) ----------------
   Resting state = faint edge tick-lines only (never over content).
   Number + label reveal together on hover, on a dark backing. */
.rail {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 95; display: flex; flex-direction: column; gap: 0;
  align-items: flex-end; pointer-events: none;
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.rail.show { opacity: 1; pointer-events: auto; }
.rail__item {
  position: relative;
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  background: none; border: 0; padding: 9px 22px 9px 16px; cursor: pointer; width: 100%;
}
.rail__num {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--rail-fg-faint, var(--text-on-dark-faint));
  opacity: 0; transform: translateX(8px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), color var(--dur-fast);
}
.rail__label {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rail-fg, var(--text-on-dark-muted)); white-space: nowrap;
  opacity: 0; transform: translateX(8px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), color var(--dur-fast);
}
.rail__line { position: relative; width: 22px; height: 1px; background: var(--rail-line, var(--line-on-dark-strong)); transition: background var(--dur-fast), width var(--dur-base) var(--ease-out); flex: none; }
/* dark backing behind an item, shown only on hover so text underneath never clashes */
.rail__item::before {
  content: ""; position: absolute; inset: 2px 6px 2px 0; border-radius: var(--radius-pill);
  background: rgba(7,18,15,0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); z-index: -1;
}
.rail.on-light .rail__item::before { background: rgba(245,242,233,0.82); }
/* active: just a longer gold tick, no number over content */
.rail__item.active .rail__line { width: 34px; background: var(--gold-500); }
/* hover: reveal number + label on the backing */
.rail__item:hover::before { opacity: 1; }
.rail__item:hover .rail__num,
.rail__item:hover .rail__label { opacity: 1; transform: none; }
.rail__item:hover .rail__line { width: 34px; }
.rail__item:hover .rail__num { color: var(--gold-400); }
/* tone adaptation over light passages */
.rail.on-light { --rail-fg: var(--text-ink-muted); --rail-fg-faint: var(--text-ink-faint); --rail-line: var(--line-on-light-strong); }
.rail.on-light .rail__item:hover .rail__num { color: var(--gold-700); }
@media (max-width: 980px) { .rail { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .rail__num, .rail__label, .rail__item::before { transition: none; }
}

/* ---------------- Nav: underline wipe + active ---------------- */
.nav__link { position: relative; }
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px;
  background: var(--gold-400); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav__link:hover::after, .nav__link.active::after { transform: scaleX(1); }
.nav__link.active { color: var(--text-on-dark); }

/* eyebrow now uses a static gold dot marker (no draw animation) */

/* ---------------- Pain rows: refined hover ---------------- */
.pain { position: relative; transition: background-color var(--dur-base) var(--ease-out); }
.pain__title { position: relative; display: inline-block; transition: transform var(--dur-base) var(--ease-out); }
.pain__title::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--gold-500); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.pain__arrow { display: none; }
.pain:hover .pain__num { color: var(--gold-300); }
.pain:hover .pain__title { transform: translateX(8px); }
.pain:hover .pain__title::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .pain__title { transition: none; }
}