/* Distinct, gentle motion for the two public landing Synny illustrations. */
.landing-synny-welcome {
  transform-origin: 50% 58%;
  will-change: transform;
  animation: landing-synny-hero-float 5.4s ease-in-out infinite;
}

.landing-synny-welcome::after {
  content: "";
  position: absolute;
  right: 18%;
  bottom: -7px;
  left: 18%;
  height: 18px;
  border-radius: 50%;
  background: rgba(74, 59, 173, 0.14);
  filter: blur(9px);
  transform-origin: center;
  animation: landing-synny-hero-shadow 5.4s ease-in-out infinite;
}

.landing-synny-image {
  position: relative;
  z-index: 1;
}

.landing-synny-profile {
  transform-origin: 50% 62%;
  will-change: transform;
  animation: landing-synny-profile-float 6.1s ease-in-out -1.7s infinite;
  transition: filter 220ms ease;
}

.landing-synny-portrait:hover .landing-synny-profile {
  filter:
    drop-shadow(0 22px 30px rgba(63, 48, 151, 0.22))
    saturate(1.06);
}

.landing-synny-portrait::before {
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.landing-synny-portrait:hover::before {
  border-color: #b9aff7;
  box-shadow: 0 18px 44px rgba(76, 58, 176, 0.1);
}

@keyframes landing-synny-hero-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-0.7deg);
  }
  28% {
    transform: translate3d(3px, -8px, 0) rotate(0.2deg);
  }
  55% {
    transform: translate3d(-1px, -13px, 0) rotate(0.9deg);
  }
  78% {
    transform: translate3d(-3px, -6px, 0) rotate(-0.2deg);
  }
}

@keyframes landing-synny-hero-shadow {
  0%,
  100% {
    opacity: 0.72;
    transform: scaleX(1);
  }
  55% {
    opacity: 0.36;
    transform: scaleX(0.76);
  }
}

@keyframes landing-synny-profile-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0.5deg) scale(1);
  }
  34% {
    transform: translate3d(-4px, -10px, 0) rotate(-0.8deg) scale(1.012);
  }
  66% {
    transform: translate3d(3px, -15px, 0) rotate(0.7deg) scale(1.018);
  }
}

@media (max-width: 640px) {
  .landing-synny-welcome {
    animation-duration: 5.9s;
  }

  .landing-synny-profile {
    animation-duration: 6.5s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-synny-welcome,
  .landing-synny-welcome::after,
  .landing-synny-profile {
    animation: none !important;
  }

  .landing-synny-profile,
  .landing-synny-portrait::before {
    transition: none;
  }
}