@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);
  display: flex;
  justify-content: center;
  align-items: stretch;
  min-height: 100vh;
}

.main-warapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  padding: calc(40rem / 16);
  width: 100%;
  max-width: calc(880rem / 16);
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  transition: opacity 200ms ease-in-out;
  margin-bottom: calc(64rem / 16);
}

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

main {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: normal;
  gap: calc(80rem / 16);
}

.left-col,
.right-col {
  flex: 1;
}

.left-col {
  display: flex;
  flex-direction: column;
  gap: calc(24rem / 16);
}

.right-col {
  display: flex;
  flex-direction: column;
  gap: calc(24rem / 16);
  height: inherit;
}

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

.colored-line {
  width: 100%;
  height: 2px;
  display: flex;
}

.colored-line-section {
  height: 100%;
  flex: 1;
}

.colored-line-section:nth-child(1) {
  background: #220ee1;
}
.colored-line-section:nth-child(2) {
  background: #1d8ceb;
}
.colored-line-section:nth-child(3) {
  background: #19e6f1;
}
.colored-line-section:nth-child(4) {
  background: #ffffff;
}

.story-wrapper {
  display: flex;
  flex-direction: column;
  gap: calc(24rem / 16);
  text-wrap: balance;
  font-size: calc(20rem / 16);
  position: relative;
  font-family: var(--secondary-font-family);
  color: var(--color-base-64);
}

.story-wrapper > p {
  line-height: 140%;
}

.gradient-circle {
  --circle-size: calc(26rem / 16);
  width: var(--circle-size);
  height: var(--circle-size);

  position: relative;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(
    from 180deg at 50% 50%,
    #2201e0 0deg,
    #18fff3 180deg,
    #2201e0 360deg
  );
  animation: rotate 10s linear infinite;
}
.gradient-circle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  filter: blur(80px);
  z-index: -1;
}

.circle-logo {
  --circle-size: calc(26rem / 16);
}
.gradient-circle.circle-logo::before {
  filter: blur(16px);
  scale: 1.5;
}

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

.email-form {
  --elements-padding: calc(10rem / 16) calc(12rem / 16);
  --elements-border-radius: calc(4rem / 16);
  --elements-font-size: calc(18rem / 16);
  display: flex;
  gap: calc(8rem / 16);
  position: relative;
  flex-flow: column;
  width: 100%;
}
.email-form h3 {
  margin-bottom: calc(8rem / 16);
  font-size: calc(24rem / 16);
  font-weight: 600;
  text-align: center;
}

.email-form input {
  flex-grow: 1;
  padding: var(--elements-padding);
  border-radius: var(--elements-border-radius);
  background-color: var(--color-base-06);
  border: 1px solid var(--color-base-12);
  font-size: var(--elements-font-size);
  color: var(--color-base-100);
  font-family: var(--primary-font-family);
  font-weight: 520;
  transition: all 120ms ease-in-out;
}
.email-form input:focus {
  outline: none;
  border: 1px 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-100);
  color: var(--color-base-i-80);
  padding: var(--elements-padding);
  border-radius: var(--elements-border-radius);
  font-size: var(--elements-font-size);
  border: none;
  cursor: pointer;
  font-family: var(--primary-font-family);
  font-weight: 600;
  transition: all 200ms ease-in-out;
  z-index: 2;
}

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

.email_form_wrapper {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(40rem / 16);
  padding: calc(40rem / 16);
  background-color: var(--color-base-08);
  border-radius: 6px;
  border: 1px solid var(--color-base-08);

  position: relative;
  font-family: var(--primary-font-family);
  overflow: hidden;
}

.circle-email-form {
  --circle-size: calc(120rem / 16);
}

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

/* Animations */

.main-title {
  animation: fade-in 400ms ease-in-out 500ms backwards;
  animation-delay: 200ms;
}
.colored-line {
  transform-origin: left;
  animation: fade-in 400ms ease-in-out 500ms backwards,
    grow-from-left 400ms ease-in-out 500ms backwards;
  animation-delay: 400ms;
}

.story-wrapper {
  animation: fade-in 500ms ease-in-out 700ms backwards;
  animation-delay: 700ms;
}

.email_form_wrapper {
  animation: fade-in 500ms ease-in-out 700ms backwards;
  animation-delay: 1000ms;
}

header,
footer {
  animation: fade-in 400ms ease-in-out backwards;
  animation-delay: 1800ms;
}

@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);
  }
}
@keyframes grow-from-left {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* responsive */
@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
  main {
    flex-direction: column;
    gap: calc(40rem / 16);
  }
  .email-form {
    --elements-font-size: calc(20rem / 16);
  }
  .main-warapper {
    padding: calc(24rem / 16);
  }
  .email_form_wrapper {
    padding: calc(24rem / 16);
  }
  header,
  footer {
    animation: fade-in 400ms ease-in-out backwards;
    animation-delay: 0;
  }
}

.thank-you-page-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(8rem / 16);
}

.thank-you-page-content h2 {
  font-size: calc(28rem / 16);
  text-align: center;
  font-weight: 800;
}
.thank-you-page-content p {
  font-size: calc(18rem / 16);
  text-align: center;
  font-weight: 520;
  color: var(--color-base-48);
}