/* ------------------------------------------------------------------
   Tailwind Directives
   ------------------------------------------------------------------
   The three @tailwind directives below let Tailwind inject its base
   styles, component classes, and utility classes into the final CSS
   file that gets generated by the CLI.
-------------------------------------------------------------------*/
/* Import all of Tailwind's layers (base, components & utilities) for Tailwind v4+ */
@import "tailwindcss";

/* ------------------------------------------------------------------
   Tailwind v4 Custom Utilities
   ------------------------------------------------------------------
   In Tailwind v4, custom utilities are defined using CSS instead of
   the config file. We'll create font utility classes here.
-------------------------------------------------------------------*/
@layer utilities {
  /* Custom font family utilities */
  .font-heading {
    font-family: "Fugaz One", "Inter", ui-sans-serif, system-ui, sans-serif;
    font-weight: 400; /* Fugaz One has a single regular weight */
  }
  
  .font-sans {
    font-family: "Inter", "Source Sans Pro", ui-sans-serif, system-ui, sans-serif;
    font-weight: 400;
  }
  .font-roboto {
    font-family: "Work Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
    font-weight: 400;
  }
}

/* ------------------------------------------------------------------
   Custom Global Styles
   ------------------------------------------------------------------
   Add any additional global styles or overrides below. Try to keep
   custom CSS minimal and leverage Tailwind utility classes whenever
   possible so that our design system stays consistent.
-------------------------------------------------------------------*/

/* Example global style removed for Tailwind v4 compatibility */

/* Enable smooth scrolling for anchor links across the site */
html {
  scroll-behavior: smooth;
}

/* ------------------------------------------------------------------
   Stripe Widget Customization
   ------------------------------------------------------------------
   Customize the Stripe buy button to match site design system
-------------------------------------------------------------------*/

/* Target the Stripe buy button specifically */
stripe-buy-button {
  /* Ensure it takes full width of container */
  width: 100%;
  display: block;
}

/* Enhance the Stripe button with site's design system */
stripe-buy-button::part(button) {
  background: var(--gradient-accent) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  text-transform: none !important;
  letter-spacing: 0.025em !important;
  box-shadow: 0 4px 14px 0 rgba(25, 118, 210, 0.25) !important;
  transition: all 180ms ease !important;
  cursor: pointer !important;
  width: 100% !important;
}

stripe-buy-button::part(button):hover {
  background: var(--gradient-accent-hover) !important;
  box-shadow: 0 6px 20px 0 rgba(25, 118, 210, 0.35) !important;
  transform: translateY(-1px) !important;
}

stripe-buy-button::part(button):focus {
  outline: none !important;
  box-shadow: 0 6px 20px 0 rgba(25, 118, 210, 0.35), 0 0 0 3px rgba(25, 118, 210, 0.1) !important;
}

/* ------------------------------------------------------------------
   Micro-interactions for Enhanced UX
   ------------------------------------------------------------------
   Subtle hover/focus scaling and glow effects for improved engagement
-------------------------------------------------------------------*/

/* Universal scaling for interactive elements */
a, button, .btn, .card {
  transition: transform 180ms ease, box-shadow 180ms ease;
}

a:hover, a:focus-visible,
button:hover, button:focus-visible,
.btn:hover, .btn:focus-visible {
  transform: scale(1.04);
}

/* Subtle glow animation for primary CTA buttons */
@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(25, 118, 210, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(25, 118, 210, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(25, 118, 210, 0);
  }
}

/* Apply pulsing glow to primary buttons when they enter viewport */
.btn-primary {
  animation: pulseGlow 2s ease-out;
}

/* Intersection Observer will trigger this class for viewport entry */
.btn-primary.in-viewport {
  animation: pulseGlow 2s ease-out;
}

/* Subtle background pattern - tiny repeating dots for texture */
body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Ccircle cx='3' cy='3' r='0.8' fill='%23663399' fill-opacity='0.04'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

@layer base {
  h2 {
    font-family: "Fugaz One", "Inter", ui-sans-serif, system-ui, sans-serif;
    font-weight: 400; /* Fugaz One has a single regular weight */
    text-transform: uppercase;
  }
}

