.feature-card,
.group,
.ripple,
svg,
.fade-in-up,
.animated-float,
.badge-glow,
.login-button-wrapper,
.animate-gradient-pan,
.animate-gradient-x {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

  .font-poppins {
    font-family: 'Poppins', sans-serif;
  }

  .font-inter {
    font-family: 'Inter', sans-serif;
  }

  @keyframes floatText {

    0%,
    100% {
      transform: translateY(0px);
    }

    50% {
      transform: translateY(-6px);
    }
  }

  @keyframes fadeSlideUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }

    to {
      opacity: 1;
      transform: translateY(0px);
    }
  }

  @keyframes pulseGlow {

    0%,
    100% {
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    }

    50% {
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    }
  }

  @keyframes scrollGrid {
    0% {
      background-position: 0 0;
    }

    100% {
      background-position: 24px 24px;
    }
  }

  .animated-float {
    animation: floatText 4s ease-in-out infinite;
  }

  .fade-in-up {
    opacity: 0;
    animation: fadeSlideUp 1s ease-out forwards;
  }

  .badge-glow {
    animation: pulseGlow 2.5s ease-in-out infinite;
  }

  .animated-grid {
    animation: scrollGrid 30s linear infinite;
  }

  @keyframes rippleOut {
    from {
      width: 0;
      height: 0;
      opacity: 0.8;
    }

    to {
      width: 300%;
      height: 300%;
      opacity: 1;
    }
  }

  .ripple {
    opacity: 0;
  }

  .group:hover .ripple {
    animation: rippleOut 0.6s ease-out forwards;
    opacity: 1;
  }

  .group:hover svg {
    animation: moveRight 0.6s ease-out forwards;
  }

  @keyframes moveRight {
    0% {
      transform: translateX(0);
    }

    50% {
      transform: translateX(6px);
    }

    100% {
      transform: translateX(4px);
    }
  }

  .nav-grid {
    position: relative;
  }

  .nav-grid::before {
    content: "";
    position: absolute;
    inset: -8px;
    background-image: linear-gradient(#4f46e510 1px, transparent 1px),
      linear-gradient(to right, #4f46e510 1px, transparent 1px);
    background-size: 8px 8px;
    border-radius: 4px;
    pointer-events: none;
  }

  .doodle-underline {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' viewBox='0 0 124 12' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' stroke='%233b82f6' stroke-width='2' fill='none'%3e%3cpath d='M2,9 C8.8,9 8.8,3 15.6,3 C22.4,3 22.4,9 29.2,9 C36,9 36,3 42.8,3 C49.6,3 49.6,9 56.4,9 C63.2,9 63.2,3 70,3 C76.8,3 76.8,9 83.6,9 C90.4,9 90.4,3 97.2,3 C104,3 104,9 110.8,9 C117.6,9 117.6,3 122,3'/%3e%3c/svg%3e");
    background-repeat: repeat-x;
    background-position: 0 100%;
    background-size: 160px 14px;
    padding-bottom: 6px;
  }

  .highlight-yellow {
    position: relative;
    display: inline-block;
    z-index: 1;
  }

  .highlight-yellow::after {
    content: "";
    position: absolute;
    width: 103%;
    height: 60%;
    bottom: 4px;
    left: -4%;
    background-color: #fef08a;
    z-index: -1;
    transform: rotate(-2deg);
    transition: all 0.3s ease;
  }

  .highlight-pink {
    position: relative;
    display: inline-block;
    z-index: 1;
  }

  .highlight-pink::after {
    content: "";
    position: absolute;
    width: 101%;
    height: 60%;
    bottom: 5px;
    left: -1%;
    background-color: #ffa4d8;
    z-index: -1;
    transform: rotate(1deg);
    transition: all 0.3s ease;
  }

  .highlight-blue {
    position: relative;
    display: inline-block;
    z-index: 1;
  }

  .highlight-blue::after {
    content: "";
    position: absolute;
    width: 108%;
    height: 60%;
    bottom: 6px;
    left: -4%;
    background-color: #8cbfff;
    z-index: -1;
    transform: rotate(-1deg);
    transition: all 0.3s ease;
  }

  .highlight-yellow:hover::after,
  .highlight-pink:hover::after,
  .highlight-blue:hover::after {
    height: 90%;
    transform: rotate(0deg);
  }

  @keyframes gradient-pan {
    from {
      background-position: 0% center;
    }

    to {
      background-position: -200% center;
    }
  }

  .animate-gradient-pan {
    background-size: 200%;
    animation: gradient-pan 8s linear infinite;
    background-image: linear-gradient(90deg,
        hsl(240deg 100% 20%),
        hsl(217deg 100% 50%),
        hsl(189deg 100% 50%),
        hsl(217deg 100% 50%),
        hsl(240deg 100% 20%));
  }

  @keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4);
    }

    70% {
      box-shadow: 0 0 0 10px rgba(79, 70, 229, 0);
    }

    100% {
      box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
    }
  }

  /* Commenting out the floating button animation
    .fixed.bottom-8.right-8 a {
      animation: pulse 2s infinite;
    }
    */

  @keyframes gradient-x {
    0% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0% 50%;
    }
  }

  .animate-gradient-x {
    background-size: 200% 100%;
    animation: gradient-x 15s ease infinite;
  }

  @media screen and (max-width: 1200px) {

    .absolute.left-\[174px\],
    .absolute.left-\[66rem\] {
      display: none;
    }
  }

  @keyframes slideIn {
    from {
      transform: translateX(100%);
      opacity: 0;
    }

    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  .toast-enter {
    animation: slideIn 0.3s ease-out forwards;
  }

  .success-checkmark {
    animation: checkmark 0.3s ease-out forwards;
  }

  @keyframes checkmark {
    from {
      transform: scale(0);
      opacity: 0;
    }

    to {
      transform: scale(1);
      opacity: 1;
    }
  }

  .login-button-wrapper {
    top: 1rem;
    right: 1.5rem;
    z-index: 51;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .login-button-wrapper.dpr-1.with-banner {
    top: 0.5rem;
    right: 5rem;
  }

  .login-button-wrapper.dpr-1-25.with-banner {
    top: 0.5rem;
    right: 11.5rem;
  }

  .login-button-wrapper.dpr-1-5.with-banner {
    top: 0.5rem;
    right: 13rem;
  }

  .login-button-wrapper.dpr-other.with-banner {
    top: 0.5rem;
    right: 5rem;
  }

  #fullscreenModal:not(.hidden) ~ * .login-button-wrapper,
  body:has(#fullscreenModal:not(.hidden)) .login-button-wrapper {
    opacity: 0;
    pointer-events: none;
  }

  .login-button-link {
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  }

  .login-text,
  .login-arrow {
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  }

  .login-button-wrapper .login-text {
    font-size: 1rem;
  }

  .login-button-wrapper .login-arrow {
    width: 1.25rem;
    height: 1.25rem;
  }

  .login-button-wrapper.with-banner .login-text {
    font-size: 0.875rem;
  }

  .login-button-wrapper.with-banner a {
    padding: 0.5rem 1rem !important;
    gap: 0.5rem !important;
  }

  .login-button-wrapper.with-banner .login-arrow {
    width: 1rem !important;
    height: 1rem !important;
  }

  @media (hover: none) and (pointer: coarse) {
    .login-button-wrapper {
      position: absolute !important;
      top: 1rem !important;
      right: 1.5rem !important;
      z-index: 40 !important;
      transition: all 0.3s ease !important;
    }

    .login-button-wrapper.with-banner {
      position: absolute !important;
      top: 0.625rem !important;
      right: 1.5rem !important;
      z-index: 40 !important;
      transition: all 0.3s ease !important;
    }
  }

  @media screen and (max-width: 640px) {
    .login-button-wrapper {
      top: 0.5rem;
      right: 0.75rem;
    }

    .login-button-wrapper.with-banner {
      top: 0.35rem;
      right: 0.5rem;
    }

    .login-button-inner {
      padding: 0.4rem 1rem;
      font-size: 0.875rem;
    }
  }