/* valhallowed.com: the name over a blurred world disc. The disc abstracts a
   Valheim world: ocean at the rim, the Deep North across the top, the Ashlands
   along the south, meadows around the centre, and one portal glowing off to
   the southeast. Every colour comes from design/tokens.css. */

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

html { height: 100%; }
body {
  min-height: 100%;
  margin: 0;
  display: grid;
  align-items: center;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
}

/* fine grain over everything */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: url("grain.svg");
  opacity: .08;
  mix-blend-mode: overlay;
}

/* the world */
.world {
  --d: min(118vmin, 1180px);
  --x: 70%;
  --y: 50%;
  --px: calc(var(--d) * .16);
  --py: calc(var(--d) * .2);
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.world::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--bg) 0%, color-mix(in oklab, var(--bg) 72%, transparent) 34%, transparent 66%);
}
.land, .ring, .portal {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  border-radius: 50%;
}
.land {
  width: var(--d);
  aspect-ratio: 1;
  background: radial-gradient(closest-side,
    color-mix(in oklab, var(--focus) 34%, var(--bg)) 0%,
    color-mix(in oklab, var(--focus) 20%, var(--bg)) 80%,
    transparent 100%);
  filter: blur(34px) saturate(125%);
  animation: sway 46s ease-in-out infinite alternate;
}
.land i {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c) 0%, transparent 100%);
  opacity: .62;
}
.land .north   { --c: light-dark(var(--panel), var(--ink)); width: 72%; height: 24%; left: 14%; top: 4%; opacity: .5; }
.land .forest  { --c: color-mix(in oklab, var(--z-runtime) 50%, var(--bg)); width: 44%; height: 40%; left: 9%; top: 28%; }
.land .meadows { --c: var(--z-runtime); width: 30%; height: 28%; left: 37%; top: 37%; }
.land .plains  { --c: var(--hearth); width: 34%; height: 30%; left: 56%; top: 46%; opacity: .5; }
.land .swamp   { --c: color-mix(in oklab, var(--z-data) 40%, var(--z-runtime)); width: 26%; height: 22%; left: 20%; top: 60%; opacity: .45; }
.land .south   { --c: var(--z-data); width: 66%; height: 20%; left: 17%; top: 81%; }

.ring {
  width: var(--d);
  aspect-ratio: 1;
  border: 1px solid color-mix(in oklab, var(--ink) 16%, transparent);
}
.ring.inner {
  width: calc(var(--d) * .62);
  border-style: dashed;
  border-color: color-mix(in oklab, var(--ink) 10%, transparent);
}
.portal {
  left: calc(var(--x) + var(--px));
  top: calc(var(--y) + var(--py));
  width: 7px;
  aspect-ratio: 1;
  background: var(--ink);
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--focus) 22%, transparent), 0 0 32px 8px color-mix(in oklab, var(--focus) 45%, transparent);
  animation: glow 5s ease-in-out infinite;
}

@keyframes sway { from { rotate: -7deg; } to { rotate: 7deg; } }
@keyframes glow { 50% { box-shadow: 0 0 0 9px color-mix(in oklab, var(--focus) 8%, transparent), 0 0 44px 12px color-mix(in oklab, var(--focus) 28%, transparent); } }

/* the name */
.hero {
  position: relative;
  z-index: 1;
  width: min(100%, 1120px);
  margin: 0 auto;
  padding-block: 72px;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
  display: grid;
  gap: 20px;
  justify-items: start;
}
h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(54px, 13vw, 136px);
  line-height: .88;
  letter-spacing: .01em;
  color: var(--hearth-ink);
  text-shadow: 0 0 56px color-mix(in oklab, var(--hearth) 24%, transparent);
}
.blurb {
  margin: 0;
  max-width: 42ch;
  font-size: clamp(18px, 2.1vw, 21px);
  line-height: 1.4;
  color: var(--ink-muted);
}
h1 + .blurb { margin-top: 6px; }

/* elsewhere */
.links {
  margin-top: 22px;
  display: grid;
  gap: 30px;
}
.links .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--ink) 16%, transparent);
  background: color-mix(in oklab, var(--panel) 55%, transparent);
  backdrop-filter: blur(10px);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .2s, border-color .2s;
}
.chip svg { width: 18px; height: 18px; flex: none; }
.chip:hover { color: var(--hearth-ink); border-color: color-mix(in oklab, var(--hearth) 55%, transparent); }
.chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* phones: the world sits behind the name instead of beside it */
@media (max-width: 640px) {
  .world { --d: 150vmin; --x: 82%; --y: 42%; --px: calc(var(--d) * -.06); --py: calc(var(--d) * -.22); }
  .world::after { background: linear-gradient(180deg, transparent 0%, color-mix(in oklab, var(--bg) 55%, transparent) 55%, var(--bg) 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .land, .portal { animation: none; }
  .chip { transition: none; }
}