/* The Forest Walk ("Fernlight"): forest-green shade, cream type, sunlight for whatever is active.
   Fonts are self-hosted from Assets/fonts (SIL Open Font License, see the OFL-*.txt files there). */

@font-face {
  font-family: "Fraunces";
  src: url("Assets/fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Figtree";
  src: url("Assets/fonts/figtree-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --forest: #21402f;
  --forest-rgb: 33 64 47;
  --pine: #15291e;
  --pine-rgb: 21 41 30;
  --pine-deep: #0e1d14;
  --moss: #2f5440;
  --cream: #ede6cf;
  --cream-rgb: 237 230 207;
  --sun: #e7c47f;
  --sun-rgb: 231 196 127;
  --lichen: #aec0a8;
  --ember: #e3a58a;
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-ui: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--pine-deep);
  font-family: var(--font-ui);
  color: var(--cream);
  cursor: default;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: rgb(var(--sun-rgb) / 0.35); color: var(--cream); }

#viewport {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
}

/* ---------- start screen ----------
   While the forest loads, a deep green backdrop; once the scene renders behind it
   (#loading.scene) the backdrop fades and the forest shows through a soft green shade. */

#loading {
  --wordmark-size: clamp(2.75rem, 6.4vw, 5.75rem);
  --indent: calc(var(--wordmark-size) * 1.15);
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  padding: 0 clamp(24px, 8vw, 128px);
  padding-left: max(clamp(24px, 8vw, 128px), env(safe-area-inset-left));
  overflow: hidden;
  transition: opacity 1.1s ease, visibility 1.1s ease;
}

#loading.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-backdrop,
.loading-shade,
.loading-motes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.loading-backdrop {
  background: radial-gradient(120% 95% at 22% 45%, var(--forest) 0%, var(--pine) 52%, var(--pine-deep) 100%);
  transition: opacity 1.8s ease;
}

#loading.scene .loading-backdrop { opacity: 0; }

.loading-shade {
  background:
    radial-gradient(48% 42% at 30% 46%, rgb(var(--sun-rgb) / 0.1), transparent 70%),
    linear-gradient(180deg, transparent 68%, rgb(var(--pine-rgb) / 0.6) 100%),
    linear-gradient(90deg, rgb(var(--pine-rgb) / 0.86) 0%, rgb(27 53 38 / 0.68) 36%, rgb(var(--forest-rgb) / 0) 72%);
}

/* a few motes of light drifting near the title, like the spores in the scene */
.loading-motes span {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--sun-rgb) / 0.95) 0 18%, rgb(var(--sun-rgb) / 0.35) 34%, transparent 70%);
  animation: mote-drift 16s ease-in-out infinite alternate;
}
.loading-motes span:nth-child(1) { left: 52%; top: 24%; }
.loading-motes span:nth-child(2) { left: 63%; top: 36%; width: 14px; height: 14px; animation-duration: 19s; animation-delay: -6s; }
.loading-motes span:nth-child(3) { left: 17%; top: 72%; width: 22px; height: 22px; animation-duration: 23s; animation-delay: -11s; }
.loading-motes span:nth-child(4) { left: 70%; top: 53%; width: 12px; height: 12px; animation-duration: 17s; animation-delay: -3s; }
.loading-motes span:nth-child(5) { left: 43%; top: 15%; width: 16px; height: 16px; animation-duration: 21s; animation-delay: -14s; }
.loading-motes span:nth-child(6) { left: 12%; top: 24%; width: 10px; height: 10px; animation-duration: 25s; animation-delay: -8s; }

@keyframes mote-drift {
  from { transform: translate3d(0, 0, 0); opacity: 0.35; }
  to { transform: translate3d(16px, -26px, 0); opacity: 0.9; }
}

.loading-inner {
  position: relative;
  max-width: 980px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.11em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--wordmark-size);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--cream);
  text-wrap: balance;
}

.wordmark .fern {
  flex: none;
  width: 1.04em;
  height: 1.04em;
}

.tagline {
  margin-top: 1rem;
  padding-left: var(--indent);
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  line-height: 1.5;
  color: var(--lichen);
}

.status {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(2rem, 5.5vh, 3rem);
  padding-left: calc(var(--indent) - 7px);
}

.progress { display: flex; gap: 2px; }

.progress .mote {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
}

.progress .mote::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--cream-rgb) / 0.38);
  transition: width 0.5s var(--ease-out), height 0.5s var(--ease-out), background 0.5s ease, box-shadow 0.5s ease;
}

.progress .mote.lit::before {
  width: 8px;
  height: 8px;
  background: var(--sun);
  box-shadow: 0 0 10px 3px rgb(var(--sun-rgb) / 0.45);
}

#loading-text {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--lichen);
}

#loading.error .progress .mote::before {
  background: rgb(227 165 138 / 0.5);
  box-shadow: none;
}

#loading.error #loading-text { color: var(--ember); }

.start-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: clamp(1.75rem, 4.5vh, 2.25rem);
  padding-left: var(--indent);
}

#start-btn {
  height: 54px;
  padding: 0 32px;
  border: 0;
  border-radius: 999px;
  background: rgb(var(--cream-rgb) / 0.92);
  color: var(--forest);
  font: 500 1rem/1 var(--font-ui);
  cursor: pointer;
  box-shadow: 0 0 44px 8px rgb(var(--sun-rgb) / 0.2), 0 10px 30px rgb(8 16 11 / 0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease, background 0.2s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

#start-btn.ready { opacity: 1; visibility: visible; }

#start-btn:hover {
  background: var(--cream);
  box-shadow: 0 0 56px 12px rgb(var(--sun-rgb) / 0.3), 0 10px 30px rgb(8 16 11 / 0.35);
}

#start-btn:active { transform: scale(0.98); }

#start-btn:focus-visible {
  outline: 2px solid rgb(var(--sun-rgb) / 0.9);
  outline-offset: 4px;
}

.start-hint {
  font-size: 0.9375rem;
  color: var(--lichen);
  transition: opacity 0.8s ease;
}

#start-btn:not(.ready) + .start-hint { opacity: 0; }

/* the touch stick waits until the walk starts; phones have no Enter key to mention */
#loading:not(.hidden) ~ #joy { visibility: hidden; }

@media (hover: none) {
  .start-hint { display: none; }
}

@media (max-width: 640px) {
  #loading { --indent: 0px; }
  .wordmark { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .wordmark .fern { width: 0.85em; height: 0.85em; margin-left: -0.12em; }
  .status { padding-left: 0; margin-left: -7px; }
}

@media (prefers-reduced-motion: reduce) {
  .loading-motes span { animation: none; }
  .loading-backdrop, .progress .mote::before { transition: none; }
}

/* ---------- HUD ---------- */

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.6s ease;
}

#hud.visible { opacity: 1; }

#vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 18vw 2vw rgba(0, 0, 0, 0.65);
  mix-blend-mode: multiply;
}

/* ---------- unsupported ---------- */

#unsupported {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: radial-gradient(120% 95% at 50% 40%, var(--forest) 0%, var(--pine) 55%, var(--pine-deep) 100%);
  text-align: center;
}

#unsupported .fern {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
}

#unsupported h1 {
  margin-bottom: 0.75rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

#unsupported p {
  max-width: 34rem;
  margin: 0 auto;
  line-height: 1.6;
  color: var(--lichen);
}

#unsupported.hidden { display: none; }