/* One camera grammar for real artwork. Reading/layout never depend on motion. */
@media screen and (prefers-reduced-motion:no-preference) {
  /* Give the last 90%-wide panel the same left-aligned stop as the earlier ones.
     The spacer includes the existing track gap; no clipped previous copy at rest. */
  body[data-studio-home] #projects.is-reel-pinned .showcase-reel-track::after {
    content:"";flex:0 0 max(0px,calc(10% - clamp(16px,3vw,42px)));
  }

  /* Outer media link carries camera motion; long screenshots own their inner transform. */
  body[data-studio-home].is-home-immersive #projects .showcase-project-image {
    position:relative;overflow:hidden;
  }
  body[data-studio-home].is-home-immersive #projects .showcase-project-image > a {
    display:block;transform-origin:center;
    transform:translate3d(calc(var(--immerse-panel-distance,0) * -38px),
      calc((1 - var(--immerse-panel-entry,1)) * 54px),0)
      scale(calc(1.025 + var(--immerse-panel-distance,0) * var(--immerse-panel-distance,0) * .12
        + var(--reel-hold-progress,0) * .02));
    clip-path:inset(calc((1 - var(--immerse-panel-entry,1)) * 9%)
      calc((1 - var(--immerse-panel-entry,1)) * 12%));
    transition:none;
  }
  body[data-studio-home].is-home-immersive #projects .showcase-project-image:focus-within {
    overflow:visible;
  }
  body[data-studio-home].is-home-immersive #projects .showcase-project-image > a:focus-visible {
    transform:none;clip-path:none;
  }
  body[data-studio-home].is-home-immersive :is(#lab,#site-agent,#latest,#about,#contact) > .section-head {
    position:relative;
  }
  body[data-studio-home].is-home-immersive :is(#lab,#site-agent,#latest,#about,#contact) > .section-head::after {
    content:"";position:absolute;left:0;top:-22px;width:100%;height:1px;
    background:linear-gradient(90deg,var(--scene-accent,var(--fg)),transparent 75%);
    transform:scaleX(var(--immerse-chapter-entry,1));transform-origin:left;pointer-events:none;
    opacity:.55;
  }
}

/* Smaller viewports keep the same sequence, with shorter spatial travel. */
@media screen and (max-width:767px) and (prefers-reduced-motion:no-preference) {
  body[data-studio-home].is-home-immersive #projects .showcase-project-image > a {
    transform:translateX(calc(var(--immerse-panel-distance,0) * -9px)) scale(1.025);
    clip-path:none;
  }
}
