/* One screen in the game's menu look (concepts/final/ui-mockup): the biome maps of the main menu
   crossfading under a dark shade, the ash biome's embers in violet, the logo, and ivory ink ornaments
   whose jewels alone glow violet. Everything moves on transform and opacity only, and stops for
   prefers-reduced-motion. */

@font-face {
  font-family: "Eagle Lake";
  src: url("assets/fonts/EagleLake-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Alegreya";
  src: url("assets/fonts/Alegreya-Variable.ttf") format("truetype");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --bg: #08060c;
  --ivory: #ece4d2;
  --ivory-dim: rgba(236, 228, 210, 0.66);
  --ivory-bright: #fffaf0;
  --violet: #b98bff;
  --violet-glow: rgba(169, 112, 255, 0.55);
  --f-caps: "Eagle Lake", Georgia, serif;
  --f-serif: "Alegreya", Georgia, serif;
  /* Set by main.js from the pointer, -1 to 1. */
  --px: 0;
  --py: 0;
}

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--ivory);
  font-family: var(--f-serif);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
}

/* Two layers: main.js loads the next biome into the hidden one and fades it in on the embers' beat, and
   the whole world leans a little away from the pointer. No slow zoom: it redrew the whole screen on
   every refresh, and the Chrome tab kept a fifth of a core busy. */
.world {
  position: absolute;
  inset: -3%;
  z-index: -3;
  transform: translate3d(calc(var(--px) * -12px), calc(var(--py) * -8px), 0);
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.map {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  opacity: 0;
}

/* The maps are bright in places (ice, coast): darker toward the middle where the text sits, and toward
   the edges as a vignette. */
.shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 44% 56% at 50% 50%, rgba(8, 6, 12, 0.7), rgba(8, 6, 12, 0.45) 60%, transparent 100%),
    radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(8, 6, 12, 0.8) 100%);
}

/* Embers are spans made and animated by main.js, one animation each on transform and opacity only, which
   the GPU runs: a canvas redrawn every frame kept a whole core busy. */
.embers {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.ember {
  position: absolute;
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2);
  opacity: 0;
  background: var(--c);
  box-shadow: 0 0 6px 1px var(--c), 0 0 calc(var(--s) * 3) var(--s) rgba(169, 112, 255, 0.14);
}

.stage {
  /* Capped by height too, so the button stays on screen on short laptop screens. */
  width: min(92vw, 720px, 120vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4vh 0 7vh;
  position: relative;
  isolation: isolate;
}

/* A soft dark cloud behind the text, as behind the game's HUD, so it reads on the brightest maps. */
.stage::before {
  content: "";
  position: absolute;
  inset: 34% -14% 0;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(8, 6, 12, 0.8), rgba(8, 6, 12, 0.6) 55%, rgba(8, 6, 12, 0.22) 82%, transparent);
  animation: appear 1.4s ease-out 1.2s both;
}

/* The arrival ends on filter: none and holds nothing (fill-mode backwards): a filter left on the logo
   would be redrawn with anything that moves near it. */
.logo {
  width: 100%;
  line-height: 0;
  animation: arrive 2.2s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

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

@keyframes arrive {
  from { opacity: 0; transform: scale(0.94); filter: blur(12px) brightness(1.8); }
  to   { opacity: 1; transform: scale(1);    filter: none; }
}

/* The ornaments' jewels: the only violet in the ink, glowing. */
.jewel {
  color: var(--violet);
  filter: drop-shadow(0 0 3px rgba(169, 112, 255, 0.95)) drop-shadow(0 0 8px var(--violet-glow));
}

.divider {
  display: block;
  width: min(70%, 360px);
  height: 18px;
  margin-top: 1.4rem;
  color: var(--ivory);
  overflow: visible;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6));
  animation: appear 1.4s ease-out 1.2s both;
}

.tagline {
  margin-top: 1rem;
  font-family: var(--f-caps);
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ivory-bright);
  text-shadow: 0 0 14px var(--violet-glow), 0 2px 0 rgba(0, 0, 0, 0.6);
  animation: appear 1.4s ease-out 1.4s both;
}

.pitch {
  max-width: 34rem;
  margin-top: 0.9rem;
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.55;
  color: rgba(236, 228, 210, 0.8);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  animation: appear 1.4s ease-out 1.8s both;
}

@keyframes appear {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* The menu's chosen item: text only, the pointer on each side, violet light on hover. */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 2.2rem;
  padding: 0.6rem 0.4rem;
  font-family: var(--f-caps);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ivory);
  background: none;
  border: 0;
  cursor: pointer;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
  transition: color 0.35s ease, text-shadow 0.35s ease;
  animation: appear 1.4s ease-out 2.2s both;
}

.cta .pointer {
  width: 58px;
  height: 26px;
  color: var(--ivory);
  overflow: visible;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6));
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cta .pointer.flip { transform: scaleX(-1); }

.cta:hover,
.cta:focus-visible {
  color: var(--ivory-bright);
  text-shadow: 0 0 14px var(--violet-glow), 0 2px 0 rgba(0, 0, 0, 0.6);
  outline: none;
}

.cta:hover .pointer,
.cta:focus-visible .pointer { transform: translateX(-6px); }

.cta:hover .pointer.flip,
.cta:focus-visible .pointer.flip { transform: scaleX(-1) translateX(-6px); }

@media (max-width: 600px) {
  .stage { width: 100vw; padding: 0 1.2rem 6vh; }
  .cta { gap: 6px; font-size: 1rem; white-space: nowrap; }
  .cta .pointer { width: 34px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .embers { display: none; }
  .world { transform: none; }
}