/* Decorative motion only. Static content and interaction cues remain the default. */
html[data-motion='on'] [data-reveal].reveal-pending {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--ease-out, cubic-bezier(.2, 0, 0, 1)),
    transform 500ms var(--ease-out, cubic-bezier(.2, 0, 0, 1));
  transition-delay: 0ms;
}
html[data-motion='on'] [data-reveal].reveal-pending[data-reveal-delay='1'] { transition-delay: 80ms; }
html[data-motion='on'] [data-reveal].reveal-pending[data-reveal-delay='2'] { transition-delay: 160ms; }
html[data-motion='on'] [data-reveal].reveal-pending[data-reveal-delay='3'] { transition-delay: 240ms; }
html[data-motion='on'] [data-reveal].reveal-pending.is-revealed,
html[data-motion='on'] [data-reveal].reveal-pending:focus-within {
  opacity: 1;
  transform: none;
}
html[data-motion='on'] [data-reveal].reveal-pending:focus-within {
  transition: none;
}

.motion-ready .hero-stage .route-line {
  stroke-dasharray: var(--route-length, 1000);
  animation: syntax-route-draw 1600ms var(--ease-out, cubic-bezier(.2, 0, 0, 1))
    var(--route-delay, 0ms) both;
}
.motion-ready .hero-stage .stage-node {
  animation: syntax-node-enter 400ms var(--ease-out, cubic-bezier(.2, 0, 0, 1))
    var(--node-delay, 0ms) both;
}
@keyframes syntax-route-draw {
  from { stroke-dashoffset: var(--route-length, 1000); }
  to { stroke-dashoffset: 0; }
}
@keyframes syntax-node-enter {
  /* Above-fold labels remain visible throughout this short entrance. */
  from { opacity: .65; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}

@media (hover: hover) and (pointer: fine) {
  html[data-motion='on'] .project-image img {
    transition: transform 400ms var(--ease-out, cubic-bezier(.2, 0, 0, 1));
  }
  html[data-motion='on'] .project-image:hover img { transform: scale(1.02); }
  html[data-motion='on'] .button > .icon,
  html[data-motion='on'] .text-link > .icon {
    transition: translate 180ms var(--ease-out, cubic-bezier(.2, 0, 0, 1));
  }
  html[data-motion='on'] .button:hover > .icon,
  html[data-motion='on'] .text-link:hover > .icon { translate: 2px 0; }
}

html[data-motion='off'] { scroll-behavior: auto; }
html[data-motion='off'] *,
html[data-motion='off'] *::before,
html[data-motion='off'] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html[data-motion='off'] [data-reveal],
html[data-motion='off'] .hero-stage .route-line,
html[data-motion='off'] .hero-stage .stage-node,
html[data-motion='off'] .project-image img,
html[data-motion='off'] .button > .icon,
html[data-motion='off'] .text-link > .icon {
  animation: none;
  transition: none;
}
html[data-motion='off'] [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html[data-motion] [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .motion-ready .hero-stage .route-line,
  .motion-ready .hero-stage .stage-node { animation: none; }
}