/* Each illustration has its own scroll progress; the reading itself stays still. */
.depth-reading {
  --visual-a: #a3d7e9;
  --visual-b: #efd09a;
  --visual-a-rgb: 163 215 233;
  --visual-b-rgb: 239 208 154;
  --visual-core: #f5e2b9;
}
.depth-reading[data-depth="Sun"] {
  --visual-a: #a7d5df;
  --visual-b: #efcf88;
  --visual-a-rgb: 167 213 223;
  --visual-b-rgb: 239 207 136;
  --visual-core: #ffe4a8;
}
.depth-reading[data-depth="Venus"] {
  --visual-a: #d3b5ec;
  --visual-b: #eeb9bc;
  --visual-a-rgb: 211 181 236;
  --visual-b-rgb: 238 185 188;
  --visual-core: #ffe3cc;
}
.depth-reading[data-depth="Mercury"] {
  --visual-a: #8fdce3;
  --visual-b: #b5c9ee;
  --visual-a-rgb: 143 220 227;
  --visual-b-rgb: 181 201 238;
  --visual-core: #dbf5f4;
}
.depth-reading[data-depth="Moon"] {
  --visual-a: #adc9f4;
  --visual-b: #d3bde9;
  --visual-a-rgb: 173 201 244;
  --visual-b-rgb: 211 189 233;
  --visual-core: #e8e4ff;
}
.depth-reading[data-depth="Mars"] {
  --visual-a: #edbf82;
  --visual-b: #df9b94;
  --visual-a-rgb: 237 191 130;
  --visual-b-rgb: 223 155 148;
  --visual-core: #ffe1b8;
}
[data-visual-kind] { --visual-progress: 1; }
.depth-visual, .depth-moment { position: relative; margin: 0; min-width: 0; }
.depth-visual { margin: 31px 0 38px; }
.visual-canvas {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  overflow: hidden;
}
.visual-canvas::before, .visual-canvas::after {
  content: '';
  position: absolute;
  inset: 7% 5%;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
}
.visual-canvas::before {
  background: radial-gradient(ellipse at 30% 48%, rgb(var(--visual-a-rgb) / .16), transparent 53%), radial-gradient(ellipse at 72% 55%, rgb(var(--visual-b-rgb) / .14), transparent 54%);
  opacity: calc(.58 + var(--visual-progress) * .42);
  transform: scale(calc(.86 + var(--visual-progress) * .14));
}
.visual-canvas::after {
  inset: 19% 24%;
  background: radial-gradient(ellipse, rgb(var(--visual-b-rgb) / .13), transparent 67%);
  opacity: calc(.18 + var(--visual-progress) * .82);
  transform: rotate(calc(-8deg + var(--visual-progress) * 16deg)) scale(calc(.7 + var(--visual-progress) * .3));
}
.visual-canvas > svg { display: block; width: 100%; height: auto; overflow: visible; }
.visual-canvas svg, .depth-portrait svg, .depth-moment svg { color: var(--visual-core); }
.depth-visual[data-focus="a"] .visual-canvas::before { background: radial-gradient(ellipse at 32% 48%, rgb(var(--visual-a-rgb) / .22), transparent 63%); }
.depth-visual[data-focus="b"] .visual-canvas::before { background: radial-gradient(ellipse at 68% 52%, rgb(var(--visual-b-rgb) / .22), transparent 63%); }
.depth-reading[data-depth="Venus"] .visual-canvas::after { inset: 9% 22%; background: radial-gradient(ellipse at 48% 48%, rgb(var(--visual-b-rgb) / .19), transparent 68%); }
.depth-reading[data-depth="Mercury"] .visual-canvas::after { inset: 34% 12%; background: linear-gradient(90deg, transparent, rgb(var(--visual-a-rgb) / .14), rgb(var(--visual-b-rgb) / .12), transparent); transform: scaleX(calc(.55 + var(--visual-progress) * .45)); }
.depth-reading[data-depth="Moon"] .visual-canvas::before { background: radial-gradient(ellipse at 50% 35%, rgb(var(--visual-b-rgb) / .16), transparent 58%), radial-gradient(ellipse at 50% 80%, rgb(var(--visual-a-rgb) / .12), transparent 56%); }
.depth-reading[data-depth="Mars"] .visual-canvas::after { inset: 15% 32%; background: radial-gradient(ellipse at 50% 65%, rgb(var(--visual-b-rgb) / .2), transparent 68%); transform: translateY(calc(12px - var(--visual-progress) * 12px)) scaleY(calc(.75 + var(--visual-progress) * .25)); }

