@layer base,tablet,desktop,overrides;
@font-face {
  font-family: 'Chalet 60';
  src: url(/assets/fonts/LEGOChalet60-Regular.woff2) format('woff2'), url(/assets/fonts/LEGOChalet60-Regular.woff) format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Tobi Pro';
  src: url(/assets/fonts/TobiPro-Heavy.woff2) format('woff2'), url(/assets/fonts/TobiPro-Heavy.woff) format('woff');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'Tobi Pro';
  src: url(/assets/fonts/TobiPro-Medium.woff2) format('woff2'), url(/assets/fonts/TobiPro-Medium.woff) format('woff');
  font-weight: 600;
  font-style: normal;
}
html {
  scroll-behavior: smooth;
}
canvas {
  position: absolute !important;
  top: 0 !important;
  z-index: 100;
}
@layer base {
  *,
  *:before,
  *:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    --blue-200: #b4deea;
    --blue-600: #044d80;
    --green-400: #7dbe86;
    --green-300: #daf0d9;
    --green-500: #397d38;
    --green-600: #397d38;
    font-family: 'Tobi Pro', sans-serif;
    container-type: inline-size;
  }
  .container {
    background-color: var(--blue-200);
  }
  .language-selector {
    position: absolute;
    top: 28px;
    right: 12px;
    z-index: 100;
    display: flex;
    gap: 8px;
    a {
      position: relative;
      padding: 6px 16px;
      font-size: 16px;
      font-weight: 800;
      border-radius: 9999px;
      text-decoration: none;
      line-height: 1;
      overflow: clip;
      span {
        display: block;
        color: var(--blue-600);
        translate: 0 1px;
        text-shadow: 0 2lh 0 #fff;
        transition: translate 0.2s;
        transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
      }
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        border: 2px solid var(--blue-600);
        border-radius: 9999px;
      }
      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        background-color: var(--blue-600);
        border: 2px solid var(--blue-600);
        border-radius: 9999px;
        transition: translate 0.3s;
        transition-timing-function: linear(0, 0.012 0.9%, 0.05 2%, 0.411 9.2%, 0.517 11.8%, 0.611 14.6%, 0.694 17.7%, 0.765 21.1%, 0.824 24.8%, 0.872 28.9%, 0.91 33.4%, 0.939 38.4%, 0.977 50.9%, 0.994 68.4%, 1);
        translate: 0 100%;
      }
    }
    a:hover {
      span {
        translate: 0 -1.9lh;
      }
      &::after {
        translate: 0 0;
      }
    }
  }
  html[lang='nl'] {
    .language-selector {
      a:first-of-type {
        span {
          translate: 0 -1.9lh;
        }
        &::after {
          translate: 0 0;
        }
        span {
          color: #fff;
        }
      }
    }
  }
  html[lang='fr'] {
    .language-selector {
      a:last-of-type {
        span {
          translate: 0 -1.9lh;
        }
        &::after {
          translate: 0 0;
        }
        span {
          color: #fff;
        }
      }
    }
  }
  header {
    --logo-overlay-height: 180px;
    overflow: hidden;
    visibility: hidden;
    .banner-container {
      position: relative;
      z-index: 99;
      padding-inline: 16px;
      padding-top: var(--logo-overlay-height);
      .logo-overlay {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
        display: block;
        padding-top: calc(var(--logo-overlay-height) * 0.1);
        padding-left: calc(var(--logo-overlay-height) * 0.1);
        height: var(--logo-overlay-height);
        width: calc(var(--logo-overlay-height) * 1.32);
        background-color: #fff0;
        background-size: contain;
        background-position: top left;
        background-image: url(/assets/images/svg/logo-overlay-background.svg);
        background-repeat: no-repeat;
        img {
          height: 50%;
        }
      }
      .stamp-section {
        position: relative;
        z-index: 3;
        width: 100%;
        max-width: 400px;
        margin-inline: auto;
        margin-bottom: 40px;
        .stamp-container {
          position: relative;
          width: 100%;
          .stamp {
            width: 100%;
          }
          .title {
            position: absolute;
            top: 45%;
            left: 50%;
            width: 47%;
            translate: -47% -50%;
          }
          .banner {
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 90%;
            translate: -50% 0%;
          }
        }
        .baloons-left,
        .baloons-right {
          position: absolute;
          display: flex;
          flex-direction: column;
          width: 20%;
          translate: 0 100vh;
          img {
            width: 100%;
          }
        }
        .baloons-left {
          left: 0;
          top: 35%;
          translate: 0 -50%;
          img:first-of-type {
            position: relative;
            top: 16px;
            z-index: 10;
          }
        }
        .baloons-right {
          top: 35%;
          translate: 0 -50%;
          right: 0;
          img:first-of-type {
            position: relative;
            top: 32px;
            z-index: 10;
          }
        }
      }
      .clouds {
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        img {
          position: absolute;
          max-width: 125px;
        }
        img:first-of-type {
          top: 20%;
          right: 15%;
          width: 19.7cqw;
        }
        img:nth-of-type(2) {
          bottom: 20%;
          right: 0;
          width: 24.4cqw;
          translate: 50% 0;
        }
        img:nth-of-type(3) {
          width: 24.4cqw;
          top: 50%;
          left: 0;
          translate: -50% 0;
        }
        .desktop-only {
          display: none;
        }
      }
      .slingers {
        pointer-events: none;
        user-select: none;
        position: absolute;
        top: 0;
        right: 0;
        width: 80%;
        padding-top: calc(var(--logo-overlay-height) * 0.65);
        z-index: 10;
        img {
          width: 100%;
        }
        .desktop-only {
          display: none;
        }
      }
      .confetti {
        pointer-events: none;
        user-select: none;
        display: none;
      }
    }
    .heading-container {
      position: relative;
      z-index: 2;
      padding-block: 32px;
      h1 {
        font-family: 'Tobi Pro', sans-serif;
        font-weight: 800;
        font-size: clamp(20px, 6.25cqw, 40px);
        line-height: 1.3;
        letter-spacing: 0em;
        text-transform: uppercase;
        color: #fff;
        text-align: center;
        span {
          display: block;
          font-weight: 600;
        }
      }
      .background-village {
        position: absolute;
        top: 0;
        left: -5%;
        z-index: -2;
        width: 80%;
        translate: 0 -75%;
        transform-origin: center bottom;
        rotate: -2deg;
        &.desktop-only {
          display: none;
        }
      }
      .flower-deco {
        position: absolute;
        &.left {
          top: 0;
          left: 20px;
          width: 32px;
        }
        &.right {
          bottom: 33%;
          right: 40px;
          width: 24px;
        }
      }
      .grass-deco {
        position: absolute;
        &.left {
          bottom: 28%;
          left: 20px;
          width: 40px;
        }
        &.right {
          top: 0;
          right: 8px;
          translate: 0 -100%;
          width: 56px;
        }
      }
      &::before {
        content: '';
        position: absolute;
        top: -15%;
        left: 50%;
        z-index: -1;
        translate: -50% 0%;
        width: 200%;
        border-radius: 50% 50% 0 0;
        height: 150%;
        background-color: var(--green-400);
      }
    }
    .scroll-arrow {
      position: fixed;
      bottom: 16px;
      left: 50%;
      z-index: 99;
      translate: -50% 0;
      display: block;
      width: 32px;
      margin-inline: auto;
      margin-top: 24px;
      .scroll-arrow-inner {
        width: 100%;
        height: 100%;
        background-color: #fff;
        border-radius: 9999px;
        box-shadow: 0 4px 4px 2px rgb(0 0 0 / 0.25);
        transition: background-color 0.3s ease-out;
        svg {
          width: 100%;
        }
      }
      &:hover .scroll-arrow-inner {
        background-color: rgb(255 255 255 / 0.6);
      }
    }
  }
  .intro-section {
    background-color: var(--green-300);
    padding-top: 40px;
    padding-bottom: 20px;
    padding-inline: 16px;
    h2 {
      width: 100%;
      max-width: 48ch;
      margin-inline: auto;
      margin-bottom: 24px;
      font-size: clamp(23px, 7.5cqw, 40px);
      line-height: 1.1;
      font-weight: 800;
      text-wrap: pretty;
      text-wrap: balance;
      text-align: center;
      color: var(--green-600);
      span {
        font-size: clamp(28px, 9cqw, 40px);
        text-transform: uppercase;
        sup {
          vertical-align: text-top;
        }
      }
    }
    .description {
      width: 100%;
      max-width: 80ch;
      margin-inline: auto;
      margin-bottom: 80px;
      font-family: 'Chalet 60', sans-serif;
      font-size: clamp(14px, 4.375cqw, 18px);
      line-height: 1.5;
      color: var(--green-600);
      text-wrap: balance;
    }
    .brands-section {
      width: 100%;
      max-width: 1080px;
      margin-inline: auto;
      border-radius: 36px;
      background-color: var(--green-400);
      h3 {
        padding-top: 52px;
        padding-bottom: 8px;
        font-size: clamp(24px, 7.5cqw, 72px);
        font-weight: 800;
        text-align: center;
        color: #fff;
      }
      strong {
        display: block;
        margin-bottom: 48px;
        font-size: clamp(16px, 5.625cqw, 44px);
        font-weight: 800;
        text-align: center;
        color: #fff;
      }
      ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 12px;
        padding-inline: 16px;
        list-style: none;
        width: 100%;
        padding-bottom: 16px;
        li {
          position: relative;
          background-color: var(--green-300);
          border-radius: 18px;
          overflow: clip;
          aspect-ratio: 1/0.61;
          a {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
            img {
              position: absolute;
              top: 50%;
              left: 50%;
              translate: -50% -50%;
              max-height: 70%;
              max-width: 70%;
              object-fit: contain;
              object-position: center;
              transition: scale 0.3s;
              transition-timing-function: cubic-bezier(0.34, 2, 0.64, 1);
            }
            &:hover {
              img {
                scale: 0.9;
              }
            }
          }
          &:has(a:hover) {
            background-color: #cde1cc;
          }
        }
      }
    }
    .legal {
      display: block;
      margin-inline: auto;
      margin-top: 16px;
      font-family: 'Chalet 60', sans-serif;
      font-size: clamp(10px, 3.125cqw, 12px);
      line-height: 1.1;
      text-align: center;
      text-wrap: balance;
      color: var(--green-600);
      sup {
        vertical-align: top;
      }
    }
  }
}
@layer tablet {
  @media (min-width: 500px) {
    .slingers {
      display: flex;
      justify-content: flex-end;
      padding-top: 0;
      img:not(.desktop-only) {
        width: 80%;
        rotate: 15deg;
      }
    }
    .intro-section {
      p {
        text-align: center;
      }
    }
  }
  @media (min-width: 768px) {
    .language-selector a {
      font-size: 24px;
      padding: 8px 24px;
    }
    header {
      --logo-overlay-height: 250px;
      .banner-container {
        padding-top: calc(var(--logo-overlay-height) * 0.7);
      }
      .stamp-section {
        margin-bottom: 120px;
      }
      .baloons-left,
      .baloons-right {
        flex-direction: row;
        width: 160px;
        img {
          width: 50%;
        }
      }
      .baloons-left {
        left: 0;
        top: 30%;
        translate: -60%;
        img:last-of-type {
          position: relative;
          top: -20px;
          right: 16px;
        }
      }
      .baloons-right {
        top: 30%;
        right: 0;
        translate: 60%;
        img:first-of-type {
          top: -20px;
          left: 16px;
        }
      }
      .clouds {
        .desktop-only {
          display: block;
          pointer-events: none;
          user-select: none;
        }
        img:first-of-type {
          top: 0;
          right: 18%;
          translate: 0 -50%;
        }
        img:nth-of-type(2) {
          bottom: unset;
          top: 30%;
        }
        img:nth-of-type(3) {
          top: unset;
          bottom: 20%;
          left: 0;
          translate: -50% 0;
        }
        img:nth-of-type(4) {
          top: 20%;
          left: 40%;
          width: 100px;
        }
      }
      .confetti {
        position: absolute;
        top: 0;
        left: 50%;
        translate: -50% 0;
        z-index: 10;
        display: block;
        min-width: 1440px;
        width: 100%;
        aspect-ratio: 2092/775;
      }
      .heading-container {
        padding-top: 64px;
        padding-bottom: 120px;
        h1 {
          span {
            display: inline-block;
          }
        }
        .flower-deco.left {
          left: 15cqw;
          top: -12px;
          width: 64px;
        }
        .flower-deco.right {
          right: 10cqw;
          bottom: 16px;
          width: 52px;
        }
        .grass-deco.right {
          right: 6cqw;
          width: 100px;
        }
        .grass-deco.left {
          left: 7cqw;
          bottom: 24px;
          width: 80px;
        }
      }
      .scroll-arrow {
        width: 44px;
      }
    }
    .intro-section {
      padding-top: 80px;
      padding-inline: 32px;
      padding-bottom: 40px;
      .legal {
        margin-top: 32px;
      }
    }
    .brands-section {
      border-radius: 48px;
      ul {
        grid-template-columns: repeat(3, 1fr);
        padding-inline: 24px;
        padding-bottom: 24px;
        li {
          border-radius: 24px;
        }
      }
      strong {
        margin-bottom: 80px;
      }
    }
  }
  @media (min-width: 820px) {
    .stamp-section {
      margin-bottom: 120px;
    }
    .baloons-left {
      translate: -80%;
    }
    .baloons-right {
      translate: 70%;
    }
    .slingers img:not(.desktop-only) {
      width: 70%;
    }
    .background-village {
      width: 60%;
    }
  }
}
@layer desktop {
  @media (min-width: 1024px) {
    .language-selector {
      right: 40px;
    }
    .stamp-section {
      margin-bottom: 0;
      .baloons-left {
        top: 25%;
        translate: -100%;
      }
      .baloons-right {
        top: 25%;
        translate: 100%;
      }
    }
    .clouds img:nth-of-type(4) {
      left: 30%;
    }
    .slingers {
      width: 60%;
    }
    .heading-container {
      padding-block: 80px;
      &::before {
        height: 300%;
        top: -40%;
      }
      .background-village:not(.desktop-only) {
        left: -120px;
        top: -30px;
        rotate: -2deg;
        width: 35%;
      }
      .background-village.desktop-only {
        display: block;
        top: -30px;
        right: -120px;
        left: unset;
        rotate: 15deg;
        width: 35%;
      }
    }
    .brands-section {
      border-radius: 64px;
      padding-inline: 32px;
      padding-bottom: 32px;
      ul {
        grid-template-columns: repeat(4, 1fr);
        li {
          border-radius: 32px;
        }
      }
    }
  }
  @media (min-width: 1440px) {
    .baloons-left,
    .baloons-right {
      width: 250px;
    }
    .slingers {
      left: -10%;
      top: -7%;
      width: 115%;
      .desktop-only {
        display: block;
      }
      img {
        width: 33%;
        &:first-of-type {
          transform-origin: top right;
          rotate: -8deg;
        }
        &:last-of-type {
          transform-origin: top left;
          rotate: 8deg;
        }
      }
    }
    .brands-section {
      ul li {
        border-radius: 40px;
      }
    }
  }
  @media (min-width: 1920px) {
    header {
      --logo-overlay-height: 300px;
    }
    .stamp-section {
      max-width: 600px;
    }
    .baloons-left,
    .baloons-right {
      width: 350px;
    }
    .slingers {
      top: -10%;
    }
    .background-village {
      &:not(.desktop-only) {
        top: 0;
        rotate: -4deg;
      }
      &.desktop-only {
        top: -30px;
        rotate: 10deg;
      }
    }
    .heading-container {
      padding-bottom: 160px;
      margin-top: 100px;
      h1 {
        font-size: 64px;
      }
    }
    .scroll-arrow {
      width: 72px;
    }
  }
}