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

@layer base {
  ul {
    @apply !tw-pl-0;
  }
  body {
    @apply tw-text-common-white tw-bg-common-black tw-font-diatype;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply tw-font-medium tw-text-common-white;
  }
}

@layer components {
  .tw-glass-card {
    @apply tw-bg-common-black tw-bg-opacity-50 tw-rounded-lg tw-p-6 tw-backdrop-blur-md lg:tw-p-8;
  }
}

@layer utilities {
  .contain-layout {
    contain: layout;
  }

  .eyebrow {
    @apply tw-tracking-wide tw-text-blue-400 tw-font-mono tw-text-sm tw-uppercase;
  }

  .text-body {
    @apply tw-text-gray-300 tw-text-lg md:tw-text-xl;
  }

  .border-gradient {
    position: relative;
    &:before {
      content: '';
      position: absolute;
      top: -1px;
      right: -1px;
      bottom: -1px;
      left: -1px;
      z-index: -1;
      border-radius: inherit;
    }
  }

  .border-gradient-primary {
    @apply border-gradient before:tw-bg-gradient-primary;
  }

  .tw-gray-radial-gradient {
    background: radial-gradient(
        369.05% 106.48% at 69.06% 29.28%,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.03) 31.73%
      ),
      #1d1a23;
  }

  .fade-wrapper {
    perspective: 400px;
    transform-style: preserve-3d;
    position: absolute;
    top: calc(100% - 12px);
    z-index: -1;
    left: 3%;
    right: 3%;
  }

  .fade-away {
    transform: rotateX(-60deg);
    height: 50px;
    filter: blur(8px);
  }

  .tw-no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .tw-no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}
