html {
 scroll-behavior: smooth;
}

button:not(nav button):not([type="submit"]):not([data-target="backToTop"]):hover {
  transform: scale(1.05);
  background-color: #f6f3f4;
  box-shadow: 0 1.5625rem 3.125rem -0.75rem #00000040;
}

ul li[data-target] {
 transition: all 0.6s ease;
}

ul li[data-target]:hover {
 transform: translateY(0) scale(1.05) !important;
 color: var(--primary);
 transition-delay: 0.5s;
}

[data-slot="card-content"] {
  flex: 1;
}
[data-slot="card-content"]:hover {
  transform: scale(1.01);
}


.sonner-loader-logo {
  transform: translateY(-50%) !important;
  transform-origin: center !important;
  opacity: 0 !important;
  transition: transform 0.3s ease, opacity 0.3s ease !important;
}

.sonner-loader-logo.show {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

.sonner-loader-section {
  transform: translateY(14%) !important;
  transform-origin: center !important;
  opacity: 0 !important;
  transition: transform 0.5s ease, opacity 0.5s ease !important;
}

.sonner-loader-section.show {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

.sonner-loader-logo.show:hover {
  transform: translateY(-2px) !important;
  transition: transform 0.3s ease;
  background-color: initial;
}


.scroll-animate {
  opacity: 0;
  transition: opacity 0.8s ease-out, transform 0.6s ease-out;
}

.scroll-animate-bottom {
  transform: translateY(30px);
}
.scroll-animate-bottom.active {
  opacity: 1;
  transform: translateY(0);
}

.scroll-animate-top {
  transform: translateY(-30px);
}
.scroll-animate-top.active {
  opacity: 1;
  transform: translateY(0);
}

.scroll-animate-left {
  transform: translateX(-50px);
}
.scroll-animate-left-far {
  transform: translateX(-100%);
}
.scroll-animate-left.active,
.scroll-animate-left-far.active {
  opacity: 1;
  transform: translateX(0);
}

.scroll-animate-right {
  transform: translateX(50px);
}
.scroll-animate-right.active {
  opacity: 1;
  transform: translateX(0);
}

.scroll-animate-glow-line {
  transform: scaleX(0);
  transform-origin: center;
  transition: all 1s ease-out;
}
.scroll-animate-glow-line.active {
  opacity: 1;
  transform: scaleX(1);
  transform-origin: center;
  transition: transform 1s ease-out, opacity 0.8s ease-out;
}
.scroll-animate-glow-line-slow {
  transform: scaleX(0);
  transform-origin: center;
  transition: all 1.5s ease-out;
}
.scroll-animate-glow-line-slow.active {
  opacity: 1;
  transform: scaleX(1);
  transform-origin: center;
  transition: transform 1.5s ease-out, opacity 0.8s ease-out;
}

@keyframes rotateScale {
  0%   { transform: rotate(0deg) scale(1); }
  25%  { transform: rotate(90deg) scale(1.05); }
  50%  { transform: rotate(180deg) scale(0.95); }
  75%  { transform: rotate(270deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes rotateScalePlus {
  0%   { transform: rotate(0deg) scale(0); }
  20%  { transform: rotate(72deg) scale(0.6); }
  40%  { transform: rotate(144deg) scale(1); }
  60%  { transform: rotate(216deg) scale(1.2); }
  80%  { transform: rotate(288deg) scale(0.6); }
  100% { transform: rotate(360deg) scale(0); }
}

@keyframes rotateScaleSubtle {
  0%   { transform: rotate(0deg) scale(0.8); }
  25%  { transform: rotate(90deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.15); }
  75%  { transform: rotate(270deg) scale(1); }
  100% { transform: rotate(360deg) scale(0.8); }
}

@keyframes rotateScaleMedium {
  0%   { transform: rotate(0deg) scale(0); }
  25%  { transform: rotate(90deg) scale(0.8); }
  50%  { transform: rotate(180deg) scale(1.5); }
  75%  { transform: rotate(270deg) scale(0.8); }
  100% { transform: rotate(360deg) scale(0); }
}

@keyframes rotateScaleDramatic {
  0%   { transform: rotate(0deg) scale(0); }
  20%  { transform: rotate(72deg) scale(0.8); }
  50%  { transform: rotate(180deg) scale(1.75); }
  80%  { transform: rotate(288deg) scale(0.8); }
  100% { transform: rotate(360deg) scale(0); }
}

.animate-rotate-scale-slow           { animation: rotateScale 4s linear infinite; }
.animate-rotate-scale-fast           { animation: rotateScale 2s linear infinite; }
.animate-rotate-scale-slow-plus      { animation: rotateScalePlus 4s linear infinite; }
.animate-rotate-scale-fast-plus      { animation: rotateScalePlus 2s linear infinite; }

.animate-rotate-scale-subtle         { animation: rotateScaleSubtle 4s linear infinite; }
.animate-rotate-scale-medium         { animation: rotateScaleMedium 4s linear infinite; }
.animate-rotate-scale-dramatic       { animation: rotateScaleDramatic 4s linear infinite; }

.animate-rotate-scale-subtle-fast    { animation: rotateScaleSubtle 2s linear infinite; }
.animate-rotate-scale-medium-fast    { animation: rotateScaleMedium 2s linear infinite; }
.animate-rotate-scale-dramatic-fast  { animation: rotateScaleDramatic 2s linear infinite; }

.animate-rotate-scale-subtle-bounce          { animation: rotateScaleSubtle 4s linear infinite alternate; display: inline-block; }
.animate-rotate-scale-medium-bounce          { animation: rotateScaleMedium 4s linear infinite alternate; display: inline-block; }
.animate-rotate-scale-dramatic-bounce        { animation: rotateScaleDramatic 4s linear infinite alternate; display: inline-block; }

.animate-rotate-scale-subtle-bounce-fast     { animation: rotateScaleSubtle 2s linear infinite alternate; display: inline-block; }
.animate-rotate-scale-medium-bounce-fast     { animation: rotateScaleMedium 2s linear infinite alternate; display: inline-block; }
.animate-rotate-scale-dramatic-bounce-fast   { animation: rotateScaleDramatic 2s linear infinite alternate; display: inline-block; }

.animate-pop-scale.active {
  opacity: 1;
  animation: popScale 1s ease forwards;
}

@keyframes popScale {
  0%   { transform: scale(0); }
  50%  { transform: scale(1.25); }
  75%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.animate-tilt-scale.active {
  opacity: 1;
  animation: tiltScale 1s ease forwards;
}

@keyframes tiltScale {
  0%   { transform: scale(0) rotate(0deg); }
  50%  { transform: scale(1.1) rotate(45deg); }
  75%  { transform: scale(0.95) rotate(-45deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.hover-lift:hover {
  transform: translateY(-5px);
}
.hover-lift:not(:hover) {
  animation: hover-lift-settle 0.4s ease-out forwards;
}
@keyframes hover-lift-settle {
  0%   { transform: translateY(-5px) rotate(0deg); }
  40%  { transform: translateY(-4px) rotate(-0.3deg); }
  70%  { transform: translateY(-2px) rotate(0.2deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

.hover-pop:hover {
  transform: translateY(-10px) scale(1.05) rotateY(5deg);
}
.hover-pop:not(:hover) {
  animation: hover-pop-settle 0.5s ease-out forwards;
}
@keyframes hover-pop-settle {
  0%   { transform: translateY(-10px) scale(1.05) rotateY(5deg); }
  40%  { transform: translateY(-8px) scale(1.04) rotateY(-2deg); }
  70%  { transform: translateY(-3px) scale(1.02) rotateY(1deg); }
  100% { transform: translateY(0) scale(1) rotateY(0deg); }
}

.hover-spin:hover {
  animation: spin-forward 0.6s linear forwards;
}
.hover-spin:not(:hover) {
  animation: spin-back 0.6s linear forwards;
}

.hover-shake {
  transition: transform 0.3s ease;
}

.hover-shake:hover {
  animation: spin-very-slightly-forward 0.3s linear forwards;
}

.hover-shake-5:hover {
  animation: spin-very-slightly-forward 0.3s linear forwards;
}
.hover-shake-5:not(:hover) {
  animation: spin-very-slightly-back 0.3s linear forwards;
}

@keyframes spin-forward {
  from { transform: scale(1) rotate(0deg); }
  to { transform: scale(1.2) rotate(360deg); }
}

@keyframes spin-back {
  from { transform: scale(1.2) rotate(360deg); }
  to { transform: scale(1) rotate(0deg); }
}

@keyframes spin-very-slightly-forward {
  0%   { transform: scale(1) rotate(0deg); }
  25%  { transform: scale(1.1) rotate(6deg); }
  50%  { transform: scale(1.04) rotate(4deg); }
  75%  { transform: scale(1.07) rotate(5deg); }
  100% { transform: scale(1.1) rotate(5deg); }
}

@keyframes spin-very-slightly-back {
  0%   { transform: scale(1.1) rotate(5deg); }
  25%  { transform: scale(1) rotate(-2deg); }
  50%  { transform: scale(1.04) rotate(1deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.arrowBackAndForth {
  animation: arrowBackAndForth 0.5s ease-in-out infinite alternate;
}

@keyframes arrowBackAndForth {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0.25rem);
  }
}