/* Progressive enhancement: source sections stay readable without motion. */
:root { --hero-reveal-ready:1; }
.hero-reveal-scene,.hero-reveal-stage { display:contents; }
.hero-blocks,.hero-dust,.hero-reveal-entry,.hero-action-layer,.hero-action-fragment { display:none; }
.hero-actions-placeholder,.hero-action-identity-space { visibility:hidden; }
@media (prefers-reduced-motion:no-preference) {
  .hero-reveal-scene.is-active {
    position:relative; display:block; height:calc(var(--hero-stage-height) + var(--hero-scroll-distance) + var(--about-reading-distance,0px)); overflow-anchor:none; overflow:clip;
  }
  .is-active > .hero-reveal-stage {
    position:sticky; top:var(--hero-stage-top); display:block; height:var(--hero-stage-height); overflow:visible; isolation:isolate;
    /* Keep the dock's layout reserve, but let the story pass behind the float.
       The scene clips overflow without creating another scrolling container. */
    clip-path:inset(calc(-1 * var(--hero-stage-top)) 0 0);
  }
  .is-active .home-about { --about-wall-inset:var(--hero-stage-top); }
  .is-active > .hero-reveal-stage > .hero {
    position:absolute; width:100%; height:var(--hero-panel-height); min-height:0; clip-path:inset(50%); pointer-events:none;
  }
  .is-active > .hero-reveal-stage > .hero-action-layer {
    display:flex; z-index:4; inset:0 auto auto 0; clip-path:none;
    background:none; pointer-events:none;
  }
  .is-active > .hero-reveal-stage > .hero-action-layer .hero-actions::before { display:none; }
  .is-active .hero-action-layer .hero-actions .button { pointer-events:auto; }
  .hero-reveal-scene.is-active > .hero-reveal-stage > .hero-action-layer.is-fragmented .hero-actions .button {
    overflow:visible; pointer-events:none; color:transparent; border-color:transparent;
    background:transparent; box-shadow:none; outline:none;
  }
  .hero-reveal-scene.is-active > .hero-reveal-stage > .hero-action-layer.is-fragmented .hero-actions .button::before { opacity:0; transition:none; }
  .hero-reveal-scene.is-active > .hero-reveal-stage > .hero-action-layer.is-fragmented .hero-actions .button > .link-label { opacity:0; }
  .is-active .hero-action-layer .hero-actions .button > .hero-action-fragment {
    display:block; position:absolute; z-index:1; pointer-events:auto; cursor:pointer;
    background:transparent; border:0; padding:0; margin:0;
  }
  .is-active .hero-reveal-stage.is-actions-closed .hero-block .hero-actions .button { visibility:hidden; }
  .is-active > .hero-reveal-stage > .hero-reveal-content {
    position:absolute; z-index:0; top:50%; left:0; width:100%; transform:translateY(-50%);
  }
  .is-reading > .hero-reveal-stage > .hero-reveal-content { top:0; transform:none; }
  .is-active .hero-blocks {
    display:block; position:absolute; z-index:2; inset:0 0 auto; height:var(--hero-panel-height); pointer-events:none;
  }
  .is-active .hero-block {
    position:absolute; left:0; width:50%; overflow:hidden; will-change:transform;
  }
  .is-active .hero-block--right { left:50%; }
  .is-active .hero-block > .hero {
    position:absolute; left:0; width:var(--hero-stage-width); max-width:none; height:var(--hero-panel-height); min-height:0; margin:0;
  }
  .is-active .hero-block--right > .hero { left:-100%; }
  .is-active .hero-dust {
    display:block; position:absolute; z-index:3; top:0; left:0; width:100%; height:var(--hero-panel-height); pointer-events:none;
  }
  .is-active .about-wing {
    /* Reading can rise while the doors' spring is still settling. Keep the
       sideways mask, but leave vertical clipping to the viewport stage. */
    --about-mask-inset:calc(-1 * (var(--about-reading-distance,0px) + var(--hero-stage-height)));
    display:block; min-width:0; overflow:visible;
    clip-path:inset(var(--about-mask-inset) 0);
  }
  .is-active .about-wing > :first-child { transform:translateX(var(--content-conceal,100%)); }
  .is-active .about-wing--right > :first-child { transform:translateX(calc(-1 * var(--content-conceal,100%))); }
  .is-active > .hero-reveal-stage > .hero-reveal-entry {
    position:absolute; display:block; width:1px; height:1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }
  @media (max-width:767px) {
    .is-active .about-wing { clip-path:inset(var(--about-mask-inset) calc((1 - var(--content-unfold,0)) * 50%)); }
    .is-active .about-wing > :first-child { transform:translateX(calc(var(--content-conceal,100%) * .18)); }
    .is-active .about-wing--right > :first-child { transform:translateX(calc(var(--content-conceal,100%) * -.18)); }
  }
}
@media print {
  .hero-reveal-scene.is-active,.is-active > .hero-reveal-stage { display:contents; overflow:visible; clip-path:none; }
  .is-active .home-about { --about-wall-inset:0px; }
  .is-active > .hero-reveal-stage > .hero,.is-active > .hero-reveal-stage > .hero-reveal-content {
    position:static; width:auto; height:auto; clip-path:none; transform:none;
  }
  .is-active .hero-blocks,.is-active .hero-dust,.is-active .hero-reveal-entry { display:none; }
  .is-active > .hero-reveal-stage > .hero-action-layer { display:none; }
  .is-active .about-wing { overflow:visible; clip-path:none; }
  .is-active .about-wing > :first-child { transform:none; }
}