/* Transform and opacity only; document scrolling always remains native. */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-duration: 650ms;
  --reveal-distance: 24px;
}
.reading-progress {
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
}
.motion-enabled .site-header {
  transition: background-color 250ms, box-shadow 250ms;
}
.site-header.is-scrolled { background: rgba(245,244,238,.985); box-shadow: 0 5px 20px #24282006; }
.brand-wordmark { transform-origin: left center; }
.motion-enabled .brand-wordmark { transition: transform 300ms var(--motion-ease); }
.motion-enabled .site-header.is-scrolled .brand-wordmark { transform: scale(.96); }
.motion-enabled .reveal.observed {
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance), 0);
  transition: opacity var(--motion-duration) var(--motion-ease), transform var(--motion-duration) var(--motion-ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion-enabled .reveal.observed.is-visible,
.motion-enabled .reveal.observed:focus-within {
  opacity: 1;
  transform: none;
}
.motion-enabled .project-card.observed:not(.is-visible) .project-image > img { transform: scale(1.045); }
.motion-enabled .project-image > img { transition: transform 800ms var(--motion-ease); }
.motion-enabled .timeline { position: relative; }
.motion-enabled .timeline li { border-color: transparent; }
.motion-enabled .timeline::before,
.motion-enabled .timeline::after {
  content: '';
  position: absolute;
  top: 7px;
  bottom: 17px;
  left: 0;
  width: 1px;
  transform-origin: top center;
  pointer-events: none;
}
.motion-enabled .timeline::after { background: var(--line); }
.motion-enabled .timeline::before {
  background: #718637;
  z-index: 1;
  transform: scaleY(var(--timeline-progress, 0));
}
.motion-enabled .timeline li::before { z-index: 2; }
.motion-enabled .timeline li.reveal { --reveal-distance: 16px; }
.motion-enabled .contact-main > .reveal { --reveal-distance: 20px; }
.motion-enabled .contact-arrow.reveal { --reveal-delay: 90ms; }
.motion-enabled .contact-arrow.reveal {
  transition: opacity var(--motion-duration) var(--motion-ease), transform var(--motion-duration) var(--motion-ease), rotate 300ms var(--motion-ease), background 300ms;
}
.motion-enabled .contact-arrow:hover { rotate: 45deg; }
.motion-enabled .contact-bottom.reveal { --reveal-delay: 120ms; }

@media (prefers-reduced-motion: no-preference) {
  .hero-copy { animation: none; }
  .hero-copy > .eyebrow { animation: content-arrive 550ms var(--motion-ease) 40ms both; }
  .hero-copy h1 { animation: content-arrive 700ms var(--motion-ease) 90ms both; }
  .hero-description { animation: content-arrive 600ms var(--motion-ease) 160ms both; }
  .hero-actions { animation: content-arrive 600ms var(--motion-ease) 220ms both; }
  .hero-education { animation: content-arrive 550ms var(--motion-ease) 270ms both; }
  .project-dialog[open] { animation: dialog-arrive 280ms var(--motion-ease) both; }
  .image-dialog[open] { animation: image-arrive 180ms ease-out both; }
  .mobile-nav:not([hidden]) { animation: menu-arrive 220ms var(--motion-ease) both; }
  @keyframes content-arrive { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes dialog-arrive { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes image-arrive { from { opacity: 0; } to { opacity: 1; } }
  @keyframes menu-arrive { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
}
html[data-motion='soft'] { --motion-duration: 420ms; --reveal-distance: 14px; }
html[data-motion='soft'] .project-image > img { transition-duration: 450ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal.observed { opacity: 1 !important; transform: none !important; }
  .hero-work-image, .project-image > img, .signature-star, .art-note { translate: none !important; rotate: none !important; }
}
@media print {
  .reveal.observed { opacity: 1 !important; transform: none !important; }
  .hero-work-image, .project-image > img, .signature-star, .art-note { translate: none !important; rotate: none !important; }
  .motion-enabled .timeline li { border-color: var(--line); }
  .motion-enabled .timeline::before, .motion-enabled .timeline::after { display: none; }
}