#hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  }
  #hero > h1 {
    z-index: 1;
    /* animation */
    transform-origin: top left;
    will-change: transform;
    }
  #hero > div {
    position: absolute;
    top: 0px;
    right: 0px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    width: calc(50vw + var(--spacingSmall));
    height: calc(100vh - var(--spacingMedium));
    padding-left: var(--spacingSmall);
    /* animation */
    animation: var(--animDurationHeroPattern) var(--animBezierCustomEase) 2s animHeroPattern;
    will-change: transform;
    }
    @keyframes animHeroPattern {
      from { transform: translate3d(0, -40%, 0); }
      to { transform: translate3d(0, 0, 0); }
      }
    #hero.multitheme-active > div,
    #hero.caritheme-active > div,
    #hero.lighttheme-active > div {
      background: url("./assets/design-pattern-black.svg");
      background-size: 12px 12px;
      background-attachment: fixed;
      }
      #hero.darktheme-active > div {
        background: url("./assets/design-pattern-white.svg");
        background-size: 12px 12px;
        background-attachment: fixed;
        }
    #hero > div > p {
      backdrop-filter: var(--blurFade);
      -webkit-backdrop-filter: var(--blurFade);
      /* -webkit-mask: linear-gradient(white, white) text; */
      }
      #hero-elem {
        /* animation */
        transform-origin: center !important;
        animation: var(--animDurationHeroElem) var(--animBezierCustomEase) 2s animHeroElem;
        will-change: transform, filter;
        }
        @keyframes animHeroElem {
          from { transform: scale(1.5); filter: var(--blurHuge); }
          to { transform: scale(1); filter: blur(0); }
          }



#looper {
  width: 100%;
  overflow: hidden;
  padding: var(--spacingXlarge) 0px var(--spacingXlarge) 0px;
  }
  #looper > p {
    margin-left: -25vw;
    /* animation */
    will-change: opacity, transform, filter;
    }



#hook {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacingSmall);
  padding: 0px var(--spacingXsmall) 0px var(--spacingXsmall);
  }
  #hook-left, #hook-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--spacingSmall);
    }
    #hook-right-button {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: -16px;
      padding: 16px 0px 16px 0px;
      }



.design-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  }
  #design-intro {
    width: 100%;
    overflow: hidden;
    padding: var(--spacingXlarge) 0px var(--spacingXlarge) 0px;
    /* animation */
    will-change: opacity, transform, filter;
    }
  .design-section-artwork {
    position: sticky;
    -webkit-position: sticky;
    top: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 480px;
    }
    .design-section.multitheme-active > .design-section-artwork,
    .design-section.caritheme-active > .design-section-artwork,
    .design-section.lighttheme-active > .design-section-artwork {
      background: url("./assets/design-pattern-black.svg");
      background-size: 12px 12px;
      background-attachment: fixed;
      }
    .design-section.darktheme-active > .design-section-artwork {
      background: url("./assets/design-pattern-white.svg");
      background-size: 12px 12px;
      background-attachment: fixed;
      }
        .lottie {
          aspect-ratio: 1 / 1;
          /* animation */
          transition: filter var(--animDurationSwitch) var(--animBezierCustomEaseboth);
          will-change: filter;
          }
          #lottie1 {
            width: 76.8vmin; /* 288px @375 */
            }
          #lottie2 {
            width: 81.07vmin; /* 304px @375 */
            }
          #lottie3 {
            width: 81.07vmin; /* 304px @375 */
            }
          #lottie4 {
            width: 76.8vmin; /* 288px @375 */
            }
          #lottie5 {
            width: 81.07vmin; /* 304px @375 */
            }
        .design-section.multitheme-active > .design-section-artwork > .lottie,
        .design-section.caritheme-active > .design-section-artwork > .lottie,
        .design-section.lighttheme-active > .design-section-artwork > .lottie {
          filter: invert(0%);
          }
        .design-section.darktheme-active > .design-section-artwork > .lottie {
          filter: invert(100%);
          }
  .design-section-text {
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--spacingSmall);
    padding: var(--spacingSmall) var(--spacingXsmall) var(--spacingLarge) var(--spacingXsmall);
    /* animation */
    transition: background-color var(--animDurationSwitch) var(--animBezierCustomEaseboth);
    will-change: background-color;
    }
    .design-section.multitheme-active > .design-section-text {
      background: url("./assets/background-multi-image-mobile.webp");
      background-color: var(--colorMultiSkin);
      background-size: 100% auto;
      background-attachment: fixed;
      background-position: bottom;
      }
    .design-section.caritheme-active > .design-section-text {
      background-color: var(--colorCariSkin);
      }
    .design-section.lighttheme-active > .design-section-text {
      background-color: var(--colorLightSkin);
      }
    .design-section.darktheme-active > .design-section-text {
      background-color: var(--colorDarkSkin);
      }
      #design-section-button {
        cursor: pointer;
        padding: 16px 0px 16px 0px;
        margin-top: -16px;
        }



#about {
  position: relative;
  }
  #about-intro {
  width: 100%;
  overflow: hidden;
  padding: var(--spacingXlarge) 0px var(--spacingXlarge) 0px;
  /* animation */
  will-change: opacity, transform, filter;
  }
  #about-history {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
    padding: 0px var(--spacingXsmall) 0px var(--spacingXsmall);
    }
    #about-history-headline {
      display: none;
      }
    #about-history-content {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-direction: column;
      gap: var(--spacingMedium);
      width: 100%;
      padding: var(--spacingSmall) 0px var(--spacingSmall) 0px;
      }
      #about-history-content > div {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        gap: var(--spacingSmall);
        }
  #footer-leftcorner {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 24px;
    aspect-ratio: 1 / 1;
    }
  #footer-rightcorner {
    position: absolute;
    bottom: 0px;
    right: 0;
    width: 24px;
    aspect-ratio: 1 / 1;
    }



