*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  scroll-behavior: smooth;
}

body {
  background-color: var(--background-color-dark) !important;
}

.md-header {
  z-index: 200;

  /* this sh*t is necessary, because the header shadow class is removed again in the hero section by javascript due to code that cannot be changed */
  background-color: var(--md-primary-fg-color) !important;
  box-shadow: 0 0 0.2rem #0000001a, 0 0.2rem 0.4rem #0003;
  transition: background-color 0.25s,
    transform 0.25s cubic-bezier(0.1, 0.7, 0.1, 1), box-shadow 0.25s;
}

.md-nav--primary .md-nav__item--active > .md-nav__link {
  color: var(--md-typeset-a-color);
}

.content-grid .md-footer {
  grid-column: full-width;
  background-color: var(--md-footer-bg-color--dark);
}

.md-tabs {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.md-banner {
  background-color: var(--background-color-dark);
}

/* parallax inspired by https://www.youtube.com/watch?v=Qj0Qx8HpNUo */

.css-parallax {
  background: var(--background-color-dark);
  position: relative;
  z-index: 0;
  display: grid;
  grid-column: breakout;

  /* hide section when section is out of view to avoid visibility of slow parallax layers */
  animation: fade-out 1s linear both;
  animation-timeline: view();
  animation-range: exit 100% exit 100%;

  /* define timeline name for optional child attachment (i.e. logo blur) */
  view-timeline: --parallax-home-section;
}

.css-parallax > * {
  grid-row: 1 / 2;
  animation: parallax linear;
  /* automatic z-index for parallax layers */
  z-index: var(--parallax-speed);
  /* windo scroll with fixed pixel distance */
  animation-timeline: scroll();
  animation-range: 0 2000px;
  pointer-events: none;
}

.css-parallax > * > * {
  pointer-events: auto;
}

@media (prefers-reduced-motion: no-preference) {
  /* 
   * parameter --parallax-speed is used to calculate parallax distance
   * examples: 
   * 0: layer is fixed. doesn't move with scroll
   * 100: layer moves with scroll at normal speed
   * 50: layer moves with scroll at half speed
   * -100: layer moves in the opposite direction of scroll at normal speed 
   */
  @keyframes parallax {
    to {
      transform: translateY(calc((var(--parallax-speed) - 100) * (-20px)));
    }
  }
}

.layer {
  position: relative;
}

.layer.breakout {
  --max-height: 411px;
  max-height: var(--max-height);
}

.layer1 {
  /* slowest */
  background: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 80%,
      var(--background-color-dark) 100%
    ),
    url("/assets/images/background.webp") center center/cover no-repeat;
  top: -38px;

  --parallax-speed: 20;
}

.layer2 {
  /* slow */
  --parallax-speed: 30;
}

.products {
  width: clamp(230px, 50vw, 30%);
  position: absolute;
  top: 85%;
  right: clamp(
    var(--padding-inline),
    calc((100vw - var(--content-max-width)) / 2),
    calc(var(--breakout-size) + var(--padding-inline))
  );

  transform: translate(0%, -100%);
}

.layer3 {
  --parallax-speed: 25;
  z-index: 35;
}

.logo {
  width: 200px;
  position: absolute;
  top: 28%;
  left: clamp(
    var(--padding-inline),
    calc((100vw - var(--content-max-width)) / 2),
    calc(var(--breakout-size) + var(--padding-inline))
  );
  aspect-ratio: 287 / 196;
  color: white;
  animation: fade-out 1s linear both;
  animation-timeline: --parallax-home-section;
  animation-range: exit 30% exit 60%;
}

.logo img {
  width: 100%;
  height: auto;
}

.layer4 {
  /* static, should disappear when scrolling */
  z-index: 30;
  color: white;
  aspect-ratio: auto;
  height: 100vh;

  view-timeline-name: --parallax-text-section;
  view-timeline-axis: block; /* vertikal */
}

.layer4 .sticky {
  --max-height: calc(411px * 0.9);
  --mid-height: calc((min(1220px, 100vw) * 11 / 23) * 0.3 + 250px);
  top: max(var(--max-height), var(--mid-height));
  max-width: max(70%, calc((900px - var(--padding-inline) * 4) * 0.7));
  padding-bottom: 1rem;
  animation: fade-out 1s linear both;
  animation-timeline: --parallax-text-section;
  animation-range: entry 100% cover 60%;
}

div:has(> .next-button) {
  z-index: 4000;
  /* repeating bouncung animation */
  animation: bounce 5s infinite;
  animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1);
  transform-origin: bottom;
}

.next-button {
  display: block;
  top: 90vh;
  left: 50%;
  transform: rotate(180deg);
  font-weight: bold;
  font-size: 1.7rem;
  color: var(--md-typeset-a-color);
  cursor: pointer;
  padding: 0.5rem 1rem;
  text-align: center;

  animation: fade-out 1s linear both;
  animation-timeline: --parallax-home-section;
  animation-range: exit -30% exit 20%;
}

