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

/* Custom Component Classes */
.btn-primary {
  border-radius: .5rem;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
  padding: .75rem 1.5rem;
  font-weight: 500;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: .2s;
}

.btn-primary:hover {
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
}

.btn-secondary {
  border-radius: .5rem;
  border-width: 1px;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: .75rem 1.5rem;
  font-weight: 500;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: .2s;
}

.btn-secondary:hover {
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
}

.card {
  border-radius: .75rem;
  border-width: 1px;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  transition-property: all;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: .3s;
}

.dark .card {
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}

.card:hover {
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
}

.nav-gradient {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-gradient {
  background: linear-gradient(135deg, #667eea, #764ba2 50%, #f093fb);
}

/* Animation Classes */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.animate-fade-in {
  animation: fadeIn .5s ease-in-out;
}

@keyframes pulse {
  50% { opacity: .5; }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}

@keyframes slideUp {
  0% { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.animate-slide-up {
  animation: slideUp .3s ease-out;
}

.invisible {
  visibility: hidden;
}

.backdrop-blur-custom {
  backdrop-filter: blur(8px);
}

/* Mobile Menu Animation */
#mobile-menu-button.menu-open #hamburger-top {
  transform: rotate(45deg) translate(6px, 6px);
}

#mobile-menu-button.menu-open #hamburger-middle {
  opacity: 0;
}

#mobile-menu-button.menu-open #hamburger-bottom {
  transform: rotate(-45deg) translate(6px, -6px);
}

/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */