/* Optional shared motion. Content is complete and visible without enhancement. */
:root {
  --motion-ink: #171719;
  --motion-paper: #fff;
  --motion-accent: var(--fitslay-pink, #e00070);
  --motion-line: #dedee3;
  --motion-ease: cubic-bezier(.22, .68, .12, 1);
  --motion-fast: 180ms;
  --motion-soft: 650ms;
}

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid var(--motion-accent);
  outline-offset: 5px;
}

.motion-ui {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 80;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  max-width: calc(100vw - 36px);
  padding: 11px 16px;
  border: 1px solid var(--motion-line);
  border-radius: 999px;
  background: #fffffff2;
  color: var(--motion-ink);
  box-shadow: 0 3px 18px #1717190a;
  font: 500 11px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .01em;
  cursor: pointer;
  touch-action: manipulation;
}

.motion-ui::before {
  content: "";
  flex: 0 0 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #a1a1a7;
}
.motion-ui[aria-pressed="true"]::before { background: var(--motion-accent); }
.motion-ui:disabled { cursor: default; color: #64646b; }
.motion-ui[hidden] { display: none; }

.site-motion-enabled [data-reveal-state] {
  --motion-reveal-y: 0px;
  translate: 0 calc(var(--motion-reveal-y) + var(--motion-depth-y, 0px));
  transition: opacity var(--motion-soft) var(--motion-ease), translate var(--motion-soft) var(--motion-ease);
}
.site-motion-enabled [data-reveal-state="waiting"] {
  --motion-reveal-y: 22px;
  opacity: 0;
}
.site-motion-enabled [data-reveal-state="visible"] { opacity: 1; }
.site-motion-enabled [data-depth-ready] {
  translate: 0 calc(var(--motion-reveal-y, 0px) + var(--motion-depth-y, 0px));
}

.site-motion-enabled :where(.button, .text-link, .chip, .option, .menu-toggle, .dropdown a, .motion-ui) {
  transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease,
    color var(--motion-fast) ease, transform var(--motion-fast) ease;
}
.site-motion-enabled :where(.experience, .tutorial, .training-path, .contact-card) {
  transition: transform 350ms var(--motion-ease), box-shadow 350ms ease, border-color 350ms ease;
}
.site-motion-enabled .nav.open,
.site-motion-enabled .nav details[open] .dropdown {
  animation: motion-menu-enter 220ms var(--motion-ease) both;
}
@keyframes motion-menu-enter {
  from { opacity: 0; translate: 0 -6px; }
  to { opacity: 1; translate: 0 0; }
}

@media (hover: hover) and (pointer: fine) {
  .motion-ui:not(:disabled):hover { border-color: #aaaab1; background: #f8f8fa; }
  .site-motion-enabled .contact-card:hover { border-color: #c8c8d0; }
  .site-motion-enabled .motion-ui:not(:disabled):hover { transform: translateY(-2px); }
}

html.motion-off { scroll-behavior: auto; }
.motion-off *, .motion-off *::before, .motion-off *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
.motion-off [data-reveal], .motion-off [data-depth] {
  opacity: 1 !important;
  translate: none !important;
}
.motion-off :where(.button, .experience, .tutorial, .training-path, .motion-ui):hover {
  transform: none !important;
}

@media (max-width: 600px) {
  .motion-ui {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    min-height: 44px;
    padding: 10px 13px;
    font-size: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  [data-reveal], [data-depth] { opacity: 1 !important; translate: none !important; }
  .motion-ui { transition: none !important; }
}