@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;
  }

  svg {
    @apply tw-inline-block;
  }
}

@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;
  }
  .conversion-panel-gradient {
    background: linear-gradient(
      213deg,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.05) 49.48%,
      rgba(255, 255, 255, 0.03) 100%
    );
    backdrop-filter: blur(12px);
  }

  .conversion-panel-underlay-gradient {
    background: url("data:image/svg+xml,%3Csvg width='100%25' height='77' viewBox='0 0 1248 77' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_f_5570_73984)'%3E%3Cpath d='M16 16H1232L1135.11 61H103.203L16 16Z' fill='url(%23paint0_linear_5570_73984)' /%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_f_5570_73984' x='0' y='0' width='100%25' height='77' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix' /%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape' /%3E%3CfeGaussianBlur stdDeviation='8' result='effect1_foregroundBlur_5570_73984' /%3E%3C/filter%3E%3ClinearGradient id='paint0_linear_5570_73984' x1='624' y1='16' x2='624' y2='61' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2356F5B3' /%3E%3Cstop offset='1' stop-color='%2356F5B3' stop-opacity='0' /%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  .inlined-centered-underlay {
    top: calc(100% - 12px);
  }

  .inline-centered-grid {
    grid-template-columns: 1fr 257px;
  }

  .offset-underlay {
    top: calc(100% - 12px);
  }

  .offset-image {
    transform: translateY(-5%);
  }

  .offset-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @screen sm {
    .inlined-centered-underlay {
      background-size: cover;
    }

    .offset-underlay {
      background-size: cover;
    }

    .offset-image {
      transform: translateY(-15%);
    }
  }

  @screen lg {
    .inlined-centered-underlay {
      top: calc(100% - 16px);
      width: calc(100% - 32px);
    }

    .offset-underlay {
      background-size: contain;
      top: calc(100% - 16px);
      width: 100%;
    }

    .offset-inner-wrapper {
      max-width: 590px;
    }

    .offset-image {
      max-width: 808px;
      transform: translate(10%, 0%);
    }
  }

  .html_parser {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    h1 {
      @apply tw-text-display-md sm:tw-text-display-lg;
    }
    h2 {
      @apply tw-text-display-xs sm:tw-text-display-sm;
    }
    h3 {
      @apply tw-text-xl sm:tw-text-display-xs;
    }
    h4 {
      @apply tw-text-lg sm:tw-text-xl;
    }
    h5 {
      @apply tw-text-md sm:tw-text-lg;
    }
    p,
    ul,
    ol {
      @apply tw-text-gray-300 tw-text-md md:tw-text-xl tw-font-light;
    }
    strong {
      @apply tw-text-common-white;
    }
    ul,
    ol {
      margin-left: 2rem;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    ul li::before {
      content: '\2022'; /* Unicode character for a bullet point */
      color: theme(colors.green.500);
      display: inline-block;
      width: 1em;
      margin-left: -1.5rem;
      font-size: 1.5rem;
    }
    ol {
      list-style-type: decimal;
    }
    a {
      color: theme(colors.green.500);
    }
  }

  .listing-hero__card {
    @apply tw-grid tw-gap-8 lg:tw-grid-cols-2 tw-p-4 md:tw-p-8 tw-rounded-lg tw-items-center lg:-tw-mx-8;
    background: linear-gradient(
      213deg,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.05) 49.48%,
      rgba(255, 255, 255, 0.03) 100%
    );
  }
}

@layer utilities {
  .footer-gradient {
    background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.7) 100%),
      linear-gradient(90deg, #f087ff 0%, #669dff 51.19%, #9945ff 100%);
  }

  .header-gradient {
    background: linear-gradient(360deg, rgba(240, 135, 255, 0.2) 0%, rgba(240, 135, 255, 0) 28.96%);
  }

  .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 */
  }

  .tw-carousel-fade {
    background: linear-gradient(270deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
  }

  .tw-scroll-padding {
    scroll-padding-right: calc(100vw - 100%);
  }

  .switchback-gradient {
    background: radial-gradient(46.05% 53.78% at 95.17% 28.09%, rgba(153, 69, 255, 0.3) 0%, rgba(153, 69, 255, 0) 100%);
  }
  @screen lg {
    .switchback-gradient {
      background: radial-gradient(
        33.16% 39.51% at 90.76% 42.36%,
        rgba(153, 69, 255, 0.3) 0%,
        rgba(153, 69, 255, 0) 100%
      );
    }
  }

  .border-image-gradient {
    border-image-slice: 1;
    border-image-source: linear-gradient(180deg, #14f195 0%, #80ecff 40.1%, #64a8f2 82.29%, #64a8f2 100%);
  }

  .tw-quote-gradient {
    background: radial-gradient(150.3% 320.57% at 0.22% 359.92%, #56f5b3 0%, rgba(86, 245, 179, 0) 100%),
      linear-gradient(
        213deg,
        rgba(255, 255, 255, 0.03) 0%,
        rgba(255, 255, 255, 0.05) 49.48%,
        rgba(255, 255, 255, 0.03) 100%
      );
  }
}
