/* ==========================================================================
   Prism Capital — Vivid Motion Layer (prism-vivid.css) — Round 2
   Every selector is strictly scoped under html[data-vivid="on"]
   Variants: html[data-vivid="on"][data-vivid-fx="a|b|c"]
   ========================================================================== */

@keyframes pvOrbDrift1 {
  0%, 100% {
    transform: translate3d(-6%, -4%, 0) scale(1);
    opacity: 0.085;
  }
  33% {
    transform: translate3d(8%, 6%, 0) scale(1.08);
    opacity: 0.11;
  }
  66% {
    transform: translate3d(-2%, 11%, 0) scale(0.95);
    opacity: 0.075;
  }
}

@keyframes pvOrbDrift2 {
  0%, 100% {
    transform: translate3d(6%, 5%, 0) scale(1);
    opacity: 0.075;
  }
  40% {
    transform: translate3d(-9%, -7%, 0) scale(1.06);
    opacity: 0.10;
  }
  75% {
    transform: translate3d(3%, -10%, 0) scale(0.94);
    opacity: 0.065;
  }
}

@keyframes pvOrbDrift3 {
  0%, 100% {
    transform: translate3d(0%, 0%, 0) scale(0.96);
    opacity: 0.05;
  }
  50% {
    transform: translate3d(-10%, 8%, 0) scale(1.07);
    opacity: 0.08;
  }
}

@keyframes pvHeroBorderOrbit {
  0% {
    transform: translate3d(-25%, -15%, 0) rotate(0deg);
    opacity: 0.55;
  }
  50% {
    transform: translate3d(25%, 15%, 0) rotate(180deg);
    opacity: 0.85;
  }
  100% {
    transform: translate3d(-25%, -15%, 0) rotate(360deg);
    opacity: 0.55;
  }
}

@keyframes pvOneTimeSweep {
  0% {
    transform: translate3d(-130%, 0, 0) skewX(-18deg);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translate3d(230%, 0, 0) skewX(-18deg);
    opacity: 0;
  }
}

@keyframes pvBarShimmer {
  0% {
    transform: translate3d(-140%, 0, 0) skewX(-20deg);
    opacity: 0;
  }
  12% {
    opacity: 0.9;
  }
  48% {
    transform: translate3d(240%, 0, 0) skewX(-20deg);
    opacity: 0.9;
  }
  55%, 100% {
    transform: translate3d(240%, 0, 0) skewX(-20deg);
    opacity: 0;
  }
}

@keyframes pvTickerSheen {
  0% {
    transform: translate3d(-130%, 0, 0) skewX(-24deg);
    opacity: 0;
  }
  10% {
    opacity: 0.85;
  }
  45% {
    transform: translate3d(380%, 0, 0) skewX(-24deg);
    opacity: 0.85;
  }
  52%, 100% {
    transform: translate3d(380%, 0, 0) skewX(-24deg);
    opacity: 0;
  }
}

@keyframes pvLiveDotBreathe {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.75));
  }
  50% {
    transform: scale(0.84);
    opacity: 0.62;
    filter: drop-shadow(0 0 2px rgba(16, 185, 129, 0.3));
  }
}

@keyframes pvLiveDotRing {
  0% {
    transform: scale(0.85);
    opacity: 0.7;
  }
  70% {
    transform: scale(2.35);
    opacity: 0;
  }
  100% {
    transform: scale(2.35);
    opacity: 0;
  }
}

@keyframes pvVerifiedPulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.995);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.015);
  }
}

@keyframes pvVerifiedIconBreathe {
  0%, 100% {
    filter: drop-shadow(0 0 2px rgba(16, 185, 129, 0.25));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.65));
    transform: scale(1.06);
  }
}

@keyframes pvViewSweepBeam {
  0% {
    transform: translate3d(-105%, 0, 0) scaleX(0.4);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translate3d(105%, 0, 0) scaleX(1.1);
    opacity: 0;
  }
}

@keyframes pvViewSweepVeil {
  0% {
    opacity: 0;
    transform: translate3d(0, -8px, 0);
  }
  25% {
    opacity: 0.85;
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 6px, 0);
  }
}

@keyframes pvSealRotate {
  0% {
    transform: translate3d(-50%, -50%, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) rotate(360deg);
  }
}

@keyframes pvSubtleGoldBreathe {
  0%, 100% {
    opacity: 0.72;
    transform: scale(0.96);
    filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.25));
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
    filter: drop-shadow(0 0 8px rgba(229, 195, 84, 0.55));
  }
}

@keyframes pvChartGlowBreathe {
  0%, 100% {
    filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.16));
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(229, 195, 84, 0.34));
  }
}

@keyframes pvRowSettle {
  0% {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Round 2 New Keyframes */
@keyframes pvConnectorDrop {
  0% {
    transform: translate3d(0, -110%, 0) scaleY(0.6);
    opacity: 0;
  }
  25% {
    opacity: 0.95;
  }
  75% {
    transform: translate3d(0, 110%, 0) scaleY(1);
    opacity: 0.95;
  }
  100% {
    transform: translate3d(0, 140%, 0) scaleY(0.5);
    opacity: 0;
  }
}

@keyframes pvArrowNudge {
  0%, 100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.65;
  }
  50% {
    transform: translate3d(3px, 0, 0);
    opacity: 1;
  }
}

@keyframes pvCapacityWave {
  0%, 100% {
    opacity: 0.82;
    transform: scaleY(1);
  }
  50% {
    opacity: 1;
    transform: scaleY(1.18);
  }
}

@keyframes pvBtnSingleGlint {
  0% {
    transform: translate3d(-135%, 0, 0) skewX(-22deg);
    opacity: 0;
  }
  18% {
    opacity: 0.95;
  }
  85% {
    opacity: 0.95;
  }
  100% {
    transform: translate3d(235%, 0, 0) skewX(-22deg);
    opacity: 0;
  }
}

@keyframes pvModalEdgeReveal {
  0% {
    transform: scaleX(0.12);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes pvModalHeaderSettle {
  0% {
    transform: translate3d(0, -18px, 0) scaleY(0.75);
    opacity: 0;
  }
  35% {
    opacity: 0.95;
  }
  100% {
    transform: translate3d(0, 0, 0) scaleY(1);
    opacity: 0.42;
  }
}

@keyframes pvEngraveTrace {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    opacity: 0.85;
  }
}

@keyframes pvEngraveLaser {
  0% {
    transform: translate3d(-110%, 0, 0);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    transform: translate3d(420%, 0, 0);
    opacity: 0;
  }
}

@keyframes pvLiquidBullionWave {
  0%, 100% {
    transform: translate3d(-18%, -6%, 0) rotate(-4deg) scale(1.04);
    opacity: 0.62;
  }
  50% {
    transform: translate3d(18%, 6%, 0) rotate(4deg) scale(0.98);
    opacity: 0.92;
  }
}

@keyframes pvModalBullionCrest {
  0% {
    transform: translate3d(0, 24px, 0) scaleY(1.2);
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0) scaleY(1);
    opacity: 0.55;
  }
}

/* --------------------------------------------------------------------------
   0. Root Tokens & Opaque Background Overrides (Rule 7 & Rule 8)
   -------------------------------------------------------------------------- */

html[data-vivid="on"] {
  --pv-gold: #D4AF37;
  --pv-gold-light: #E5C354;
  --pv-gold-amber: #B89327;
  --pv-gold-deep: #8A6A2F;
  --pv-champagne: #F5F0E8;
  --pv-bg-deep: #050507;
  --pv-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  background: var(--pv-bg-deep) !important;
}

html[data-vivid="on"] body.pv-has-app,
html[data-vivid="on"] body:has(.app) {
  background: transparent !important;
}

html[data-vivid="on"] body.pv-has-app #root,
html[data-vivid="on"] body:has(.app) #root,
html[data-vivid="on"] body.pv-has-app #root > div,
html[data-vivid="on"] body:has(.app) #root > div,
html[data-vivid="on"] body.pv-has-app main.main,
html[data-vivid="on"] body:has(.app) main.main {
  background: transparent !important;
}

html[data-vivid="on"] #root {
  position: relative;
  z-index: 1;
}

/* Pause every continuous animation when document.hidden is true (Rule 10) */
html[data-vivid="on"].pv-doc-hidden *,
html[data-vivid="on"].pv-doc-hidden *::before,
html[data-vivid="on"].pv-doc-hidden *::after {
  animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   1. Living Backdrop & Variant Toast (Outside #root in <body>)
   -------------------------------------------------------------------------- */

html[data-vivid="on"] .pv-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #050507;
  opacity: 0;
  transition: opacity 0.6s var(--pv-ease-out);
}

html[data-vivid="on"] body.pv-has-app .pv-backdrop,
html[data-vivid="on"] body:has(.app) .pv-backdrop {
  opacity: 1;
}

html[data-vivid="on"] .pv-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}

html[data-vivid="on"] .pv-orb--gold {
  width: 68vw;
  height: 68vw;
  min-width: 520px;
  min-height: 520px;
  top: -22%;
  left: 6%;
  background: radial-gradient(
    circle,
    rgba(212, 175, 55, 0.95) 0%,
    rgba(184, 147, 39, 0.42) 34%,
    rgba(138, 106, 47, 0.12) 60%,
    transparent 76%
  );
  animation: pvOrbDrift1 31s ease-in-out infinite;
}

html[data-vivid="on"] .pv-orb--amber {
  width: 62vw;
  height: 62vw;
  min-width: 480px;
  min-height: 480px;
  bottom: -24%;
  right: -8%;
  background: radial-gradient(
    circle,
    rgba(138, 106, 47, 0.95) 0%,
    rgba(212, 175, 55, 0.35) 38%,
    rgba(138, 106, 47, 0.08) 64%,
    transparent 78%
  );
  animation: pvOrbDrift2 38s ease-in-out infinite;
}

