:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 15% 18%, rgb(101 50 168 / .38), transparent 34%),
    radial-gradient(circle at 82% 72%, rgb(88 35 154 / .32), transparent 36%),
    linear-gradient(145deg, #07040d, #150721 52%, #05030a);
  color: #f5efff;
  isolation: isolate;
}
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: min(70rem, 130vw);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(72px);
}
body::before {
  top: -54%;
  left: -20%;
  background: radial-gradient(circle, rgb(137 73 221 / .34), transparent 66%);
  animation: drift-left 28s ease-in-out infinite alternate;
}
body::after {
  right: -30%;
  bottom: -58%;
  background: radial-gradient(circle, rgb(87 43 168 / .38), transparent 65%);
  animation: drift-right 34s ease-in-out infinite alternate;
}
main { min-height: 100dvh; display: grid; place-items: center; padding: 1rem; }
.wordmark {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin: 0;
  white-space: nowrap;
  font-size: clamp(3.35rem, 14.5vw, 12.5rem);
  line-height: .82;
}
.wordmark[data-transition="split"] {
  --brave-out: translate3d(-.08em, .12em, 0) rotate(-2deg) scale(.96);
  --rain-out: translate3d(.08em, -.12em, 0) rotate(2deg) scale(.96);
  --brave-in: translate3d(.08em, -.12em, 0) rotate(2deg) scale(.96);
  --rain-in: translate3d(-.08em, .12em, 0) rotate(-2deg) scale(.96);
}
.wordmark[data-transition="lift"] {
  --brave-out: translate3d(0, -.16em, 0) scale(.97);
  --rain-out: translate3d(0, .16em, 0) scale(.97);
  --brave-in: translate3d(0, .16em, 0) scale(.97);
  --rain-in: translate3d(0, -.16em, 0) scale(.97);
}
.wordmark[data-transition="sweep"] {
  --brave-out: translate3d(.16em, 0, 0) skewX(-5deg) scaleX(.97);
  --rain-out: translate3d(.16em, 0, 0) skewX(-5deg) scaleX(.97);
  --brave-in: translate3d(-.16em, 0, 0) skewX(5deg) scaleX(.97);
  --rain-in: translate3d(-.16em, 0, 0) skewX(5deg) scaleX(.97);
}
.wordmark[data-transition="pinch"] {
  --brave-out: translate3d(.065em, 0, 0) scale(.92);
  --rain-out: translate3d(-.065em, 0, 0) scale(.92);
  --brave-in: translate3d(-.065em, 0, 0) scale(1.06);
  --rain-in: translate3d(.065em, 0, 0) scale(1.06);
}
.word { display: inline-block; transition: opacity 280ms ease, transform 680ms cubic-bezier(.16, 1, .3, 1); }
.wordmark.is-out .word--brave { opacity: 0; transform: var(--brave-out); }
.wordmark.is-out .word--rain { opacity: 0; transform: var(--rain-out); }
.wordmark.is-reset .word--brave { opacity: 0; transform: var(--brave-in); transition: none; }
.wordmark.is-reset .word--rain { opacity: 0; transform: var(--rain-in); transition: none; }
.word[data-design="0"] { font-family: Arial, system-ui, sans-serif; font-size: .9em; font-weight: 700; letter-spacing: -.08em; }
.word[data-design="1"] { color: transparent; font-family: Georgia, "Times New Roman", serif; -webkit-text-stroke: .018em rgb(237 222 255 / .92); font-weight: 700; letter-spacing: -.08em; }
.word[data-design="2"] { background: linear-gradient(115deg, #fff8ff, #c9a8ff 48%, #a585df); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: "Trebuchet MS", "Segoe UI", sans-serif; font-size: .94em; font-weight: 700; letter-spacing: -.075em; }
.word[data-design="3"] { font-family: "Arial Narrow", "Segoe UI", sans-serif; font-style: italic; font-weight: 400; letter-spacing: -.055em; }
.word[data-design="4"] { font-family: "Arial Narrow", "Segoe UI", sans-serif; font-size: .88em; font-weight: 600; letter-spacing: -.01em; }
.word[data-design="5"] { color: #eee4ff; font-family: "Trebuchet MS", "Segoe UI", sans-serif; font-weight: 600; letter-spacing: -.075em; text-shadow: 0 .04em .18em rgb(169 119 255 / .45); }
.word[data-design="6"] { font-family: "Cascadia Code", Consolas, "Courier New", monospace; font-weight: 500; letter-spacing: -.09em; }
.word[data-design="7"] { color: rgb(246 236 255 / .82); font-family: "Segoe UI Light", "Segoe UI", sans-serif; font-weight: 300; letter-spacing: -.035em; text-shadow: 0 0 .08em rgb(210 179 255 / .36); }
@keyframes drift-left {
  to { opacity: .78; transform: translate3d(20vw, 14vh, 0) scale(1.15); }
}
@keyframes drift-right {
  to { opacity: .82; transform: translate3d(-18vw, -13vh, 0) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
  .word { transition: none; }
}