miracles_in_motion/src/index.css

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

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    font-feature-settings: 'rlig' 1, 'calt' 1;
  }
  
  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
  }
  
  ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
  }
  
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    border-radius: 4px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #db2777, #7c3aed);
  }
}

@layer components {
  /* Button Components */
  .btn-primary {
    @apply inline-flex items-center gap-2 rounded-full bg-gradient-to-r from-primary-600 to-secondary-600 px-6 py-3 text-sm font-medium text-white shadow-lg shadow-primary-500/25 transition hover:scale-105 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
  }
  
  .btn-secondary {
    @apply inline-flex items-center gap-2 rounded-full border border-neutral-300 bg-white/70 px-6 py-3 text-sm font-medium text-neutral-700 backdrop-blur transition hover:bg-white hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2 dark:border-white/20 dark:bg-white/10 dark:text-neutral-200 dark:hover:bg-white/20;
  }
  
  .btn-white {
    @apply inline-flex items-center gap-2 rounded-full bg-white px-6 py-3 text-sm font-medium text-neutral-900 shadow-lg transition hover:scale-105 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2;
  }
  
  .navlink {
    @apply text-sm font-medium text-neutral-600 transition hover:text-primary-600 dark:text-neutral-300 dark:hover:text-primary-400;
  }
  
  .input {
    @apply w-full rounded-xl border border-white/30 bg-white/70 px-3 py-2 text-sm backdrop-blur transition focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20 dark:border-white/10 dark:bg-white/10 dark:focus:border-primary-400;
  }
  
  /* Card Components */
  .card {
    @apply rounded-2xl border border-white/30 bg-white/70 p-6 shadow-xl backdrop-blur dark:border-white/10 dark:bg-white/5;
  }
  
  .card-hover {
    @apply transition hover:-translate-y-1 hover:shadow-2xl;
  }
  
  /* Section Header */
  .section-header {
    @apply mx-auto max-w-3xl text-center;
  }
  
  .section-eyebrow {
    @apply text-sm uppercase tracking-wider text-primary-600 dark:text-primary-400;
  }
  
  .section-title {
    @apply mt-2 text-3xl font-bold tracking-tight sm:text-4xl;
  }
  
  .section-subtitle {
    @apply mt-4 text-lg text-neutral-600 dark:text-neutral-300;
  }
}

@layer utilities {
  /* Gradient Text */
  .gradient-text {
    @apply bg-gradient-to-r from-primary-500 via-primary-600 to-secondary-600 bg-clip-text text-transparent;
  }
  
  /* Glass Effect */
  .glass {
    @apply bg-white/10 backdrop-blur-md;
  }
  
  .glass-dark {
    @apply bg-black/10 backdrop-blur-md;
  }
  
  /* Text Balance */
  .text-balance {
    text-wrap: balance;
  }
  
  /* Animation Utilities */
  .animate-in {
    animation: animate-in 0.6s ease-out;
  }
  
  @keyframes animate-in {
    from {
      opacity: 0;
      transform: translateY(1rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Focus States for Accessibility */
  .focus-visible\:ring-2:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.5);
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .btn-primary {
    @apply border-2 border-current;
  }
  
  .btn-secondary {
    @apply border-2 border-current;
  }
  
  .card {
    @apply border-2 border-current;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .animate-marquee {
    animation: none;
  }
  
  .animate-float {
    animation: none;
  }
  
  .animate-pulse-slow {
    animation: none;
  }
}

/* Print Styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  body {
    color: black !important;
    background: white !important;
  }
  
  .gradient-text {
    color: black !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
  }
}