/* Staging-only enhancement. Without JavaScript all content keeps its original layout. */
.ak-page {
  --ak-motion-ready: 1;
  --ak-motion-distance: 70px;
}

.ak-page .ak-motion-target[data-ak-motion="left"] {
  --ak-motion-offset: calc(-1 * var(--ak-motion-distance));
}

.ak-page .ak-motion-target[data-ak-motion="right"] {
  --ak-motion-offset: var(--ak-motion-distance);
}

/* Clip only the horizontal travel on an existing parent; never create a wrapper. */
.ak-page .ak-motion-clip {
  overflow-x: clip;
  overflow-y: visible;
}

.ak-page .ak-motion-pending {
  opacity: 0;
  transform: translateX(var(--ak-motion-offset));
}

.ak-page .ak-motion-running {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 700ms ease-out, transform 700ms ease-out;
  will-change: opacity, transform;
}

/* Keyboard focus never waits for motion; JS also releases the parent's clip. */
.ak-page .ak-motion-target:focus-within {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (max-width: 767px) {
  .ak-page { --ak-motion-distance: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .ak-page .ak-motion-target {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
  .ak-page .ak-motion-clip { overflow: visible; }
}