#footer {
  width: 100vw;
  padding: var(--spacingLarge) var(--spacingXsmall) var(--spacingMedium) var(--spacingXsmall);
  background-color: var(--colorPermaBlack);
  overflow: hidden;
  }
  #footer-text {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--spacingSmall);
    width: 100%;
    /* animation */
    transform-origin: top left;
    will-change: opacity, transform, filter;
    }
    #footer-text > p {
      color: var(--colorPermaWhite);
      }
      #footer-button {
        cursor: pointer;
        padding: 16px 0px 16px 0px;
        margin-top: -16px;
        }
        #footer-safe {
          height: var(--spacingSmall);
          background-color: var(--colorPermaBlack);
          }



  #copyright {
    display: flex;
    flex-direction: column;
    text-align: left;
    align-items: flex-start;
    gap: 4px;
    }
    #copyright > p > a {
      padding: 4px 10px 4px 10px;
      border-radius: var(--radiusInfinite);
      background-color: var(--colorStandardSoft);
      }












@media (min-width: 760px) {
/* DESKTOP */



#hero > div {
  width: 27.78vw;
  }



  #hook {
    padding: 0px 0px 0px 0px;
    }
    #hook-left {
      width: 100%;
      align-items: flex-end;
      padding-right: 50vw;
      }
      #hook-left > p {
        max-width: 360px;
        text-align: right;
        }
    #hook-right {
      width: 100%;
      padding-left: 50vw;
      }
      #hook-right > p {
        max-width: 360px;
        }



  .design-section {
    flex-direction: row;
    min-height: 100vh;
    position: sticky;
    -webkit-position: sticky;
    top: 0px;
    /* animation */
    transition: background-color var(--animDurationSwitch) var(--animBezierCustomEaseboth);
    will-change: background-color;
    }
    .design-section.multitheme-active {
      background: url("./assets/background-multi-image-desktop.webp");
      background-color: var(--colorMultiSkin);
      background-size: cover;
      background-attachment: fixed;
      background-position: center;
      }
    .design-section.caritheme-active {
      background-color: var(--colorCariSkin);
      }
    .design-section.lighttheme-active {
      background-color: var(--colorLightSkin);
      }
    .design-section.darktheme-active {
      background-color: var(--colorDarkSkin);
      }
    .design-section-artwork {
      min-height: 100vh;
      width: calc(50vw - var(--spacingLarge));
      margin-right: var(--spacingLarge);
      }
      #lottie1 {
        width: 27.77vw; /* 400px @1440 */
        }
      #lottie2 {
        width: 29.45vw; /* 424px @1440 */
        }
      #lottie3 {
        width: 29.45vw; /* 424px @1440 */
        }
      #lottie4 {
        width: 27.77vw; /* 400px @1440 */
        }
      #lottie5 {
        width: 29.45vw; /* 424px @1440 */
        }
    .design-section-text {
      justify-content: flex-start;
      width: 50vw;
      min-height: 100vh;
      padding: var(--spacingLarge) 0px 0px 0px;
      }
      .design-section.multitheme-active > .design-section-text,
      .design-section.caritheme-active > .design-section-text,
      .design-section.lighttheme-active > .design-section-text,
      .design-section.darktheme-active > .design-section-text {
        background: unset;
        }
        .design-section-text > p {
          max-width: 360px;
          }




  #about-history {
    flex-direction: row;
    padding: 0px;
    }
    #about-history-headline {
      display: block;
      position: sticky;
      -webkit-position: sticky;
      top: 0px;
      width: calc(50vw - var(--spacingLarge));
      margin-right: var(--spacingLarge);
      text-align: right;
      padding: var(--spacingMedium) 0px var(--spacingLarge) 0px;
      }
    #about-history-content {
      width: 50vw;
      padding: var(--spacingLarge) 0px var(--spacingSmall) 0px;
      }
      #about-history-content > div {
        max-width: 360px;
        }
  #footer-leftcorner {
    width: 18px;
    }
  #footer-rightcorner {
    width: 18px;
    }



  #footer {
    padding: var(--spacingLarge) 0px var(--spacingMedium) 0px;
    }
    #footer-text {
      margin-left: 50vw;
      max-width: 360px;
      }



/* CLOSE DESKTOP */
}












@media (hover: none) {
  @supports (-webkit-backdrop-filter: blur(0px)) {
/* WEBKIT IOS */



/* :root { */
  /* --blurBackup: blur(10.67vw); */ /* 40px @375 */
  /* } */



/*.design-section.multitheme-active > .design-section-text {
  background: unset;
  background-color: var(--colorPermaBlur);
  -webkit-backdrop-filter: var(--blurBackup);
  } */



  #hero > div {
    background-attachment: unset !important;
    }



  .design-section > .design-section-artwork {
    background-attachment: unset;
    }
  .design-section-text {
    transform: translate3d(0, 0, 0); /* Fix for z-index 1 */
    }



@media (min-width: 760px) {



/* :root { */
  /* --blurBackup: blur(5.56vw); */ /* 80px @1440 */
  /* } */


/* .design-section.multitheme-active {
    background-attachment: unset;
    border-radius: 12px;
    background-color: unset;
    overflow: hidden;
    }
    .design-section.multitheme-active > .design-section-text {
      background-color: unset;
      -webkit-backdrop-filter: unset;
      } */



  .design-section {
    background-size: unset;
    background-attachment: unset !important;
    background-position: unset;
    }



  }



/* CLOSE WEBKIT IOS */
    }
  }