/* HERO V1 A: x440/y120, 1536x864 at 1920x1080. Source pixels stay untouched. */
.dna-art.dna-plate {
  --dna-frame-width: 80vw;
  --dna-frame-height: 80svh;
  inset: auto;
  left: 22.916666667vw;
  top: 11.111111111svh;
  width: 80vw;
  height: 80svh;
  pointer-events: none;
  mask-image: url('assets/dna-organic-fade.png'), linear-gradient(to right, #000 0%, #000 86%, rgb(0 0 0 / .84) 90%, rgb(0 0 0 / .4) 94%, rgb(0 0 0 / .05) 98%, transparent 100%);
  mask-size: contain, min(var(--dna-frame-width), calc(var(--dna-frame-height) * 1672 / 941)) min(var(--dna-frame-height), calc(var(--dna-frame-width) * 941 / 1672));
  mask-position: center;
  mask-repeat: no-repeat;
  mask-mode: alpha;
  mask-composite: intersect;
}
.dna-plate > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.dna-illumination {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.dna-illumination[hidden] { display: none; }
.mie-plate { display: block; width: 100%; height: 100%; }
.optical-shell > canvas { display: block; width: 100%; height: 100%; }
.scroll-cue { will-change: opacity; }
html:not(.static-mode) .h3-first,
html:not(.static-mode) .h3-second { contain: layout paint; }
/* One portrait crop shared across the hand-off, never a separately edited image. */
@media (max-width: 700px) {
  .dna-art.dna-plate {
    --dna-frame-width: 110.222222222svh;
    --dna-frame-height: 62svh;
    left: auto;
    right: -40svh;
    top: 26svh;
    width: 110.222222222svh;
    height: 62svh;
  }
}