/*
 * 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.
 *


 */

@keyframes cardEntrance {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scrollHint {
  0% { transform: translateX(0); }
  15% { transform: translateX(-20px); }
  30% { transform: translateX(10px); }
  45% { transform: translateX(-5px); }
  60% { transform: translateX(0); }
  100% { transform: translateX(0); }
}

.animate-scroll-hint {
  animation: scrollHint 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s both;
}

.animate-card-entrance {
  animation: cardEntrance 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes pulseSlow {
  0%, 100% { opacity: 0.1; transform: scale(1); }
  50% { opacity: 0.2; transform: scale(1.1); }
}

.animate-pulse-slow {
  animation: pulseSlow 8s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

/* Global design overrides to improve contrast and define cards */
body.bg-slate-50,
.bg-slate-50,
.bg-slate-50\/50 {
  background-color: rgba(241, 245, 249, 0.6) !important;
}

.border-slate-100,
.border-slate-100\/50,
.border-slate-50,
.border-gray-100 {
  border-color: #E2E8F0 !important;
}

.border-emerald-100\/50 {
  border-color: rgba(167, 243, 208, 0.8) !important;
}

.border-indigo-100\/50 {
  border-color: rgba(199, 210, 254, 0.8) !important;
}

.border-violet-100\/50 {
  border-color: rgba(221, 214, 254, 0.8) !important;
}

/* --- Apple Web Design System --- */
.font-apple {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "SF Pro", "Inter", system-ui, sans-serif !important;
}

.tracking-tight {
  letter-spacing: -0.015em !important;
}

.apple-glass-light {
  background-color: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.apple-glass-dark {
  background-color: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.shadow-apple-sm {
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.05) !important;
}

.shadow-apple-md {
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.02) !important;
}

.shadow-apple-lg {
  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.04) !important;
}