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

@layer utilities {
  .scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;  /* Chrome, Safari and Opera */
  }
}
 
@layer base {
  :root {
    --background: 225 10% 98%;
    --foreground: 225 25% 10%;

    --card: 0 0% 100%;
    --card-foreground: 225 25% 10%;
 
    --popover: 0 0% 100%;
    --popover-foreground: 225 25% 10%;
 
    --primary: 217 91% 64%;
    --primary-foreground: 210 40% 98%;
 
    --secondary: 225 15% 94%;
    --secondary-foreground: 225 25% 10%;
 
    --muted: 225 15% 94%;
    --muted-foreground: 225 10% 45%;
 
    --accent: 217 91% 64%;
    --accent-foreground: 210 40% 98%;
 
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 225 15% 90%;
    --input: 225 15% 90%;
    --ring: 217 91% 64%;
 
    --radius: 0.85rem;

    --grayed-out: 225 15% 93%;
  }
 
  .dark {
    --background: 225 21% 7%;
    --foreground: 225 20% 93%;
 
    --card: 225 23% 10%;
    --card-foreground: 225 20% 93%;
 
    --popover: 225 23% 10%;
    --popover-foreground: 225 20% 93%;
 
    --primary: 217 91% 64%;
    --primary-foreground: 210 40% 98%;
 
    --secondary: 225 16% 13%;
    --secondary-foreground: 225 20% 93%;
 
    --muted: 225 16% 13%;
    --muted-foreground: 225 10% 65%;
 
    --accent: 217 91% 64%;
    --accent-foreground: 210 40% 98%;
 
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
 
    --border: 225 16% 18%;
    --input: 225 16% 18%;
    --ring: 217 91% 64%;

    --grayed-out: 225 16% 10%;
  }
}
 
@layer base {
  * {
    @apply border-border;
  }
  html {
    height: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    font-family: 'Unbounded', sans-serif;
    letter-spacing: 0.02em;
  }
  body {
    @apply bg-background text-foreground;
    min-height: 100%;
    height: auto;
    overflow-x: hidden;
    position: relative;
    -webkit-overflow-scrolling: touch;
    font-family: 'Unbounded', sans-serif;
    letter-spacing: 0.02em;
  }
  h1, h2, h3, h4, h5, h6, .font-unbounded {
    font-family: 'Unbounded', sans-serif;
    letter-spacing: 0.02em;
  }
  #__next {
    min-height: 100%;
    height: auto;
    position: relative;
    width: 100%;
  }
  /* Улучшения для мобильных устройств */
  @media (max-width: 768px) {
    html {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      /* Предотвращение проблем с масштабированием при двойном тапе */
      touch-action: pan-y;
    }
    body {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      height: auto;
      min-height: 100vh;
      /* Улучшение рендеринга на мобильных */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      /* Предотвращение выделения текста при тапе */
      -webkit-tap-highlight-color: transparent;
    }
    #__next {
      min-height: 100vh;
      height: auto;
    }
    /* Улучшение работы с интерактивными элементами */
    button, a, [role="button"] {
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    /* Улучшение работы с текстом */
    p, span, div {
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
    /* Предотвращение горизонтального скролла */
    * {
      max-width: 100%;
    }
    img, video {
      max-width: 100%;
      height: auto;
    }
  }
}

/* Page transition animations */
@layer utilities {
  .page-transition-wrapper {
    animation: fadeIn 0.3s ease-in-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* Stagger animation for cards - works on all devices */
  .stagger-card {
    animation: fadeInSlideUp 0.3s ease-out forwards;
    opacity: 0;
  }

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