/* ------------------------------------------------------------------
   Custom Variables & Gradients
   ------------------------------------------------------------------
   Define the vibrant gradient and related styling variables
-------------------------------------------------------------------*/
:root {
  /* Darker gradient with purple - sophisticated brand colors */
  --gradient-accent: linear-gradient(135deg, #1976D2, #663399, #00796B);
  --gradient-accent-hover: linear-gradient(135deg, #1565C0, #4A148C, #004D40);
}

/* ------------------------------------------------------------------
   Component Library
   ------------------------------------------------------------------
   Reusable components using Tailwind's @apply directive to bundle utility
   classes into simple, semantic class names that beginners can quickly
   understand and reuse across the site.
-------------------------------------------------------------------*/
@layer components {
  /* ---------- Buttons ---------- */
  /* Base button styles shared by all variants */
  .btn {
    /* Flex centering ensures icons + text remain aligned */
    @apply inline-flex items-center justify-center font-medium rounded transition-colors duration-150 focus:outline-none;
  }

  /* Primary — gradient background with white text */
  .btn-primary {
    /* Base state with gradient background */
    @apply inline-flex items-center justify-center font-medium rounded focus:outline-none text-white px-6 py-3;
    background: var(--gradient-accent);
    box-shadow: 0 4px 14px 0 rgba(25, 118, 210, 0.25);
    transition: all 180ms ease;
  }
  .btn-primary:hover {
    /* Enhanced gradient on hover - scale handled by universal rule */
    background: var(--gradient-accent-hover);
    box-shadow: 0 6px 20px 0 rgba(25, 118, 210, 0.35);
  }
  .btn-primary:focus-visible {
    /* Accessible focus ring with gradient colors */
    @apply ring-4;
    ring-color: rgba(25, 118, 210, 0.5);
  }

  /* Secondary — outlined gradient color that fills with gradient on hover */
  .btn-secondary {
    @apply inline-flex items-center justify-center font-medium rounded focus:outline-none bg-white px-6 py-3;
    background-clip: padding-box;
    border: 2px solid transparent;
    background-image: linear-gradient(white, white), var(--gradient-accent);
    background-origin: border-box;
    color: #1976D2;
    transition: all 180ms ease;
  }
  .btn-secondary:hover {
    background: var(--gradient-accent);
    color: white;
    /* Scale handled by universal rule */
  }
  .btn-secondary:focus-visible {
    @apply ring-4;
    ring-color: rgba(25, 118, 210, 0.5);
  }

  /* Tertiary — minimal button with gradient text */
  .btn-tertiary {
    @apply inline-flex items-center justify-center font-medium rounded focus:outline-none px-4 py-2;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    transition: all 180ms ease;
  }
  .btn-tertiary:hover {
    @apply underline;
    /* Scale handled by universal rule */
  }

  /* ---------- Gradient Text Effects ---------- */
  /* Main gradient text utility for key headlines */
  .gradient-text {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* Fallback for browsers without support */
    display: inline-block; /* Ensures proper rendering */
  }

  /* Animated gradient text that shifts on hover */
  .gradient-text-animated {
    background: var(--gradient-accent);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
    animation: gradientShift 3s ease-in-out infinite;
  }

  /* Keyframe animation for gradient text */
  @keyframes gradientShift {
    0%, 100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }

  /* ---------- Card ---------- */
  /* Useful for testimonials, feature highlights, etc. */
  .card {
    @apply bg-white rounded-lg shadow-md p-6 border border-gray-100;
  }

  /* ---------- Section Container ---------- */
  /* Consistent page-width wrapper to avoid magic numbers */
  .section-container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* ---------- Form Elements ---------- */
  /* Accessible input field with clear focus state */
  .input-field {
    @apply block w-full border border-gray-300 rounded-md px-3 py-2 placeholder-gray-500 focus:outline-none;
  }

  /* Input label styling for consistency */
  .input-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
  }

  /* Error message styling */
  .form-error {
    @apply mt-1 text-sm text-red-600;
  }

  /* Gradient-enhanced input focus states */
  .input-field:focus {
    border-color: #1976D2;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
  }

  /* ---------- Accessibility Utilities ---------- */
  /* Re-export Tailwind's sr-only utility under a semantic alias for beginners */
  .sr-only {
    @apply sr-only;
  }

  /* Generic focus ring utility with gradient accent colors */
  .focus-ring {
    @apply focus:outline-none focus-visible:ring-4;
  }
  .focus-ring:focus-visible {
    ring-color: rgba(25, 118, 210, 0.5);
  }

  /* Skip link styling with gradient accent */
  .skip-link {
    @apply sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-white px-3 py-2 rounded;
    color: #1976D2;
  }

  /* ---------- SVG Wave Dividers ---------- */
  /* Lightweight wave patterns to separate sections */
  .wave-divider {
    @apply w-full h-16 md:h-20 lg:h-24 overflow-hidden;
  }
  
  .wave-divider svg {
    @apply w-full h-full;
  }
  
  /* Wave color variants with gradient-inspired colors */
  .wave-primary {
    color: #1976D2; /* Primary gradient color */
  }
  
  .wave-secondary {
    color: #663399; /* Purple gradient color */
  }
  
  .wave-accent {
    color: #00796B; /* Teal gradient color */
  }

  /* Role selector styling - REQUIRED for functionality */
  .role-btn {
    @apply px-6 py-3 rounded-lg border-2 border-gray-300 text-gray-700 hover:border-[#663399] hover:text-[#663399] transition-all duration-200 font-medium;
  }

  .role-btn.active {
    @apply border-[#663399] bg-[#663399] text-white shadow-md transform scale-105;
  }

  .role-content {
    @apply hidden;
  }

  .role-content.active {
    @apply block;
  }

  /* Mobile-responsive role buttons */
  @media (max-width: 640px) {
    .role-btn {
      @apply text-sm px-4 py-2;
    }
  }

  /* Video label styling */
  #video-label, #video-subtitle {
    @apply transition-all duration-300;
  }
}