/* Variables */
:root {
  --avr-text-primary: #313131;
  --avr-text-primary-rgb: 49, 49, 49;
  --avr-color-surface: #fff;
  --avr-color-surface-rgb: 255, 255, 255;
  --avr-color-primary-500: #5d24e3;
  --avr-color-primary-500-rgb: 93, 36, 227;
  --avr-color-smoke-contrast-rgb: 245, 133, 240;
  --avr-text-roboto-thin: 100;
  --avr-text-roboto-light: 300;
  --avr-text-roboto-regular: 400;
  --avr-text-roboto-medium: 500;
  --avr-text-roboto-bold: 700;
}

/* Resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  font-family: "Roboto", sans-serif;

  scroll-behavior: smooth;
}

/* Main section */
main .waves {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;

  border-radius: 50%;
  box-shadow: 0 0 10px 5px rgba(var(--avr-color-primary-500-rgb), 0.25);

  overflow: hidden;
  isolation: isolate;
}

main .wave {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 200%;
  height: 4rem;
  margin-bottom: -5px;

  background-size: 50% 100%;
}

main .wave-1 {
  background-image: url("assets/wave-1.svg");
  opacity: 0.8;

  animation: wave-animation 5s linear infinite;
}

main .wave-2 {
  background-image: url("assets/wave-2.svg");

  /* Faster waves */
  /* animation: wave-animation 6s linear infinite; */
  /* Slower waves */
  animation: wave-animation 15s linear infinite;

  opacity: 0.6;
}

main {
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 2.5rem 0;
}

main .hero-card {
  position: relative;
  width: 85vw;
  max-width: 90rem;
  max-height: 48rem;

  background-color: rgba(var(--avr-color-surface-rgb), 0.32);
  border-radius: 50px;
  border: 1px solid var(--avr-color-surface);
  box-shadow: 0 4px 4px 0 rgba(var(--avr-color-primary-500-rgb), 0.1);
  /* backdrop-filter: blur(5px); REALLY BAD PERFORMANCE */

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  overflow: hidden;

  padding: 3rem 2rem;
}

main .intro-main {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  width: 100%;
}

main .logo-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.logo-box .logo-container {
  display: flex;
  align-items: flex-end;
  width: 100%;
}

.logo-box img {
  width: 100%;
  aspect-ratio: 177/40;
}

main .logo-box span {
  width: 100%;
  font-size: 1.25rem;
  font-weight: var(--avr-text-roboto-thin);
  color: var(--avr-text-primary);

  text-align: center;
}

main .intro-buttons {
  width: 100%;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
}

main .intro-buttons.mobile {
  display: flex;
}

