/* Hero → Message transition (AUREL ONE port). Values are driven by js/hero-aperture.js. */
[data-ap-run] { position: relative; z-index: 2; height: calc(200vh - var(--ap-hdr, 72px)); height: calc(200dvh - var(--ap-hdr, 72px)); pointer-events: none; }
[data-ap-run] > section { position: sticky !important; top: var(--ap-hdr, 72px); height: calc(100vh - var(--ap-hdr, 72px)); height: calc(100dvh - var(--ap-hdr, 72px)); background: transparent !important; pointer-events: auto; }

/* the Message scene sits directly underneath the hero, already pinned,
   so the closing aperture reveals it in place (no empty scroll after the close) */
[data-ap-run] + main > section[data-screen-label="Message"] {
  margin-top: calc(-200vh + var(--ap-hdr, 72px)); margin-top: calc(-200dvh + var(--ap-hdr, 72px));
  height: 360vh !important;   /* ~.85 screen under the closing photo + 1.75 screens of reading */
}

/* the photo layer closes like an aperture */
.ap-photo {
  position: absolute; inset: 0;
  clip-path: inset(calc(var(--ap-wipe, 0) * 1%) 0 calc(var(--ap-wipe, 0) * 1%) 0);
  transform: translate3d(0, calc(var(--ap-ty, 0) * 1px), 0) scale(var(--ap-scale, 1));
  transform-origin: 50% 45%; visibility: var(--ap-vis, visible);
  will-change: clip-path, transform;
}
/* title lines leave through overflow masks */
.ap-mask { display: block; overflow: clip; padding-block: .055em; margin-block: -.055em; }
.ap-line { display: block; transform: translate3d(0, calc(var(--l, 0) * -120%), 0); filter: blur(calc(var(--l, 0) * 5px)); }
.ap-line0 { --l: var(--ap-l0, 0); }
.ap-line1 { --l: var(--ap-l1, 0); }
.ap-lead { display: block; transform: translate3d(0, calc(var(--ap-lead, 0) * -100%), 0); opacity: calc(1 - var(--ap-lead, 0)); }
.ap-ctl { transform: translate3d(0, calc(var(--c, 0) * -12px), 0); opacity: calc(1 - var(--c, 0)); }
.ap-c0 { --c: var(--ap-ctl0, 0); }
.ap-c1 { --c: var(--ap-ctl1, 0); }

@media (prefers-reduced-motion: reduce) {
  [data-ap-run] { height: auto; z-index: auto; pointer-events: auto; }
  [data-ap-run] > section { position: relative !important; top: 0; height: auto; background: #0e141b !important; }
  [data-ap-run] + main > section[data-screen-label="Message"] { margin-top: 0; height: 200vh !important; }
}