:root {
  --rd-landing-nav-height: var(--rd-space-16);
  --rd-landing-display-min: calc(var(--rd-text-2xl) + var(--rd-space-2));
  --rd-landing-display-max: var(--rd-space-24);
}

html {
  min-width: 20rem;
  scroll-behavior: smooth;
}

body {
  min-width: 20rem;
  overflow-x: clip;
}
/* test */
.rd-nav {
  position: fixed;
  width: 100%;
  border-bottom-color: var(--rd-white-a06);
  background: var(--rd-black-a55);
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

.rd-nav__inner {
  min-height: var(--rd-landing-nav-height);
}

.teaser {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100svh;
  overflow: clip;
  background: var(--rd-color-canvas);
}

.teaser::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(circle at center, transparent 24%, rgb(0 0 0 / 0.14) 62%, var(--rd-color-canvas) 100%),
    linear-gradient(180deg, rgb(0 0 0 / 0.16) 0%, transparent 32%, rgb(0 0 0 / 0.12) 100%);
  pointer-events: none;
}

.teaser__gradient {
  position: absolute;
  z-index: 0;
  inset: -18vmax;
  overflow: hidden;
  opacity: 0.95;
  pointer-events: none;
  contain: paint;
}

.teaser__glow {
  position: absolute;
  width: 78vmax;
  max-width: 90rem;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(clamp(3rem, 7vw, 7rem));
  mix-blend-mode: screen;
  will-change: transform;
}

.teaser__glow--primary {
  top: 3%;
  left: 5%;
  background: radial-gradient(circle, rgb(254 119 1 / 0.34) 0%, rgb(254 119 1 / 0.14) 30%, transparent 66%);
  animation: rd-gradient-drift-primary 28s ease-in-out infinite;
}

.teaser__glow--secondary {
  right: -18%;
  bottom: -36%;
  background: radial-gradient(circle, rgb(255 173 51 / 0.25) 0%, rgb(254 119 1 / 0.12) 28%, transparent 64%);
  animation: rd-gradient-drift-secondary 36s ease-in-out infinite;
}

.teaser__glow--highlight {
  top: -42%;
  right: -7%;
  width: 62vmax;
  background: radial-gradient(circle, rgb(242 242 239 / 0.1) 0%, transparent 62%);
  animation: rd-gradient-drift-highlight 42s ease-in-out infinite;
}

.teaser__glow--ember {
  bottom: -45%;
  left: 18%;
  width: 58vmax;
  background: radial-gradient(circle, rgb(254 119 1 / 0.26) 0%, transparent 60%);
  animation: rd-gradient-drift-ember 32s ease-in-out infinite;
}

.teaser__cursor-glow {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: clamp(20rem, 42vw, 38rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 173 51 / 0.32) 0%, rgb(254 119 1 / 0.14) 30%, transparent 68%);
  filter: blur(clamp(2.5rem, 5vw, 5rem));
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate3d(50vw, 50svh, 0) translate(-50%, -50%);
  transition: opacity 500ms var(--rd-ease-standard);
  pointer-events: none;
  will-change: transform;
}

.teaser__cursor-glow.is-pointer-active {
  opacity: 0.82;
}

.teaser__content {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 100svh;
  align-items: center;
  justify-content: center;
  padding-block:
    calc(var(--rd-landing-nav-height) + var(--rd-space-12))
    var(--rd-space-12);
}

.teaser__title {
  max-width: 10ch;
  text-align: center;
  font-size: clamp(var(--rd-landing-display-min), 8vw, var(--rd-landing-display-max));
  animation: rd-teaser-title-in calc(var(--rd-duration-normal) * 3) var(--rd-ease-standard) both;
}

.teaser__dot {
  color: var(--rd-color-brand);
}

@keyframes rd-teaser-title-in {
  from {
    transform: translateY(var(--rd-space-4));
  }
}

@keyframes rd-gradient-drift-primary {
  0%,
  100% {
    transform: translate3d(-14%, -16%, 0) scale(0.96);
  }

  50% {
    transform: translate3d(8%, 10%, 0) scale(1.08);
  }
}

@keyframes rd-gradient-drift-secondary {
  0%,
  100% {
    transform: translate3d(8%, 12%, 0) scale(1);
  }

  50% {
    transform: translate3d(-14%, -8%, 0) scale(1.12);
  }
}

@keyframes rd-gradient-drift-highlight {
  0%,
  100% {
    transform: translate3d(10%, -8%, 0) scale(0.92);
  }

  50% {
    transform: translate3d(-18%, 16%, 0) scale(1.08);
  }
}

@keyframes rd-gradient-drift-ember {
  0%,
  100% {
    transform: translate3d(-8%, 12%, 0) scale(0.94);
  }

  50% {
    transform: translate3d(18%, -12%, 0) scale(1.06);
  }
}

@media (max-width: 45rem) {
  .teaser__gradient {
    inset: -10vmax;
    opacity: 0.82;
  }

  .teaser__glow {
    width: 105vmax;
  }

  .teaser__glow--highlight,
  .teaser__glow--ember {
    width: 82vmax;
  }

  .teaser__cursor-glow {
    display: none;
  }

  .teaser__content {
    align-items: center;
    padding-block: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .teaser__title {
    animation: none;
  }

  .teaser__glow {
    animation: none;
    will-change: auto;
  }

  .teaser__cursor-glow {
    display: none;
  }

  .teaser__glow--primary {
    transform: translate3d(-4%, -8%, 0);
  }

  .teaser__glow--secondary {
    transform: translate3d(-8%, -4%, 0);
  }

  .teaser__glow--highlight {
    transform: translate3d(-6%, 8%, 0);
  }

  .teaser__glow--ember {
    transform: translate3d(8%, -6%, 0);
  }
}