@keyframes slide {
  to {
    translate: calc(-100% + 100vi) 0;
  }
}

@keyframes stack {
  0% {
    rotate: 9deg;
  }

  25% {
    rotate: 0deg;
  }

  50% {
    scale: 1;
  }

  100% {
    scale: var(--scale);
  }
}

:root {
  --color-blue-smoke: oklch(58.13% 0.0263 169.26deg);
  --color-outer-space: oklch(28.01% 0.0189 167.6deg);
  --color-harp: oklch(93.93% 0.0178 170.07deg);
  --breakpoint-width: none;
  --section-space-block: clamp(2.5rem, 1.176rem + 4.41vi, 4rem);
  --section-space-inline: clamp(2rem, -8.038rem + 20.91vi, 12.875rem);

  font-size: 100%;

  @media (width >= 100rem) {
    --section-space-inline: max(12.875rem, (100vi - 74.25rem) / 2);
  }
}

:focus-visible {
  outline: 0.125rem solid var(--color-blue-smoke);
  outline-offset: 0.125rem;
}

body {
  overflow: visible;
}

img {
  display: block;
  inline-size: 100%;
}

#__nuxt {
  display: block;
  inline-size: auto;
  min-block-size: auto;

  .lds-typography {
    inline-size: auto;
    font-optical-sizing: auto;
    white-space: normal;

    > * {
      font: inherit;
    }
  }

  .lds-section {
    position: static;
    padding: var(--section-space-block) var(--section-space-inline);
  }

  .text-primary {
    font-size: clamp(1.75rem, 1.309rem + 1.47vi, 2.25rem);
    font-weight: bold;
    line-height: calc(46 / 36);
    text-wrap: balance;
    letter-spacing: calc(1.08 / 36 * -1em);
  }

  .text-secondary {
    font-family: var(--font-secondary);
    font-size: clamp(1rem, 0.779rem + 0.74vi, 1.25rem);
    line-height: 1.5;
  }

  .lds-btn {
    --color: var(--color-blue-smoke);

    max-inline-size: fit-content;
    min-block-size: 3rem;
    padding: 0.75rem 2rem;
    font-family: var(--font-family-body);
    font-size: 0.9375rem;
    font-weight: normal;
    background-color: var(--color);
    border-color: var(--color);
    border-radius: 0.1875rem;
    mix-blend-mode: darken;
    transition-property: color, background-color, border-color;

    &:hover,
    &:focus-visible,
    &:not(:first-of-type) {
      color: var(--color);
      background-color: transparent;
    }

    &:not(:first-of-type):is(:hover, :focus-visible) {
      color: white;
      background-color: var(--color);
    }
  }

  .button-show-all,
  .lds-carousel__button {
    display: none;
  }

  .lds-section-header.background {
    justify-content: end;
    aspect-ratio: auto;
    background-image: url("/assets/hero-BozAoLfR.webp");

    @media (width >= 48rem) {
      min-block-size: 32rem;
    }
  }

  .lds-section-header__cover {
    aspect-ratio: auto;

    @media (width < 48rem) {
      background-image: none;
    }
  }

  .lds-section-header__wrapper {
    block-size: auto;
    padding-block: 0;

    @media (width >= 48rem) {
      padding-block: 7.75rem 4rem;
    }
  }

  .lds-section-header__wrapper--content {
    gap: 2rem;
  }

  .lds-section-header__wrapper--content--title-desc {
    gap: 2rem;

    .text-primary {
      @media (width < 48rem) {
        padding: 3.5rem var(--section-space-inline) 2rem;
        margin-inline: calc(var(--section-space-inline) * -1);
        background-image: url("/assets/hero-BozAoLfR.webp");
        background-position: center;
        background-size: cover;

        span {
          display: block;
          max-inline-size: 10ch;
        }
      }
    }
  }

  #header-buttons {
    flex-flow: row wrap;
    gap: 1rem;
  }

  .sections-ordered {
    grid-auto-columns: 100%;
  }

  .section-steps {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1.5rem;
    align-items: start;

    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-items: last baseline;
    }
  }

  .lds-step-not-connected {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(1rem, 0.559rem + 1.47vi, 1.5rem);
    align-items: last baseline;
    inline-size: auto;

    @media (width < 48rem) {
      grid-template-columns: subgrid;
      grid-column-end: span 2;
    }

    > .text-primary {
      display: flex;
      font-size: clamp(3rem, 0.353rem + 8.82vi, 6rem);
      letter-spacing: normal;

      span,
      &::after {
        text-box: trim-both cap alphabetic;
      }

      &::after {
        font: inherit;
        content: ".";
      }
    }
  }

  .lds-step-not-connected__texts {
    display: block;

    .text-primary {
      display: none;
    }
  }

  .lds-step-not-connected__texts--desc {
    max-inline-size: 25ch;
    text-align: start;
    text-wrap: balance;

    @media (width >= 48rem) {
      max-inline-size: 16ch;
    }
  }

  .section-challenges {
    --timeline-size: calc(287.5rem + var(--section-space-inline) * 2);

    @media (width >= 48rem) {
      @supports (animation-timeline: view()) {
        min-block-size: var(--timeline-size);
        overflow: visible;
        view-timeline-name: --challenges-timeline;
        view-timeline-axis: block;
      }
    }
  }

  .challenges-wrapper,
  .rewards-wrapper {
    overflow-x: clip;
    background-color: var(--color-outer-space);

    @media (hover: none) and (pointer: coarse) {
      padding-block-end: 0;
    }

    @supports not selector(::-webkit-scrollbar-thumb) {
      padding-block-end: 0;
    }

    .lds-section__content {
      gap: 0;
    }
  }

  .challenges-wrapper {
    @media (width >= 48rem) {
      @supports (animation-timeline: view()) {
        position: sticky;
        inset-block-start: 0;
        display: grid;
        align-items: center;
        min-block-size: 100svb;
        padding-block-end: 0;
      }
    }
  }

  .challenges-wrapper__title,
  .rewards-wrapper__title {
    display: block;

    .text-primary {
      color: white;
      text-align: start;
    }
  }

  .lds-carousel {
    block-size: auto;

    .lds-carousel__slider {
      gap: 1.5rem;
      padding-block: clamp(2rem, 1.118rem + 2.94vi, 3rem)
        var(--section-space-block);
      padding-inline: var(--section-space-inline);
      margin-inline: calc(var(--section-space-inline) * -1);
      overflow: auto visible;
      scroll-padding-inline: var(--section-space-inline);

      @supports selector(::-webkit-scrollbar-thumb) {
        @media (hover) and (pointer: fine) {
          scrollbar-width: auto;

          &::-webkit-scrollbar {
            block-size: 0.5rem;
          }

          &::-webkit-scrollbar-thumb {
            cursor: grab;
            background-color: var(--color-harp);
            border-radius: calc(1px * infinity);
          }

          &::-webkit-scrollbar-track {
            margin-inline: var(--section-space-inline);
          }
        }
      }
    }
  }

  .challenges-wrapper__carousel .lds-carousel__slider {
    scroll-snap-type: x mandatory;

    @media (width >= 48rem) {
      @supports (animation-timeline: view()) {
        inline-size: var(--timeline-size);
        overflow-x: clip;
        animation: linear slide forwards;
        animation-timeline: --challenges-timeline;
        animation-range: contain;
        will-change: translate;
      }
    }
  }

  .lds-card-challenge,
  .lds-card-reward {
    display: grid;
    grid-auto-rows: auto 1fr;
    grid-auto-columns: 100%;
    block-size: auto;
    padding: 0;
    overflow: visible;
    background-color: transparent;
    border: none;
    border-radius: 0;
    transition: none;
  }

  .lds-card-hover__content {
    gap: 1rem;
    justify-content: end;
    padding: 1.5rem;
    background-color: var(--color-harp);
    border: 1px solid var(--color-outer-space);
    border-radius: 1.25rem;

    .lds-btn {
      max-inline-size: none;
    }
  }

  .lds-card-challenge {
    inline-size: 15.5rem;
    aspect-ratio: 248 / 334;
    scroll-snap-align: start;
    perspective: 600px;

    &:hover,
    &:focus-within {
      @media (hover) {
        &::after {
          rotate: y 180deg;
        }

        .lds-card-hover__content {
          rotate: y 0deg;
        }
      }
    }

    .lds-card-hover__content {
      transition: rotate 1s;
      transform-style: preserve-3d;
      rotate: y -180deg;
    }
  }

  .lds-card-reward {
    --space: 1.5rem;
    --scale: 0.5;

    position: sticky;
    inset-inline-start: 0;
    inline-size: 15.8125rem;
    aspect-ratio: 253 / 334;
    transform-origin: left;

    @supports (animation-timeline: view()) {
      view-timeline-name: --rewards-timeline;
      view-timeline-axis: inline;
      animation: linear stack both;
      animation-timeline: --rewards-timeline;
      animation-range: contain -20% contain 80%;
      will-change: rotate, scale;
    }

    &:hover,
    &:focus-within {
      .lds-card-hover__content {
        @media (hover) {
          opacity: 1;
        }
      }
    }

    &:nth-child(2) {
      --scale: 0.55;

      inset-inline-start: calc(var(--space) * 1);
    }

    &:nth-child(3) {
      --scale: 0.6;

      inset-inline-start: calc(var(--space) * 2);
    }

    &:nth-child(4) {
      --scale: 0.65;

      inset-inline-start: calc(var(--space) * 3);
    }

    &:nth-child(5) {
      --scale: 0.7;

      inset-inline-start: calc(var(--space) * 4);
    }

    &:nth-child(6) {
      --scale: 0.75;

      inset-inline-start: calc(var(--space) * 5);
    }

    &:nth-child(7) {
      --scale: 0.8;

      inset-inline-start: calc(var(--space) * 6);
    }

    &:nth-child(8) {
      --scale: 0.85;

      inset-inline-start: calc(var(--space) * 7);
    }

    &:nth-child(9) {
      --scale: 0.9;

      inset-inline-start: calc(var(--space) * 8);
    }

    &:nth-child(10) {
      --scale: 0.95;

      inset-inline-start: calc(var(--space) * 9);
    }

    .lds-card-hover__content {
      z-index: 1;
      opacity: 0;
      transition: opacity 0.15s linear;
    }
  }

  .lds-card-challenge__content,
  .lds-card-reward__content,
  .lds-card-reward__image {
    --padding: 1.5rem;
    --border-radius: 1.25rem;

    z-index: 1;
    row-gap: 0;
    align-items: start;
    inline-size: 100%;
    padding: 0 var(--padding) var(--padding);
    overflow: clip;
    background-color: white;
  }

  .lds-card-challenge__content {
    border: 1px solid var(--color-outer-space);
    border-radius: var(--border-radius);
    transition: rotate 1s;
    transform-style: preserve-3d;
    backface-visibility: hidden;

    .lds-card-challenge:is(:hover, :focus-within) & {
      @media (hover) {
        rotate: y 180deg;
      }
    }

    .lds-image {
      inline-size: calc(100% + var(--padding) * 2);
      block-size: auto;
      aspect-ratio: 747 / 486;
      margin-inline: calc(var(--padding) * -1);
      object-fit: cover;
    }

    .lds-typography {
      line-height: 1.5;
      text-align: start;
    }

    .text-secondary {
      margin-block-start: var(--padding);
      font-family: var(--font-primary);
      font-size: 1.875rem;
      font-weight: bold;
    }

    .text-primary {
      margin-block-start: 0.5625rem;
      font-family: var(--font-secondary);
      font-size: 1rem;
      font-weight: normal;
      letter-spacing: normal;
    }
  }

  .lds-card-reward__image {
    block-size: auto;
    aspect-ratio: 253 / 180;
    padding-block-end: 0;
    padding-inline: 0;
    object-fit: cover;
    border-block-start: 1px solid var(--color-outer-space);
    border-inline: 1px solid var(--color-outer-space);
    border-start-start-radius: var(--border-radius);
    border-start-end-radius: var(--border-radius);
  }

  .lds-card-reward__content {
    justify-content: end;
    padding-block-start: 1.5rem;
    background-color: var(--color-harp);
    border-block-end: 1px solid var(--color-outer-space);
    border-inline: 1px solid var(--color-outer-space);
    border-end-start-radius: var(--border-radius);
    border-end-end-radius: var(--border-radius);

    .lds-btn {
      display: none;
    }
  }

  .lds-card-reward__content--texts {
    gap: 0;
    align-items: start;

    .lds-typography {
      font-family: var(--font-secondary);
      font-size: 1.25rem;
      font-weight: normal;
      line-height: 1.5;
      text-align: start;
      letter-spacing: normal;
    }
  }

  .lds-card-reward__content--name {
    block-size: auto;
  }

  .lds-section-referral {
    block-size: auto;
    aspect-ratio: auto;
    padding-block: 0;
    background-color: white;

    @media (width >= 48rem) {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.5rem;
      place-items: end;
    }

    &::after {
      aspect-ratio: 1200 / 1050;
      content: "";
      background-image: url("/assets/people-D8FEdiBB.webp");
      background-size: cover;

      @media (width < 48rem) {
        margin-block-start: -1rem;
      }

      @media (width >= 48rem) {
        order: -1;
        inline-size: min(100% - 3rem, 25rem);
        margin-inline-end: 3rem;
      }
    }

    .lds-section__content {
      padding-block: var(--section-space-block);

      @media (width >= 48rem) {
        padding-block-start: 6.5rem;
      }
    }

    .lds-card {
      gap: 0;
      inline-size: auto;
      padding: 0;
      background-color: transparent;
      border: none;
      border-radius: 0;
    }

    .lds-typography {
      text-align: start;
    }

    .lds-btn {
      --color: var(--color-outer-space);
    }
  }

  .lds-section-referral--desc {
    margin-block-start: 1.5rem;

    @media (width >= 48rem) {
      max-inline-size: 40ch;
    }
  }

  .referral-wrapper__content {
    margin-block-start: 2rem;
  }
}