/* A measured scroll layer over the editorial layout. The page remains readable without it. */
.scroll-progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 50; overflow: hidden; pointer-events: none; background: transparent; }
.scroll-progress span { display: block; width: 100%; height: 100%; transform-origin: left center; transform: scaleX(var(--page-progress, 0)); background: linear-gradient(90deg, #668fc7, #b9d7ff); }

@media (max-width: 980px), (pointer: coarse) {
  .scroll-progress { display: none; }
}

@media (min-width: 981px) {
  body::before { content: ""; position: fixed; z-index: 0; pointer-events: none; top: 7vh; right: -15vw; width: min(58vw, 820px); aspect-ratio: 1; background: radial-gradient(circle, rgba(67, 114, 179, .13) 0%, rgba(67, 114, 179, .055) 32%, transparent 68%); transform: translate3d(0, var(--ambient-shift, 0px), 0); }
  .topbar, .portfolio { position: relative; z-index: 1; }
  .portrait img { transform: translate3d(0, var(--portrait-shift, 0px), 0) scale(1.04); }
  .portrait::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(193, 219, 255, .23); }
}

.section-heading > span { position: relative; overflow: hidden; }
.motion-ready .section-heading > span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #8cb9ef 0%, #7297c4 45%, transparent 100%); transform: scaleX(0); transform-origin: left center; }
.motion-ready .section-heading.is-drawn > span::after { transform: scaleX(1); }

.motion-ready .experience-row { position: relative; }
.motion-ready .experience-row::before, .motion-ready .experience-row::after { content: ""; position: absolute; top: 25px; bottom: 25px; left: 104px; width: 2px; border-radius: 2px; pointer-events: none; }
.motion-ready .experience-row::before { background: rgba(137, 172, 213, .18); }
.motion-ready .experience-row::after { background: linear-gradient(#a4c8f7, #658cc1); transform-origin: top center; transform: scaleY(var(--row-progress, 0)); }
.motion-ready .experience-row .dates { transition: color 300ms ease; }
.motion-ready .experience-row[data-scroll-active] .dates { color: #dceaff; }
.motion-ready .experience-row[data-scroll-active] h3 { color: #fff; }

@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduced"]) .motion-ready .section-heading > span::after { transition: transform 1050ms cubic-bezier(.17,.67,.18,1); }
  html:not([data-motion="reduced"]) .motion-ready .experience-row.reveal.in-view { animation: scroll-row-enter 800ms cubic-bezier(.16,.76,.25,1) both; }
  html:not([data-motion="reduced"]) .motion-ready .project-row.reveal.in-view,
  html:not([data-motion="reduced"]) .motion-ready .contact.reveal.in-view { animation: scroll-row-enter 750ms cubic-bezier(.16,.76,.25,1) both; }
  @keyframes scroll-row-enter { from { opacity: .52; transform: translate3d(0, 23px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
}

@media (max-width: 1180px) and (min-width: 981px) {
  .motion-ready .experience-row::before, .motion-ready .experience-row::after { left: 84px; }
}
@media (pointer: coarse) and (min-width: 981px) {
  body::before, .portrait::after { display: none; }
  .portfolio { display: block; width: min(720px, calc(100% - 64px)); padding-top: 20px; }
  .identity { position: static; padding: 0; }
  .identity-heading { justify-content: flex-start; gap: 36px; }
  .identity h1 { font-size: 72px; }
  .portrait { width: 150px; }
  .portrait img { transform: none; }
  .section-nav { flex-direction: row; flex-wrap: wrap; gap: 6px 27px; margin-top: 22px; }
  .section-nav a { gap: 0; }
  .section-nav i { display: none; }
  .identity-actions { margin-top: 18px; }
  .content { margin-top: 65px; }
  .experience-row, .project-row, .early-list li, .education-list li { grid-template-columns: 92px minmax(0, 1fr); gap: 26px; }
  .motion-ready .experience-row::before, .motion-ready .experience-row::after { left: 104px; }
}
@media (max-width: 560px) {
  .motion-ready .experience-row::before, .motion-ready .experience-row::after { left: -9px; top: 27px; bottom: 27px; width: 2px; }
  html:not([data-motion="reduced"]) .motion-ready .experience-row.reveal.in-view { animation-duration: 600ms; }
}
@media (prefers-reduced-motion: reduce) {
  body::before { display: none; }
  .motion-ready .section-heading > span::after { transform: scaleX(1); }
  .motion-ready .experience-row::after { transform: scaleY(1); opacity: .45; }
}
html[data-motion="reduced"] body::before { display: none; }
html[data-motion="reduced"] .motion-ready .section-heading > span::after { transform: scaleX(1); }
html[data-motion="reduced"] .motion-ready .experience-row::after { transform: scaleY(1); opacity: .45; }