html[data-vivid="on"] .pv-orb--champagne {
  width: 48vw;
  height: 48vw;
  min-width: 380px;
  min-height: 380px;
  top: 18%;
  right: 14%;
  background: radial-gradient(
    circle,
    rgba(245, 240, 232, 0.75) 0%,
    rgba(229, 195, 84, 0.32) 36%,
    rgba(212, 175, 55, 0.06) 62%,
    transparent 76%
  );
  animation: pvOrbDrift3 24s ease-in-out infinite;
}

/* Variant B backdrop: tighten orbs into architectural light shafts */
html[data-vivid="on"][data-vivid-fx="b"] .pv-orb--gold {
  border-radius: 18%;
  background: linear-gradient(
    135deg,
    transparent 20%,
    rgba(212, 175, 55, 0.55) 48%,
    rgba(245, 240, 232, 0.35) 50%,
    rgba(138, 106, 47, 0.35) 54%,
    transparent 80%
  );
}

/* Variant C backdrop: deeper molten bullion warmth */
html[data-vivid="on"][data-vivid-fx="c"] .pv-orb--gold {
  background: radial-gradient(
    ellipse 65% 42% at 50% 50%,
    rgba(229, 195, 84, 0.98) 0%,
    rgba(184, 147, 39, 0.52) 38%,
    rgba(138, 106, 47, 0.16) 65%,
    transparent 80%
  );
}

/* Rule 6 fix: pattern tile moved to spacious lower-left sidebar margin,
   never behind the Dashboard clock, tables, charts, or figures (3.2% opacity) */
html[data-vivid="on"] .pv-backdrop-texture {
  position: absolute;
  bottom: 68px;
  left: 0;
  width: 256px;
  height: 210px;
  background-image: url('/brand/svg/secondary/PrismCapital_background_pattern_tile_dark.svg');
  background-size: 210px 210px;
  opacity: 0.032;
  -webkit-mask-image: radial-gradient(ellipse at 35% 60%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse at 35% 60%, #000 10%, transparent 70%);
  pointer-events: none;
}

/* Alt+Shift+V Variant Switcher Toast (outside #root) */
html[data-vivid="on"] .pv-fx-toast {
  position: fixed;
  bottom: 22px;
  right: 24px;
  z-index: 9999;
  padding: 8px 14px;
  border: 1px solid rgba(212, 175, 55, 0.38);
  border-radius: 6px;
  background: rgba(10, 10, 14, 0.94);
  color: var(--pv-gold-light);
  font: 600 10px/1.2 'JetBrains Mono', monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 0.22s var(--pv-ease-out), transform 0.22s var(--pv-ease-out);
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.65));
}

html[data-vivid="on"] .pv-fx-toast.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* --------------------------------------------------------------------------
   2. Screen Heroes (Dashboard + All 8 Round-2 Screens)
   -------------------------------------------------------------------------- */

html[data-vivid="on"] :is(
  section.dashboard-position,
  section.distribution-snapshot,
  section.document-overview,
  section.decision-overview,
  section.trips-command-strip,
  section.tax-overview,
  div.decision-summary.admission-summary,
  section.governance-overview
) {
  position: relative;
  overflow: hidden;
  border-color: rgba(212, 175, 55, 0.22);
  /* background left to the app: each panel keeps its own charcoal */
  transition: border-color 0.35s var(--pv-ease-out), transform 0.35s var(--pv-ease-out);
}

/* Allow info-tip tooltips to escape if hovered */
html[data-vivid="on"] section.dashboard-position:has(.info-tip:hover, .info-tip:focus-within) {
  overflow: visible;
}

html[data-vivid="on"] :is(
  section.dashboard-position,
  section.distribution-snapshot,
  section.document-overview,
  section.decision-overview,
  section.trips-command-strip,
  section.tax-overview,
  div.decision-summary.admission-summary,
  section.governance-overview
) > * {
  position: relative;
  z-index: 1;
}

/* --- Variant A (Default): Atmospheric Orbit & Diagonal Sweep --- */
html[data-vivid="on"]:where(:not([data-vivid-fx]), [data-vivid-fx="a"]) :is(
  section.dashboard-position,
  section.distribution-snapshot,
  section.document-overview,
  section.decision-overview,
  section.trips-command-strip,
  section.tax-overview,
  div.decision-summary.admission-summary,
  section.governance-overview
)::before {
  content: '';
  position: absolute;
  inset: -60%;
  background: radial-gradient(
    ellipse 45% 38% at 50% 50%,
    rgba(229, 195, 84, 0.13) 0%,
    rgba(212, 175, 55, 0.055) 42%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
  animation: pvHeroBorderOrbit 18s linear infinite;
}

html[data-vivid="on"]:where(:not([data-vivid-fx]), [data-vivid-fx="a"]) :is(
  section.dashboard-position,
  section.distribution-snapshot,
  section.document-overview,
  section.decision-overview,
  section.trips-command-strip,
  section.tax-overview,
  div.decision-summary.admission-summary,
  section.governance-overview
)::after {
  content: '';
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 46%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212, 175, 55, 0.05) 30%,
    rgba(229, 195, 84, 0.16) 48%,
    rgba(245, 240, 232, 0.22) 52%,
    rgba(212, 175, 55, 0.06) 70%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
  will-change: transform, opacity;
  animation: pvOneTimeSweep 1.55s var(--pv-ease-out) 0.12s 1 both;
}

/* --- Variant B: Horological Engraving (Precision Calliper Trace & Laser) --- */
html[data-vivid="on"][data-vivid-fx="b"] :is(
  section.dashboard-position,
  section.distribution-snapshot,
  section.document-overview,
  section.decision-overview,
  section.trips-command-strip,
  section.tax-overview,
  div.decision-summary.admission-summary,
  section.governance-overview
)::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 4%, #E5C354 50%, transparent 96%) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 12%, rgba(212, 175, 55, 0.55) 50%, transparent 88%) bottom / 100% 1px no-repeat;
  pointer-events: none;
  z-index: 3;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  animation: pvEngraveTrace 0.95s var(--pv-ease-out) 0.05s 1 both;
}

html[data-vivid="on"][data-vivid-fx="b"] :is(
  section.dashboard-position,
  section.distribution-snapshot,
  section.document-overview,
  section.decision-overview,
  section.trips-command-strip,
  section.tax-overview,
  div.decision-summary.admission-summary,
  section.governance-overview
)::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 22%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212, 175, 55, 0.03) 44%,
    rgba(229, 195, 84, 0.55) 49.5%,
    rgba(245, 240, 232, 0.85) 50%,
    rgba(212, 175, 55, 0.04) 54%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 3;
  will-change: transform, opacity;
  animation: pvEngraveLaser 1.35s cubic-bezier(0.22, 1, 0.36, 1) 0.1s 1 both;
}

/* --- Variant C: Liquid Bullion (Anisotropic Wave & Scroll/Cursor Band) --- */
html[data-vivid="on"][data-vivid-fx="c"] :is(
  section.dashboard-position,
  section.distribution-snapshot,
  section.document-overview,
  section.decision-overview,
  section.trips-command-strip,
  section.tax-overview,
  div.decision-summary.admission-summary,
  section.governance-overview
)::before {
  content: '';
  position: absolute;
  inset: -35%;
  background: linear-gradient(
    115deg,
    transparent 22%,
    rgba(138, 106, 47, 0.12) 38%,
    rgba(229, 195, 84, 0.19) 49%,
    rgba(245, 240, 232, 0.14) 51%,
    rgba(212, 175, 55, 0.08) 62%,
    transparent 78%
  );
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
  animation: pvLiquidBullionWave 14s ease-in-out infinite;
}

html[data-vivid="on"][data-vivid-fx="c"] :is(
  section.dashboard-position,
  section.distribution-snapshot,
  section.document-overview,
  section.decision-overview,
  section.trips-command-strip,
  section.tax-overview,
  div.decision-summary.admission-summary,
  section.governance-overview
)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    520px 180px at var(--pv-mx, 50%) var(--pv-my, 50%),
    rgba(245, 240, 232, 0.11) 0%,
    rgba(229, 195, 84, 0.08) 38%,
    transparent 76%
  );
  opacity: calc(0.28 + (var(--pv-hover, 0) * 0.72));
  transition: opacity 0.35s var(--pv-ease-out);
  pointer-events: none;
  z-index: 2;
}

/* Hero inner cells that respond to the cursor */
html[data-vivid="on"] .dashboard-position-primary,
html[data-vivid="on"] .dashboard-position-reference,
html[data-vivid="on"] .distribution-snapshot > div,
html[data-vivid="on"] .trips-command-primary,
html[data-vivid="on"] .trips-command-support > div,
html[data-vivid="on"] .admission-summary .decision-summary-item {
  position: relative;
  z-index: 1;
}

/* Preserve .trips-command-primary::before (Rule 15: top 1px gold line) */
html[data-vivid="on"] .trips-command-primary::before {
  transform-origin: 50% 50%;
  animation: pvModalEdgeReveal 0.8s var(--pv-ease-out) 0.1s 1 both;
}

html[data-vivid="on"] .dashboard-position-primary::before,
html[data-vivid="on"] .dashboard-position-reference::before,
html[data-vivid="on"] .distribution-snapshot > div::after,
html[data-vivid="on"] .trips-command-primary::after,
html[data-vivid="on"] .trips-command-support > div::after,
html[data-vivid="on"] .admission-summary .decision-summary-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    320px circle at var(--pv-mx, 50%) var(--pv-my, 50%),
    rgba(212, 175, 55, 0.085),
    rgba(212, 175, 55, 0.025) 45%,
    transparent 75%
  );
  opacity: var(--pv-hover, 0);
  transition: opacity 0.35s var(--pv-ease-out);
  pointer-events: none;
  z-index: 0;
}

