/* Shared Framer-style motion layer for static pages */
:root {
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
  --motion-fast: 220ms;
  --motion-mid: 680ms;
  --motion-slow: 900ms;
}

.motion-ready [data-motion] {
  opacity: 0;
  transform: translate3d(var(--motion-x, 0), var(--motion-y, 24px), 0) scale(var(--motion-scale, .985));
  filter: blur(var(--motion-blur, 0));
  will-change: opacity, transform, filter;
}

.motion-ready [data-motion="fade-down"] {
  --motion-y: -18px;
}

.motion-ready [data-motion="fade-left"] {
  --motion-x: 24px;
  --motion-y: 0;
}

.motion-ready [data-motion="fade-right"] {
  --motion-x: -24px;
  --motion-y: 0;
}

.motion-ready [data-motion="scale"] {
  --motion-y: 10px;
  --motion-scale: .94;
}

.motion-ready [data-motion="soft"] {
  --motion-y: 16px;
  --motion-scale: .97;
  --motion-blur: 6px;
}

.motion-ready [data-motion].motion-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  transition:
    opacity var(--motion-mid) var(--motion-ease) var(--motion-delay, 0ms),
    transform var(--motion-mid) var(--motion-ease) var(--motion-delay, 0ms),
    filter var(--motion-slow) var(--motion-ease) var(--motion-delay, 0ms);
}

.motion-ready .motion-load {
  animation: motionPageIn 720ms var(--motion-ease) both;
}

@keyframes motionPageIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.motion-hover {
  transform: translateZ(0);
  transition:
    transform var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease),
    background-color var(--motion-fast) var(--motion-ease);
}

@media (hover:hover) and (pointer:fine) {
  .motion-hover:hover {
    transform: translateY(-6px) scale(1.01);
  }

  .motion-button:hover {
    transform: translateY(-2px);
  }
}

.motion-button {
  transition:
    transform var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease),
    background-color var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease);
}

.motion-button:active {
  transform: scale(.97);
}

.motion-ready .motion-stagger > * {
  transition-delay: calc(var(--motion-delay, 0ms) + (var(--motion-index, 0) * 65ms));
}

.motion-ready .motion-page-exit {
  opacity: 0;
  transition: opacity 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .motion-ready [data-motion] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Shared locked navbar behavior */
.nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1200 !important;
  background: rgba(7, 11, 24, .76);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.nav.on {
  background: rgba(7, 11, 24, .9);
  border-bottom-color: rgba(255, 255, 255, .11);
  box-shadow: 0 12px 38px rgba(0, 0, 0, .26);
}

.drawer {
  z-index: 1190 !important;
}

html {
  scroll-padding-top: 88px;
}