main .notify-me {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

main .coming-soon {
  width: 90%;
  max-width: 17.5rem;
  display: flex;
  justify-content: center;
  align-items: center;

  position: relative;
}

main .coming-soon .text {
  position: absolute;
  margin-top: -1rem;
}

main .coming-soon span {
  display: block;
  text-align: center;
  font-weight: var(--avr-text-roboto-thin);
  color: var(--avr-text-primary);
}

main .coming-soon span:nth-of-type(1) {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

main .coming-soon span:nth-of-type(2) {
  font-size: 2.25rem;
  font-weight: var(--avr-text-roboto-light);
  color: var(--avr-color-primary-500);
}

main .coming-soon span:nth-of-type(3) {
  font-size: 1.25rem;
}

.intro-main,
.coming-soon,
.intro-buttons.mobile {
  max-width: 20rem;
}

/* First section: our platform */
.our-platform {
  position: relative;
}

.our-platform .card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100vw;
  background-color: rgba(var(--avr-color-surface-rgb), 0.32);

  border-radius: 0;
  border: 1px solid var(--avr-color-surface);
  box-shadow: 0 4px 4px 0 rgba(var(--avr-color-primary-500-rgb), 0.1);
  /* backdrop-filter: blur(5px); REALLY BAD PERFORMANCE */
  overflow: hidden;

  padding: 1.5rem 7.5dvw;
  margin-top: 2.5rem;
}

.our-platform .card a {
  position: relative;
  margin: 1rem 0 1.5rem 0;
  width: 100%;
  aspect-ratio: 45/32;
}

.our-platform .card img {
  border: 2px solid var(--avr-color-surface);
  border-radius: 8px;
  box-shadow: 0 4px 4px 0 rgba(var(--avr-color-primary-500-rgb), 0.1);

  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
}

.card-title-mobile {
  width: 100%;

  font-size: 1.25rem;
  font-weight: var(--avr-text-roboto-bold);
  color: var(--avr-color-primary-500);
}

.our-platform .card .card-title {
  display: none;
  font-size: 1.25rem;
  font-weight: var(--avr-text-roboto-bold);
  color: var(--avr-color-primary-500);
  padding: 0.25rem 0;
  margin-bottom: 1.5rem;
  border-bottom: 3px solid;
  border-image: linear-gradient(
      to right,
      var(--avr-color-primary-500),
      transparent
    )
    1;
}

.our-platform .card .card-text {
  display: block;
  font-weight: var(--avr-text-roboto-light);
  font-size: 0.875rem;
}

.our-platform .card .card-points {
  list-style: none;
  padding-top: 1rem;

  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.our-platform .card .card-points li {
  display: flex;
  align-items: flex-start;

  position: relative;
  padding-left: 1rem;
}

.our-platform .card .card-points li::before {
  content: "";
  color: var(--avr-color-surface);
  font-size: 2rem;

  width: 0.35rem;
  height: 0.35rem;
  background-color: rgba(var(--avr-text-primary-rgb), 0.7);
  border-radius: 50%;

  flex-shrink: 0;

  /* Bullet point at the start */
  position: absolute;
  left: 0;
  top: 0.55rem;
  transform: translateY(-50%);
}

.our-platform .card:nth-of-type(2) {
  flex-direction: column;
}

.our-platform .card:nth-of-type(2) .card-title {
  border-image: linear-gradient(
      to left,
      var(--avr-color-primary-500),
      transparent
    )
    1;
}

/* Second section: why */
.why {
  position: relative;
}

.why .bubbles-container {
  width: 100dvw;
  margin-top: 3rem;

  display: flex;
  align-items: center;
  gap: 1rem;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  -ms-overflow-style: none;
  scrollbar-width: none;

  padding: 3rem 0;
}

/* Hide scrollbar in safari */
.why .bubbles-container::-webkit-scrollbar {
  display: none;
}

.why .main-bubble,
.why .logo-bubble,
.why .bubble {
  background-color: rgba(var(--avr-color-surface-rgb), 0.3);
  border-radius: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  font-size: 1rem;
  font-weight: var(--avr-text-roboto-light);
  text-align: center;

  padding: 1rem 1.5rem;
}

.why .main-bubble {
  position: absolute;
  left: 0;
  z-index: -1;
  width: calc(100dvw - 15dvw);
  height: calc(100dvw - 15dvw);

  box-shadow: 0 0 20px 10px rgba(var(--avr-color-primary-500-rgb), 0.25);
}

.why .logo-bubble {
  position: absolute;
  left: 50%;
  translate: -50% -10rem;
  width: 6rem;
  height: 6rem;

  background-color: rgba(var(--avr-color-surface-rgb), 0.7);
}

.why .logo-bubble img {
  width: 100%;
  height: 100%;
}

.why .spacer {
  width: 7.5dvw;
  height: 10rem;
  flex-shrink: 0;
}

.why .bubble {
  display: flex;
  gap: 0.25rem;
  width: calc(100dvw - 20dvw);
  height: calc(100dvw - 20dvw);

  box-shadow: 0 4px 4px 0 rgba(var(--avr-color-primary-500-rgb), 0.1);
  /* Blur has a really bad performance in some browsers (chrome) */
  backdrop-filter: blur(5px);
  border: 1px solid rgba(var(--avr-color-surface-rgb), 0.6);

  /* Carousel styles */
  flex-shrink: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  transition: all 0.5s ease-out;
  transform: scale(0.8);
}

.why .bubble.active {
  transform: scale(1);
}

.why .bubble span {
  display: block;
}

.why .bubble.vertical span {
  font-weight: var(--avr-text-roboto-regular);
}

.why .bubble span:first-of-type {
  font-weight: var(--avr-text-roboto-regular);
}

/* Third section: our team */
.our-team {
  position: relative;
}

.our-team .sub-title {
  width: 80vw;
}

.our-team .cards-container {
  position: relative;
  width: 100vw;
}

.our-team .card {
  background-color: rgba(var(--avr-color-surface-rgb), 0.32);
  border-radius: 40px;
  border: 1px solid var(--avr-color-surface);
  box-shadow: 0 4px 4px 0 rgba(var(--avr-color-primary-500-rgb), 0.1);
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;

  /* padding: 2rem 1.5rem; */
  padding: 1.5rem;

  /* Carousel styles */
  flex-shrink: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;

  /* Carousel transition */
  position: relative;
  transition: all 0.25s ease-out;

  opacity: 0.8;
}

.card.active {
  transform: translateY(-1rem);
  opacity: 1;
}

.our-team .slider {
  display: flex;
  flex-shrink: 0;
  gap: 1rem;

  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  -ms-overflow-style: none;
  scrollbar-width: none;

  padding: 2rem 0;
  margin-top: 1.5rem;
}

/* Hide scrollbar in safari */
.our-team .slider::-webkit-scrollbar {
  display: none;
}

.our-team .indicators {
  bottom: 1rem;
}

.our-team .spacer {
  width: 15dvw;
  height: 10rem;
  flex-shrink: 0;
}

.our-team .card .team-image {
  width: calc(100dvw - 15dvw - 5rem - 2.5rem);
  height: calc(100dvw - 15dvw - 5rem - 2.5rem);
  border-radius: 100%;
  margin-bottom: 1.5rem;
}

.our-team .card .card-title {
  font-size: 1.5rem;
  font-weight: var(--avr-text-roboto-medium);
  color: var(--avr-color-primary-500);
  margin-bottom: 1rem;
}

.our-team .card .card-text {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  font-size: 1rem;
  font-weight: var(--avr-text-roboto-light);
  color: var(--avr-text-primary);

  padding-bottom: 1rem;
}

/* Fourth section: contact us */
.contact-us {
  scroll-margin-top: 7.5rem;
}

.contact-us .card {
  background-color: rgba(var(--avr-color-surface-rgb), 0.32);
  border-radius: 32px;
  border: 1px solid var(--avr-color-surface);
  box-shadow: 0 4px 4px 0 rgba(var(--avr-color-primary-500-rgb), 0.1);
  overflow: hidden;

  width: 85vw;
  max-width: 64.5rem;
  padding: 2.5rem 2rem;
  margin-top: 3rem;
}

form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

form .form-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--avr-color-primary-500);
  font-size: 1.25rem;
  font-weight: var(--avr-text-roboto-thin);
}

