/* Generated art is the composition; small overlays add scroll-bound light. */
.depth-visual .visual-canvas:has(> .raster-art) {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  overflow: visible;
}
.visual-canvas:has(> .raster-art)::before,
.visual-canvas:has(> .raster-art)::after { display: none; }
.raster-art {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  aspect-ratio: 3 / 2;
  margin: 0;
  overflow: hidden;
  background: transparent;
  line-height: 0;
}
.raster-art > .art-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  transform-origin: center;
  transform: translateY(calc(1.5px - var(--visual-progress, 1) * 1.5px)) scale(calc(.985 + var(--visual-progress, 1) * .015));
}
.raster-art[data-art] { mask-image: linear-gradient(180deg, transparent, #000 2%, #000 98%, transparent); }
.raster-art[data-art]::after { content: ''; position: absolute; z-index: 2; inset: 0; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(105deg, #a3d7e90c, transparent 42%, #e6b4c40c); opacity: calc(.55 + var(--visual-progress, 1) * .45); }
.depth-visual[data-focus="a"] .raster-art[data-art]::after { background: linear-gradient(105deg, #93d5ec29, transparent 72%); }
.depth-visual[data-focus="b"] .raster-art[data-art]::after { background: linear-gradient(255deg, #e8bdc929, transparent 72%); }
.depth-visual[data-focus="a"] .raster-art > .art-image { filter: saturate(1.025) brightness(1.01); }
.depth-visual[data-focus="b"] .raster-art > .art-image { filter: saturate(1.04) brightness(1.01); }
.raster-art > .art-veil {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: calc(.12 + var(--visual-progress, 1) * .18);
}
.art-veil .art-thread { fill: none; stroke: #f4e5c8; stroke-width: .85; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(.78 - var(--visual-progress, 1) * .78); }
.art-veil .art-spark { fill: #fff0d4; opacity: calc(.35 + var(--visual-progress, 1) * .65); filter: drop-shadow(0 0 4px #f5d8b699); }
.raster-art > .art-glint {
  position: absolute;
  z-index: 2;
  top: -30%;
  bottom: -30%;
  left: -45%;
  width: 42%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 15%, #f1dfbf12 43%, #e4f4f22b 51%, #f1dfbf0a 59%, transparent 80%);
  mix-blend-mode: screen;
  transform: translateX(calc(var(--visual-progress, 1) * 430%)) rotate(-17deg);
  opacity: .52;
}
.raster-art[data-art="mercury"] > .art-glint { transform: translateX(calc(var(--visual-progress, 1) * 430%)) rotate(14deg); }
.raster-art[data-art="moon"] > .art-glint { opacity: .3; }

/* Art plates, with the actual sign kept as a readable caption over the image. */
.depth-portrait:has(> .portrait-art) { float: right; width: 144px; height: 98px; margin: -2px 0 16px 20px; }
.depth-portrait:has(> .portrait-art)::before { display: none; }
.depth-person .depth-portrait:has(> .portrait-art),
.reading-archive .depth-portrait:has(> .portrait-art) { opacity: 1; }
.portrait-art { position: relative; isolation: isolate; display: block; width: 100%; height: 100%; overflow: hidden; border: 1px solid #c6d3d33d; border-radius: 2px; background: #0a1723; }
.portrait-art > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(calc(.99 + var(--visual-progress, 1) * .01)); }
.portrait-art::after { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(150deg, #75c1df0d, transparent 52%, #06101c99); }
.portrait-art[data-person="1"] { border-color: #ddc2c33d; }
.portrait-art[data-person="1"]::after { background: linear-gradient(210deg, #e2b0c318, transparent 52%, #06101c99); }
.portrait-art .portrait-sign { position: absolute; z-index: 2; right: 8px; bottom: 6px; color: #d8f2fa; font: 28px/1 'Times New Roman', Georgia, serif; font-variant-emoji: text; text-shadow: 0 1px 6px #020b18, 0 0 14px #020b18; }
.portrait-art[data-person="1"] .portrait-sign { color: #f3d5df; }
.portrait-art[data-known="false"] { border-style: dashed; border-color: #a5bac14d; }
.portrait-art[data-known="false"] .portrait-sign { color: #c1cbd4; font-size: 24px; letter-spacing: .05em; }

/* The image stays below the calculated chart and never receives pointer events. */
.chart-stage > .chart-art-backdrop { position: absolute; z-index: 0; inset: 0 0 auto; width: 100%; aspect-ratio: 1; overflow: hidden; opacity: .22; pointer-events: none; mask-image: radial-gradient(ellipse at 50% 48%, #000 20%, #0009 45%, transparent 69%); }
.chart-art-backdrop > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.72) brightness(.88); }
.chart-stage > .synastry-chart { position: relative; z-index: 1; }

.entry-intro .entry-art { position: relative; width: 100%; max-width: 600px; margin: 26px 0 18px; aspect-ratio: 3 / 2; opacity: 1; mask-image: linear-gradient(180deg, transparent, #000 10%, #000 86%, transparent); }
.entry-art > img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.entry-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #09131e18, transparent 35%, #09131e16); }

.report-mast:has(> .report-art) { isolation: isolate; }
.report-mast > .report-art { position: absolute; z-index: -1; inset: 0 0 auto; width: 100%; height: min(640px, 100%); overflow: hidden; pointer-events: none; mask-image: linear-gradient(180deg, #000 4%, #000 34%, transparent 95%); }
.report-art > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 43%; opacity: .58; filter: saturate(.82) brightness(.65); }
.report-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #09131e0d, #09131e5c 38%, #09131ee6 88%); }
.report-mast:has(> .report-art) > h1 { text-shadow: 0 2px 24px #05111bcc; }
.report-mast:has(> .report-art) > .report-names { text-shadow: 0 1px 15px #04101de6; }

#calculation-journey:has(> .journey-art) { isolation: isolate; }
#calculation-journey > .journey-art { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.journey-art > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .35; filter: saturate(.8) brightness(.8); }
.journey-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #08131ee6, #08131e44 26%, #08131e55 66%, #08131ef2), radial-gradient(ellipse at center, transparent 20%, #08131e8c 75%); }
#calculation-journey:has(> .journey-art) > .journey-stage { z-index: 1; }
#calculation-journey:has(> .journey-art) > .eyebrow,
#calculation-journey:has(> .journey-art) > .journey-names,
#calculation-journey:has(> .journey-art) > .journey-caption,
#calculation-journey:has(> .journey-art) > .journey-skip { position: relative; z-index: 3; }
#calculation-journey:has(> .journey-art) > .journey-skip { background: #0b1723bd; }

/* The normal card is 4:5; unusually long names let its text area grow naturally. */
.keepsake-layout:has(.keepsake-image) { container-type: inline-size; }
.keepsake-art:has(> .keepsake-image) {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(170px, 1fr) auto;
  width: min(440px, 100%);
  max-width: 440px;
  height: auto;
  min-height: min(550px, calc((100cqw - 70px) * .625));
  aspect-ratio: auto;
  padding: 29px 27px 30px;
  overflow: hidden;
  border: 1px solid #d8c09b85;
  border-radius: 3px;
  background: #0a1723;
}
.keepsake-art:has(> .keepsake-image)::before { z-index: 3; inset: 10px; border-color: #ead7b438; }
.keepsake-art:has(> .keepsake-image)::after { z-index: 1; inset: 0; transform: none; background: linear-gradient(180deg, #07121b8c, #07121b08 22%, #07121b00 40%, #07121b66 65%, #07121bf5); }
.keepsake-art > .keepsake-image { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 44%; pointer-events: none; }
.keepsake-art:has(> .keepsake-image) > .eyebrow { position: relative; z-index: 2; grid-row: 1; max-width: 95%; margin: 0 auto; color: #e9d8b7; font-size: 9px; line-height: 1.8; letter-spacing: .13em; text-shadow: 0 1px 8px #07121bee; }
.keepsake-art > svg.keepsake-signature { position: absolute; z-index: 2; top: 17%; left: 26%; width: 48%; max-width: 48%; height: 35%; max-height: 35%; margin: 0; overflow: visible; opacity: .32; pointer-events: none; }
.keepsake-art > .keepsake-copy { position: relative; z-index: 2; grid-row: 3; align-self: end; min-width: 0; max-width: 100%; padding-top: 24px; overflow-wrap: anywhere; text-shadow: 0 2px 14px #03101bf2; }
.keepsake-copy .keepsake-names { margin: 0 0 13px; max-width: 100%; color: #f7ead0; font: italic clamp(22px, 2.1vw, 29px)/1.55 var(--serif); overflow-wrap: anywhere; text-wrap: balance; }
.keepsake-copy .keepsake-names i { font-size: .7em; }
.keepsake-copy .keepsake-title { margin: 0; max-width: 100%; color: #e8d1a7; font: 400 clamp(18px, 1.8vw, 24px)/1.6 var(--serif); overflow-wrap: anywhere; text-wrap: balance; }
.keepsake-art.is-chosen:has(> .keepsake-image) { border-color: #efd6a7; box-shadow: 0 0 48px #e8ca9621, 0 24px 70px #0004; }
.keepsake-art.is-chosen > .keepsake-image { filter: brightness(1.035); }
.keepsake-art.is-chosen > svg.keepsake-signature { opacity: .48; }

/* Taller images need enough viewport space before making the art column sticky. */
.reading-visual-column:has(.raster-art) { position: relative; top: auto; }
@media (min-width: 981px) and (min-height: 900px) {
  .reading-visual-column:has(.raster-art) { position: sticky; top: 146px; }
}

@media (max-width: 980px) {
  .depth-portrait:has(> .portrait-art) { width: 134px; height: 92px; margin-left: 16px; }
  .keepsake-art:has(> .keepsake-image) { min-height: min(550px, calc((100cqw - 35px) * .625)); padding: 26px 24px 27px; grid-template-rows: auto minmax(150px, 1fr) auto; }
}

@media (max-width: 760px) {
  .depth-visual .visual-canvas:has(> .raster-art) { width: 100%; max-width: none; margin-inline: 0; }
  .raster-art > .art-image { transform: translateY(calc(1px - var(--visual-progress, 1) * 1px)) scale(calc(.987 + var(--visual-progress, 1) * .013)); }
  .raster-art > .art-veil { opacity: calc(.1 + var(--visual-progress, 1) * .15); }
  .raster-art > .art-glint { opacity: .4; }
  .depth-portrait:has(> .portrait-art) { width: 140px; height: 96px; margin: 0 0 15px 17px; }
  .portrait-art .portrait-sign { font-size: 27px; right: 7px; bottom: 6px; }
  .entry-intro .entry-art { width: 100%; max-width: none; margin: 22px 0 18px; }
  .report-mast > .report-art { height: min(470px, 100%); }
  .report-art > img { object-position: center 40%; opacity: .5; }
  .chart-stage > .chart-art-backdrop { opacity: .2; }
  .journey-art > img { opacity: .32; object-position: center; }
  .keepsake-art:has(> .keepsake-image) { width: min(370px, 100%); max-width: 370px; min-height: min(462.5px, 125cqw); padding: 24px 24px 27px; grid-template-rows: auto minmax(139px, 1fr) auto; }
  .keepsake-art:has(> .keepsake-image)::before { inset: 9px; }
  .keepsake-art:has(> .keepsake-image) > .eyebrow { font-size: 8px; letter-spacing: .1em; }
  .keepsake-copy .keepsake-names { margin-bottom: 12px; font-size: 25px; line-height: 1.55; }
  .keepsake-copy .keepsake-title { font-size: 21px; line-height: 1.6; }
  .keepsake-art > .keepsake-copy { padding-top: 22px; }
}

@media (max-width: 380px) {
  .depth-portrait:has(> .portrait-art) { width: 132px; height: 91px; margin-left: 14px; }
  .keepsake-art:has(> .keepsake-image) { padding: 23px 22px 25px; grid-template-rows: auto minmax(128px, 1fr) auto; }
  .keepsake-copy .keepsake-names { font-size: 24px; }
  .keepsake-copy .keepsake-title { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .raster-art > .art-image, .portrait-art > img { transform: none; }
  .raster-art > .art-glint { display: none; }
  .raster-art > .art-veil { opacity: .2; }
  .art-veil .art-thread { stroke-dashoffset: 0; }
  .art-veil .art-spark { opacity: 1; }
  .raster-art *, .portrait-art *, .entry-art *, .report-art *, .journey-art *, .keepsake-art:has(> .keepsake-image) * { animation: none !important; transition: none !important; }
}