@import "./reset.css";
@import "./variables.css";
@import "./cabinet-grotesk.css";
@import "./satoshi.css";

body {
  background-color: var(--color-base-i-100);
  color: var(--color-base-100);
  /* font-family: "Satoshi", sans-serif; */
  font-family: var(--primary-font-family);
}

.main-warapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: calc(40rem / 16);
}

.black-fade {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30dvh;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 100%
  );
  z-index: 2;
  transition: opacity 200ms ease-in-out;
}

.top-black-fade {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 30dvh;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  z-index: 1;
  transition: opacity 200ms ease-in-out;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: calc(24rem / 16);
  z-index: 2;
  transition: opacity 200ms ease-in-out;
}

.logo {
  display: flex;
  align-items: center;
  gap: calc(4rem / 16);
}

main {
  position: relative;
  margin-top: calc(64rem / 16);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-title {
  font-size: calc(64rem / 16);
  font-weight: 800;
  max-width: calc(640rem / 16);
  text-wrap: balance;
  text-align: center;
  line-height: 116%;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
  width: 100%;
  text-shadow: 0px 0px 32px var(--color-base-i-48);
  margin-top: calc(-40rem / 16);
}

.join-waitlist-btn {
  padding: calc(8rem / 16) calc(24rem / 16);
  background: rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(12px);
  border: none;
  border-radius: calc(60rem / 16);
  font-size: calc(20rem / 16);
  color: var(--color-base-80);
  cursor: pointer;
  transition: all 200ms ease-in-out;
  font-family: var(--primary-font-family);
  font-weight: 600;
  text-decoration: none;
}
.join-waitlist-btn:hover {
  background: var(--color-base-i-32);
  color: var(--color-base-100);
}

.story-wrapper {
  margin-top: calc(80rem / 16);
  max-width: calc(420rem / 16);
  display: flex;
  flex-direction: column;
  gap: calc(40rem / 16);
  text-wrap: balance;
  font-size: calc(28rem / 16);
  position: relative;
  text-align: center;
  font-family: var(--secondary-font-family);
}

.story-wrapper > p {
  margin-bottom: calc(24rem / 16);
  transform-origin: top left;
}

.gradient-circle {
  border-radius: 50%;
  pointer-events: none;
}
.gradient-circle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  filter: blur(100px);
  z-index: -1;
}

.circle-logo {
  position: relative;
  --circle-size: calc(28rem / 16);
  width: var(--circle-size);
  height: var(--circle-size);

  background: conic-gradient(
    from 180deg at 50% 50%,
    #2201e0 0deg,
    #18fff3 180deg,
    #2201e0 360deg
  );

  animation: rotate 10s linear infinite;
}
.gradient-circle.circle-logo::before {
  filter: blur(16px);
  scale: 1.5;
}

.circle-top-right {
  position: fixed;
  animation: rotate 5s linear infinite;

  --circle-size: calc(320rem / 16);
  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(-1 * var(--circle-size) / 1.25);
  right: calc(-1 * var(--circle-size) / 2);
  background: conic-gradient(
    from 180deg at 50% 50%,
    #5a00f6 0deg,
    #ff575a 180deg,
    #5a00f6 360deg
  );
}

.circle-mid {
  --circle-size: calc(240rem / 16);
  animation: rotate 10s linear infinite;

  width: var(--circle-size);
  height: var(--circle-size);

  background: conic-gradient(
    from 180deg at 50% 50%,
    #02004b 0deg,
    #c400ff 61.2deg,
    #00f2ff 180deg,
    #87f5ff 239.4deg,
    #007c8e 293.4deg,
    #02004b 360deg
  );
  position: relative;
}
.gradient-circle.circle-mid::before {
  scale: 2;
}

/* Firefox-only style */
@-moz-document url-prefix() {
  .circle-mid::before {
    filter: blur(50px);
    transform: scale(1.2);
    opacity: 0.4;
    mix-blend-mode: soft-light;
  }
  .email_form_wrapper::before {
    filter: blur(120px);
    opacity: 0.4;
  }
}