.contact-us .sub-title span {
  display: block;
}

/* Footer: contact info */
footer {
  position: relative;
  text-align: center;
  margin-top: 10rem;
}

footer span {
  display: block;
  font-size: 1rem;
  font-weight: var(--avr-text-roboto-thin);
  color: var(--var-text-primary);
  padding: 2rem 0;
}

/* Reusable styles */
.avr-button {
  font-size: 1rem;
  background-color: var(--avr-color-primary-500);
  color: var(--avr-color-surface);
  font-weight: var(--avr-text-roboto-regular);
  border-radius: 2rem;
  padding: 0.5rem 1.5rem;
  border: 1px solid var(--avr-color-primary-500);
  text-decoration: none;
  transition: all 0.1s ease-out;

  margin: 0;
  width: 100%;
  text-align: center;

  /* fixes overlapping issue */
  position: relative;
  z-index: 1;
}

.avr-button:hover {
  cursor: pointer;
}

.avr-button:hover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 2rem;
}

.avr-button:active {
  opacity: 0.8;
}

.avr-button.secondary {
  background-color: #bea7f4;
  border: 1px solid transparent;
}

.avr-input,
.avr-textarea {
  width: 100%;
  font-size: 1rem;
  font-weight: var(--avr-text-roboto-light);
  font-family: inherit;
  color: var(--avr-text-primary);
  border: 1px solid rgba(var(--avr-color-primary-500-rgb), 0.5);

  /* fixes overlapping issue */
  position: relative;
  z-index: 0;
}

.avr-input {
  padding: 0.5rem 1.5rem;
  border-radius: 32px;
}

.avr-input.secondary {
  border: 1px solid #a6a6a6;
}

.avr-input::placeholder,
.avr-textarea::placeholder {
  font-size: 1rem;
  font-weight: var(--avr-text-roboto-thin);
  color: rgba(var(--avr-color-primary-500-rgb), 0.5);
}

.avr-input.secondary::placeholder {
  color: #a6a6a6;
}

.avr-input:focus,
.avr-input:active,
.avr-textarea:focus,
.avr-textarea:active {
  outline: none;
  border: 2px solid rgba(var(--avr-color-primary-500-rgb), 0.5);
}

.avr-textarea {
  padding: 1rem 1.5rem;
  border-radius: 12px;
  resize: none;
}

.icon {
  width: 1.1rem;
  height: 1.1rem;
}

.icon:hover {
  opacity: 0.8;
  cursor: pointer;
  transition: all 0.1s ease-out;
}

