/* The Feywild ground and its motes, as WHoA's front screens draw them (its Veil and VeilField), and the
   wordmark centred on it. Fralbard's and Fralkeep's pages both serve this one file. */
:root {
  --ground: #0a0a0a;
  --fey: 176 112 208;
  --fey-tint: 28 21 48;
  --grove: 111 191 143;
  --ink: #fafafa;
  --ink-muted: #a1a1a1;
  --very-rare: #bf82fb;
  --mythic: #ffc000;
  --gutter: 16px;
  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--ground);
}

body {
  margin: 0;
  color: var(--ink);
  font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* The ground: a violet wash centred a little above the middle, reaching 70% of the way to the farthest corner,
   over a haze across the top, over the near-black. */
.field {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle farthest-corner at 50% 45%, rgb(var(--fey) / 0.14), rgb(var(--fey) / 0) 70%),
    radial-gradient(57.6% 39.6% at 50% 8%, rgb(var(--fey-tint)), rgb(var(--fey-tint) / 0)),
    var(--ground);
}

/* A mote is a soft orb whose plane is half again its light, added to what is under it. A third are the grove's
   green. Each wanders one of four paths across a life of 18 to 34 seconds, fading in, pulsing to its peak and
   out again before the path restarts. */
.mote {
  --rgb: var(--fey);
  --size: 10px;
  --path: wander-a;
  --life: 26s;
  --start: 0s;
  position: absolute;
  width: calc(var(--size) * 1.5);
  height: calc(var(--size) * 1.5);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--rgb)), rgb(var(--rgb) / 0.55) 45%, rgb(var(--rgb) / 0) 72%);
  mix-blend-mode: plus-lighter;
  opacity: 0;
  animation: var(--path) var(--life) cubic-bezier(0.65, 0, 0.35, 1) var(--start) infinite;
}

.mote:nth-child(3n) {
  --rgb: var(--grove);
}

/* A phone shows six, a tablet ten, a wide screen sixteen: about the game's density of lights. */
.mote:nth-child(n + 7) {
  display: none;
}

@media (min-width: 640px) {
  .mote:nth-child(n + 7) {
    display: block;
  }

  .mote:nth-child(n + 11) {
    display: none;
  }
}

@media (min-width: 1024px) {
  .mote:nth-child(n + 11) {
    display: block;
  }
}

.mote:nth-child(1) { left: 12%; top: 22%; --size: 11px; --life: 27s; --start: -4s; }
.mote:nth-child(2) { left: 78%; top: 16%; --size: 8px; --path: wander-b; --life: 21s; --start: -15s; }
.mote:nth-child(3) { left: 30%; top: 70%; --size: 13px; --path: wander-c; --life: 31s; --start: -9s; }
.mote:nth-child(4) { left: 84%; top: 62%; --size: 9px; --path: wander-d; --life: 24s; --start: -18s; }
.mote:nth-child(5) { left: 52%; top: 84%; --size: 12px; --path: wander-b; --life: 33s; --start: -27s; }
.mote:nth-child(6) { left: 46%; top: 12%; --size: 7px; --path: wander-c; --life: 19s; --start: -2s; }
.mote:nth-child(7) { left: 8%; top: 52%; --size: 10px; --path: wander-d; --life: 29s; --start: -21s; }
.mote:nth-child(8) { left: 66%; top: 38%; --size: 14px; --life: 34s; --start: -12s; }
.mote:nth-child(9) { left: 92%; top: 86%; --size: 8px; --path: wander-c; --life: 22s; --start: -7s; }
.mote:nth-child(10) { left: 22%; top: 40%; --size: 9px; --path: wander-b; --life: 26s; --start: -24s; }
.mote:nth-child(11) { left: 38%; top: 28%; --size: 12px; --path: wander-d; --life: 30s; --start: -5s; }
.mote:nth-child(12) { left: 72%; top: 76%; --size: 10px; --life: 20s; --start: -16s; }
.mote:nth-child(13) { left: 58%; top: 58%; --size: 7px; --path: wander-b; --life: 28s; --start: -11s; }
.mote:nth-child(14) { left: 16%; top: 84%; --size: 13px; --path: wander-c; --life: 25s; --start: -19s; }
.mote:nth-child(15) { left: 90%; top: 34%; --size: 11px; --path: wander-d; --life: 32s; --start: -29s; }
.mote:nth-child(16) { left: 4%; top: 10%; --size: 9px; --life: 23s; --start: -13s; }

/* Each path's waypoints lie within 80px of where it starts, every leg eased in and out; the light is out at
   both ends, so the jump back to the start is never seen. */
@keyframes wander-a {
  0% { transform: translate(0, 0); opacity: 0; }
  5% { opacity: 0.38; }
  25% { transform: translate(46px, -58px); opacity: 0.66; }
  50% { transform: translate(-22px, -74px); opacity: 0.85; }
  75% { transform: translate(-70px, -12px); opacity: 0.66; }
  95% { opacity: 0.38; }
  100% { transform: translate(-30px, 40px); opacity: 0; }
}

@keyframes wander-b {
  0% { transform: translate(0, 0); opacity: 0; }
  5% { opacity: 0.32; }
  20% { transform: translate(-54px, 30px); opacity: 0.58; }
  45% { transform: translate(-12px, 72px); opacity: 0.84; }
  70% { transform: translate(60px, 44px); opacity: 0.7; }
  95% { opacity: 0.32; }
  100% { transform: translate(76px, -20px); opacity: 0; }
}

@keyframes wander-c {
  0% { transform: translate(0, 0); opacity: 0; }
  5% { opacity: 0.42; }
  30% { transform: translate(64px, 26px); opacity: 0.72; }
  55% { transform: translate(18px, -52px); opacity: 0.85; }
  80% { transform: translate(-48px, -66px); opacity: 0.62; }
  95% { opacity: 0.42; }
  100% { transform: translate(-78px, -8px); opacity: 0; }
}

@keyframes wander-d {
  0% { transform: translate(0, 0); opacity: 0; }
  5% { opacity: 0.35; }
  25% { transform: translate(-40px, -50px); opacity: 0.64; }
  50% { transform: translate(34px, -80px); opacity: 0.85; }
  75% { transform: translate(72px, 6px); opacity: 0.64; }
  95% { opacity: 0.35; }
  100% { transform: translate(20px, 62px); opacity: 0; }
}

/* Reduced motion stills every light where it starts, at its pulse's middle. */
@media (prefers-reduced-motion: reduce) {
  .mote {
    animation: none;
    opacity: 0.6;
  }
}

main {
  display: grid;
  place-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 48px var(--gutter) calc(48px + 6vh);
  text-align: center;
}

/* One word at one size and weight: "fral" in Very Rare purple, the product's own part in Mythic gold. */
.wordmark {
  margin: 0;
  font-size: clamp(56px, 18vw, 128px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.wordmark .fral {
  color: var(--very-rare);
  text-shadow: 0 0 48px rgb(191 130 251 / 0.45);
}

.wordmark .product {
  color: var(--mythic);
  text-shadow: 0 0 48px rgb(255 192 0 / 0.3);
}

.line {
  margin: 20px 0 0;
  font-size: clamp(18px, 2.4vw, 24px);
  color: var(--ink-muted);
}