/**
 * Animalia - Production CSS
 * Modern, performant, accessible design system
 * Light Theme - MoeGo Inspired
 */

/* ============================================================================
   DESIGN TOKENS & CSS VARIABLES
   ============================================================================ */

:root {
  /* Brand Colors - Pet Grooming Palette */
  --color-brand-orange: #D36135;
  --color-brand-orange-light: #E88B6B;
  --color-brand-orange-dark: #B84F2C;
  --color-brand-brown: #8B4513;
  --color-brand-brown-dark: #5D2E0F;
  --color-brand-cream: #FFF8DC;
  --color-brand-beige: #F5E6D3;

  /* Semantic Colors - Light Mode */
  --color-primary: var(--color-brand-orange);
  --color-primary-hover: #B84F2C;
  --color-primary-light: #E88B6B;
  --color-secondary: var(--color-brand-brown);
  --color-secondary-hover: #704110;
  --color-accent: #FFB84D;

  /* Neutral Palette - Light Theme */
  --color-neutral-50: #FAFAF9;
  --color-neutral-100: #F5F5F4;
  --color-neutral-200: #E7E5E4;
  --color-neutral-300: #D6D3D1;
  --color-neutral-400: #A8A29E;
  --color-neutral-500: #78716C;
  --color-neutral-600: #57534E;
  --color-neutral-700: #44403C;
  --color-neutral-800: #292524;
  --color-neutral-900: #1C1917;

  /* Surface Colors - LIGHT MODE */
  --color-bg-primary: #FAFAF9;
  --color-bg-secondary: #FFFFFF;
  --color-bg-tertiary: #F5F5F4;
  --color-bg-dark: var(--color-brand-brown-dark);
  --color-bg-elevated: #FFFFFF;
  --color-bg-card: #FFFFFF;
  --color-bg-hero: linear-gradient(135deg, #FFF8F5 0%, #FFF5F0 50%, #FFFBF8 100%);

  /* Text Colors - LIGHT MODE */
  --color-text-primary: #1C1917;
  --color-text-secondary: #57534E;
  --color-text-tertiary: #78716C;
  --color-text-inverse: #FFFFFF;
  --color-text-on-primary: #FFFFFF;
  --color-text-muted: #A8A29E;

  /* Border Colors - LIGHT MODE */
  --color-border-light: #E7E5E4;
  --color-border-medium: #D6D3D1;
  --color-border-dark: #A8A29E;

  /* Semantic Status Colors */
  --color-success: #10B981;
  --color-success-light: #D1FAE5;
  --color-warning: #F59E0B;
  --color-warning-light: #FEF3C7;
  --color-error: #EF4444;
  --color-error-light: #FEE2E2;
  --color-info: #3B82F6;
  --color-info-light: #DBEAFE;

  /* Gradient Presets */
  --gradient-primary: linear-gradient(135deg, #D36135 0%, #E88B6B 100%);
  --gradient-primary-hover: linear-gradient(135deg, #B84F2C 0%, #D36135 100%);
  --gradient-hero: linear-gradient(180deg, #FFF8F5 0%, #FFFFFF 100%);
  --gradient-card: linear-gradient(145deg, #FFFFFF 0%, #FAFAF9 100%);
  --gradient-accent: linear-gradient(135deg, #FFB84D 0%, #FFA726 100%);
  --gradient-dark: linear-gradient(135deg, #5D2E0F 0%, #8B4513 100%);

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-bg-strong: rgba(255, 255, 255, 0.9);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-blur: blur(12px);

  /* Spacing Scale - Consistent rhythm */
  --space-1: 0.25rem;
  /* 4px */
  --space-2: 0.5rem;
  /* 8px */
  --space-3: 0.75rem;
  /* 12px */
  --space-4: 1rem;
  /* 16px */
  --space-5: 1.25rem;
  /* 20px */
  --space-6: 1.5rem;
  /* 24px */
  --space-7: 2rem;
  /* 32px */
  --space-8: 2.5rem;
  /* 40px */
  --space-9: 3rem;
  /* 48px */
  --space-10: 4rem;
  /* 64px */
  --space-12: 6rem;
  /* 96px */
  --space-16: 8rem;
  /* 128px */
  --space-20: 10rem;
  /* 160px */

  /* Typography Scale - Fluid with clamp() */
  --font-size-xs: clamp(0.75rem, 0.7rem + 0.15vw, 0.875rem);
  --font-size-sm: clamp(0.875rem, 0.8rem + 0.2vw, 1rem);
  --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --font-size-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --font-size-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --font-size-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
  --font-size-3xl: clamp(1.875rem, 1.65rem + 1.1vw, 2.25rem);
  --font-size-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);
  --font-size-5xl: clamp(3rem, 2.5rem + 2.5vw, 4rem);

  /* Font Families - Poppins for playful but professional */
  --font-primary: 'Poppins', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;

  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-full: 9999px;

  /* Shadows - Enhanced for light theme */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.03);
  --shadow-glow: 0 0 20px rgba(211, 97, 53, 0.15);
  --shadow-glow-strong: 0 0 40px rgba(211, 97, 53, 0.25);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.12);

  /* Z-Index Scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-announcement: 1100;

  /* Container Widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Easing Functions */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Breakpoints (for reference in media queries) */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;
}

/* ============================================================================
   CSS LAYERS - Organization & Cascade Control
   ============================================================================ */

@layer base, components, utilities;

/* ============================================================================
   BASE LAYER - Reset & Foundational Styles
   ============================================================================ */

@layer base {

  /* Modern CSS Reset */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
    font-size: 16px;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }

  body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    overflow-x: hidden;
    min-height: 100vh;
  }

  /* Improved text rendering */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  li {
    text-wrap: balance;
    overflow-wrap: break-word;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
  }

  h1 {
    font-size: var(--font-size-5xl);
  }

  h2 {
    font-size: var(--font-size-4xl);
  }

  h3 {
    font-size: var(--font-size-3xl);
  }

  h4 {
    font-size: var(--font-size-2xl);
  }

  h5 {
    font-size: var(--font-size-xl);
  }

  h6 {
    font-size: var(--font-size-lg);
  }

  p {
    margin-bottom: var(--space-4);
  }

  a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  a:hover {
    color: var(--color-primary);
  }

  /* Image & Media Defaults */
  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
    height: auto;
  }

  img {
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover;
  }

  /* Form Elements */
  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  button {
    cursor: pointer;
    border: none;
    background: none;
  }

  /* Lists */
  ul,
  ol {
    list-style: none;
  }

  /* Remove default button styles */
  button:focus,
  input:focus,
  textarea:focus,
  select:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  /* Focus visible for keyboard navigation */
  :focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  /* Remove outline for mouse users */
  :focus:not(:focus-visible) {
    outline: none;
  }
}

/* ============================================================================
   LAYOUT UTILITIES
   ============================================================================ */

@layer utilities {

  /* Container System */
  .container {
    width: 100%;
    margin-inline: auto;
    padding-inline: clamp(1rem, 5vw, 3rem);
    max-width: var(--container-xl);
  }

  .container-sm {
    max-width: var(--container-sm);
  }

  .container-md {
    max-width: var(--container-md);
  }

  .container-lg {
    max-width: var(--container-lg);
  }

  .container-2xl {
    max-width: var(--container-2xl);
  }

  /* Grid Utilities */
  .grid {
    display: grid;
    gap: var(--space-6);
  }

  .grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  }

  .grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  }

  .grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  }

  /* Layout Patterns */
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .stack-sm {
    gap: var(--space-2);
  }

  .stack-lg {
    gap: var(--space-8);
  }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
  }

  .center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .switcher {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
  }

  .switcher>* {
    flex-grow: 1;
    flex-basis: calc((40rem - 100%) * 999);
  }

  /* Spacing Utilities */
  .mt-0 {
    margin-top: 0;
  }

  .mt-4 {
    margin-top: var(--space-4);
  }

  .mt-6 {
    margin-top: var(--space-6);
  }

  .mt-8 {
    margin-top: var(--space-8);
  }

  .mt-12 {
    margin-top: var(--space-12);
  }

  .mb-0 {
    margin-bottom: 0;
  }

  .mb-4 {
    margin-bottom: var(--space-4);
  }

  .mb-6 {
    margin-bottom: var(--space-6);
  }

  .mb-8 {
    margin-bottom: var(--space-8);
  }

  .mb-12 {
    margin-bottom: var(--space-12);
  }

  .pt-8 {
    padding-top: var(--space-8);
  }

  .pt-12 {
    padding-top: var(--space-12);
  }

  .pt-16 {
    padding-top: var(--space-16);
  }

  .pb-8 {
    padding-bottom: var(--space-8);
  }

  .pb-12 {
    padding-bottom: var(--space-12);
  }

  .pb-16 {
    padding-bottom: var(--space-16);
  }

  /* Aspect Ratio Utilities - Prevent CLS */
  .aspect-video {
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }

  .aspect-square {
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }

  .aspect-portrait {
    aspect-ratio: 3 / 4;
    overflow: hidden;
  }

  /* Performance Utilities */
  .gpu-accelerate {
    transform: translateZ(0);
    will-change: transform;
  }

  .contain-layout {
    contain: layout;
  }

  .contain-paint {
    contain: paint;
  }

  .content-visibility-auto {
    content-visibility: auto;
  }

  /* Responsive Utilities */
  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: block;
  }

  @media (min-width: 1024px) {
    .desktop-only {
      display: block;
    }

    .mobile-only {
      display: none;
    }
  }
}