html[data-vivid="on"] .dashboard-position-primary > *,
html[data-vivid="on"] .dashboard-position-reference > *,
html[data-vivid="on"] .distribution-snapshot > div > *,
html[data-vivid="on"] .trips-command-primary > *,
html[data-vivid="on"] .trips-command-support > div > *,
html[data-vivid="on"] .admission-summary .decision-summary-item > * {
  position: relative;
  z-index: 1;
}

html[data-vivid="on"] .dashboard-position-value,
html[data-vivid="on"] .ledger-balance-value,
html[data-vivid="on"] .dashboard-period-grid .stat-value,
html[data-vivid="on"] .waterfall .wf-row .mono {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   3. Workspace Panels & Cards That Respond to Cursor (All Screens)
   Rule 13 & Rule 15: Exclude .is-danger, .governance-dissolution-guardrail,
   and .settings-panel / .settings-component-wrap > .card
   -------------------------------------------------------------------------- */

html[data-vivid="on"] :is(
  .card:not(.settings-panel):not(.is-danger),
  .ledger-balance-panel,
  .ledger-audit-panel,
  .phase-bar-wrap,
  .dashboard-period-grid .stat-block,
  .distribution-input-panel,
  .distribution-waterfall-panel,
  .distribution-member-panel,
  .distribution-flow-equation,
  .distribution-flow-fee-stage,
  .distribution-flow-split,
  .distribution-output-line,
  .document-register,
  .decision-stream-panel,
  .decision-detail-panel,
  .trips-register,
  .tax-w9-panel,
  .tax-k1-panel,
  .tax-estimate-disclosure,
  .admission-empty,
  .admission-member-register,
  article.decision-record:not(.is-danger),
  .governance-standards-panel
) {
  position: relative;
}

html[data-vivid="on"] :is(
  .dashboard-panel,
  .ledger-balance-panel,
  .ledger-audit-panel,
  .distribution-input-panel,
  .distribution-waterfall-panel,
  .decision-stream-panel,
  .decision-detail-panel,
  .tax-w9-panel,
  .tax-k1-panel,
  .admission-empty,
  .admission-member-register,
  article.decision-record:not(.is-danger),
  .governance-standards-panel
) {
  background: rgba(12, 13, 16, 0.84);
  transition: transform 0.28s var(--pv-ease-out), border-color 0.28s var(--pv-ease-out);
}

html[data-vivid="on"] :is(
  .dashboard-panel,
  .ledger-balance-panel,
  .ledger-audit-panel,
  .distribution-input-panel,
  .distribution-waterfall-panel,
  .decision-detail-panel,
  .tax-w9-panel,
  .tax-k1-panel,
  .admission-empty,
  .admission-member-register,
  article.decision-record:not(.is-danger),
  .governance-standards-panel
):hover {
  transform: translate3d(0, -2px, 0);
  border-color: rgba(212, 175, 55, 0.24);
}

/* Keep dense table/register containers stationary on hover (Rule 3 & Rule 10) */
html[data-vivid="on"] :is(
  .ledger-stream-panel,
  .distribution-member-panel,
  .document-register,
  .trips-register,
  .decision-stream-panel
):hover {
  transform: none;
  border-color: rgba(212, 175, 55, 0.2);
}

/* Fine 1px gold hairline on the border that brightens near the cursor */
html[data-vivid="on"] :is(
  .card:not(.settings-panel):not(.is-danger),
  .ledger-balance-panel,
  .ledger-audit-panel,
  .phase-bar-wrap,
  .distribution-input-panel,
  .distribution-waterfall-panel,
  .distribution-member-panel,
  .distribution-flow-equation,
  .distribution-flow-fee-stage,
  .distribution-flow-split,
  .distribution-output-line,
  .document-register,
  .decision-stream-panel,
  .decision-detail-panel,
  .trips-register,
  .tax-w9-panel,
  .tax-k1-panel,
  .tax-estimate-disclosure,
  .admission-empty,
  .admission-member-register,
  article.decision-record:not(.is-danger),
  .governance-standards-panel
)::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  left: 0;
  right: 0;
  height: auto;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    280px circle at var(--pv-mx, 50%) var(--pv-my, 0%),
    rgba(229, 195, 84, 0.72) 0%,
    rgba(212, 175, 55, 0.26) 42%,
    rgba(212, 175, 55, 0.05) 78%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: var(--pv-hover, 0);
  transition: opacity 0.3s var(--pv-ease-out);
  pointer-events: none;
  z-index: 3;
}

/* Variant B border hairline: tighter, high-contrast 150px caliper ring */
html[data-vivid="on"][data-vivid-fx="b"] :is(
  .card:not(.settings-panel):not(.is-danger),
  .ledger-balance-panel,
  .ledger-audit-panel,
  .phase-bar-wrap,
  .distribution-input-panel,
  .distribution-waterfall-panel,
  .distribution-member-panel,
  .distribution-flow-equation,
  .distribution-flow-fee-stage,
  .distribution-flow-split,
  .distribution-output-line,
  .document-register,
  .decision-stream-panel,
  .decision-detail-panel,
  .trips-register,
  .tax-w9-panel,
  .tax-k1-panel,
  .tax-estimate-disclosure,
  .admission-empty,
  .admission-member-register,
  article.decision-record:not(.is-danger),
  .governance-standards-panel
)::before {
  background: radial-gradient(
    155px circle at var(--pv-mx, 50%) var(--pv-my, 0%),
    #F5F0E8 0%,
    #E5C354 28%,
    rgba(212, 175, 55, 0.18) 64%,
    transparent 100%
  );
}

/* Soft gold surface light following the cursor across cards & workspace panels */
html[data-vivid="on"] :is(
  .card:not(.ledger-stream-panel):not(.settings-panel):not(.is-danger),
  .ledger-balance-panel,
  .ledger-audit-panel,
  .phase-bar-wrap,
  .dashboard-period-grid .stat-block,
  .distribution-input-panel,
  .distribution-waterfall-panel,
  .distribution-flow-equation,
  .distribution-flow-fee-stage,
  .distribution-flow-split,
  .decision-detail-panel,
  .tax-w9-panel,
  .tax-k1-panel,
  .admission-empty,
  .admission-member-register,
  article.decision-record:not(.is-danger),
  .governance-standards-panel
)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    360px circle at var(--pv-mx, 50%) var(--pv-my, 50%),
    rgba(212, 175, 55, 0.078) 0%,
    rgba(229, 195, 84, 0.028) 42%,
    transparent 74%
  );
  opacity: var(--pv-hover, 0);
  transition: opacity 0.35s var(--pv-ease-out);
  pointer-events: none;
  z-index: 0;
}

/* Variant B surface response: crisp horizontal datum hairline at --pv-my */
html[data-vivid="on"][data-vivid-fx="b"] :is(
  .card:not(.ledger-stream-panel):not(.settings-panel):not(.is-danger),
  .ledger-balance-panel,
  .ledger-audit-panel,
  .phase-bar-wrap,
  .distribution-input-panel,
  .distribution-waterfall-panel,
  .decision-detail-panel,
  .tax-w9-panel,
  .tax-k1-panel,
  .admission-empty,
  .admission-member-register,
  article.decision-record:not(.is-danger),
  .governance-standards-panel
)::after {
  background: radial-gradient(
    320px 24px at var(--pv-mx, 50%) var(--pv-my, 50%),
    rgba(229, 195, 84, 0.09) 0%,
    rgba(212, 175, 55, 0.03) 55%,
    transparent 100%
  );
}

/* Variant C surface response: wide brushed-bullion anisotropic reflection */
html[data-vivid="on"][data-vivid-fx="c"] :is(
  .card:not(.ledger-stream-panel):not(.settings-panel):not(.is-danger),
  .ledger-balance-panel,
  .ledger-audit-panel,
  .phase-bar-wrap,
  .distribution-input-panel,
  .distribution-waterfall-panel,
  .decision-detail-panel,
  .tax-w9-panel,
  .tax-k1-panel,
  .admission-empty,
  .admission-member-register,
  article.decision-record:not(.is-danger),
  .governance-standards-panel
)::after {
  background: radial-gradient(
    520px 180px at var(--pv-mx, 50%) var(--pv-my, 50%),
    rgba(245, 240, 232, 0.075) 0%,
    rgba(229, 195, 84, 0.055) 36%,
    rgba(138, 106, 47, 0.02) 66%,
    transparent 85%
  );
}

/* Rule 15 fix: keep .card::before & ::after hidden inside .settings-component-wrap */
html[data-vivid="on"] .settings-panel::before,
html[data-vivid="on"] .settings-panel::after,
html[data-vivid="on"] .settings-component-wrap > .card::before,
html[data-vivid="on"] .settings-component-wrap > .card::after {
  display: none;
}

/* Rule 13: Danger panels stay strictly quiet */
html[data-vivid="on"] .governance-dissolution-guardrail,
html[data-vivid="on"] .governance-dissolution-guardrail:hover,
html[data-vivid="on"] article.decision-record.is-danger,
html[data-vivid="on"] article.decision-record.is-danger:hover {
  transform: none;
  animation: none;
}

html[data-vivid="on"] .governance-dissolution-guardrail::before,
html[data-vivid="on"] .governance-dissolution-guardrail::after,
html[data-vivid="on"] article.decision-record.is-danger::before,
html[data-vivid="on"] article.decision-record.is-danger::after {
  display: none;
}

