:root {
  --light-color: 245, 214, 164;
  --light-intensity: 0.16;
  --shadow-color: 63, 76, 86;
  --shadow-intensity: 0.08;
  --distant-atmosphere: #8d987f;

  --sky-sunset-top: #5f73a8;
  --sky-sunset-middle: #d7a0a3;
  --sky-sunset-horizon: #f0bd8f;
  --sky-sunset-lower-horizon: #f5d6a4;
  --sky-blue-hour-top: #263b69;
  --sky-blue-hour-middle: #566f9f;
  --sky-blue-hour-horizon: #9b8fa8;
  --sky-blue-hour-lower-horizon: #d0a98e;
  --sky-dusk-top: #435985;
  --sky-dusk-middle: #a47f97;
  --sky-dusk-horizon: #d79a86;
  --sky-dusk-lower-horizon: #e6b58e;
  --sky-deep-blue-top: #182a50;
  --sky-deep-blue-middle: #3d537a;
  --sky-deep-blue-horizon: #6e748e;
  --sky-deep-blue-lower-horizon: #9b818d;
  --sky-night-top: #0e1932;
  --sky-night-middle: #22385e;
  --sky-night-horizon: #536481;
  --sky-night-lower-horizon: #7b7385;
  --sky-top: var(--sky-sunset-top);
  --sky-middle: var(--sky-sunset-middle);
  --sky-horizon: var(--sky-sunset-horizon);
  --sky-lower-horizon: var(--sky-sunset-lower-horizon);
  --sky-glow: rgba(var(--light-color), 0.14);
  --sky-glow-soft: rgba(var(--light-color), 0.06);

  --lake-surface-light: #82c7ef;
  --lake-surface: #3f91cb;
  --lake-surface-deep: #1d5d96;
  --lake-shore: #657565;
  --lake-edge-light: rgba(194, 226, 246, 0.38);
  --lake-reflection: rgba(213, 236, 249, 0.3);

  --terrain-surface: #73806c;
  --terrain-shadow: #596553;
  --terrain-light: #82907a;
  --terrain-distant: var(--distant-atmosphere);
  --forest-far: #637465;
  --forest-near: #475c4e;
  --tree-trunk: #5f4a3d;
  --tree-crown: #4f684f;
  --tree-crown-light: #617b5e;
  --tree-crown-shadow: #405642;
  --rock-surface: #77736b;
  --flower-red: #c65e59;
  --flower-yellow: #e4c45d;
  --flower-blue: #718bb3;
  --flower-pink: #cf8fa2;
  --flower-cream: #e7d4a5;
  --flower-center: #e7c86b;
  --stem-surface: #536c4d;
  --firefly-light: 247, 220, 128;
}

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

html,
body {
  width: 100vw;
  height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow: hidden;
}

body {
  background: var(--sky-sunset-top);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.refuge {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}

.refuge::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 85;
  background:
    linear-gradient(
      to bottom,
      rgba(16, 28, 52, 0.16),
      rgba(18, 35, 57, 0.34)
    );
  opacity: 0;
  pointer-events: none;
  transition: opacity 6s ease;
}

.refuge[data-sky-phase="dusk"]::after {
  opacity: 0.04;
}

.refuge[data-sky-phase="blue-hour"]::after {
  opacity: 0.1;
}

.refuge[data-sky-phase="deep-blue"]::after {
  opacity: 0.17;
}

.refuge[data-sky-phase="night"]::after {
  opacity: 0.24;
}

.sky,
.atmosphere,
.horizon,
.landscape,
.lake,
.forest,
.tree,
.flowers,
.discoveries {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sky {
  z-index: 10;
}

.atmosphere {
  z-index: 20;
}

.horizon {
  z-index: 30;
}

.landscape {
  z-index: 40;
}

.lake {
  z-index: 50;
}

.forest {
  z-index: 60;
}

.tree {
  z-index: 70;
}

.flowers {
  z-index: 80;
}

.discoveries {
  z-index: 90;
  pointer-events: none;
}