/* Scroll choreography belongs to chapters, never to individual rows. */
.section-anchor-target:focus { outline: none; }
.scroll-directed .hero-scene { position: relative; z-index: 0; }
.scroll-directed .hero-scene.is-pinned .hero { position: sticky; top: 18px; }
.scroll-directed .hero-copy {
  transform: translateY(var(--hero-lift, 0px)) scale(var(--hero-scale, 1));
  transform-origin: left 25%; opacity: var(--hero-opacity, 1);
}
.scroll-directed .hero-art {
  transform: translate(var(--pointer-x), var(--pointer-y)) translateY(var(--hero-lift, 0px)) scale(var(--art-scale, 1)) rotate(var(--art-turn, 0deg));
  transform-origin: center 35%; opacity: var(--hero-opacity, 1); transition: none;
}
.scroll-directed .hero-foot { opacity: var(--hero-foot-opacity, 1); }
.scroll-directed .hero-scene.is-pinned + .works-section {
  /* Overlap the hero's pinning runway so it creates no blank space at rest. */
  margin-top: -30vh; border-top: 1px solid var(--line);
}
.scroll-directed :is(.works-content, .about-section, .experience-section, .skills-section, .off-duty, .contact-section) {
  transform: translateY(var(--chapter-lift, 0px)) scale(var(--chapter-scale, 1));
  transform-origin: center var(--chapter-origin, 0%);
  opacity: var(--chapter-opacity, 1); position: relative; z-index: 2;
}
/* Full-width opaque surface; only the inner content receives chapter motion. */
.works-section { position: relative; background: var(--paper); isolation: isolate; }
.scroll-directed .works-section { z-index: 2; padding-bottom: 68px; }
.scroll-directed :is(.hero-copy, .works-content, .about-section, .experience-section, .skills-section, .off-duty, .contact-section):has(:focus-visible) {
  opacity: 1; transform: none;
}
.motion-measuring .hero { position: relative !important; top: auto !important; }

/* A single continuous blue band opens from the pointer, inside normal-flow rows. */
.hover-surface { position: relative; isolation: isolate; }
.hover-surface::before, .hover-surface::after {
  content: ''; position: absolute; inset: 0 -24px; z-index: -1; pointer-events: none;
}
.hover-surface::before {
  background: var(--blue);
  clip-path: inset(var(--hover-y, 50%) 0 calc(100% - var(--hover-y, 50%)) 0);
  transition: clip-path .48s cubic-bezier(.22, .8, .25, 1);
}
.hover-surface::after {
  background: radial-gradient(ellipse 400px 220px at var(--hover-x, 50%) var(--hover-y, 50%), #c1d5ff36, transparent 75%);
  opacity: 0; transition: opacity .35s ease;
}
.hover-surface.highlighted::before, .hover-surface:has(:focus-visible)::before { clip-path: inset(0); }
.hover-surface.highlighted::after, .hover-surface:has(:focus-visible)::after { opacity: 1; }
.hover-surface :is(h3, p, .project-number, .project-number i, .project-link, .project-link span, .status, .tags span, .timeline-org, .skill-label, .tool-list span, .experiment-top .eyebrow, .experiment-end, .experiment-end > small, .experiment-end > i) {
  transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}
.hover-surface:is(.highlighted, :has(:focus-visible)) :is(h3, p, .project-number, .project-number i, .project-link, .project-link span, .status, .tags span, .timeline-org, .skill-label, .tool-list span, .experiment-top .eyebrow, .experiment-end, .experiment-end > small, .experiment-end > i) { color: #fff; }
.hover-surface:is(.highlighted, :has(:focus-visible)) .tags span { border-color: #ffffff65; }
.hover-surface:is(.highlighted, :has(:focus-visible)) .status i { background: #fff; border-color: #fff; }
.hover-surface:is(.highlighted, :has(:focus-visible)) .status-outline i { background: transparent; }
.hover-surface :is(button, a):focus-visible { outline-color: #fff; }
.hover-surface:is(.highlighted, :has(:focus-visible)) .current-label { background: #fff; color: var(--blue); }
.hover-surface:is(.highlighted, :has(:focus-visible)) .timeline-copy::before { background: #fff; }
.skill-grid .hover-surface::before, .skill-grid .hover-surface::after { inset: -12px; }
.experiment.hover-surface::before, .experiment.hover-surface::after { inset: 0; border-radius: 9px; }
@media (max-width: 760px) {
  .scroll-directed .works-section { padding-bottom: 35px; }
  .scroll-directed .hero-copy { transform-origin: center top; }
  .hover-surface::before, .hover-surface::after { inset-inline: -12px; }
  .experiment.hover-surface::before, .experiment.hover-surface::after { inset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scene { height: auto !important; }
  .scroll-directed .hero { position: relative; top: auto; }
  .scroll-directed .works-section { margin-top: 0; }
  .scroll-directed :is(.hero-copy, .hero-art, .hero-foot, .works-content, .about-section, .experience-section, .skills-section, .off-duty, .contact-section) { transform: none; opacity: 1; }
  .hover-surface::before, .hover-surface::after, .hover-surface :is(h3, p, span, i, small) { transition: none; }
}