html[data-vivid="on"] :is(
  .card,
  .ledger-balance-panel,
  .ledger-audit-panel,
  .phase-bar-wrap,
  .distribution-input-panel,
  .distribution-waterfall-panel,
  .distribution-member-panel,
  .decision-stream-panel,
  .decision-detail-panel,
  .tax-w9-panel,
  .tax-k1-panel,
  .admission-empty,
  .admission-member-register,
  article.decision-record,
  .governance-standards-panel
) > * {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   4. Living Bars (Dashboard, Distribution, Tax Matters, New Members, Governance)
   -------------------------------------------------------------------------- */

html[data-vivid="on"] .phase-bar-fill,
html[data-vivid="on"] .dashboard-health > div:nth-child(3) > div:last-child,
html[data-vivid="on"] .distribution-snapshot-track > span,
html[data-vivid="on"] .distribution-flow-split-track > span,
html[data-vivid="on"] .tax-delivery-progress > span,
html[data-vivid="on"] .decision-progress,
html[data-vivid="on"] .pv-sub-bar-fill {
  position: relative;
  overflow: hidden;
}

html[data-vivid="on"] .phase-bar-fill::after,
html[data-vivid="on"] .dashboard-health > div:nth-child(3) > div:last-child::after,
html[data-vivid="on"] .distribution-snapshot-track > span::after,
html[data-vivid="on"] .distribution-flow-split-track > span::after,
html[data-vivid="on"] .tax-delivery-progress > span::after,
html[data-vivid="on"] .decision-progress::after,
html[data-vivid="on"] .pv-sub-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 42%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(245, 240, 232, 0.06) 25%,
    rgba(245, 240, 232, 0.38) 50%,
    rgba(245, 240, 232, 0.06) 75%,
    transparent 100%
  );
  pointer-events: none;
  will-change: transform, opacity;
  animation: pvBarShimmer 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

html[data-vivid="on"] .dashboard-health > div:nth-child(3) > div:last-child::after,
html[data-vivid="on"] .distribution-snapshot-track > span.is-distribute::after,
html[data-vivid="on"] .distribution-flow-split-track > span.is-distribute::after {
  animation-delay: 1.1s;
}

html[data-vivid="on"] .pv-sub-bar-fill::after {
  animation-duration: 5.8s;
  animation-delay: 0.6s;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(245, 240, 232, 0.26) 50%,
    transparent 100%
  );
}

/* New Members capacity track filled slots (.decision-capacity-track > span.is-filled) */
html[data-vivid="on"] .decision-capacity-track > span.is-filled {
  transform-origin: 50% 50%;
  animation: pvCapacityWave 3.6s ease-in-out infinite;
}
html[data-vivid="on"] .decision-capacity-track > span.is-filled:nth-child(2) {
  animation-delay: 0.35s;
}
html[data-vivid="on"] .decision-capacity-track > span.is-filled:nth-child(3) {
  animation-delay: 0.7s;
}

/* --------------------------------------------------------------------------
   5. Screen-Specific Interactive Elements (Distribution, Documents,
      Decision Log, Trips & EV, Member Inbox, Tax, Admission, Governance)
   -------------------------------------------------------------------------- */

/* Distribution Waterfall Connectors (Rule 15: preserve span::after, use parent ::before) */
html[data-vivid="on"] .distribution-flow-connector {
  position: relative;
  overflow: hidden;
}

html[data-vivid="on"] .distribution-flow-connector::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 14px;
  margin-left: -1px;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, #F5F0E8, #D4AF37, transparent);
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.75));
  pointer-events: none;
  z-index: 2;
  will-change: transform, opacity;
  animation: pvConnectorDrop 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

html[data-vivid="on"] .distribution-flow > .distribution-flow-connector:nth-of-type(4)::before {
  animation-delay: 1.1s;
}

html[data-vivid="on"] .distribution-flow-arrow svg {
  color: var(--pv-gold);
  animation: pvArrowNudge 2.8s ease-in-out infinite;
}

/* Documents Category Tiles (Rule 15: preserve ::before top accent line, use ::after) */
html[data-vivid="on"] .document-category-card {
  transition: transform 0.24s var(--pv-ease-out), border-color 0.24s var(--pv-ease-out), background-color 0.24s var(--pv-ease-out);
}

html[data-vivid="on"] .document-category-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    180px circle at var(--pv-mx, 50%) var(--pv-my, 50%),
    rgba(212, 175, 55, 0.11) 0%,
    rgba(212, 175, 55, 0.03) 50%,
    transparent 80%
  );
  opacity: var(--pv-hover, 0);
  transition: opacity 0.28s var(--pv-ease-out);
  pointer-events: none;
  z-index: 0;
}

html[data-vivid="on"] .document-category-card > * {
  position: relative;
  z-index: 1;
}

html[data-vivid="on"] .document-category-card:hover {
  transform: translate3d(0, -2px, 0);
}

html[data-vivid="on"] .document-category-card:hover .document-folder-icon {
  transform: scale(1.06);
  transition: transform 0.24s var(--pv-ease-out);
}

html[data-vivid="on"] .document-category-card:active {
  transform: translate3d(0, 0, 0) scale(0.985);
}

/* Decision Log Stream Rows & Detail Head Settle (Rule 16: preserve .decision-category-icon inline colour) */
html[data-vivid="on"] .decision-stream-row {
  position: relative;
  overflow: hidden;
  transition: background-color 0.22s var(--pv-ease-out), transform 0.22s var(--pv-ease-out);
}

html[data-vivid="on"] .decision-stream-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #E5C354, #D4AF37);
  opacity: 0;
  transform: scaleY(0.35);
  transition: opacity 0.24s var(--pv-ease-out), transform 0.24s var(--pv-ease-out);
  pointer-events: none;
}

html[data-vivid="on"] .decision-stream-row:hover::before,
html[data-vivid="on"] .decision-stream-row.is-selected::before {
  opacity: 1;
  transform: scaleY(1);
}

html[data-vivid="on"] .decision-stream-row:hover .decision-stream-arrow {
  color: var(--pv-gold-light);
  transform: translate3d(3px, 0, 0);
}

html[data-vivid="on"] .decision-stream-row:active {
  transform: scale(0.992);
}

html[data-vivid="on"] .decision-detail-head {
  position: relative;
  overflow: hidden;
}

html[data-vivid="on"] .decision-detail-head.pv-detail-flash::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 45%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212, 175, 55, 0.12) 50%,
    transparent 100%
  );
  pointer-events: none;
  animation: pvOneTimeSweep 0.75s var(--pv-ease-out) 1 both;
}

/* Trips & EV Mode Tabs & Active Deployment Flow (Rule 15: preserve button::after) */
html[data-vivid="on"] .trips-mode-nav {
  position: relative;
}

html[data-vivid="on"] .trips-mode-nav::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--pv-trips-tab-w, 120px);
  height: 2px;
  background: linear-gradient(90deg, #D4AF37, #E5C354, #D4AF37);
  transform: translate3d(var(--pv-trips-tab-x, 18px), 0, 0);
  opacity: var(--pv-trips-tab-ready, 0);
  transition: transform 0.36s var(--pv-ease-out), width 0.36s var(--pv-ease-out), opacity 0.2s ease;
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.55));
  pointer-events: none;
}

html[data-vivid="on"] .trip-live-label {
  animation: pvVerifiedIconBreathe 3.6s ease-in-out infinite;
}

html[data-vivid="on"] .trip-information-flow.is-active {
  position: relative;
  overflow: hidden;
}

html[data-vivid="on"] .trip-information-flow.is-active::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 32%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212, 175, 55, 0.055) 50%,
    transparent 100%
  );
  pointer-events: none;
  animation: pvTickerSheen 8.5s ease-in-out infinite;
}

/* Member Inbox Summary Cards (Rule 15: preserve ::before conic ring & ::after dot) */
html[data-vivid="on"] .inbox-summary-stat {
  transition: transform 0.28s var(--pv-ease-out), border-color 0.28s var(--pv-ease-out), background-color 0.28s var(--pv-ease-out);
}

html[data-vivid="on"] .inbox-summary-stat:hover {
  transform: translate3d(0, -2px, 0);
}

/* The ring is a reaction: it draws on hover and stays only on the counter
   chosen as the filter. A counter with requests is marked by its dot.     */
html[data-vivid="on"] .inbox-summary-stat:hover::before,
html[data-vivid="on"] .inbox-summary-stat.is-active::before {
  --inbox-sweep: 360deg;
  opacity: 0.52;
}

html[data-vivid="on"] .inbox-summary-stat.has-signal::after {
  animation: pvVerifiedPulse 3.4s ease-in-out infinite;
}

/* Tax Matters & Admission Action Buttons */
html[data-vivid="on"] .tax-step-button:not(:disabled),
html[data-vivid="on"] .admission-welcome-action:not(:disabled),
html[data-vivid="on"] .document-all-filter {
  transition: transform 0.2s var(--pv-ease-out), border-color 0.2s var(--pv-ease-out), color 0.2s var(--pv-ease-out), background-color 0.2s var(--pv-ease-out);
}

html[data-vivid="on"] .tax-step-button:hover:not(:disabled),
html[data-vivid="on"] .admission-welcome-action:hover:not(:disabled),
html[data-vivid="on"] .document-all-filter:hover {
  transform: translate3d(0, -1px, 0);
}

html[data-vivid="on"] .tax-step-button:active:not(:disabled),
html[data-vivid="on"] .admission-welcome-action:active:not(:disabled),
html[data-vivid="on"] .document-all-filter:active {
  transform: scale(0.975);
}

/* Breathing Hero Icons across Documents, Decision Log, Admission, Governance */
html[data-vivid="on"] :is(
  .document-overview-icon svg,
  .document-security-posture > span svg,
  .decision-posture-icon svg,
  .decision-rule-icon svg,
  .admission-empty-icon svg,
  .governance-overview-icon svg
) {
  animation: pvSubtleGoldBreathe 5.2s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   6. Buttons (.btn-gold, .btn-gold-sm, .btn-ghost, .btn-ghost-sm)
   Rule 10: Single staggered glint (.pv-btn-glint) driven by JS, never 17 loops.
   Rule 13 & 15: Preserve .btn-gold::after; keep .btn-danger & dissolution quiet.
   -------------------------------------------------------------------------- */

html[data-vivid="on"] .btn-gold,
html[data-vivid="on"] .btn-gold-sm {
  position: relative;
  overflow: hidden;
  transition: transform 0.22s var(--pv-ease-out), filter 0.25s var(--pv-ease-out), background 0.22s var(--pv-ease-out);
}

html[data-vivid="on"] .btn-gold::before,
html[data-vivid="on"] .btn-gold-sm::before {
  content: '';
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 44%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(245, 240, 232, 0.08) 25%,
    rgba(245, 240, 232, 0.48) 50%,
    rgba(245, 240, 232, 0.08) 75%,
    transparent 100%
  );
  transform: translate3d(-140%, 0, 0) skewX(-22deg);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  will-change: transform, opacity;
}

