:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-fast: 180ms;
  --motion-medium: 520ms;
  --motion-slow: 860ms;
}

@keyframes motion-page-in {
  from { opacity: .28; transform: translateY(10px) scale(.998); filter: blur(2px); }
}

html.motion-ready:not(.motion-leaving) body {
  /* Do not retain an identity transform after the entrance animation.
     A transformed body becomes the containing block for fixed/sticky UI. */
  animation: motion-page-in 420ms var(--motion-ease) backwards;
}

.motion-progress {
  position: fixed;
  z-index: 10020;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  pointer-events: none;
  transform: scaleX(var(--motion-progress, 0));
  transform-origin: left center;
  background: linear-gradient(90deg, #315ed8, #8058ff 58%, #f06b39);
  transition: transform 80ms linear;
}

.motion-route-veil {
  position: fixed;
  z-index: 10010;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.2), transparent 48%),
    rgba(247,245,240,.08);
  backdrop-filter: blur(0) saturate(1);
  -webkit-backdrop-filter: blur(0) saturate(1);
  transition:
    opacity 170ms ease,
    backdrop-filter 190ms var(--motion-ease),
    -webkit-backdrop-filter 190ms var(--motion-ease);
}

.motion-route-veil::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(49,94,216,.72) 42%, rgba(240,107,57,.58) 64%, transparent);
  content: "";
  opacity: .72;
  transform: scaleX(0);
  transform-origin: center;
}

html.motion-leaving .motion-route-veil {
  opacity: 1;
  backdrop-filter: blur(3px) saturate(.92);
  -webkit-backdrop-filter: blur(3px) saturate(.92);
}

html.motion-leaving .motion-route-veil::after {
  transform: scaleX(1);
  transition: transform 190ms var(--motion-ease);
}

.motion-ready [data-motion-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity var(--motion-slow) var(--motion-ease),
    transform var(--motion-slow) var(--motion-ease);
  transition-delay: var(--motion-delay, 0ms);
}

.motion-ready [data-motion-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-motion-tilt] {
  transform: perspective(1100px) rotateX(var(--motion-rx, 0deg)) rotateY(var(--motion-ry, 0deg)) translateZ(0);
  transform-style: preserve-3d;
  transition: transform 640ms var(--motion-ease), box-shadow 360ms ease;
  will-change: transform;
}

[data-motion-tilt].is-pointing {
  transition-duration: 90ms;
}

[data-motion-spotlight] {
  --spot-x: 74%;
  --spot-y: 22%;
}

.motion-ripple {
  position: fixed;
  z-index: 10030;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: rgba(65, 92, 212, .54);
  pointer-events: none;
  animation: motion-ripple 540ms var(--motion-ease) forwards;
}

@keyframes motion-ripple {
  to { opacity: 0; transform: scale(8); }
}

.motion-magnetic {
  transform: translate3d(var(--magnet-x, 0), var(--magnet-y, 0), 0);
  transition: transform 420ms var(--motion-ease);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .motion-ready [data-motion-reveal] { opacity: 1; transform: none; }
  [data-motion-tilt], .motion-magnetic { transform: none !important; }
  .motion-route-veil, .motion-progress { display: none; }
}