/* Loaded after styles.css: motion only activates after app.js adds .motion-ready. */
:root { --motion-ease: cubic-bezier(.22, .72, .24, 1); }

.reveal { animation: none; }

html.motion-ready .reveal:not(.hero-copy):not(.hero-art) {
  opacity: 0;
  transform: translate3d(0, 1rem, 0);
  transition: opacity 520ms var(--motion-ease) var(--reveal-delay, 0ms), transform 520ms var(--motion-ease) var(--reveal-delay, 0ms);
}
html.motion-ready .reveal:not(.hero-copy):not(.hero-art).is-revealed { opacity: 1; transform: translate3d(0, 0, 0); }
html.motion-ready .reveal:not(.hero-copy):not(.hero-art):focus-within { opacity: 1; transform: none; transition: none; }

.hero-art img {
  transform-origin: 52% 48%;
  animation: hero-drift 9s ease-in-out infinite alternate;
  animation-play-state: paused;
  will-change: transform;
}
html:not(.motion-paused):not(.motion-reduced):not(.motion-document-hidden) .hero-art.hero-art-active img { animation-play-state: running; }
@keyframes hero-drift {
  from { transform: translate3d(0, 0, 0) rotate(-1.4deg); }
  to { transform: translate3d(0, -12px, 0) rotate(1.4deg); }
}

.svg-draw path {
  stroke-dasharray: var(--path-length, 1);
  stroke-dashoffset: var(--path-length, 1);
  transition: stroke-dashoffset 760ms var(--motion-ease);
}
.svg-draw.is-drawn path:nth-child(2) { transition-delay: 120ms; }
.svg-draw.is-drawn path { stroke-dashoffset: 0; }

.text-link { position: relative; text-decoration: none; }
.text-link::after {
  position: absolute;
  right: 0;
  bottom: .38rem;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}
.text-link [aria-hidden="true"] { display: inline-block; transition: transform 180ms ease; }
.text-link:hover::after, .text-link:focus-visible::after { transform: scaleX(1); }
.text-link:hover [aria-hidden="true"], .text-link:focus-visible [aria-hidden="true"] { transform: translate3d(3px, 0, 0); }

.ecosystem-link .ecosystem-arrow { transition: transform 180ms ease; }
.ecosystem-link:hover .ecosystem-arrow, .ecosystem-link:focus-visible .ecosystem-arrow { transform: translate3d(3px, -3px, 0); }

.motion-toggle {
  position: absolute;
  z-index: 2;
  bottom: .8rem;
  left: .8rem;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .7rem;
  border: 1px solid rgb(243 240 231 / .46);
  border-radius: 0;
  background: rgb(8 27 36 / .76);
  color: var(--ivory);
  cursor: pointer;
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.1;
  backdrop-filter: blur(5px);
}
.motion-toggle:hover { background: rgb(8 27 36 / .94); }
.motion-toggle[hidden] { display: none; }
.motion-toggle svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; flex: none; }
.motion-toggle[aria-pressed="true"] svg { opacity: .62; }

html.motion-paused .reveal, html.motion-reduced .reveal { opacity: 1; transform: none; transition: none; }
html.motion-paused .svg-draw path, html.motion-reduced .svg-draw path { stroke-dashoffset: 0; transition: none; }
html.motion-paused *, html.motion-paused *::before, html.motion-paused *::after { animation: none !important; transition: none !important; }

@media (max-width: 480px) { .motion-toggle { bottom: .55rem; left: .55rem; max-width: calc(100% - 1.1rem); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero-art img { animation: none; transform: none; }
  .text-link::after, .text-link [aria-hidden="true"], .svg-draw path { transition: none; }
}