/* Per-site Synny motion preference.
   A user opt-in can override a system-level reduced-motion setting. */

.synny-motion-toggle {
  position: absolute;
  right: clamp(24px, 7vw, 132px);
  bottom: 46px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 150px;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid #c9c3f5;
  border-radius: 7px;
  background: rgba(255, 255, 255, .94);
  color: #4032ad;
  box-shadow: 0 10px 24px rgba(54, 46, 129, .14);
  font: inherit;
  font-size: 14px;
  font-weight: 760;
  letter-spacing: 0;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.synny-motion-toggle svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.synny-motion-toggle:hover {
  transform: translateY(-2px);
  border-color: #7768eb;
  box-shadow: 0 14px 30px rgba(54, 46, 129, .2);
}

.synny-motion-toggle:focus-visible {
  outline: 3px solid rgba(103, 86, 232, .28);
  outline-offset: 3px;
}

.synny-motion-toggle[aria-pressed="true"] {
  border-color: #8bd7ca;
  background: rgba(239, 252, 249, .96);
  color: #087d69;
}

.synny-motion-status {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 900;
  max-width: min(320px, calc(100vw - 32px));
  padding: 11px 14px;
  border: 1px solid #b9dfd7;
  border-radius: 7px;
  background: #f2fcf9;
  color: #176657;
  box-shadow: 0 14px 34px rgba(31, 68, 62, .16);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

body.synny-motion-enabled .landing-synny-welcome.synny-motion-visible {
  animation: synny-hero-float-visible 4.1s cubic-bezier(.42, 0, .36, 1) infinite !important;
}

body.synny-motion-enabled .landing-synny-welcome.synny-motion-visible .landing-synny-image {
  animation: synny-hero-breathe-visible 2.8s ease-in-out infinite !important;
}

body.synny-motion-enabled .landing-synny-welcome.synny-motion-visible::before,
body.synny-motion-enabled .landing-synny-portrait.synny-motion-visible::after {
  animation: synny-heart-glow-visible 2.5s ease-out .35s infinite !important;
}

body.synny-motion-enabled .landing-synny-portrait.synny-motion-visible .landing-synny-profile {
  animation: synny-profile-float-visible 4.6s cubic-bezier(.42, 0, .35, 1) infinite !important;
}

body.synny-motion-enabled .landing-synny-portrait:is(.is-reacting, .synny-auto-greeting, .synny-user-reacting) .landing-synny-profile {
  animation: synny-cheer-visible 820ms cubic-bezier(.2, .78, .23, 1.22) both !important;
}

body.synny-motion-enabled .synny-companion-image {
  animation: synny-companion-float-visible 3.5s ease-in-out infinite !important;
}

body.synny-motion-enabled .synny-companion.open .synny-companion-image {
  animation: synny-greet-visible 720ms cubic-bezier(.2, .8, .25, 1.2) both !important;
}

body.synny-motion-enabled .synny-empty-image {
  animation: synny-calm-visible 4.2s ease-in-out infinite !important;
}

body.synny-motion-enabled .account-button:hover .synny-account-image,
body.synny-motion-enabled .account-button:focus-visible .synny-account-image,
body.synny-motion-enabled .profile-avatar-choice:hover .synny-image,
body.synny-motion-enabled .profile-avatar-choice:focus-visible .synny-image {
  animation: synny-avatar-wave-visible 680ms ease both !important;
}

body.synny-motion-user-paused :is(
  .landing-synny-welcome,
  .landing-synny-welcome::before,
  .landing-synny-welcome::after,
  .landing-synny-image,
  .landing-synny-profile,
  .landing-synny-portrait::after,
  .synny-companion-image,
  .synny-presence-dot,
  .synny-empty-image,
  .synny-reference-guide,
  .synny-practice-guide,
  .synny-account-image
) {
  animation: none !important;
}

@media (max-width: 900px) {
  .synny-motion-toggle {
    right: 16px;
    bottom: 56px;
  }
}

@media (max-width: 640px) {
  .synny-motion-toggle {
    right: 10px;
    bottom: 48px;
    min-width: 44px;
    width: 44px;
    min-height: 44px;
    padding: 0;
  }

  .synny-motion-toggle span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .synny-motion-status {
    right: 16px;
    bottom: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .synny-motion-toggle,
  .synny-motion-status {
    transition: none;
  }
}