/* ============================================================================
   ANIMATION UTILITIES
   ============================================================================ */

@layer utilities {

  /* Base reveal animations */
  .reveal,
  .reveal-up,
  .reveal-fade {
    opacity: 0;
    transition: opacity var(--transition-slow), transform var(--transition-slow);
  }

  .reveal-up {
    transform: translateY(2rem);
  }

  .reveal.is-inview,
  .reveal-up.is-inview,
  .reveal-fade.is-inview {
    opacity: 1;
    transform: translateY(0);
  }

  /* Animation delays */
  .reveal-delay-1 {
    transition-delay: 100ms;
  }

  .reveal-delay-2 {
    transition-delay: 200ms;
  }

  .reveal-delay-3 {
    transition-delay: 300ms;
  }

  .reveal-delay-4 {
    transition-delay: 400ms;
  }

  .reveal-delay-5 {
    transition-delay: 500ms;
  }

  /* Parallax lite - subtle motion */
  .parallax-wrapper {
    position: relative;
    overflow: hidden;
  }

  .parallax-content {
    will-change: transform;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  }

  /* Hover effects */
  .hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
  }

  .hover-lift:hover {
    transform: translateY(-0.25rem);
    box-shadow: var(--shadow-lg);
  }

  .hover-grow {
    transition: transform var(--transition-base);
  }

  .hover-grow:hover {
    transform: scale(1.02);
  }

  /* Loading states */
  @keyframes pulse {

    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.5;
    }
  }

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

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .animate-spin {
    animation: spin 1s linear infinite;
  }

  /* Reduced motion preferences */
  @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;
    }

    .reveal,
    .reveal-up,
    .reveal-fade {
      opacity: 1;
      transform: none;
    }

    .parallax-content {
      transform: none !important;
    }
  }
}


