@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .hero-dot-pattern {
    background-color: #faf9f7;
    background-image: radial-gradient(circle, #c8b89a 1px, transparent 1px);
    background-size: 22px 22px;
  }
}

@keyframes testimonials-scroll-up {
  0% { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

@keyframes testimonials-scroll-down {
  0% { transform: translateY(-50%); }
  to { transform: translateY(0); }
}

@keyframes signup-fade-in-up {
  0% { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes signup-blob-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 15px) scale(0.97); }
}

.signup-form-enter {
  animation: signup-fade-in-up 0.5s ease-out both;
}

.signup-blob {
  animation: signup-blob-drift 8s ease-in-out infinite;
}

.signup-blob-delayed {
  animation: signup-blob-drift 10s ease-in-out infinite reverse;
  animation-delay: -3s;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */