:root {
  --motion-shell-cream: #fffbf2;
  --motion-shell-dark: #342c27;
  --motion-shell-accent: #ffb703;
  --motion-shell-danger: #e63946;
}

body[data-public-motion="enabled"] {
  overflow-x: hidden;
}

.motion-page-shell {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
  contain: paint;
}

.motion-page-wipe {
  position: absolute;
  inset: 0;
  background: var(--motion-shell-accent);
  transform: translate3d(0, 0, 0);
  transform-origin: right center;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.motion-line {
  display: block;
  overflow: hidden;
}

.motion-line > span {
  display: block;
  transform: translateY(115%);
  opacity: 0;
}

.motion-ready [data-motion="reveal-up"],
.motion-ready [data-motion="stagger-item"],
.motion-ready [data-motion="panel-slide"] {
  opacity: 0;
  transform: translateY(56px);
}

.motion-ready [data-motion="mask-panel"] {
  clip-path: inset(0 0 100% 0);
}

@media (prefers-reduced-motion: reduce) {
  .motion-page-shell {
    display: none;
  }

  .motion-line > span,
  .motion-ready [data-motion],
  .motion-marquee-track {
    animation: none;
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: none;
    transition: none;
  }
}