@import "tailwindcss";

@font-face {
  font-family: "Luxe";
  src: url("/fonts/Luxe-Bold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/Fraunces-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Frauncesitalic";
  src: url("/fonts/Fraunces-Light.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@theme {
  --font-sans: "Inter", sans-serif;
  --font-heading: "Luxe", serif;
  --font-tertiary: "Fraunces", serif;
  --font-secondary: "Frauncesitalic", serif;
}

@layer base {
  body {
    font-family: var(--font-sans);
    font-weight: 400;
  }
}

@layer utilities {
  .gradient-orb {
    background: radial-gradient(circle, rgba(0, 150, 255, 0.8) 0%, rgba(0, 80, 200, 0.4) 50%, transparent 70%);
    filter: blur(80px);
  }
}

@layer utilities {
  @keyframes scroll-down {
    0% {
      transform: translateY(-10%);
    }
    100% {
      transform: translateY(10%);
    }
  }

  @keyframes scroll-up {
    0% {
      transform: translateY(10%);
    }
    100% {
      transform: translateY(-10%);
    }
  }

  @keyframes scroll-down-slow {
    0% {
      transform: translateY(-5%);
    }
    100% {
      transform: translateY(5%);
    }
  }

  .animate-scroll-down {
    animation: scroll-down 40s ease-in-out infinite alternate;
  }

  .animate-scroll-up {
    animation: scroll-up 35s ease-in-out infinite alternate;
  }

  .animate-scroll-down-slow {
    animation: scroll-down-slow 45s ease-in-out infinite alternate;
  }
}

@layer utilities {
  .night {
    @apply absolute inset-0;
    background: linear-gradient(to bottom, rgb(0, 0, 0) 50%, rgb(19, 22, 39) 80%, rgb(32, 35, 72));
  }

  /* Stars generated via multiple box-shadows */
  .stars,
  .stars::before,
  .stars::after {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
  }

  .stars {
    position: absolute;
    inset: 0;
    animation: rotate-stars 600s linear infinite;
    background-image:
      radial-gradient(1px 1px at 20% 30%, white 60%, transparent), radial-gradient(1px 1px at 80% 70%, white 60%, transparent),
      radial-gradient(2px 2px at 40% 80%, white 60%, transparent), radial-gradient(1px 1px at 60% 20%, white 60%, transparent);
    background-size: 200px 200px;
  }

  .moon {
    position: absolute;
    right: 12rem;
    top: 8rem;
    width: 120px;
    height: 120px;
    border-radius: 9999px;
    background: white;
    box-shadow:
      0 0 160px #fff,
      0 0 30px -4px #fff,
      0 0 8px 2px rgba(255, 255, 255, 0.26);
    animation: moon-pulse 10s linear infinite;
  }

  .moon-texture {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background-image: url("https://raw.githubusercontent.com/interaminense/starry-sky/master/src/img/bgMoon.png");
    background-size: cover;
    opacity: 0.4;
  }

  .meteor-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .meteor {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 9999px;
    transform: rotate(-35deg);
    animation: meteor 1s linear forwards;
  }

  .meteor::before {
    content: "";
    position: absolute;
    left: 2px;
    border-left: 85px solid white;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
  }
}

@layer utilities {
  @keyframes rotate-stars {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes moon-pulse {
    0%,
    100% {
      box-shadow:
        0 0 160px #fff,
        0 0 30px -4px #fff,
        0 0 8px 2px rgba(255, 255, 255, 0.26);
    }
    50% {
      box-shadow:
        0 0 80px #fff,
        0 0 30px -4px #fff,
        0 0 8px 2px rgba(255, 255, 255, 0.26);
    }
  }

  @keyframes meteor {
    0% {
      opacity: 0;
      transform: translate(0, 0) rotate(-35deg);
    }
    30% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: translate(-600px, 400px) rotate(-35deg);
    }
  }
}