.visual-caption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 30px;
  padding-top: 17px;
  border-top: 1px solid #b9c6ce26;
  overflow-wrap: anywhere;
}
.visual-kicker { grid-column: 1; color: var(--visual-b); font: 10px/1.8 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.visual-line { grid-column: 1; margin: 0; color: #c9d2d8; font: 16px/1.75 var(--serif); }
.depth-reading .visual-caption .visual-kicker { margin: 0; color: var(--visual-b); font: 10px/1.8 var(--sans); letter-spacing: .14em; }
.depth-reading .visual-caption .visual-line { margin: 0; color: #c9d2d8; font: 16px/1.75 var(--serif); }
.visual-controls { grid-column: 2; grid-row: 1 / 3; display: flex; align-items: stretch; gap: 7px; min-width: 0; max-width: 420px; }
.visual-controls button { flex: 1 1 auto; min-width: 0; min-height: 44px; max-width: 150px; padding: 10px 14px; border: 1px solid #a9becb33; border-radius: 24px; background: transparent; color: #9fb3c2; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; white-space: normal; }
.visual-controls button:hover { color: #eee4d3; background: #e3d5bd0a; border-color: #c8d4d866; }
.visual-controls button[aria-pressed="true"] { color: var(--visual-core); background: rgb(var(--visual-b-rgb) / .1); border-color: rgb(var(--visual-b-rgb) / .7); }
.visual-controls button[data-visual-focus="a"][aria-pressed="true"] { color: var(--visual-a); background: rgb(var(--visual-a-rgb) / .08); border-color: rgb(var(--visual-a-rgb) / .65); }
.visual-controls button:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

/* Keep enough of every composition visible at progress zero to orient the reader. */
[data-visual-kind] .vx-trace { stroke-dasharray: 1; stroke-dashoffset: calc(.72 - var(--visual-progress) * .72); stroke-linecap: round; stroke-linejoin: round; opacity: calc(.48 + var(--visual-progress) * .52); }
[data-visual-kind] .vx-reveal { opacity: calc(.38 + var(--visual-progress) * .62); }
[data-visual-kind] .vx-drift-a { transform-box: fill-box; transform-origin: center; transform: translateX(calc(-18px + var(--visual-progress) * 18px)); }
[data-visual-kind] .vx-drift-b { transform-box: fill-box; transform-origin: center; transform: translateX(calc(18px - var(--visual-progress) * 18px)); }
[data-visual-kind] .vx-core { transform-box: fill-box; transform-origin: center; transform: scale(calc(.82 + var(--visual-progress) * .18)); opacity: calc(.58 + var(--visual-progress) * .42); }
[data-visual-kind] .vx-spark { opacity: calc(.3 + var(--visual-progress) * .7); }
.depth-visual[data-focus="a"] .vx-person-b { opacity: .24; }
.depth-visual[data-focus="b"] .vx-person-a { opacity: .24; }
.depth-visual[data-focus="a"] .vx-person-a { opacity: 1; filter: drop-shadow(0 0 5px rgb(var(--visual-a-rgb) / .38)); }
.depth-visual[data-focus="b"] .vx-person-b { opacity: 1; filter: drop-shadow(0 0 5px rgb(var(--visual-b-rgb) / .38)); }
.depth-visual[data-focus="pair"] .vx-person-a, .depth-visual[data-focus="pair"] .vx-person-b { opacity: 1; }

.depth-person { display: flow-root; }
.depth-portrait {
  position: relative;
  isolation: isolate;
  float: right;
  width: 94px;
  height: 94px;
  margin: -4px 0 13px 18px;
  color: var(--visual-a);
}
.depth-portrait::before { content: ''; position: absolute; inset: 7%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgb(var(--visual-a-rgb) / .15), transparent 70%); opacity: calc(.4 + var(--visual-progress) * .6); transform: scale(calc(.7 + var(--visual-progress) * .3)); }
.depth-person:nth-child(2) .depth-portrait { color: var(--visual-b); }
.depth-person:nth-child(2) .depth-portrait::before { background: radial-gradient(circle, rgb(var(--visual-b-rgb) / .17), transparent 70%); }
.depth-portrait > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.depth-portrait .vx-drift-a { transform: translateX(calc(-5px + var(--visual-progress) * 5px)); }
.depth-portrait .vx-drift-b { transform: translateX(calc(5px - var(--visual-progress) * 5px)); }
.depth-person > p:not(.depth-placement), .depth-person > dl { clear: both; }
.depth-person[data-known="false"] .depth-portrait { opacity: .72; }
.depth-person[data-known="false"] .depth-portrait .vx-trace { stroke-dasharray: .045 .02; stroke-dashoffset: 0; }
.depth-person[data-known="false"] .depth-portrait .vx-core { filter: none; }

.depth-moment { position: relative; isolation: isolate; overflow: hidden; width: 100%; margin: 23px 0 25px; padding: 6px 0; }
.depth-moment::before { content: ''; position: absolute; z-index: 1; inset: 8% 10%; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(ellipse at 33% 55%, rgb(var(--visual-a-rgb) / .09), transparent 55%), radial-gradient(ellipse at 70% 45%, rgb(var(--visual-b-rgb) / .09), transparent 55%); opacity: calc(.5 + var(--visual-progress) * .5); }
.depth-moment > svg { display: block; width: 100%; max-height: 260px; height: auto; margin: 0 auto; overflow: visible; }
.depth-moment .vx-drift-a { transform: translateX(calc(-12px + var(--visual-progress) * 12px)); }
.depth-moment .vx-drift-b { transform: translateX(calc(12px - var(--visual-progress) * 12px)); }

.depth-dynamic[data-visual-kind="detail"] { position: relative; }
.depth-dynamic[data-visual-kind="detail"]::before { content: ''; position: absolute; top: 0; bottom: 4px; left: -1px; width: 1px; background: linear-gradient(var(--visual-a), var(--visual-b), transparent); opacity: calc(.3 + var(--visual-progress) * .7); transform-origin: top; transform: scaleY(calc(.2 + var(--visual-progress) * .8)); }
.depth-dynamic[data-visual-kind="detail"]::after { content: ''; position: absolute; top: -3px; left: -3px; width: 5px; height: 5px; border-radius: 50%; background: var(--visual-core); box-shadow: 0 0 11px rgb(var(--visual-b-rgb) / .4); opacity: calc(.4 + var(--visual-progress) * .6); }
.depth-balance > section[data-visual-kind="detail"] { position: relative; }
.depth-balance > section[data-visual-kind="detail"]::before { content: ''; position: absolute; top: -10px; left: 0; right: 12%; height: 1px; pointer-events: none; background: linear-gradient(90deg, rgb(var(--visual-a-rgb) / .7), rgb(var(--visual-b-rgb) / .28), transparent); transform-origin: left; transform: scaleX(calc(.16 + var(--visual-progress) * .84)); opacity: calc(.3 + var(--visual-progress) * .7); }
.depth-balance > section[data-visual-kind="detail"]::after { content: '✦'; position: absolute; top: -16px; left: -3px; width: 11px; height: 12px; pointer-events: none; color: var(--visual-core); font: 10px/12px var(--serif); text-shadow: 0 0 9px rgb(var(--visual-a-rgb) / .7); opacity: calc(.35 + var(--visual-progress) * .65); }
.depth-voices blockquote[data-visual-kind="detail"] { position: relative; }
.depth-voices blockquote[data-visual-kind="detail"]::before { content: ''; position: absolute; top: 0; bottom: 0; left: -1px; width: 1px; pointer-events: none; background: linear-gradient(var(--visual-a), rgb(var(--visual-a-rgb) / .45), transparent); transform-origin: top; transform: scaleY(calc(.2 + var(--visual-progress) * .8)); opacity: calc(.4 + var(--visual-progress) * .6); }
.depth-voices blockquote[data-visual-kind="detail"]::after { content: '✦'; position: absolute; top: -6px; left: -6px; width: 11px; height: 12px; pointer-events: none; color: var(--visual-a); font: 10px/12px var(--serif); text-shadow: 0 0 8px rgb(var(--visual-a-rgb) / .55); opacity: calc(.3 + var(--visual-progress) * .7); }
.depth-voices blockquote[data-visual-kind="detail"] + blockquote::before { background: linear-gradient(var(--visual-b), rgb(var(--visual-b-rgb) / .45), transparent); }
.depth-voices blockquote[data-visual-kind="detail"] + blockquote::after { color: var(--visual-b); text-shadow: 0 0 8px rgb(var(--visual-b-rgb) / .55); }
.depth-practice[data-visual-kind="detail"] li::before, .depth-practice li[data-visual-kind="detail"]::before { opacity: calc(.45 + var(--visual-progress) * .55); color: var(--visual-b); transform: translateY(calc(5px - var(--visual-progress) * 5px)); }
.depth-question[data-visual-kind="detail"] { position: relative; }
.depth-question[data-visual-kind="detail"]::before { content: ''; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; transform-origin: left; transform: scaleX(calc(.15 + var(--visual-progress) * .85)); background: linear-gradient(90deg, rgb(var(--visual-b-rgb) / .7), transparent); }

@media (max-width: 980px) {
  .visual-caption { gap: 6px 20px; }
  .visual-controls { max-width: 330px; }
  .visual-controls button { padding-inline: 12px; max-width: 120px; }
  .depth-portrait { width: 82px; height: 82px; margin-left: 14px; }
}

@media (max-width: 760px) {
  .depth-visual { margin: 24px 0 30px; }
  .visual-canvas { width: calc(100% + 14px); max-width: none; margin-inline: -7px; }
  .visual-canvas::before { inset: 0 1%; }
  .visual-caption { grid-template-columns: minmax(0, 1fr); gap: 7px; padding-top: 14px; }
  .visual-kicker, .visual-line { grid-column: auto; }
  .visual-kicker, .depth-reading .visual-caption .visual-kicker { font-size: 9px; }
  .visual-line, .depth-reading .visual-caption .visual-line { font-size: 16px; line-height: 1.75; }
  .visual-controls { grid-column: auto; grid-row: auto; width: 100%; max-width: none; gap: 7px; margin-top: 7px; }
  .visual-controls button { flex: 1 1 0; max-width: none; padding: 10px 9px; font-size: 11px; }
  [data-visual-kind] .vx-drift-a { transform: translateX(calc(-10px + var(--visual-progress) * 10px)); }
  [data-visual-kind] .vx-drift-b { transform: translateX(calc(10px - var(--visual-progress) * 10px)); }
  .depth-portrait { width: 80px; height: 80px; margin: -3px 0 12px 16px; }
  .depth-portrait .vx-drift-a { transform: translateX(calc(-4px + var(--visual-progress) * 4px)); }
  .depth-portrait .vx-drift-b { transform: translateX(calc(4px - var(--visual-progress) * 4px)); }
  .depth-moment { margin-block: 20px 22px; }
  .depth-moment > svg { width: 100%; min-height: 100px; }
  .depth-moment .vx-drift-a { transform: translateX(calc(-7px + var(--visual-progress) * 7px)); }
  .depth-moment .vx-drift-b { transform: translateX(calc(7px - var(--visual-progress) * 7px)); }
}

@media (max-width: 380px) {
  .visual-controls { gap: 6px; }
  .visual-controls button { padding-inline: 7px; }
  .depth-portrait { width: 74px; height: 74px; margin-left: 12px; }
}

@media (max-width: 540px) {
  .depth-visual { --hero-mobile-width: 124%; --hero-mobile-margin: -12%; }
  .visual-canvas { width: calc(100% + 40px); margin-inline: -20px; }
  .visual-canvas > svg { width: var(--hero-mobile-width); max-width: none; margin-inline: var(--hero-mobile-margin); }
  .depth-reading[data-depth="Mercury"] .depth-visual,
  .depth-reading[data-depth="Mars"] .depth-visual { --hero-mobile-width: 118%; --hero-mobile-margin: -9%; }
  .depth-reading[data-depth="Moon"] .depth-visual { --hero-mobile-width: 122%; --hero-mobile-margin: -11%; }
}

@media (max-width: 380px) {
  .visual-canvas { width: calc(100% + 32px); margin-inline: -16px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-visual-kind] { --visual-progress: 1 !important; }
  [data-visual-kind] .vx-trace { stroke-dashoffset: 0; opacity: 1; }
  [data-visual-kind] .vx-reveal, [data-visual-kind] .vx-core, [data-visual-kind] .vx-spark { opacity: 1; }
  [data-visual-kind] .vx-drift-a, [data-visual-kind] .vx-drift-b, [data-visual-kind] .vx-core { transform: none; }
  [data-visual-kind] *, [data-visual-kind]::before, [data-visual-kind]::after { animation: none !important; transition: none !important; }
}