/* Site-level motion policy (src/fx/motion.js). Never use @media (prefers-reduced-motion) in this
   project: the inline head script decides the level and exposes it as html[data-motion]. */

.fx-motion-toggle {
  position: fixed; left: 16px; bottom: 16px; z-index: 2147482500;
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px 0 11px;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px;
  background: rgba(14, 14, 14, .72); color: #e9e9e6;
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  transition: border-color .3s, background-color .3s, color .3s, translate .4s cubic-bezier(.16, 1, .3, 1);
  cursor: pointer;
}
.fx-motion-toggle:hover { border-color: rgba(255, 255, 255, .45); background: rgba(24, 24, 24, .85); }
.fx-motion-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.fx-motion-toggle[aria-pressed="false"] { color: #9c9c98; }

.fx-motion-prompt {
  position: fixed; left: 16px; bottom: 60px; z-index: 2147482500; max-width: min(320px, calc(100vw - 32px));
  padding: 14px 14px 12px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px;
  background: rgba(12, 12, 12, .9); color: #e9e9e6;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  opacity: 0; translate: 0 12px; transition: opacity .45s cubic-bezier(.16, 1, .3, 1), translate .45s cubic-bezier(.16, 1, .3, 1);
}
.fx-motion-prompt.is-on { opacity: 1; translate: 0 0; }
.fx-motion-prompt.is-leaving { opacity: 0; translate: 0 8px; }
.fx-motion-prompt p { margin: 0 0 10px; font: 400 12.5px/1.55 Inter, sans-serif; color: #c9c9c5; }
.fx-motion-prompt-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.fx-motion-prompt button {
  height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2);
  background: transparent; color: #f2f2ef; font: 600 12px/1 Inter, sans-serif; cursor: pointer;
}
.fx-motion-prompt button[data-choice="full"] { background: #f2f2ef; color: #0a0a0a; border-color: transparent; }
.fx-motion-prompt button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.fx-motion-veil {
  position: fixed; inset: 0; z-index: 2147483600; background: #070707; opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.fx-motion-veil.is-on { opacity: 1; }

/* Reduced motion: replaces the reference stylesheet's own reduced-motion rules (neutralised at build). */
html[data-motion="reduced"] .gsap-ambient,
html[data-motion="reduced"] .meteor { display: none !important; }
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}