/* Motion is decorative: real text, native scroll, and no hover-only actions. */
.hero-name { display: block; width: 100%; padding: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; line-height: inherit; text-align: inherit; touch-action: manipulation; }
.hero-name:disabled { cursor: default; opacity: 1; }
.hero-name:focus-visible { outline-offset: 16px; border-radius: 2px; }
#hero-title { translate: var(--name-x, 0px) var(--name-y, 0px); transition: translate .65s cubic-bezier(.16,1,.3,1); }
.hero-word { transform-origin: center bottom; }
.hero-motion-hint { display: none; position: absolute; bottom: 34px; left: var(--gutter); margin: 0; color: #bab67d; font-size: .7rem; letter-spacing: .02em; pointer-events: none; }
@media (hover: none) and (pointer: coarse) {
  .motion-ready .hero-motion-hint { display: block; }
}

/* Word masks retain spaces and manual line breaks, so headings still reflow. */
.motion-word { display: inline-block; overflow: clip; vertical-align: bottom; padding: .12em .04em; margin: -.12em -.04em; }
.motion-word-inner { display: inline-block; }
.motion-ready .motion-reveal { transform: translateY(16px); transition-duration: .6s, .75s; }
.motion-ready .motion-heading { opacity: 1; transform: none; }
.motion-ready .motion-heading .motion-word-inner { transform: translateY(125%) skewY(6deg); transition: transform 1.25s cubic-bezier(.16,1,.3,1); transition-delay: var(--word-delay, 0ms); }
.motion-ready .motion-reveal.is-revealed { transform: none; }
.motion-ready .motion-heading.is-revealed .motion-word-inner { transform: none; }
.motion-ready .motion-reveal:focus-within { opacity: 1; transform: none; }
.motion-ready .motion-heading:focus-within .motion-word-inner { transform: none; transition: none; }
.motion-ready .work-media.motion-reveal { transform: translateY(40px) scale(.96); clip-path: inset(12% 0 12% 0); transition: opacity .65s ease, transform 1.2s cubic-bezier(.16,1,.3,1), clip-path 1.2s cubic-bezier(.16,1,.3,1); }
.motion-ready .work-media.motion-reveal.is-revealed,
.motion-ready .work-media.motion-reveal:focus-within { transform: none; clip-path: inset(0); }

/* One animation owner per block; no parent/child fades fighting each other.
   Resting content remains visible even when observers or animation APIs fail. */
.motion-ready .motion-managed,
.motion-ready .work-media.motion-managed { opacity: 1; transform: none; clip-path: none; transition: none; }
.motion-ready .motion-managed .motion-word-inner { transform: none; transition: none; }
.about-traits > span, .work-tags > span { transform-origin: left center; }

/* The same feedback is available on keyboard focus and a phone's native press. */
.work-link:is(:focus-visible, :active) span[aria-hidden],
.video-source:is(:hover, :focus-visible, :active) span[aria-hidden] { transform: translate(3px,-3px); }
.video-source span[aria-hidden] { display: inline-block; transition: transform .3s ease; }
.hero-discover:is(:focus-visible, :active) span { transform: translateY(5px); }
.nav-link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.work-entry:focus-within .work-media-image img { filter: grayscale(0); }
.video-trigger { transition: scale .25s cubic-bezier(.16,1,.3,1); }
.video-trigger:active { scale: .985; }

/* Richard-inspired editorial curtain; no scroll interception or fake loading. */
.section-transition { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--gutter); background: var(--hero-yellow); color: var(--ink); transform: translateY(100%); pointer-events: none; contain: strict; }
.section-transition[hidden] { display: none; }
.section-transition > span { max-width: 12ch; font-size: clamp(2.8rem,12vw,10rem); line-height: .9; letter-spacing: -.06em; text-transform: uppercase; text-align: center; }
.section-transition:not([hidden]) > span { animation: curtain-title .8s .08s cubic-bezier(.16,1,.3,1) both; }
.section-transition::after { content: ""; position: absolute; inset: auto 0 0; height: 12px; background: var(--ink); }
@keyframes curtain-title { from { opacity: 0; transform: translateY(45px) scale(.92); } to { opacity: 1; transform: none; } }
@media (hover: none) {
  .work-media-image img { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .section-transition { display: none !important; }
  #hero-title { translate: none; transition: none; }
  .motion-ready .hero-motion-hint { display: none; }
  .motion-ready .motion-reveal,
  .motion-ready .motion-heading .motion-word-inner { opacity: 1; transform: none; transition: none; }
  .motion-ready .work-media.motion-reveal { opacity: 1; transform: none; clip-path: none; transition: none; }
  .video-trigger:active { scale: none; }
  .work-link:is(:focus-visible, :active) span[aria-hidden],
  .video-source:is(:hover, :focus-visible, :active) span[aria-hidden],
  .hero-discover:is(:focus-visible, :active) span { transform: none; }
}
@media print {
  .section-transition { display: none !important; }
  .hero-motion-hint { display: none !important; }
  .motion-ready .motion-reveal,
  .motion-ready .motion-heading .motion-word-inner { opacity: 1; transform: none; transition: none; }
  .motion-ready .work-media.motion-reveal { opacity: 1; transform: none; clip-path: none; transition: none; }
}