.icon img {
  width: 100%;
  height: 100%;
}

.indicators {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
}

.indicator {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--avr-color-surface);
  opacity: 0.25;
}

.active {
  opacity: 1;
}

section {
  width: 85vw;
  margin: 0 auto;
  color: var(--avr-text-primary);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

section .title {
  display: block;
  width: 85vw;
  max-width: 120rem;
  font-size: 1.5rem;
  font-weight: var(--avr-text-roboto-light);
  text-align: center;

  padding: 0.5rem 0;
  border-bottom: 3px solid;
  border-image: radial-gradient(
      circle,
      var(--avr-color-primary-500) 0%,
      transparent 80%
    )
    1;
}

section .sub-title {
  display: block;
  text-align: center;
  font-size: 1.25rem;
  padding: 0.5rem 0;
  font-weight: var(--avr-text-roboto-thin);
}

span {
  color: var(--avr-text-primary);
}

main,
section {
  margin-bottom: 10rem;
}

/* Smokes */
.smoke {
  user-select: none;
  max-width: 100dvw;
}

main .smoke {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;

  width: 100dvw;
}

.our-platform picture img {
  position: absolute;
  z-index: -10;
  bottom: -10rem;
  left: 50%;
  transform: translateX(-50%);

  width: 100dvw;
  height: 135rem;
}

.why .smoke {
  position: absolute;
  z-index: -2;
  left: 50%;
  transform: translateX(-50%);

  width: 100dvw;
  height: 40rem;
  bottom: -7.5rem;
}

.our-team .smoke {
  position: absolute;
  z-index: -3;
  left: 50%;
  transform: translateX(-50%);
  bottom: -15rem;

  width: 100dvw;
  height: 55rem;
}

footer .smoke {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;

  width: 100dvw;
  height: 50rem;
}

/* Media queries */
@media screen and (min-width: 1024px) {
  /* [MEDIA] Main section */
  main {
    height: 100dvh;
    max-height: 62rem;
    padding: 0;
    margin-bottom: 5rem;
  }

  main .hero-card {
    flex-direction: row;
    padding: 10dvw 9dvw;
    gap: 2rem;
  }

  main .logo-box {
    flex-direction: row;
    align-items: flex-end;
  }

  main .logo-box span {
    font-size: 1rem;
    text-align: start;
    max-width: 12.5rem;
  }

  main .intro-buttons {
    display: flex;
    flex-direction: row;
  }

  main .intro-buttons.mobile {
    display: none;
  }

  main .notify-me {
    flex-direction: row-reverse;
    width: auto;
    flex-grow: 1;
  }

  main .notify-me button {
    margin-left: -5rem;
    height: 100%;
  }

  main .notify-me .avr-input {
    flex-grow: 1;
    width: auto;
    height: 2.25rem;
  }

  main .coming-soon {
    align-items: center;
    max-width: 13.5rem;
  }

  .intro-main,
  .coming-soon,
  .intro-buttons.mobile {
    max-width: none;
  }

  /* [MEDIA] First section: our platform */

  .our-platform .card {
    flex-direction: row;
    align-items: center;
    max-width: 50rem;
    padding: 2rem;
    margin-top: 3rem;
    border-radius: 32px;
    gap: 2rem;
  }

  .our-platform .card img {
    flex-grow: 1;
  }

  .our-platform .card a {
    margin: 0;
  }

  .our-platform .card-title-mobile {
    display: none;
  }

  .our-platform .card .card-title {
    display: inline-block;
    font-size: 1.5rem;
  }

  .our-platform .text-container {
    width: 100%;
    min-width: 20rem;
  }

  .our-platform .card .card-points li::before {
    top: 0.6rem;
  }

  .our-platform .card:nth-of-type(2) {
    flex-direction: row-reverse;
  }

  .our-platform .card:nth-of-type(2) .text-container {
    text-align: right;
    padding-right: 0;
    padding-left: 2.5rem;
  }

  .our-platform .card:nth-of-type(2) .card-points li {
    flex-direction: row-reverse;
    padding-left: 0;
    padding-right: 1rem;
  }

  .our-platform .card:nth-of-type(2) .card-points li::before {
    right: 0;
    left: auto;
  }

  /* [MEDIA] Second section: why */
  .why .bubbles-container {
    justify-content: center;
    min-height: 45rem;
    position: relative;
    overflow: visible;
  }

  .why .main-bubble {
    position: static;
    width: 25rem;
    height: 25rem;
  }

  .why .logo-bubble {
    width: 14rem;
    height: 14rem;
    padding: 3.5rem;
    translate: none;
    left: auto;
    background-color: rgba(var(--avr-color-surface-rgb), 0.3);
  }

  .why .bubble {
    position: absolute;

    width: 16rem;
    height: 16rem;
  }

  .why .bubble:nth-of-type(2) {
    transform: translate(calc(-50% - 5rem), calc(-50% - 5rem));
  }

  .why .bubble:nth-of-type(3) {
    transform: translate(calc(50% + 5rem), calc(-50% - 5rem));
  }

  .why .bubble:nth-of-type(4) {
    transform: translate(calc(-50% - 5rem), calc(50% + 5rem));
  }

  .why .bubble:nth-of-type(5) {
    transform: translate(calc(50% + 5rem), calc(50% + 5rem));
  }

  /* [MEDIA] Third section: our team */
  section.our-team .sub-title {
    width: 35vw;
  }

  .our-team .slider {
    display: flex;
    justify-content: center;
    flex-direction: row;
  }

  .our-team .card {
    opacity: 1;
  }

  .our-team .card.active {
    transform: translateY(0);
  }

  .our-team .card .team-image {
    width: 12.5rem;
    height: 12.5rem;
  }

  /* [MEDIA] Fourth section: contact us */
  .contact-us .card {
    max-width: 35rem;
  }

  .contact-us .sub-title span {
    display: inline-block;
  }

  /* Reusable styles */
  .avr-button {
    width: auto;
  }

  .indicators,
  .spacer {
    display: none;
  }

  section .title,
  section .sub-title {
    padding: 1rem 0;
  }

  section .title {
    font-size: 2.5rem;
    border-bottom: 4px solid;
  }

  section .sub-title {
    font-size: 1.5rem;
  }

  /* [MEDIA]: Smokes */
  main .smoke {
    width: 50rem;
  }

  .our-platform picture img {
    width: 100dvw;
    max-width: 100rem;
    height: 90rem;
  }

  .why .smoke {
    z-index: -30;
    bottom: -10rem;

    width: 65rem;
    height: 60rem;
  }

  .our-team .smoke {
    width: 75rem;
    height: 50rem;
  }
}

@media screen and (min-width: 1440px) {
  /* [MEDIA] Main section */
  main {
    margin-bottom: 15rem;
  }

  main .hero-card {
    padding: 12dvw 10dvw;
    gap: 3rem;
  }

  main .logo-box {
    gap: 2rem;
  }

  main .logo-box span {
    font-size: 1.25rem;
    max-width: 15rem;
  }

  /* [MEDIA] First section: our platform */
  .our-platform .smoke {
    height: 120rem;
  }

  .our-platform .card {
    max-width: 60rem;
  }

  .our-platform .card .card-text {
    font-size: 1rem;
  }

  .our-platform .text-container {
    padding-right: 2.5rem;
  }

  .our-platform .card:nth-of-type(2) .text-container {
    padding-right: 0;
    padding-left: 5rem;
  }

  /* [MEDIA] Third section: our team */
  .our-team .card {
    padding: 2rem;
  }

  .our-team .card .team-image {
    width: 15rem;
    height: 15rem;

    margin-bottom: 2rem;
  }

  .our-team .slider {
    gap: 1.5rem;
  }
}

@media screen and (min-width: 1920px) {
  /* [MEDIA] Main section */
  main .smoke {
    width: 75rem;
  }

  main .hero-card {
    padding: 12.5rem 15rem;
  }

  main .logo-box span {
    font-size: 1.5rem;
    max-width: 17.5rem;
  }

  /* [MEDIA] First section: our platform */
  .our-platform .card {
    max-width: 70rem;
  }

  .our-platform .text-container {
    padding-right: 5rem;
  }

  /* [MEDIA] Second section: why */
  .why .bubbles-container {
    min-height: 49rem;
  }

  .why .main-bubble {
    width: 29rem;
    height: 29rem;
  }

  .why .logo-bubble {
    width: 16rem;
    height: 16rem;
  }

  .why .bubble {
    width: 20rem;
    height: 20rem;
  }

  footer .smoke {
    max-width: 150rem;
  }
}

/* Animations */
.hidden {
  opacity: 0;
  transition: all 0.5s ease-out;

  transform: translateY(5rem);
}

.show {
  opacity: 1;
  transform: translateY(0);
  scroll-margin-top: 2.5rem;
}

@media (prefers-reduced-motion) {
  .hidden {
    transition: none;
  }
}

@keyframes wave-animation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(50%);
  }
}