html[data-vivid="on"] .btn-gold.pv-btn-glint:not(:disabled)::before,
html[data-vivid="on"] .btn-gold-sm.pv-btn-glint:not(:disabled)::before {
  animation: pvBtnSingleGlint 0.95s var(--pv-ease-out) 1 both;
}

html[data-vivid="on"] .btn-gold:hover:not(:disabled),
html[data-vivid="on"] .btn-gold-sm:hover:not(:disabled) {
  transform: translate3d(0, -2px, 0);
  filter: drop-shadow(0 4px 14px rgba(212, 175, 55, 0.34));
}

html[data-vivid="on"] .btn-gold:active:not(:disabled),
html[data-vivid="on"] .btn-gold-sm:active:not(:disabled) {
  transform: translate3d(0, 0, 0) scale(0.975);
  filter: drop-shadow(0 1px 4px rgba(212, 175, 55, 0.18));
}

/* Variant B Gold Buttons: crisp engraved inner frame on hover */
html[data-vivid="on"][data-vivid-fx="b"] .btn-gold:hover:not(:disabled),
html[data-vivid="on"][data-vivid-fx="b"] .btn-gold-sm:hover:not(:disabled) {
  outline: 1px solid rgba(245, 240, 232, 0.55);
  outline-offset: -3px;
}

/* Variant C Gold Buttons: sculptural liquid bullion lift */
html[data-vivid="on"][data-vivid-fx="c"] .btn-gold:hover:not(:disabled),
html[data-vivid="on"][data-vivid-fx="c"] .btn-gold-sm:hover:not(:disabled) {
  transform: translate3d(0, -2.5px, 0) scale(1.012);
  filter: drop-shadow(0 6px 18px rgba(229, 195, 84, 0.42));
}

/* Ghost Buttons (.btn-ghost & .btn-ghost-sm, excluding dissolution & danger) */
html[data-vivid="on"] .btn-ghost:not(.governance-dissolution-action):not(.is-danger),
html[data-vivid="on"] .btn-ghost-sm:not(.is-danger) {
  position: relative;
  overflow: hidden;
  transition: transform 0.22s var(--pv-ease-out), border-color 0.22s var(--pv-ease-out), color 0.22s var(--pv-ease-out), background-color 0.22s var(--pv-ease-out);
}

html[data-vivid="on"] .btn-ghost:not(.governance-dissolution-action):not(.is-danger)::before,
html[data-vivid="on"] .btn-ghost-sm:not(.is-danger)::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    120px circle at var(--pv-mx, 50%) var(--pv-my, 50%),
    rgba(229, 195, 84, 0.85) 0%,
    rgba(212, 175, 55, 0.28) 55%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: var(--pv-hover, 0);
  transition: opacity 0.25s var(--pv-ease-out);
  pointer-events: none;
}

html[data-vivid="on"] .btn-ghost:not(.governance-dissolution-action):not(.is-danger):hover:not(:disabled),
html[data-vivid="on"] .btn-ghost-sm:not(.is-danger):hover:not(:disabled) {
  border-color: rgba(212, 175, 55, 0.36);
  color: var(--pv-gold-light);
  transform: translate3d(0, -1px, 0);
}

html[data-vivid="on"] .btn-ghost:not(.governance-dissolution-action):not(.is-danger):active:not(:disabled),
html[data-vivid="on"] .btn-ghost-sm:not(.is-danger):active:not(:disabled) {
  transform: translate3d(0, 0, 0) scale(0.975);
}

/* Rule 13: Keep dissolution & danger buttons neutral and quiet */
html[data-vivid="on"] .governance-dissolution-action:hover,
html[data-vivid="on"] .btn-danger:hover,
html[data-vivid="on"] .icon-btn-sm.is-danger:hover {
  transform: none;
  filter: none;
}

/* --------------------------------------------------------------------------
   7. Dialogs (.modal-overlay > .modal)
   Rule 14: Never put fill-mode keyframes on .closing; fit closing inside 320ms.
   Rule 15: Preserve .modal::before top hairline & .modal-header::after ornament.
   -------------------------------------------------------------------------- */

html[data-vivid="on"] .modal {
  border-color: rgba(212, 175, 55, 0.22);
}

/* Enhance .modal::before (top 1px gold hairline) with a center-out reveal */
html[data-vivid="on"] .modal::before {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 4%,
    rgba(212, 175, 55, 0.45) 28%,
    #F5F0E8 50%,
    rgba(212, 175, 55, 0.45) 72%,
    transparent 96%
  );
  transform-origin: 50% 50%;
  animation: pvModalEdgeReveal 0.56s var(--pv-ease-out) 0.04s 1 both;
  z-index: 4;
}

/* Full-perimeter 1px cursor-responsive gold border on .modal::after */
html[data-vivid="on"] .modal::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    340px circle at var(--pv-mx, 50%) var(--pv-my, 0%),
    rgba(229, 195, 84, 0.65) 0%,
    rgba(212, 175, 55, 0.22) 48%,
    rgba(212, 175, 55, 0.06) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: calc(0.45 + (var(--pv-hover, 0) * 0.55));
  transition: opacity 0.28s var(--pv-ease-out);
  pointer-events: none;
  z-index: 3;
}

/* Settling gold light across .modal-header::before (leaves ::after untouched) */
html[data-vivid="on"] .modal-header {
  overflow: visible;
}

html[data-vivid="on"]:where(:not([data-vivid-fx]), [data-vivid-fx="a"]) .modal-header::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px 20px 0 0;
  background: radial-gradient(
    80% 120% at 50% 0%,
    rgba(212, 175, 55, 0.16) 0%,
    rgba(229, 195, 84, 0.05) 55%,
    transparent 100%
  );
  pointer-events: none;
  will-change: transform, opacity;
  animation: pvModalHeaderSettle 0.68s var(--pv-ease-out) 0.05s 1 both;
}

html[data-vivid="on"][data-vivid-fx="b"] .modal-header::before {
  content: '';
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #E5C354, transparent);
  pointer-events: none;
  transform-origin: 50% 50%;
  animation: pvEngraveTrace 0.62s var(--pv-ease-out) 0.06s 1 both;
}

html[data-vivid="on"][data-vivid-fx="c"] .modal-header::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(
    180deg,
    rgba(229, 195, 84, 0.2) 0%,
    rgba(138, 106, 47, 0.06) 65%,
    transparent 100%
  );
  pointer-events: none;
  will-change: transform, opacity;
  animation: pvModalBullionCrest 0.66s var(--pv-ease-out) 0.04s 1 both;
}

/* Rule 14: Fast, transition-only closing within 320ms (no keyframes on .closing) */
html[data-vivid="on"] .modal-overlay.closing {
  opacity: 0;
  transition: opacity 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-vivid="on"] .modal-overlay.closing .modal,
html[data-vivid="on"] .modal.closing {
  opacity: 0;
  transform: scale(0.97) translate3d(0, 6px, 0);
  transition: opacity 260ms cubic-bezier(0.4, 0, 0.2, 1), transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   8. Live Ticker, Sidebar, Ledger Hero, View Sweep & Empty State (Round 1)
   -------------------------------------------------------------------------- */

html[data-vivid="on"] .dashboard-ticker {
  position: relative;
  background: rgba(7, 7, 9, 0.86);
  border-top-color: rgba(212, 175, 55, 0.14);
  border-bottom-color: rgba(212, 175, 55, 0.14);
}

html[data-vivid="on"] .dashboard-ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 28%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212, 175, 55, 0.035) 35%,
    rgba(245, 240, 232, 0.075) 50%,
    rgba(212, 175, 55, 0.035) 65%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 3;
  will-change: transform, opacity;
  animation: pvTickerSheen 9.5s ease-in-out infinite;
}

html[data-vivid="on"] .dashboard-live-dot {
  position: relative;
  box-shadow: none;
  animation: pvLiveDotBreathe 3s ease-in-out infinite;
}

html[data-vivid="on"] .dashboard-live-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(16, 185, 129, 0.55);
  pointer-events: none;
  will-change: transform, opacity;
  animation: pvLiveDotRing 3s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

html[data-vivid="on"] .sidebar-nav {
  position: relative;
}

html[data-vivid="on"] .sidebar-nav::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 0;
  width: 3px;
  height: var(--pv-nav-h, 38px);
  border-radius: 3px;
  background: linear-gradient(180deg, #E5C354 0%, #D4AF37 55%, #8A6A2F 100%);
  transform: translate3d(0, var(--pv-nav-y, 16px), 0);
  opacity: var(--pv-nav-ready, 0);
  transition: transform 0.44s var(--pv-ease-out), height 0.3s var(--pv-ease-out), opacity 0.25s ease;
  filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.65));
  pointer-events: none;
  z-index: 4;
  will-change: transform, opacity;
}

html[data-vivid="on"] .sidebar-nav::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  top: 0;
  height: var(--pv-nav-h, 38px);
  border-radius: 8px;
  background: radial-gradient(
    110% 120% at 8% 50%,
    rgba(212, 175, 55, 0.18) 0%,
    rgba(212, 175, 55, 0.05) 58%,
    transparent 100%
  );
  transform: translate3d(0, var(--pv-nav-y, 16px), 0);
  opacity: var(--pv-nav-ready, 0);
  transition: transform 0.44s var(--pv-ease-out), height 0.3s var(--pv-ease-out), opacity 0.25s ease;
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
}

html[data-vivid="on"] .sidebar-nav .nav-section {
  position: relative;
  z-index: 1;
}