.email-form {
  --elements-padding: calc(12rem / 16) calc(16rem / 16);
  display: flex;
  gap: calc(16rem / 16);
  position: relative;
  flex-flow: column;
  width: 100%;
}

.email-form input {
  flex-grow: 1;
  padding: var(--elements-padding);
  border-radius: calc(6rem / 16);
  background-color: var(--color-base-i-32);
  border: 2px solid transparent;
  font-size: calc(20rem / 16);
  color: var(--color-base-100);
  backdrop-filter: blur(16px);
  font-family: var(--primary-font-family);
  font-weight: 500;
  transition: all 120ms ease-in-out;
}
.email-form input:focus {
  outline: none;
  border: 2px solid var(--color-base-64);
  background-color: var(--color-base-i-48);
}

.email-form input::placeholder {
  color: var(--color-base-32);
}

.email-form button {
  background-color: var(--color-base-80);
  color: var(--color-base-i-80);
  padding: var(--elements-padding);
  border-radius: calc(6rem / 16);
  font-size: calc(20rem / 16);
  border: none;
  cursor: pointer;
  font-family: var(--primary-font-family);
  font-weight: 600;
  backdrop-filter: blur(16px);
  transition: all 120ms ease-in-out;
  z-index: 2;
}

.email-form button:hover {
  background-color: var(--color-base-100);
  color: var(--color-base-i-100);
}
.email-form button:active {
  background-color: var(--color-base-64);
}

.email_form_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(16rem / 16);
  padding: calc(24rem / 16);
  background-color: var(--color-base-i-16);
  border-radius: calc(16rem / 16);
  box-shadow: 0px 0px 0px 2px var(--color-base-06);
  position: relative;
  font-family: var(--primary-font-family);
}
.email_form_wrapper::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  transform-origin: top;
  width: 100%;
  aspect-ratio: 1 / 1;

  background: radial-gradient(
    68.72% 801.06% at 32.72% 50.18%,
    #00ff80 0%,
    #0084ff 50%,
    #ff00a2 100%
  );
  z-index: -1;
  filter: blur(120px);

  animation: rotate 3s ease-in-out infinite;
}
.email_form_wrapper::after {
  /* Spacer at the bottom of the form */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: transparent;
  border-radius: 999px;
  z-index: -1;
}

.form-icon {
  /* padding: calc(16rem / 16); */
  /* background-color: var(--color-base-i-08); */
  /* border-radius: calc(4rem / 16); */
  display: flex;
  align-items: center;
  justify-content: center;
}

.email_form_wrapper h3 {
  font-size: calc(28rem / 16);
  font-weight: 600;

  text-align: center;
}

footer {
  margin-top: calc(160rem / 16);
  text-align: center;
  font-size: calc(16rem / 16);
  font-weight: 600;
  padding-top: calc(24rem / 16);
  padding-bottom: calc(16rem / 16);
  width: 100%;
  color: var(--color-base-48);
  z-index: 3;
}
footer a {
  color: var(--color-base-48);
  text-decoration: none;
  transition: color 200ms ease-in-out;
}
footer a:hover {
  color: var(--color-base-80);
}

/* Animations */
.circle-mid {
  animation: fade-in 800ms ease-in-out backwards, rotate 10s linear infinite;
  animation-delay: 200ms;
}
.main-title {
  animation: fade-in 300ms ease-in-out 500ms backwards;
  animation-delay: 1200ms;
}
.story-wrapper {
  animation: fade-in 500ms ease-in-out 700ms backwards;
  animation-delay: 1500ms;
}
header {
  animation: slide-in 500ms ease-in-out 300ms backwards,
    fade-in 500ms ease-in-out backwards;
  animation-delay: 1600ms;
}
.circle-top-right {
  animation: fade-in 300ms ease-in-out backwards, rotate 5s linear infinite,
    slide-in 800ms ease-in-out backwards;
  animation-delay: 1400ms;
}

@keyframes rotate {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slide-in {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* responsive */
@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
  .main-title {
    font-size: calc(48rem / 16);
  }
  .main-warapper {
    padding: calc(24rem / 16);
  }
  .story-wrapper {
    max-width: 100%;
  }
}