/* SOURCE VERSION: v1.0.7 / 2026-09-05 */
/* Supplied Henan image pack: integrated as breathing material, never as a gallery. */
.image-sound-layer { position: absolute; z-index: 1; overflow: hidden; pointer-events: none; isolation: isolate; }
.image-sound-layer::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(7,12,13,.86), rgba(7,12,13,.12) 55%, rgba(7,12,13,.8)); mix-blend-mode: multiply; }
.image-sound-layer img { position: absolute; inset: -2.5%; width: 105%; height: 105%; object-fit: cover; opacity: .32; filter: saturate(.72) contrast(1.08) brightness(.72); transform: translate3d(var(--img-x, 0px), var(--img-y, 0px), 0) scale(var(--img-scale, 1)); transform-origin: center; transition: opacity .8s, filter .7s; will-change: transform, filter; }
.image-sound-layer.is-image-visible img { opacity: var(--img-opacity, .32); }
.image-opening-depth figure, .image-river-system figure, .image-material-stage figure figure, .image-memory-layer figure { pointer-events: auto; cursor: pointer; }
.image-sound-meta { position: absolute; z-index: 4; left: 13px; bottom: 12px; color: rgba(242,238,231,.65); font: 8px/1.6 var(--mono); letter-spacing: .1em; }
.image-sound-meta b { display: block; color: var(--cf-gold, #e2b568); font-weight: 400; }
.image-sound-meta span { display: block; color: rgba(242,238,231,.46); }
.opening-chapter .image-opening-depth { inset: 0; z-index: 1; }
.image-opening-depth .opening-river { inset: 4% 0 18% 20%; clip-path: polygon(0 8%, 100% 0, 92% 90%, 4% 100%); opacity: .85; }
.image-opening-depth .opening-roof { inset: 16% 3% 0 52%; clip-path: polygon(4% 0, 100% 9%, 93% 100%, 0 86%); mix-blend-mode: screen; opacity: .58; }
.image-opening-depth .opening-roof img { opacity: .24; filter: grayscale(.5) contrast(1.28) brightness(.56); }
.opening-chapter .cf-opening-sequence { z-index: 4; }
.opening-chapter .cf-opening-copy, .opening-chapter .cf-spectrum-launch { z-index: 8; }
.river-chapter .image-river-system { inset: 9% 5% 18% 5%; z-index: 1; }
.image-river-system .river-hero { inset: 2% 42% 12% 0; clip-path: polygon(0 4%, 97% 0, 100% 87%, 5% 100%); }
.image-river-system .river-water { inset: 22% 0 0 57%; clip-path: polygon(4% 0, 100% 7%, 94% 100%, 0 92%); mix-blend-mode: screen; }
.image-river-system .river-hero img { --img-opacity: .34; filter: saturate(.55) contrast(1.18) brightness(.7); }
.image-river-system .river-water img { --img-opacity: .24; filter: saturate(.75) contrast(1.22) brightness(.66); }
.river-chapter .river-map, .river-chapter .river-controls, .river-chapter .river-heading { position: relative; z-index: 5; }
.river-chapter .river-archives { display: none; }
.human-chapter .image-human-archive { inset: 8% 5% 10%; z-index: 1; display: grid; grid-template-columns: 1.35fr .72fr .82fr; grid-template-rows: 1fr 110px; gap: 11px; pointer-events: none; }
.image-human-archive figure { position: relative; margin: 0; overflow: hidden; border: 1px solid rgba(242,238,231,.15); pointer-events: auto; cursor: pointer; background: #1a2324; clip-path: polygon(2% 0, 100% 4%, 96% 100%, 0 94%); }
.image-human-archive figure:nth-child(1) { grid-row: span 2; clip-path: polygon(0 3%, 97% 0, 100% 96%, 3% 100%); }
.image-human-archive figure:nth-child(3) { grid-column: 2 / 4; clip-path: polygon(1% 9%, 100% 0, 98% 100%, 0 89%); }
.image-human-archive figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,12,13,.75), transparent 55%); }
.image-human-archive img { width: 100%; height: 100%; object-fit: cover; opacity: .5; filter: saturate(.75) contrast(1.15) brightness(.68); transform: translate3d(var(--img-x,0),var(--img-y,0),0) scale(var(--img-scale,1)); transition: .6s; }
.image-human-archive figure:hover img, .image-human-archive figure:focus img { opacity: .8; transform: scale(1.025); }
.image-human-archive figcaption { position: absolute; z-index: 3; left: 12px; bottom: 10px; color: rgba(242,238,231,.72); font: 8px/1.5 var(--mono); letter-spacing: .1em; }
.human-chapter .memory-fragments { display: none; }
.human-chapter .human-header, .human-chapter .human-sounds, .human-chapter .human-footer { position: relative; z-index: 6; }
.ancient-chapter .image-material-stage { position: absolute; z-index: 1; inset: 4% 4% 7%; overflow: hidden; pointer-events: none; }
.image-material-stage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 25%, rgba(7,12,13,.6) 92%); }
.image-material-stage figure { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .7s; mix-blend-mode: screen; }
.image-material-stage figure.is-active { opacity: 1; }
.image-material-stage img { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; opacity: .2; filter: saturate(.42) contrast(1.3) brightness(.65); transform: translate3d(var(--img-x,0),var(--img-y,0),0) scale(var(--img-scale,1)); transition: .7s; }
.image-material-stage .material-wash { opacity: .1; mix-blend-mode: color-dodge; filter: saturate(.95) contrast(1.25) brightness(.82); }
.ancient-chapter .ancient-lab, .ancient-chapter .ancient-note { position: relative; z-index: 5; }
.new-chapter .image-new-movement { position: relative; z-index: 2; display: grid; grid-template-columns: 1.25fr .78fr; gap: 12px; width: min(700px, 57vw); margin: 0 6% 24px auto; transform: rotate(-1deg); pointer-events: none; }
.image-new-movement figure { position: relative; height: 155px; margin: 0; overflow: hidden; border: 1px solid rgba(242,238,231,.22); pointer-events: auto; cursor: pointer; clip-path: polygon(1% 4%, 100% 0, 96% 95%, 3% 100%); }
.image-new-movement figure:nth-child(2) { height: 115px; align-self: end; clip-path: polygon(4% 0, 100% 7%, 94% 100%, 0 91%); }
.image-new-movement figure::before { content: "CITY / RAIL / SIGNAL"; position: absolute; z-index: 3; left: 11px; top: 10px; color: rgba(242,238,231,.72); font: 8px var(--mono); letter-spacing: .15em; }
.image-new-movement img { width: 100%; height: 100%; object-fit: cover; opacity: .56; filter: saturate(.7) contrast(1.2) brightness(.62); transform: translate3d(var(--img-x,0),var(--img-y,0),0) scale(var(--img-scale,1)); transition: .6s; }
.image-new-movement figure:hover img, .image-new-movement figure:focus img { opacity: .83; }
.new-chapter .cf-collage { display: none; }
.new-chapter .new-intro, .new-chapter .new-sounds, .new-chapter .resonance-invitation { position: relative; z-index: 6; }
.image-memory-layer { position: absolute; z-index: 1; inset: 7% 5% 10%; pointer-events: none; opacity: .9; }
.image-memory-layer figure { position: absolute; margin: 0; overflow: hidden; opacity: 0; transition: opacity 1.3s; }
.image-memory-layer figure.is-recalled { opacity: .2; }
.image-memory-layer figure img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.35) contrast(1.18) brightness(.6); }
.image-memory-layer figure:nth-child(1) { inset: 0 48% 32% 0; clip-path: polygon(0 7%, 96% 0, 100% 92%, 4% 100%); }
.image-memory-layer figure:nth-child(2) { inset: 32% 0 0 54%; clip-path: polygon(4% 0, 100% 8%, 95% 100%, 0 92%); }
.image-memory-layer figure:nth-child(3) { inset: 12% 18% 27% 32%; clip-path: polygon(2% 0, 100% 5%, 95% 100%, 0 92%); }
.image-memory-layer figure:nth-child(4) { inset: 52% 30% 0 5%; clip-path: polygon(0 5%, 100% 0, 94% 95%, 4% 100%); }
.resonance-chapter .image-memory-layer { opacity: .58; }
.epilogue-chapter .image-memory-layer { opacity: .7; }
.epilogue-chapter .image-memory-layer figure.is-recalled { opacity: .15; }
.image-sound-archive-action { position: absolute; z-index: 5; right: 11px; bottom: 10px; padding: 4px 0; border-bottom: 1px solid var(--cf-coral, #ed654f); color: #f2eee7; background: transparent; font: 8px var(--mono); opacity: 0; transition: opacity .3s; }
.image-human-archive figure:hover .image-sound-archive-action, .image-human-archive figure:focus .image-sound-archive-action, .image-new-movement figure:hover .image-sound-archive-action, .image-new-movement figure:focus .image-sound-archive-action { opacity: 1; }
#archiveDetail .image-source-meta { display: block; margin-top: 6px; color: var(--cf-jade, #79b5a5); font: 8px var(--mono); letter-spacing: .12em; }
.about-image-note { margin-top: 17px; padding-top: 14px; border-top: 1px solid rgba(121,181,165,.24); color: #98a49b; font: 11px/1.8 var(--serif); }

@media (max-width: 760px) {
  .image-opening-depth .opening-river { inset: 10% -12% 28% 2%; }
  .image-opening-depth .opening-roof { inset: 14% -9% 18% 48%; }
  .river-chapter .image-river-system { inset: 12% -10% 26% -10%; }
  .image-river-system .river-hero { inset: 0 27% 18% 0; }
  .image-river-system .river-water { inset: 27% 0 0 49%; }
  .human-chapter .image-human-archive { inset: 7% 3% 22%; grid-template-rows: 130px 72px; gap: 6px; }
  .ancient-chapter .image-material-stage { inset: 6% -12% 12%; }
  .new-chapter .image-new-movement { width: 94%; margin: 10px auto 22px; grid-template-columns: 1.15fr .85fr; }
  .image-new-movement figure { height: 104px; }
  .image-new-movement figure:nth-child(2) { height: 82px; }
  .image-sound-meta { font-size: 7px; }
  .image-memory-layer { inset: 10% 0 14%; }
}

@media (prefers-reduced-motion: reduce) {
  .image-sound-layer img, .image-human-archive img, .image-material-stage img, .image-new-movement img { transform: none !important; transition: opacity .2s; }
}