html[data-vivid="on"] .sidebar-nav.pv-indicator-active .nav-item.active {
  border-left-color: transparent;
}

html[data-vivid="on"] .nav-item.active::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(229, 195, 84, 0.09) 0%, transparent 75%);
  pointer-events: none;
  animation: pvVerifiedPulse 4.5s ease-in-out infinite;
}

html[data-vivid="on"] .ledger-balance-header {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}

html[data-vivid="on"] .ledger-balance-header::after {
  content: '';
  position: absolute;
  top: -15%;
  bottom: -15%;
  left: 0;
  width: 45%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212, 175, 55, 0.06) 28%,
    rgba(229, 195, 84, 0.18) 50%,
    rgba(245, 240, 232, 0.22) 54%,
    rgba(212, 175, 55, 0.05) 75%,
    transparent 100%
  );
  pointer-events: none;
  will-change: transform, opacity;
  animation: pvOneTimeSweep 1.5s var(--pv-ease-out) 0.12s 1 both;
}

html[data-vivid="on"] .ledger-chart-frame {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}

html[data-vivid="on"] .ledger-chart-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 40%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212, 175, 55, 0.1) 50%,
    transparent 100%
  );
  pointer-events: none;
  will-change: transform, opacity;
  animation: pvOneTimeSweep 1.75s var(--pv-ease-out) 0.22s 1 both;
}

html[data-vivid="on"] .ledger-chart-frame svg {
  animation: pvChartGlowBreathe 6s ease-in-out infinite;
}

html[data-vivid="on"] .ledger-integrity-state.is-balanced:not(.is-drift) {
  position: relative;
  border-color: rgba(16, 185, 129, 0.28);
  background: rgba(16, 185, 129, 0.04);
}

html[data-vivid="on"] .ledger-integrity-state.is-balanced:not(.is-drift)::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(16, 185, 129, 0.42);
  background: radial-gradient(
    circle at 50% 50%,
    rgba(16, 185, 129, 0.14) 0%,
    transparent 75%
  );
  pointer-events: none;
  will-change: transform, opacity;
  animation: pvVerifiedPulse 3.8s ease-in-out infinite;
}

html[data-vivid="on"] .ledger-integrity-state.is-balanced:not(.is-drift) > span > svg {
  animation: pvVerifiedIconBreathe 3.8s ease-in-out infinite;
}

html[data-vivid="on"] .ledger-integrity-state.is-drift,
html[data-vivid="on"] .ledger-integrity-state.is-drift::before,
html[data-vivid="on"] .ledger-integrity-state.is-drift > span > svg {
  animation: none;
}

html[data-vivid="on"] .ledger-audit-row {
  animation: pvRowSettle 0.5s var(--pv-ease-out) both;
}
html[data-vivid="on"] .ledger-audit-row:nth-of-type(1) { animation-delay: 0.06s; }
html[data-vivid="on"] .ledger-audit-row:nth-of-type(2) { animation-delay: 0.12s; }
html[data-vivid="on"] .ledger-audit-row:nth-of-type(3) { animation-delay: 0.18s; }
html[data-vivid="on"] .ledger-audit-row:nth-of-type(4) { animation-delay: 0.24s; }

html[data-vivid="on"] .pv-view-sweep {
  position: fixed;
  top: 0;
  left: var(--pv-main-left, 260px);
  right: 0;
  height: 96px;
  pointer-events: none;
  z-index: 140;
  overflow: hidden;
  opacity: 0;
}

html[data-vivid="on"] .pv-view-sweep.is-sweeping {
  opacity: 1;
}

html[data-vivid="on"] .pv-view-sweep-beam {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212, 175, 55, 0.25) 20%,
    #E5C354 48%,
    #F5F0E8 52%,
    rgba(212, 175, 55, 0.25) 80%,
    transparent 100%
  );
  filter: drop-shadow(0 2px 10px rgba(212, 175, 55, 0.7));
  transform: translate3d(-105%, 0, 0);
  will-change: transform, opacity;
}

html[data-vivid="on"] .pv-view-sweep-veil {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 72px;
  background: radial-gradient(
    65% 100% at 50% 0%,
    rgba(212, 175, 55, 0.085) 0%,
    rgba(212, 175, 55, 0.02) 55%,
    transparent 100%
  );
  opacity: 0;
  will-change: transform, opacity;
}

html[data-vivid="on"] .pv-view-sweep.is-sweeping .pv-view-sweep-beam {
  animation: pvViewSweepBeam 0.68s var(--pv-ease-out) 1 forwards;
}

html[data-vivid="on"] .pv-view-sweep.is-sweeping .pv-view-sweep-veil {
  animation: pvViewSweepVeil 0.68s var(--pv-ease-out) 1 forwards;
}

html[data-vivid="on"] .empty-state {
  position: relative;
  overflow: hidden;
  min-height: 168px;
  justify-content: center;
}

html[data-vivid="on"] .empty-state::before {
  position: relative;
  z-index: 1;
  opacity: 0.22;
}

html[data-vivid="on"] .empty-state::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 176px;
  height: 176px;
  background: center / contain no-repeat url('/brand/svg/secondary/PrismCapital_abstract_prism_seal_dark.svg');
  opacity: 0.065;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  animation: pvSealRotate 64s linear infinite;
}

html[data-vivid="on"] .dashboard-period-tabs {
  position: relative;
}

html[data-vivid="on"] .dashboard-period-tabs::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: var(--pv-tab-w, 140px);
  height: 2px;
  background: linear-gradient(90deg, #D4AF37, #E5C354, #D4AF37);
  transform: translate3d(var(--pv-tab-x, 0px), 0, 0);
  opacity: var(--pv-tab-ready, 0);
  transition: transform 0.36s var(--pv-ease-out), width 0.36s var(--pv-ease-out), opacity 0.2s ease;
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.55));
  pointer-events: none;
}

html[data-vivid="on"] .dashboard-period-tabs.pv-tabs-ready button.is-active {
  border-bottom-color: transparent;
}

html[data-vivid="on"] .main::before {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 5%,
    rgba(212, 175, 55, 0.38) 35%,
    rgba(229, 195, 84, 0.72) 50%,
    rgba(212, 175, 55, 0.38) 65%,
    transparent 95%
  );
  opacity: calc(0.35 + (var(--pv-scroll-Boost, 0) * 0.65));
  transform: scaleX(calc(0.75 + (var(--pv-scroll-Boost, 0) * 0.25)));
  transition: opacity 0.25s ease, transform 0.25s var(--pv-ease-out);
  will-change: transform, opacity;
}

html[data-vivid="on"] .card-title::before,
html[data-vivid="on"] .dashboard-phase-status svg {
  animation: pvSubtleGoldBreathe 5s ease-in-out infinite;
}

@media (max-width: 600px) {
  html[data-vivid="on"] .pv-view-sweep {
    left: 0;
    top: 56px;
  }
  html[data-vivid="on"] .sidebar-nav::before,
  html[data-vivid="on"] .sidebar-nav::after,
  html[data-vivid="on"] .pv-backdrop-texture {
    display: none;
  }
}

/* ==========================================================================
   Round 3 (built in-house on variant A)
   1. Strength dial   2. Chart draw-in   3. Table rows   4. Login screen
   5. Touch feedback
   Variant A is the chosen look; B and C stay available behind ?fx= but are
   not tuned by this section.
   ========================================================================== */

/* 1. Strength dial ----------------------------------------------------------
   One number scales the gold light of variant A. 1 = round 2 as delivered.
   Tune it here, or live in the browser console with
   document.documentElement.style.setProperty("--pv-strength", "3")          */
html[data-vivid="on"] {
  --pv-strength: 2.4;  /* ambient: drifting backdrop, hero glow, cursor light */
  --pv-flash: 1.35;    /* moving light: entrance sweep, bar shimmer, button glint */
}

@keyframes pvOrbDrift1S {
  0%, 100% { transform: translate3d(-6%, -4%, 0) scale(1);     opacity: min(0.6, calc(0.085 * var(--pv-strength))); }
  33%      { transform: translate3d(8%, 6%, 0) scale(1.08);    opacity: min(0.6, calc(0.11 * var(--pv-strength))); }
  66%      { transform: translate3d(-2%, 11%, 0) scale(0.95);  opacity: min(0.6, calc(0.075 * var(--pv-strength))); }
}
@keyframes pvOrbDrift2S {
  0%, 100% { transform: translate3d(6%, 5%, 0) scale(1);       opacity: min(0.6, calc(0.075 * var(--pv-strength))); }
  40%      { transform: translate3d(-9%, -7%, 0) scale(1.06);  opacity: min(0.6, calc(0.10 * var(--pv-strength))); }
  75%      { transform: translate3d(3%, -10%, 0) scale(0.94);  opacity: min(0.6, calc(0.065 * var(--pv-strength))); }
}
@keyframes pvOrbDrift3S {
  0%, 100% { transform: translate3d(0%, 0%, 0) scale(0.96);    opacity: min(0.5, calc(0.05 * var(--pv-strength))); }
  50%      { transform: translate3d(-10%, 8%, 0) scale(1.07);  opacity: min(0.5, calc(0.08 * var(--pv-strength))); }
}
html[data-vivid="on"]:where(:not([data-vivid-fx]), [data-vivid-fx="a"]) .pv-orb--gold { animation-name: pvOrbDrift1S; }
html[data-vivid="on"]:where(:not([data-vivid-fx]), [data-vivid-fx="a"]) .pv-orb--amber { animation-name: pvOrbDrift2S; }
html[data-vivid="on"]:where(:not([data-vivid-fx]), [data-vivid-fx="a"]) .pv-orb--champagne { animation-name: pvOrbDrift3S; }