.scroll-down {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  width: 2rem;
  height: 2rem;
  stroke: var(--color-text-tertiary);
  animation: bounce 2s infinite;
}

@keyframes bounce {

  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(0.5rem);
  }
}

/* ========================================
   WAVE SEPARATOR
   ======================================== */

.wave {
  width: 100%;
  height: 5rem;
  display: block;
  margin: 0;
  padding: 0;
}

.wave.flip {
  transform: scaleY(-1);
}

.section {
  padding: var(--space-16) 0;
  position: relative;
  contain: layout;
}


.section-title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-extrabold);
  text-align: center;
  margin-bottom: var(--space-6);
  color: var(--color-text-primary);
}

.section-title-black {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-extrabold);
  text-align: center;
  margin-bottom: var(--space-6);
  color: var(--color-text-primary);
}

.how-it-works-section .section-title,
.how-it-works-section .section-subtitle {
  color: #FFFFFF;
}

.section-subtitle {
  font-size: var(--font-size-lg);
  text-align: center;
  color: var(--color-text-secondary);
  max-width: 48rem;
  margin: 0 auto var(--space-12);
  line-height: var(--line-height-relaxed);
}

/* ========================================
   GLASSMORPHISM UTILITIES
   ======================================== */

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
}

.glass-card-strong {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

/* ========================================
   BUTTON UTILITIES
   ======================================== */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  background: var(--gradient-primary);
  color: var(--color-text-on-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-md), var(--shadow-glow);
  text-decoration: none;
}

.btn-primary:hover {
  background: var(--gradient-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--shadow-glow-strong);
  color: var(--color-text-on-primary);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border-medium);
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
}

.btn-secondary:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ========================================
   BADGE UTILITIES
   ======================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full);
}

.badge-primary {
  background: rgba(211, 97, 53, 0.1);
  color: var(--color-primary);
}

.badge-success {
  background: var(--color-success-light);
  color: var(--color-success);
}

.badge-promo {
  background: var(--gradient-primary);
  color: var(--color-text-on-primary);
  font-weight: var(--font-weight-bold);
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {

  0%,
  100% {
    box-shadow: 0 0 5px rgba(211, 97, 53, 0.4);
  }

  50% {
    box-shadow: 0 0 20px rgba(211, 97, 53, 0.6);
  }
}