.next-button:hover {
  color: var(--md-typeset-a-color--hover);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes bounce {
    0% {
      animation-timing-function: ease-in;
      transform: translateY(0);
    }
    0% {
      animation-timing-function: ease-in;
      transform: translateY(0) scale(1.1, 0.9);
    }
    4% {
      animation-timing-function: ease-in;
      transform: translateY(-24px) scale(0.9, 1.1);
    }
    10% {
      animation-timing-function: ease-out;
      transform: translateY(0) scale(1.05, 0.95);
    }
    16% {
      animation-timing-function: ease-in;
      transform: translateY(-12px) scale(1, 1);
    }
    22% {
      animation-timing-function: ease-out;
      transform: translateY(0);
    }
    26% {
      animation-timing-function: ease-in;
      transform: translateY(-6px);
    }
    30% {
      animation-timing-function: ease-out;
      transform: translateY(0);
    }
    32.8% {
      animation-timing-function: ease-in;
      transform: translateY(-3px);
    }
    34.8% {
      animation-timing-function: ease-out;
      transform: translateY(0);
    }
    37.2% {
      animation-timing-function: ease-in;
      transform: translateY(-2px);
    }
    40% {
      animation-timing-function: ease-out;
      transform: translateY(0);
    }
    100% {
      transform: translateY(0);
    }
  }
}

@media (min-width: 900px) {
  .layer4 .sticky {
    max-width: 70%;
  }
}

.sticky {
  position: sticky;
}

@media (min-width: 900px) {
  .layer.breakout {
    aspect-ratio: 23 / 11;
    --max-height: none;
  }
}

.md-sidebar {
  z-index: 400;
}

.layer4 .md-button {
  margin-top: 1rem;
}

form.md-header__option[data-md-component="palette"] {
  pointer-events: none;
  display: none;
}

/* section styles */

.expect {
  /* put in front of slow parallax layers */
  z-index: 100;
  padding-block: 3rem;
  background-color: var(--background-color-dark);
}

/* appear-list */

.home-content .appear-list {
  display: flex !important;
  flex-flow: row wrap;
  gap: 1.6rem;
  padding-inline: var(--padding-inline);
  margin: 0 !important;
}

.home-content .appear-list__item {
  display: flex;
  flex: 1 0 48%;
  flex: 1 0 calc(50% - (1.6rem / 2));
  min-width: 300px;
  gap: 0.6rem;
  margin: 0 !important;
  transition: transform 0.75s cubic-bezier(0.075, 0.85, 0.175, 1), opacity 0.75s;
}

/* spotlight-feature */

.spotlight-feature {
  display: flex;
  flex: 1 0 48%;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0 0 3.2rem;
}

.spotlight-feature > a {
  transition: transform 0.5s cubic-bezier(0.075, 0.85, 0.175, 1);
}

.spotlight-feature > a:hover {
  transform: scale(1.025);
}

.spotlight-feature > a > img {
  width: 100%;
  object-fit: contain;
  object-position: top;
  height: auto;
  border-radius: 0.2rem;
  box-shadow: var(--md-shadow-z2);
}

@media screen and (min-width: 700px) {
  .spotlight-feature {
    flex-wrap: nowrap;
    gap: 3.2rem;
  }

  .spotlight-feature > figcaption {
    flex: 1 1 40%;
  }

  .spotlight-feature > a {
    flex: 1 1 60%;
  }

  .spotlight-feature:nth-of-type(even) {
    flex-direction: row;
    grid-column-start: breakout;
    grid-column-end: content;
  }

  .spotlight-feature:nth-of-type(even) figcaption {
  }

  .spotlight-feature:nth-of-type(odd) {
    flex-direction: row-reverse;
    grid-column-start: content;
    grid-column-end: breakout;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes parallax {
    to {
      transform: translateY(calc((var(--parallax-speed) - 100) * (-20px)));
    }
  }

  @keyframes fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  .fade-in {
    animation: fade-in linear;
    animation-timeline: view();
    animation-range: entry 0% cover 20%;
  }

  .spotlight-feature:nth-of-type(even) > a,
  .spotlight-feature:nth-of-type(odd) > figcaption,
  .appear-list__item:nth-child(2n-1),
  .appear-from-left {
    animation: appear-from-left ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }

  .spotlight-feature:nth-of-type(odd) > a,
  .spotlight-feature:nth-of-type(even) > figcaption,
  .appear-list__item:nth-child(2n),
  .appear-from-right {
    animation: appear-from-right ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }

  @keyframes fade-in {
    from {
      opacity: 0;
    }
    10% {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes appear-from-left {
    from {
      opacity: 0;
      transform: translateX(-30px);
      scale: 0.95;
    }
    to {
      opacity: 1;
      transform: translateX(0);
      scale: 1;
    }
  }

  @keyframes appear-from-right {
    from {
      opacity: 0;
      transform: translateX(30px);
      scale: 0.95;
    }
    to {
      opacity: 1;
      transform: translateX(0);
      scale: 1;
    }
  }
}