/* Synny motion visibility v2
   Makes movement readable on large screens while keeping the motion calm. */

@media (prefers-reduced-motion: no-preference) {
  .landing-synny-welcome.synny-motion-visible {
    animation: synny-hero-float-visible 4.1s cubic-bezier(.42, 0, .36, 1) infinite;
    will-change: transform;
  }

  .landing-synny-welcome.synny-motion-visible .landing-synny-image {
    animation: synny-hero-breathe-visible 2.8s ease-in-out infinite;
    will-change: transform, filter;
  }

  .landing-synny-welcome.synny-motion-visible::before {
    width: 34px;
    height: 34px;
    border-width: 3px;
    border-color: rgba(44, 219, 194, .82);
    box-shadow: 0 0 18px rgba(89, 244, 218, .52);
    animation: synny-heart-glow-visible 2.5s ease-out .35s infinite;
  }

  .landing-synny-portrait.synny-motion-visible .landing-synny-profile {
    animation: synny-profile-float-visible 4.6s cubic-bezier(.42, 0, .35, 1) infinite;
    will-change: transform, filter;
  }

  .landing-synny-portrait.synny-motion-visible::after {
    width: 32px;
    height: 32px;
    border-width: 3px;
    border-color: rgba(44, 219, 194, .76);
    box-shadow: 0 0 16px rgba(89, 244, 218, .42);
    animation: synny-heart-glow-visible 2.7s ease-out .75s infinite;
  }

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

  .landing-synny-portrait:hover .landing-synny-profile,
  .landing-synny-portrait:focus-visible .landing-synny-profile {
    filter: drop-shadow(0 22px 30px rgba(74, 61, 171, .24)) saturate(1.08);
  }

  .synny-companion-image {
    animation: synny-companion-float-visible 3.5s ease-in-out infinite;
    will-change: transform;
  }

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

  .textbook-reference-head:hover .synny-reference-guide,
  .textbook-reference-head:focus-within .synny-reference-guide,
  .synny-practice-hero:hover .synny-practice-guide,
  .synny-practice-hero:focus-within .synny-practice-guide {
    animation: synny-point-visible 760ms ease both;
  }

  .synny-empty-image {
    animation: synny-calm-visible 4.2s ease-in-out infinite;
  }

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

@keyframes synny-hero-float-visible {
  0%, 100% { transform: translate3d(0, 3px, 0) rotate(-1.2deg); }
  25% { transform: translate3d(5px, -8px, 0) rotate(.4deg); }
  52% { transform: translate3d(0, -19px, 0) rotate(1.4deg); }
  76% { transform: translate3d(-5px, -9px, 0) rotate(-.2deg); }
}

@keyframes synny-hero-breathe-visible {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 16px 22px rgba(74, 61, 171, .13)); }
  50% { transform: scale(1.035); filter: drop-shadow(0 22px 30px rgba(74, 61, 171, .22)); }
}

@keyframes synny-heart-glow-visible {
  0%, 34% { opacity: 0; transform: translate(-50%, -50%) scale(.46); }
  48% { opacity: .9; transform: translate(-50%, -50%) scale(.72); }
  82%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.15); }
}

@keyframes synny-profile-float-visible {
  0%, 100% { transform: translate3d(0, 2px, 0) rotate(.8deg) scale(1); }
  32% { transform: translate3d(-5px, -11px, 0) rotate(-1.2deg) scale(1.018); }
  66% { transform: translate3d(4px, -20px, 0) rotate(1deg) scale(1.03); }
}

@keyframes synny-cheer-visible {
  0% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  32% { transform: translate3d(0, -24px, 0) rotate(-5deg) scale(1.07); }
  58% { transform: translate3d(0, -7px, 0) rotate(4deg) scale(1.035); }
  78% { transform: translate3d(0, -13px, 0) rotate(-1.5deg) scale(1.02); }
  100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

@keyframes synny-companion-float-visible {
  0%, 100% { transform: translate3d(0, 2px, 0) rotate(-1deg); }
  50% { transform: translate3d(0, -10px, 0) rotate(1.2deg); }
}

@keyframes synny-greet-visible {
  0% { transform: translateY(6px) rotate(-6deg) scale(.86); }
  52% { transform: translateY(-12px) rotate(4deg) scale(1.1); }
  100% { transform: translateY(0) rotate(0) scale(1); }
}

@keyframes synny-point-visible {
  0%, 100% { transform: translateX(0) rotate(0) scale(1); }
  42% { transform: translateX(10px) rotate(4deg) scale(1.045); }
  72% { transform: translateX(4px) rotate(-2deg) scale(1.02); }
}

@keyframes synny-calm-visible {
  0%, 100% { transform: translateY(2px) rotate(-1deg); }
  50% { transform: translateY(-9px) rotate(1.2deg); }
}

@keyframes synny-avatar-wave-visible {
  0%, 100% { transform: translateY(0) rotate(0) scale(1); }
  38% { transform: translateY(-7px) rotate(-7deg) scale(1.08); }
  68% { transform: translateY(-2px) rotate(4deg) scale(1.04); }
}

@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .landing-synny-welcome.synny-motion-visible {
    animation-duration: 4.6s;
  }

  .landing-synny-welcome.synny-motion-visible::before,
  .landing-synny-portrait.synny-motion-visible::after {
    width: 26px;
    height: 26px;
  }
}