/* Cache Buster: 2026-03-08-18:30:00 - Progressive Animations & Animated Favicon! */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* CRITICAL: Override any browser defaults - must come AFTER Tailwind */
html {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  position: relative !important;
  background-color: #1a1a1a !important;
}

#root {
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

#app {
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

/* Remove any top spacing from first child */
body > * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#app > * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#root > * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Custom cursive brand font - using system cursive fonts for privacy */
@layer base {
  .font-brand {
    font-family: 'Brush Script MT', 'Apple Chancery', cursive;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: lowercase;
  }
}

/* Instagram-style smooth animations */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes rainbow-shimmer {
  0% {
    background-position: 200% 0;
    background-image: linear-gradient(90deg, #1a1a1a 0%, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%, #1a1a1a 100%);
  }
  25% {
    background-image: linear-gradient(90deg, #1a1a1a 0%, #2a1a2a 25%, #3a2a3a 50%, #2a1a2a 75%, #1a1a1a 100%);
  }
  50% {
    background-position: -200% 0;
    background-image: linear-gradient(90deg, #1a1a1a 0%, #1a2a2a 25%, #2a3a3a 50%, #1a2a2a 75%, #1a1a1a 100%);
  }
  75% {
    background-image: linear-gradient(90deg, #1a1a1a 0%, #1a1a2a 25%, #2a2a3a 50%, #1a1a2a 75%, #1a1a1a 100%);
  }
  100% {
    background-position: 200% 0;
    background-image: linear-gradient(90deg, #1a1a1a 0%, #2a2a1a 25%, #3a3a2a 50%, #2a2a1a 75%, #1a1a1a 100%);
  }
}

/* Rainbow border animation - vibrant colors with orange-yellow fade */
@keyframes rainbow-border {
  0% {
    border-color: #00ff00;
  }
  14% {
    border-color: #00ffff;
  }
  28% {
    border-color: #0000ff;
  }
  42% {
    border-color: #ff00ff;
  }
  56% {
    border-color: #ff0000;
  }
  66% {
    border-color: #ff8800;
  }
  76% {
    border-color: #ffcc00;
  }
  86% {
    border-color: #ffff00;
  }
  100% {
    border-color: #00ff00;
  }
}

/* Rainbow text glow animation with orange-yellow fade */
@keyframes rainbow-glow {
  0% {
    text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;
  }
  14% {
    text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff;
  }
  28% {
    text-shadow: 0 0 10px #0000ff, 0 0 20px #0000ff, 0 0 30px #0000ff;
  }
  42% {
    text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 30px #ff00ff;
  }
  56% {
    text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000;
  }
  66% {
    text-shadow: 0 0 10px #ff8800, 0 0 20px #ff8800, 0 0 30px #ff8800;
  }
  76% {
    text-shadow: 0 0 10px #ffcc00, 0 0 20px #ffcc00, 0 0 30px #ffcc00;
  }
  86% {
    text-shadow: 0 0 10px #ffff00, 0 0 20px #ffff00, 0 0 30px #ffff00;
  }
  100% {
    text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;
  }
}

/* Rainbow background gradient animation with orange-yellow fade */
@keyframes rainbow-bg {
  0% {
    background: linear-gradient(135deg, #00ff00, #00ffff);
  }
  14% {
    background: linear-gradient(135deg, #00ffff, #0000ff);
  }
  28% {
    background: linear-gradient(135deg, #0000ff, #ff00ff);
  }
  42% {
    background: linear-gradient(135deg, #ff00ff, #ff0000);
  }
  56% {
    background: linear-gradient(135deg, #ff0000, #ff8800);
  }
  66% {
    background: linear-gradient(135deg, #ff8800, #ffcc00);
  }
  76% {
    background: linear-gradient(135deg, #ffcc00, #ffff00);
  }
  86% {
    background: linear-gradient(135deg, #ffff00, #00ff00);
  }
  100% {
    background: linear-gradient(135deg, #00ff00, #00ffff);
  }
}

/* Synchronized rainbow button animation - matches border exactly */
@keyframes rainbow-button {
  0% {
    background-color: #00ff00;
    border-color: #00ff00;
  }
  14% {
    background-color: #00ffff;
    border-color: #00ffff;
  }
  28% {
    background-color: #0000ff;
    border-color: #0000ff;
  }
  42% {
    background-color: #ff00ff;
    border-color: #ff00ff;
  }
  56% {
    background-color: #ff0000;
    border-color: #ff0000;
  }
  66% {
    background-color: #ff8800;
    border-color: #ff8800;
  }
  76% {
    background-color: #ffcc00;
    border-color: #ffcc00;
  }
  86% {
    background-color: #ffff00;
    border-color: #ffff00;
  }
  100% {
    background-color: #00ff00;
    border-color: #00ff00;
  }
}

/* Diagonal rainbow gradient that matches logo and header animation exactly */
@keyframes rainbow-border-diagonal {
  0% {
    background-position: 0% 0%;
  }
  25% {
    background-position: 100% 100%;
  }
  50% {
    background-position: 50% 50%;
  }
  75% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 0% 0%;
  }
}

@keyframes glow-pulse {
  0%, 100% {
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    opacity: 0.8;
    filter: brightness(1.2);
  }
}

@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes diagonalShift {
  0% {
    background-position: 0% 0%;
  }
  25% {
    background-position: 100% 100%;
  }
  50% {
    background-position: 50% 50%;
  }
  75% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 0% 0%;
  }
}

@layer base {
  /* Remove default browser spacing */
  html {
    margin: 0;
    padding: 0;
  }
  
  body {
    margin: 0;
    padding: 0;
  }
  
  #root {
    margin: 0;
    padding: 0;
  }
  
  :root {
    /* Core Colors - Pure black backgrounds */
    --background: 0 0% 0%;
    --foreground: 40 20% 98%;
    --card: 0 0% 0%;
    --card-foreground: 40 20% 98%;
    --popover: 0 0% 0%;
    --popover-foreground: 40 20% 98%;
    --primary: 38 92% 50%;
    --primary-foreground: 0 0% 100%;
    --secondary: 25 75% 45%;
    --secondary-foreground: 0 0% 100%;
    --muted: 30 20% 18%;
    --muted-foreground: 40 15% 75%;
    --accent: 45 95% 55%;
    --accent-foreground: 0 0% 0%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 35 30% 30%;
    --input: 35 30% 30%;
    --ring: 38 92% 50%;

    /* Extended Colors */
    --chart-1: 38 92% 50%;
    --chart-2: 35 85% 45%;
    --chart-3: 30 80% 40%;
    --chart-4: 25 75% 35%;
    --chart-5: 20 70% 30%;

    /* Sidebar Colors */
    --sidebar: 30 20% 18%;
    --sidebar-foreground: 40 20% 96%;
    --sidebar-primary: 38 92% 50%;
    --sidebar-primary-foreground: 30 15% 8%;
    --sidebar-accent: 45 95% 55%;
    --sidebar-accent-foreground: 30 15% 8%;
    --sidebar-border: 35 30% 30%;
    --sidebar-ring: 38 92% 50%;

    /* Typography */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-heading: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-serif: ui-serif, Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;

    /* Border Radius */
    --radius: 0.5rem;

    /* Shadows */
    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
    --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
  }

  * {
    @apply border-border;
  }

  body {
    @apply text-white font-sans;
    background-color: #0a0a0a;
  
    font-family: var(--font-sans);
    font-feature-settings: "kern" 1, "liga" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading) !important;
    color: white !important;
  }
  
  /* Force all text to be white */
  p, span, div, a, label, input, textarea, button {
    color: white !important;
  }
  
  /* Remove link color changes on hover/visited */
  a {
    color: white !important;
    text-decoration: none;
  }
  
  a:hover {
    color: white !important;
    opacity: 0.8;
  }
  
  a:visited {
    color: white !important;
  }
  
  a:active {
    color: white !important;
  }
}

/* Custom utility classes */
@layer utilities {
  .animate-in {
    animation-duration: 0.2s;
    animation-fill-mode: both;
  }

  .fade-in {
    animation-name: fadeIn;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  /* Gradient text utilities */
  .gradient-text {
    @apply bg-gradient-to-r from-primary via-secondary to-primary bg-clip-text text-transparent;
  }
  
  .gradient-text-animated {
    @apply bg-gradient-to-r from-primary via-secondary to-primary bg-clip-text text-transparent;
    background-size: 200% auto;
    animation: gradient-shift 3s ease infinite;
  }
  
  /* Glow effects */
  .glow-primary {
    box-shadow: 0 0 20px rgba(10, 107, 95, 0.3);
  }
  
  .glow-primary-strong {
    box-shadow: 0 0 30px rgba(10, 107, 95, 0.5), 0 0 60px rgba(10, 107, 95, 0.3);
  }
  
  /* Smooth transitions */
  .transition-smooth {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .transition-bounce {
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  
  /* Leopard pattern background */
  .leopard-pattern {
    background: 
      radial-gradient(ellipse at 20% 50%, rgba(200, 140, 70, 0.4) 0%, transparent 50%),
      radial-gradient(ellipse at 80% 30%, rgba(220, 160, 80, 0.35) 0%, transparent 50%),
      radial-gradient(ellipse at 40% 80%, rgba(180, 120, 60, 0.3) 0%, transparent 50%),
      radial-gradient(ellipse at 60% 20%, rgba(210, 150, 75, 0.4) 0%, transparent 50%),
      radial-gradient(ellipse at 90% 70%, rgba(190, 130, 65, 0.3) 0%, transparent 50%),
      linear-gradient(135deg, #3d2817 0%, #5a3d25 50%, #3d2817 100%);
    background-size: 300% 300%, 280% 280%, 250% 250%, 320% 320%, 290% 290%, 100% 100%;
    background-position: 0% 0%, 100% 100%, 50% 50%, 80% 20%, 30% 60%, 0% 0%;
  }
  
  /* Rainbow shimmer animation for loading states */
  .animate-rainbow-shimmer {
    animation: rainbow-shimmer 3s ease-in-out infinite;
    background-size: 200% 100%;
  }
  
  /* Rainbow border animation utility */
  .animate-rainbow-border {
    animation: rainbow-border 6s linear infinite;
  }
  
  /* Rainbow text glow animation utility */
  .animate-rainbow-glow {
    animation: rainbow-glow 6s linear infinite;
  }
  
  /* Rainbow background animation utility */
  .animate-rainbow-bg {
    animation: rainbow-bg 6s linear infinite;
  }
  
  /* Rainbow border button with rotating gradient effect */
  .rainbow-border-button {
    position: relative;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  
  .rainbow-border-button::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    /* Static gradient fallback - positioned at 45deg for visual interest */
    background: linear-gradient(125deg, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000, #ff8800, #ffcc00, #ffff00, #00ff00);
    background-size: 400% 400%;
    background-position: 25% 25%; /* Static position showing nice color mix */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
  
  /* Animated version - only for users who can handle it */
  /* All rainbow borders sync to the same animation timeline */
  @media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
    .rainbow-border-button::before {
      animation: rainbow-border-diagonal 45s ease-in-out infinite;
      /* Force all animations to sync by using the same start time */
      animation-play-state: running;
    }
    
    /* Global sync: all rainbow borders start at the same time */
    body .rainbow-border-button::before {
      animation-delay: 0s !important;
    }
  }
  
  /* Slow connection detection via save-data header */
  @media (prefers-reduced-data: reduce) {
    .rainbow-border-button::before {
      animation: none !important;
      background-position: 25% 25%; /* Keep static gradient */
    }
  }
  
  /* JavaScript-detected slow connection */
  .slow-connection .rainbow-border-button::before,
  .reduced-motion .rainbow-border-button::before {
    animation: none !important;
    background-position: 25% 25%; /* Keep static gradient */
  }
  
  /* Mobile devices - use static gradient to save battery */
  @media (max-width: 767px) {
    .rainbow-border-button::before {
      animation: none !important;
      background-position: 25% 25%; /* Keep static gradient */
    }
  }
  
  
  /* Fallback for browsers that don't support mask */
  @supports not (mask-composite: exclude) {
    .rainbow-border-button::before {
      display: none;
    }
    .rainbow-border-button {
      border: 2px solid;
      border-image: linear-gradient(125deg, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000, #ff8800, #ffcc00, #ffff00) 1;
    }
  }
  
  /* Rainbow border input - matches button animation exactly */
  .rainbow-border-input {
    position: relative;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  
  .rainbow-border-input::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    /* Static gradient fallback - positioned at 45deg for visual interest */
    background: linear-gradient(125deg, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000, #ff8800, #ffcc00, #ffff00, #00ff00);
    background-size: 400% 400%;
    background-position: 25% 25%; /* Static position showing nice color mix */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  
  /* Show rainbow border only when focused */
  .rainbow-border-input:focus::before {
    opacity: 1;
  }
  
  /* Animated version - only for users who can handle it */
  @media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
    .rainbow-border-input:focus::before {
      animation: rainbow-border-diagonal 45s ease-in-out infinite;
    }
  }
  
  /* Slow connection detection via save-data header */
  @media (prefers-reduced-data: reduce) {
    .rainbow-border-input:focus::before {
      animation: none !important;
      background-position: 25% 25%; /* Keep static gradient */
    }
  }
  
  /* JavaScript-detected slow connection */
  .slow-connection .rainbow-border-input:focus::before,
  .reduced-motion .rainbow-border-input:focus::before {
    animation: none !important;
    background-position: 25% 25%; /* Keep static gradient */
  }
  
  /* Mobile devices - use static gradient to save battery */
  @media (max-width: 767px) {
    .rainbow-border-input:focus::before {
      animation: none !important;
      background-position: 25% 25%; /* Keep static gradient */
    }
  }
  
  /* Fallback for browsers that don't support mask */
  @supports not (mask-composite: exclude) {
    .rainbow-border-input:focus::before {
      display: none;
    }
    .rainbow-border-input:focus {
      border: 2px solid;
      border-image: linear-gradient(125deg, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000, #ff8800, #ffcc00, #ffff00) 1;
    }
  }
  
  /* Hover effect: Rainbow border on buttons - EXCEPT toggle switches */
  button:hover:not([role="switch"]),
  .btn:hover,
  a.button:hover {
    animation: rainbow-border 3s linear infinite;
  }
  
  /* Remove old focus styles */
  input:focus,
  textarea:focus,
  select:focus {
    outline: none;
  }
  
  /* Links with rainbow text color on hover - orange-yellow fade */
  @keyframes rainbow-text-color {
    0% {
      color: #00ff00;
    }
    14% {
      color: #00ffff;
    }
    28% {
      color: #0000ff;
    }
    42% {
      color: #ff00ff;
    }
    56% {
      color: #ff0000;
    }
    66% {
      color: #ff8800;
    }
    76% {
      color: #ffcc00;
    }
    86% {
      color: #ffff00;
    }
    100% {
      color: #00ff00;
    }
  }
  
  a:hover:not(.no-rainbow) {
    animation: rainbow-text-color 6s linear infinite !important;
  }
  
  .rainbow-text-hover:hover {
    animation: rainbow-text-color 6s linear infinite !important;
  }
  
  /* Global text indentation - adds left/right padding to ALL text content */
  /* This indents every line of text, not just the first line */
  
  /* Apply to all text elements */
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span:not([class*="icon"]):not([class*="svg"]),
  a,
  button,
  label,
  li,
  blockquote,
  figcaption,
  caption,
  td,
  th {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  
  /* Exception: Don't indent the animated logo, loading spinners, and SVG icons */
  header svg,
  header svg *,
  nav svg,
  nav svg *,
  .animate-logo,
  .animate-logo *,
  .animate-spin,
  .animate-spin *,
  .initial-loader,
  .initial-loader *,
  [class*="LoadingSpinner"] svg,
  [class*="LoadingSpinner"] svg * {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Exception: Don't double-indent already padded containers */
  [class*="px-"],
  [class*="pl-"],
  [class*="pr-"] {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  
  /* Text indentation utility for specific elements */
  .indent-8 {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  
  /* Force button styles - cache buster v2 */
  button.bg-black,
  .bg-black {
    background-color: #000000 !important;
  }
  
  button.border-cyan-600,
  .border-cyan-600 {
    border-color: #0891b2 !important;
  }
  
  button.rounded-full,
  .rounded-full {
    border-radius: 9999px !important;
  }
}

/* Safari autofill styling - ensure text is visible */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: hsl(var(--foreground)) !important;
  -webkit-box-shadow: 0 0 0 30px hsl(var(--background)) inset !important;
  box-shadow: 0 0 0 30px hsl(var(--background)) inset !important;
  caret-color: hsl(var(--foreground)) !important;
}

/* Ensure all input text is visible in all browsers */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea {
  color: hsl(var(--foreground)) !important;
  -webkit-text-fill-color: hsl(var(--foreground)) !important;
  caret-color: hsl(var(--foreground)) !important;
}

/* Placeholder text should be visible but muted */
input::placeholder,
textarea::placeholder {
  color: hsl(var(--muted-foreground)) !important;
  opacity: 1 !important;
}

/* Unless told otherwise, keep it for smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Visibility button teal background - MUST BE LAST TO OVERRIDE EVERYTHING */
button.rainbow-border-button.visibility-button-teal,
button.visibility-button-teal.visibility-button-teal,
.rainbow-border-button.visibility-button-teal,
button.visibility-button-teal {
  background-color: #0d9488 !important;
  background-image: none !important;
}

button.rainbow-border-button.visibility-button-teal:hover,
button.visibility-button-teal.visibility-button-teal:hover,
.rainbow-border-button.visibility-button-teal:hover,
button.visibility-button-teal:hover {
  background-color: #0f766e !important;
}