/* Screen heroes: orbiting ambient light and the entrance sweep */
html[data-vivid="on"]:where(:not([data-vivid-fx]), [data-vivid-fx="a"]) :is(
  section.dashboard-position, section.distribution-snapshot, section.document-overview,
  section.decision-overview, section.trips-command-strip, section.tax-overview,
  div.decision-summary.admission-summary, section.governance-overview
)::before {
  background: radial-gradient(
    ellipse 45% 38% at 50% 50%,
    rgb(229 195 84 / min(0.42, calc(0.13 * var(--pv-strength)))) 0%,
    rgb(212 175 55 / min(0.18, calc(0.055 * var(--pv-strength)))) 42%,
    transparent 72%
  );
}
html[data-vivid="on"]:where(:not([data-vivid-fx]), [data-vivid-fx="a"]) :is(
  section.dashboard-position, section.distribution-snapshot, section.document-overview,
  section.decision-overview, section.trips-command-strip, section.tax-overview,
  div.decision-summary.admission-summary, section.governance-overview
)::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(212 175 55 / min(0.16, calc(0.05 * var(--pv-flash)))) 30%,
    rgb(229 195 84 / min(0.42, calc(0.16 * var(--pv-flash)))) 48%,
    rgb(245 240 232 / min(0.5, calc(0.22 * var(--pv-flash)))) 52%,
    rgb(212 175 55 / min(0.18, calc(0.06 * var(--pv-flash)))) 70%,
    transparent 100%
  );
}

html[data-vivid="on"]:where(:not([data-vivid-fx]), [data-vivid-fx="a"]) :is(
  section.dashboard-position, section.distribution-snapshot, section.document-overview,
  section.decision-overview, section.trips-command-strip, section.tax-overview,
  div.decision-summary.admission-summary, section.governance-overview
)::after {
  animation-duration: 2.1s;
}

/* Cursor light across panels and cards */
html[data-vivid="on"]:where(:not([data-vivid-fx]), [data-vivid-fx="a"]) :is(
  .card:not(.ledger-stream-panel):not(.settings-panel):not(.is-danger),
  .ledger-balance-panel, .ledger-audit-panel, .phase-bar-wrap, .dashboard-period-grid .stat-block,
  .distribution-input-panel, .distribution-waterfall-panel, .distribution-flow-equation,
  .distribution-flow-fee-stage, .distribution-flow-split, .decision-detail-panel,
  .tax-w9-panel, .tax-k1-panel, .admission-empty, .admission-member-register,
  article.decision-record:not(.is-danger), .governance-standards-panel
)::after {
  background: radial-gradient(
    380px circle at var(--pv-mx, 50%) var(--pv-my, 50%),
    rgb(212 175 55 / min(0.24, calc(0.078 * var(--pv-strength)))) 0%,
    rgb(229 195 84 / min(0.09, calc(0.028 * var(--pv-strength)))) 42%,
    transparent 74%
  );
}

/* Bar shimmer */
html[data-vivid="on"]:where(:not([data-vivid-fx]), [data-vivid-fx="a"]) :is(
  .phase-bar-fill, .dashboard-health > div:nth-child(3) > div:last-child,
  .distribution-snapshot-track > span, .distribution-flow-split-track > span,
  .tax-delivery-progress > span, .decision-progress
)::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(245 240 232 / min(0.16, calc(0.06 * var(--pv-flash)))) 25%,
    rgb(245 240 232 / min(0.75, calc(0.38 * var(--pv-flash)))) 50%,
    rgb(245 240 232 / min(0.16, calc(0.06 * var(--pv-flash)))) 75%,
    transparent 100%
  );
}

/* Gold button glint */
html[data-vivid="on"]:where(:not([data-vivid-fx]), [data-vivid-fx="a"]) :is(.btn-gold, .btn-gold-sm)::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(245 240 232 / min(0.2, calc(0.08 * var(--pv-flash)))) 25%,
    rgb(245 240 232 / min(0.85, calc(0.48 * var(--pv-flash)))) 50%,
    rgb(245 240 232 / min(0.2, calc(0.08 * var(--pv-flash)))) 75%,
    transparent 100%
  );
}

/* 2. Charts reveal left to right ---------------------------------------------
   Line and filled area are uncovered together, like the chart is being drawn.
   Runs as the chart mounts on a screen's first visit per sign-in (main.main
   has no .pv-revisit), so the finished chart never paints first.           */
@keyframes pvChartReveal {
  from { clip-path: inset(-4px 100% -4px -4px); }
  to   { clip-path: inset(-4px -4px -4px -4px); }
}
html[data-vivid="on"] main.main:not(.pv-revisit) :is(.compact-chart-wrap, .sessions-chart-plot) svg {
  animation: pvChartReveal 1.4s cubic-bezier(0.45, 0, 0.2, 1) 0.15s both;
}

/* 3. Table rows --------------------------------------------------------------
   A soft gold wash on hover, one gradient across the whole row; rows settle in
   on the first visit of a screen per sign-in (main.main without .pv-revisit).
   No edge line: table cells have no left padding, so any line at the row's
   edge sits on the first character (the app's own white one included).     */
html[data-vivid="on"] .data-table tbody tr:hover {
  background-image: linear-gradient(90deg, rgb(212 175 55 / min(0.1, calc(0.035 * var(--pv-strength)))), rgb(212 175 55 / 0.02) 45%, transparent 85%);
}
html[data-vivid="on"] .data-table tbody tr:hover td:first-child {
  box-shadow: none;
}
html[data-vivid="on"] .document-register-row {
  transition: background-color 0.2s var(--pv-ease-out), box-shadow 0.2s var(--pv-ease-out);
}
html[data-vivid="on"] .document-register-row:hover {
  background-image: linear-gradient(90deg, rgb(212 175 55 / min(0.1, calc(0.035 * var(--pv-strength)))), rgb(212 175 55 / 0.02) 45%, transparent 85%);
}

@keyframes pvRowIn {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
html[data-vivid="on"] main.main:not(.pv-revisit) :is(.data-table tbody tr, .document-register-row, .decision-stream-row, .trip-row) {
  animation: pvRowIn 0.45s var(--pv-ease-out) both;
}
html[data-vivid="on"] main.main:not(.pv-revisit) :is(.data-table tbody tr, .document-register-row, .decision-stream-row, .trip-row):nth-child(2)  { animation-delay: 0.03s; }
html[data-vivid="on"] main.main:not(.pv-revisit) :is(.data-table tbody tr, .document-register-row, .decision-stream-row, .trip-row):nth-child(3)  { animation-delay: 0.06s; }
html[data-vivid="on"] main.main:not(.pv-revisit) :is(.data-table tbody tr, .document-register-row, .decision-stream-row, .trip-row):nth-child(4)  { animation-delay: 0.09s; }
html[data-vivid="on"] main.main:not(.pv-revisit) :is(.data-table tbody tr, .document-register-row, .decision-stream-row, .trip-row):nth-child(5)  { animation-delay: 0.12s; }
html[data-vivid="on"] main.main:not(.pv-revisit) :is(.data-table tbody tr, .document-register-row, .decision-stream-row, .trip-row):nth-child(6)  { animation-delay: 0.15s; }
html[data-vivid="on"] main.main:not(.pv-revisit) :is(.data-table tbody tr, .document-register-row, .decision-stream-row, .trip-row):nth-child(7)  { animation-delay: 0.18s; }
html[data-vivid="on"] main.main:not(.pv-revisit) :is(.data-table tbody tr, .document-register-row, .decision-stream-row, .trip-row):nth-child(8)  { animation-delay: 0.21s; }
html[data-vivid="on"] main.main:not(.pv-revisit) :is(.data-table tbody tr, .document-register-row, .decision-stream-row, .trip-row):nth-child(9)  { animation-delay: 0.24s; }
html[data-vivid="on"] main.main:not(.pv-revisit) :is(.data-table tbody tr, .document-register-row, .decision-stream-row, .trip-row):nth-child(n+10) { animation-delay: 0.27s; }

/* 4. Login screen -------------------------------------------------------------
   The drifting backdrop shows behind the login too. Only the solid colour of
   the login wrapper is cleared; its own gradients, grain and pattern stay.   */
html[data-vivid="on"] body.pv-has-login .pv-backdrop {
  opacity: 1;
}
html[data-vivid="on"] body.pv-has-login .lw {
  background-color: transparent;
}
@keyframes pvLoginEdge {
  0%, 62%   { transform: translate3d(-120%, 0, 0); opacity: 0; }
  70%       { opacity: 1; }
  100%      { transform: translate3d(220%, 0, 0); opacity: 0; }
}
html[data-vivid="on"] body.pv-has-login .l-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(245 240 232 / 0.9), transparent);
  pointer-events: none;
  animation: pvLoginEdge 7s ease-in-out 1.2s infinite;
}

/* 5. Touch feedback -------------------------------------------------------------
   Phones have no cursor, so prism-vivid.js lights the tapped panel at the tap
   point for a moment (same --pv-hover / --pv-mx / --pv-my as the cursor).     */
@media (hover: none) and (pointer: coarse) {
  html[data-vivid="on"] :is(.btn-gold, .btn-gold-sm):active:not(:disabled) {
    filter: drop-shadow(0 0 14px rgb(212 175 55 / 0.45));
  }
}

/* 6. Empty states -------------------------------------------------------------
   The slowly turning prism seal stays; the small static diamond icon above
   the text is hidden so the two marks no longer compete.                    */
html[data-vivid="on"] .empty-state::before {
  display: none;
}


/* 7. Before the app: login, signing in, loading, welcome ---------------------
   prism-vivid.js sets body.pv-has-login whenever the login, the "Authenticating"
   card, the data-loading card or the welcome screen is showing, so the same
   drifting light runs from the first screen to the dashboard.               */
