/* softwerewolf.games - single-page landing. No web fonts. */

:root {
  --bg: #07090e;
  --bg-deep: #04050a;
  --text: #ece7dc;
  --text-muted: #8d93a3;
  --mark: #f2ece0;
  --accent: #e0b34d;
  --accent-hover: #f2ca6d;
  --moon: 224, 179, 77;

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: ui-serif, Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;

  --gutter: clamp(1.5rem, 6vw, 3rem);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg-deep);
  background:
    radial-gradient(ellipse 120% 80% at 50% 8%, #10151f 0%, var(--bg) 45%, var(--bg-deep) 100%);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ---------- stage ---------- */

.stage {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  isolation: isolate;
}

.content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 34rem;
}

/* Moonlight behind the mark. Sized off the viewport so it stays proportional
   without a resize listener. */
.glow {
  position: absolute;
  top: 38%;
  left: 50%;
  width: min(46rem, 115vw);
  aspect-ratio: 1;
  translate: -50% -50%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(var(--moon), 0.17) 0%,
      rgba(var(--moon), 0.08) 28%,
      rgba(var(--moon), 0.025) 48%,
      transparent 68%);
  will-change: transform, opacity;
}

/* ---------- mark ---------- */

.mark-wrap {
  perspective: 900px;
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.mark {
  width: clamp(9rem, 26vw, 15rem);
  height: auto;
  display: block;
  overflow: visible;
  transform-style: preserve-3d;
  will-change: transform;
  filter: drop-shadow(0 0 28px rgba(var(--moon), 0.22));
}

.mark path {
  fill: var(--mark);
  stroke: var(--mark);
  stroke-width: 1.15;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* ---------- wordmark ---------- */

.wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 6.5vw, 2.875rem);
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-indent: 0.06em; /* offset the trailing letter-space so it stays centred */
  white-space: nowrap;
}

.wordmark span {
  display: inline-block;
  will-change: transform, opacity;
}

.wordmark .space { width: 0.42em; }

/* ---------- copy ---------- */

.tagline {
  margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
  color: var(--text-muted);
  font-size: clamp(1rem, 2.2vw, 1.125rem);
  line-height: 1.65;
  max-width: 30rem;
  text-wrap: pretty;
  will-change: transform, opacity;
}

.contact {
  margin: clamp(1.75rem, 4vw, 2.25rem) 0 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  will-change: transform, opacity;
}

.contact a {
  color: var(--text-muted);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(var(--moon), 0.28);
  transition: color 160ms ease, border-color 160ms ease;
}

.contact a:hover {
  color: var(--accent-hover);
  border-bottom-color: var(--accent-hover);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---------- 404 ---------- */

.eyebrow {
  margin: 0 0 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.notfound-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* ---------- pre-animation state ----------
   The document carries .is-animating until main.js takes over, so the reveal
   never flashes its final frame first. If the script fails or never loads,
   this block simply never applies and the page renders complete and static. */

.is-animating .glow { opacity: 0; }
.is-animating .mark path { fill-opacity: 0; }
.is-animating .wordmark span,
.is-animating .tagline,
.is-animating .contact { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .is-animating .glow,
  .is-animating .mark path,
  .is-animating .wordmark span,
  .is-animating .tagline,
  .is-animating .contact {
    opacity: 1;
    fill-opacity: 1;
  }
  .mark path { stroke-opacity: 0; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}