/* Stakly motion: calm entrances, short feedback, no scroll interception. */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-quick: 180ms;
}
.motion-word {
  display: inline-block;
  overflow: hidden;
  padding-bottom: .12em;
  margin-bottom: -.12em;
  vertical-align: bottom;
  color: inherit !important;
}
.motion-word > span { display: inline-block; color: inherit !important; }

.button, .nav-cta {
  transition: background-color var(--motion-quick), transform var(--motion-quick) var(--motion-ease);
}
.button > span, .nav-cta > span, .feature-copy a > span {
  display: inline-block;
  transition: transform 260ms var(--motion-ease);
}
.button:active, .nav-cta:active { transform: scale(.98); }
.topbar nav a { position: relative; }
.topbar nav a::after {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 250ms var(--motion-ease);
}
.topbar nav a:focus-visible::after { transform: scaleX(1); }

/* The artwork alone moves; text and interactive controls remain stationary. */
.feature-visual.motion-depth img {
  transform: translate3d(0, var(--motion-depth, 0px), 0);
}
.showcase { position: relative; isolation: isolate; }
.showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(ellipse at 18% 0%, #fff5, transparent 65%);
  opacity: .7;
}
.showcase.motion-arrived::before { animation: stakly-light-arrive 1800ms var(--motion-ease) both; }
@keyframes stakly-light-arrive {
  from { opacity: .15; transform: translateY(18px); }
  to { opacity: .7; transform: translateY(0); }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .button:hover > span, .nav-cta:hover > span, .feature-copy a:hover > span { transform: translate(2px, -2px); }
  .topbar nav a:hover::after { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  .button, .nav-cta, .button > span, .nav-cta > span, .feature-copy a > span,
  .topbar nav a::after { transition: none; }
  .feature-visual.motion-depth img { transform: none; }
  .showcase.motion-arrived::before { animation: none; }
}