html[data-vivid="on"] .pv-orb--halo {
  width: 72vmin;
  height: 72vmin;
  left: 50%;
  top: 34%;
  margin: -36vmin 0 0 -36vmin;
  background: radial-gradient(
    circle,
    rgb(229 195 84 / 0.55) 0%,
    rgb(212 175 55 / 0.22) 38%,
    rgb(138 106 47 / 0.06) 62%,
    transparent 74%
  );
  opacity: 0;
  transition: opacity 0.8s var(--pv-ease-out);
}
@keyframes pvHaloBreathe {
  0%, 100% { transform: scale(0.94); opacity: min(0.4, calc(0.065 * var(--pv-strength))); }
  50%      { transform: scale(1.04); opacity: min(0.45, calc(0.1 * var(--pv-strength))); }
}
html[data-vivid="on"] body.pv-has-login .pv-orb--halo {
  animation: pvHaloBreathe 9s ease-in-out infinite;
}

html[data-vivid="on"] body.pv-has-login :is(.auth-loading-screen, .welcome-screen) {
  background-color: transparent !important;   /* inline opaque colour; same exception as Rule 8 */
}
html[data-vivid="on"] body.pv-has-login .loading-screen {
  background: transparent;
}

/* Medallion: light and shadow follow the medallion's own edge --------------
   The app trims the image with an octagon clip-path applied after its
   drop-shadows, which cut the shadow and gold glow off in a hard octagon a few
   pixels outside the metal (a dark "plate" once the halo sits behind it). The
   PNG's corners are transparent, so with vivid on the clip comes off and the
   shadows trace the real edge.                                              */
html[data-vivid="on"] .lw .l-logo-img {
  clip-path: none;
  filter: none;
  /* The PNG carries a baked dark shadow (wide on the lower right, with a
     rainbow fleck) and soft haze outside the gold rim, and the medallion sits
     a little up-left of centre. Over the halo that read as a dark square cut
     out of the light. This octagon is measured to the gold rim on all eight
     sides, so only the metal remains, and nudged so the metal is centred.  */
  translate: 1.8% 3.9%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeGaussianBlur stdDeviation='0.45'/%3E%3C/filter%3E%3Cpolygon filter='url(%23f)' points='25.4,3.9 70.9,3.9 91.6,24.6 91.6,67.6 70.9,88.3 27.1,88.3 4.9,66 4.9,24.4'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeGaussianBlur stdDeviation='0.45'/%3E%3C/filter%3E%3Cpolygon filter='url(%23f)' points='25.4,3.9 70.9,3.9 91.6,24.6 91.6,67.6 70.9,88.3 27.1,88.3 4.9,66 4.9,24.4'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* Shadow and gold glow go on the wrapper so they trace the trimmed metal:
   a tight contact shadow only, no large dark spread over the halo.        */
html[data-vivid="on"] .lw .l-logo {
  filter: drop-shadow(0 0 16px rgb(212 175 55 / 0.22)) drop-shadow(0 7px 12px rgb(0 0 0 / 0.42));
}

/* Slight tilt toward the cursor */
html[data-vivid="on"] .l-logo {
  transform: perspective(700px) rotateX(var(--pv-tilt-y, 0deg)) rotateY(var(--pv-tilt-x, 0deg));
  transition: transform 0.5s var(--pv-ease-out);
}

/* Occasional light across the metal. The layer is masked by the medallion
   image itself and never moves; only the light inside it travels, and it
   blends with the metal so bright gold catches it and dark recesses barely do.
   The fixed clip sits on the gold rim so the image's soft outer haze never
   lights up.                                                                 */
@keyframes pvMedallionSheen {
  0%, 72% { background-position: 130% 0; }
  100%    { background-position: -30% 0; }
}
html[data-vivid="on"] .lw .l-logo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  -webkit-mask: url('../brand/png/primary/PrismCapital_pc_medallion_hero_dark_may12_truth_512x512.png') center / contain no-repeat;
  mask: url('../brand/png/primary/PrismCapital_pc_medallion_hero_dark_may12_truth_512x512.png') center / contain no-repeat;
  clip-path: polygon(25.4% 3.9%, 70.9% 3.9%, 91.6% 24.6%, 91.6% 67.6%, 70.9% 88.3%, 27.1% 88.3%, 4.9% 66%, 4.9% 24.4%);
  background-image: linear-gradient(
    112deg,
    transparent 36%,
    rgb(255 236 190 / 0.45) 45%,
    rgb(255 250 235 / 1) 50%,
    rgb(255 236 190 / 0.45) 55%,
    transparent 64%
  );
  background-size: 300% 100%;
  background-repeat: no-repeat;
  background-position: 130% 0;
  mix-blend-mode: overlay;
  translate: 1.8% 3.9%;   /* same nudge as the image */
  animation: pvMedallionSheen 9s cubic-bezier(0.45, 0, 0.25, 1) 2.2s infinite;
}

/* One-time entrance on page load (body.pv-login-seen stops it replaying after
   a failed sign-in). fill-mode backwards so the tilt works once it ends.    */
@keyframes pvRiseIn {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes pvMedallionIn {
  from { opacity: 0; transform: perspective(700px) scale(0.9); }
  to   { opacity: 1; transform: perspective(700px) scale(1); }
}
@keyframes pvWordmarkIn {
  from { opacity: 0; letter-spacing: 0.22em; }
  to   { opacity: 1; letter-spacing: 0.08em; }
}
@keyframes pvFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
html[data-vivid="on"] body:not(.pv-login-seen) .lw .l-logo { animation: pvMedallionIn 0.95s var(--pv-ease-out) 0.05s backwards; }
html[data-vivid="on"] body:not(.pv-login-seen) .lw .l-name { animation: pvWordmarkIn 1.1s var(--pv-ease-out) 0.25s backwards; }
html[data-vivid="on"] body:not(.pv-login-seen) .lw .l-sub { animation: pvFadeIn 0.8s var(--pv-ease-out) 0.5s backwards; }
html[data-vivid="on"] body:not(.pv-login-seen) .lw .lb > [aria-hidden="true"] { animation: pvFadeIn 0.8s var(--pv-ease-out) 0.6s backwards; }
html[data-vivid="on"] body:not(.pv-login-seen) .lw .l-card { animation: pvRiseIn 0.85s var(--pv-ease-out) 0.65s backwards; }

/* The card: gold light and edge follow the cursor, like the panels inside */
html[data-vivid="on"] .lw .l-card {
  background-image: radial-gradient(
    320px circle at var(--pv-mx, 50%) var(--pv-my, 0%),
    rgb(212 175 55 / calc(0.1 * var(--pv-hover, 0))) 0%,
    transparent 72%
  );
  border-color: rgb(212 175 55 / calc(0.07 + 0.22 * var(--pv-hover, 0)));
  transition: border-color 0.35s var(--pv-ease-out);
}

/* A gold line draws under the field being typed in */
html[data-vivid="on"] .lw .l-input {
  background-image: linear-gradient(90deg, transparent, #E5C354, transparent);
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 0% 1px;
  transition: background-size 0.45s var(--pv-ease-out), border-color 0.2s var(--pv-ease-out), box-shadow 0.2s var(--pv-ease-out);
}
html[data-vivid="on"] .lw .l-input:focus {
  background-size: 92% 1px;
}

/* Occasional glint across Sign In (the app's own hover sheen is ::after) */
@keyframes pvSubmitGlint {
  0%, 80% { transform: translate3d(-140%, 0, 0) skewX(-20deg); opacity: 0; }
  84%     { opacity: 1; }
  100%    { transform: translate3d(260%, 0, 0) skewX(-20deg); opacity: 0; }
}
html[data-vivid="on"] .lw .l-submit:not(:disabled)::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.45), transparent);
  pointer-events: none;
  animation: pvSubmitGlint 6.5s ease-in-out 3s infinite;
}

/* Signing in and loading: the status card gets a gold sweep as it appears */
html[data-vivid="on"] .loading-stat-card {
  position: relative;
  overflow: hidden;
}
html[data-vivid="on"] .loading-stat-card::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 55%;
  background: linear-gradient(90deg, transparent, rgb(229 195 84 / 0.16) 45%, rgb(245 240 232 / 0.22) 52%, transparent);
  pointer-events: none;
  animation: pvOneTimeSweep 1.6s var(--pv-ease-out) 0.1s 1 both;
}

/* 8. Toasts ---------------------------------------------------------------------
   Success and warning toasts get a thin gold edge that draws in, then one
   sweep of light. Error toasts (role="alert") stay plain. The toast container is the only
   status region without a class (the loading card is one too).            */
@keyframes pvToastEdge {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}
html[data-vivid="on"] [role="status"][aria-live="polite"]:not([class]) > div:not([role="alert"]) {
  position: relative;
  overflow: hidden;
}
html[data-vivid="on"] [role="status"][aria-live="polite"]:not([class]) > div:not([role="alert"])::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #F5F0E8, #E5C354, transparent);
  transform-origin: 0 50%;
  pointer-events: none;
  animation: pvToastEdge 0.6s var(--pv-ease-out) 0.15s both;
}
html[data-vivid="on"] [role="status"][aria-live="polite"]:not([class]) > div:not([role="alert"])::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.22), transparent);
  pointer-events: none;
  animation: pvOneTimeSweep 1.2s var(--pv-ease-out) 0.3s 1 both;
}

/* 9. Dialog background --------------------------------------------------------
   A soft warm light behind an open dialog, on top of the app's blur.        */
@keyframes pvOverlayGlow {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
html[data-vivid="on"] .modal-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 46% 42% at 50% 46%, rgb(212 175 55 / 0.1) 0%, rgb(138 106 47 / 0.04) 45%, transparent 72%);
  animation: pvOverlayGlow 0.6s var(--pv-ease-out) both;
}
html[data-vivid="on"] .modal-overlay > .modal {
  position: relative;
  z-index: 1;
}

/* Before the app, #root and its wrapper are painted solid by index.html and the
   login styles; clear them (Rule 8 exception) so the backdrop shows through. */
html[data-vivid="on"] body.pv-has-login #root,
html[data-vivid="on"] body.pv-has-login #root > div {
  background: transparent !important;
}