/* Motion stays light: one entrance, clear feedback, and native scrolling. */
html body { --motion-ease: cubic-bezier(.22,1,.36,1); }
html body.motion-ready .reveal {
  transition: opacity 600ms ease var(--reveal-delay,0ms), transform 720ms var(--motion-ease) var(--reveal-delay,0ms);
}
html body.motion-ready .reveal:not(.visible) { opacity: 0; transform: translate3d(0,22px,0); }
html body .line-heading .motion-mask {
  display: inline-block;
  max-width: 100%;
  overflow: clip;
  vertical-align: top;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
html body .line-heading .motion-line { display: block; }
html body.motion-ready .line-heading.reveal,
html body.motion-ready .line-heading.reveal:not(.visible) { opacity: 1; transform: none; transition: none; }
html body.motion-ready .line-heading .motion-line {
  transform: translate3d(0,0,0);
  opacity: 1;
  transition: transform 900ms var(--motion-ease), opacity 600ms ease;
  transition-delay: calc(var(--line-delay,0ms) + var(--reveal-delay,0ms));
}
html body.motion-ready .line-heading:not(.visible) .motion-line { transform: translate3d(0,112%,0); opacity: .25; }
html body.motion-ready .hero-meta { animation: meta-enter 900ms 350ms both var(--motion-ease); }
@keyframes meta-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

html body .button > span,
html body .text-link > span,
html body .round-arrow,
html body .story-card h3 > span { transition: transform 350ms var(--motion-ease), color 250ms ease; }
html body .desktop-nav .nav-name { position: relative; }
html body .desktop-nav .nav-name:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 350ms var(--motion-ease);
}
html body .desktop-nav a:is(:hover,:focus-visible) .nav-name:after { transform: scaleX(1); transform-origin: left; }
html body .mobile-nav { transform-origin: top; }
html body .mobile-nav a { transition: color 220ms ease, transform 350ms var(--motion-ease); }
html body .mobile-nav a:focus-visible { transform: translateX(6px); color: var(--accent); }

/* Keep the row itself fixed so pointer and keyboard targets never shift. */
html body .capability-row { transition: color 220ms ease, background-color 220ms ease; }
html body .capability-row:hover { padding-left: 0; }
html body .work-ledger-row { transition: color 220ms ease, background-color 220ms ease; }
html body .work-ledger-row:hover { padding-left: 12px; }
html body .capability-row h3,
html body .work-ledger-row h2 { transition: transform 450ms var(--motion-ease); }
html body .capability-row:focus-visible,
html body .work-ledger-row:focus-visible { color: var(--accent); background: var(--soft); }
html body .faq-list .faq-icon { transform: none; transition: transform 300ms var(--motion-ease); }
html body .faq-list details[data-expanded=true] .faq-icon { transform: rotate(45deg); }
html body .faq-list summary { transition: color 220ms ease; }
html body .faq-list summary:focus-visible { color: var(--accent); }

html body .visual-link:focus-visible .demo-device,
html body .work-grid-card:focus-visible .demo-device {
  transform: perspective(1000px) rotateX(1deg) rotateY(0) rotateZ(0) scale(1.025);
}
html body .story-card:focus-visible h3 { color: var(--accent); }
html body :is(.button,.text-link):focus-visible > span { transform: translate(3px,-3px); }
@media (hover:hover) and (pointer:fine) {
  html body :is(.button,.text-link):hover > span,
  html body .story-card:hover h3 > span { transform: translate(3px,-3px); }
  html body .round-arrow:hover { transform: translate(2px,-2px); }
  html body .mobile-nav a:hover { transform: translateX(6px); }
  html body .capability-row:hover h3,
  html body .work-ledger-row:hover h2 { transform: translateX(8px); }
}
@media (hover:none), (pointer:coarse) {
  html body .visual-link:hover .demo-device,
  html body .work-grid-card:hover .demo-device { transform: perspective(1000px) rotateX(7deg) rotateY(-7deg) rotateZ(-1deg); }
  html body .studio-photo:hover img,
  html body .story-card:hover img,
  html body .featured-story-image:hover img { transform: none; }
  html body .project-visual:hover .demo-online { animation: none; }
}
@media (max-width:760px) {
  html body .work-ledger-row:hover { padding-left: 0; }
  html body.motion-ready .reveal:not(.visible) { transform: translate3d(0,15px,0); }
  html body.motion-ready .line-heading.reveal:not(.visible) { transform: none; }
}
@media (prefers-reduced-motion:reduce) {
  html body.motion-ready .reveal:not(.visible),
  html body.motion-ready .line-heading:not(.visible) .motion-line { opacity: 1; transform: none; }
  html body .motion-line,
  html body .reveal,
  html body .hero-meta { transition: none !important; animation: none !important; }
}