:root {
  --ridge: #12251d;
  --treeline: #0e1e16;
  --depth-1: #0e1d15;
  --depth-2: #0b1811;
  --depth-3: #08130d;
  --depth-4: #060f0a;
  --depth-5: #040b07;
  --ground-far: #12241a;
  --ground-near: #060e09;
  --road: #15191c;
  --road-line: #c9c4b2;
  --verge-post: #d9d4c4;
  --shade: rgb(0 0 0 / 0.28);
  --name-colour: #2e6a3f;
  --name-shadow: 0 0 0.35em rgb(255 132 48 / 0.16);
  --star-opacity: 0.9;
  --glow-core: rgb(255 150 60 / 0.42);
  --glow-mid: rgb(255 120 40 / 0.14);
  --scene-text: #eef1e8;
  --scene-text-muted: #9fb2a2;
  --scene-line: rgb(238 241 232 / 0.16);
  --footer-ground: #050c08;
}

:root[data-mode="light"] {
  --ridge: #6a4867;
  --treeline: #2f3d35;
  --depth-1: #474650;
  --depth-2: #383f3d;
  --depth-3: #2c3631;
  --depth-4: #222c26;
  --depth-5: #19221c;
  --ground-far: #3a4a3c;
  --ground-near: #1c2620;
  --road: #2d2f33;
  --road-line: #efe7cf;
  --verge-post: #f2ecdc;
  --shade: rgb(10 6 20 / 0.22);
  --name-colour: #4a8a4c;
  --name-shadow: 0 0 0.3em rgb(255 180 90 / 0.12);
  --star-opacity: 0.55;
  --glow-core: rgb(255 160 70 / 0.3);
  --glow-mid: rgb(255 130 50 / 0.1);
  --footer-ground: #161f19;
}

.page--home {
  background: var(--footer-ground);
}

/* Scene */

.scene {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 420px;
  display: grid;
  place-items: center;
  padding: 72px var(--gutter) clamp(96px, 22vh, 220px);
  overflow: hidden;
  isolation: isolate;
}

.scene__sky,
.scene__layer,
.scene__bats {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.scene__sky {
  z-index: 0;
  background: linear-gradient(to bottom, #040914 0%, #0b172c 45%, #172a42 72%, #213a52 100%);
}

.scene__sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #2a2d62 0%, #74497f 34%, #dc6f69 58%, #f8b55f 76%, #fbd58a 100%);
  opacity: 0;
  transition: opacity 900ms ease;
}

:root[data-mode="light"] .scene__sky::after {
  opacity: 1;
}

.scene__sun {
  position: absolute;
  z-index: 1;
  left: 24%;
  top: var(--horizon, 62%);
  width: clamp(90px, 14vw, 180px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fff2c4 0%, #ffd27a 55%, #f9a54f 100%);
  box-shadow: 0 0 80px 30px rgb(255 190 110 / 0.35);
  translate: -50% -62%;
  opacity: 0;
  transition: opacity 900ms ease, translate 1400ms ease;
}

:root[data-mode="light"] .scene__sun {
  opacity: 1;
  translate: -50% -78%;
}

.scene__moon {
  position: absolute;
  z-index: 1;
  left: 18%;
  top: 13%;
  width: 1em;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: inset -0.32em 0.16em 0 0 #ece6c9;
  font-size: clamp(44px, 6vw, 72px);
  rotate: -20deg;
  transition: opacity 900ms ease;
}

:root[data-mode="light"] .scene__moon {
  opacity: 0;
}

.scene__layer--back {
  z-index: 2;
}

.scene__title {
  position: relative;
  z-index: 3;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.scene__layer--front {
  z-index: 4;
}

.scene__bats {
  z-index: 5;
}

.scene__ridge { fill: var(--ridge); }
.scene__treeline { fill: var(--treeline); }
.scene__depth-1 { fill: var(--depth-1); }
.scene__depth-2 { fill: var(--depth-2); }
.scene__depth-3 { fill: var(--depth-3); }
.scene__depth-4 { fill: var(--depth-4); }
.scene__depth-5 { fill: var(--depth-5); }
.scene__ground-band { fill: rgb(0 0 0 / 0.1); }
.scene__road { fill: var(--road); }
.scene__shade { fill: var(--shade); }

.scene__road-line {
  fill: var(--road-line);
  opacity: 0.85;
}

.scene__post {
  fill: var(--verge-post);
}

.scene__post-reflector {
  fill: #e0602c;
}

.scene__ground-stop--far { stop-color: var(--ground-far); }
.scene__ground-stop--near { stop-color: var(--ground-near); }
.scene__glow-stop--core { stop-color: var(--glow-core); }
.scene__glow-stop--mid { stop-color: var(--glow-mid); }
.scene__glow-stop--edge { stop-color: rgb(255 120 40 / 0); }

.tree {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.tree--rustle {
  animation: tree-rustle 2.2s ease-in-out;
}

@keyframes tree-rustle {
  0%,
  100% { rotate: 0deg; }
  20% { rotate: 1.4deg; }
  45% { rotate: -1.1deg; }
  70% { rotate: 0.6deg; }
  85% { rotate: -0.3deg; }
}

/* Name */

.name {
  display: flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: clamp(72px, min(36vw, 38vh), 420px);
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: var(--name-colour);
  text-shadow: var(--name-shadow);
  user-select: none;
  transition: color 900ms ease;
}

.page--highway .name {
  font-size: clamp(56px, min(19vw, 30vh), 360px);
  letter-spacing: -0.02em;
}

.name__letter {
  display: inline-block;
}

.name:not(.name--ready) .name__letter {
  animation: name-rise 1100ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--order, 0) * 120ms + 200ms);
}

.name__letter:nth-child(2) { --order: 1; }
.name__letter:nth-child(3) { --order: 2; }
.name__letter:nth-child(4) { --order: 3; }
.name__letter:nth-child(5) { --order: 4; }
.name__letter:nth-child(6) { --order: 5; }

@keyframes name-rise {
  from { opacity: 0; transform: translateY(18%); }
  to { opacity: 1; transform: none; }
}

/* Stars and meteors */

.stars,
.meteors {
  position: absolute;
  inset: 0 0 35% 0;
  z-index: 1;
  overflow: hidden;
}

.stars__star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #ffffff;
  opacity: var(--star-opacity);
  transition: opacity 900ms ease;
}

.stars__star--extra {
  display: none;
}

:root[data-mode="dark"] .page--twinkle .stars__star--extra {
  display: block;
}

:root[data-mode="dark"] .page--twinkle .stars__star {
  animation: star-twinkle var(--twinkle-duration, 3s) ease-in-out var(--twinkle-delay, 0s) infinite;
}

@keyframes star-twinkle {
  0%,
  100% { opacity: 0.15; }
  50% { opacity: 0.95; }
}

.meteor {
  position: absolute;
  width: var(--length, 110px);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right, rgb(255 255 255 / 0), rgb(255 246 226 / 0.95));
  transform-origin: 100% 50%;
  rotate: var(--angle, 150deg);
  opacity: 0;
  animation: meteor-fall var(--duration, 900ms) linear forwards;
}

@keyframes meteor-fall {
  0% { opacity: 0; translate: 0 0; }
  12% { opacity: 1; }
  70% { opacity: 0.8; }
  100% { opacity: 0; translate: var(--travel-x) var(--travel-y); }
}

/* Campfire */

.campfire__glow {
  animation: fire-glow 2.6s ease-in-out infinite;
}

@keyframes fire-glow {
  0%,
  100% { opacity: 1; }
  35% { opacity: 0.85; }
  60% { opacity: 0.95; }
  80% { opacity: 0.8; }
}

.campfire__flame {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: flame-lick 900ms ease-in-out infinite alternate;
}

.campfire__flame--outer {
  fill: #e8572a;
}

.campfire__flame--middle {
  fill: #f59a2f;
  animation-duration: 640ms;
  animation-delay: -200ms;
}

.campfire__flame--inner {
  fill: #ffd85c;
  animation-duration: 460ms;
  animation-delay: -120ms;
}

@keyframes flame-lick {
  0% { transform: scale(1, 1) skewX(0deg); }
  35% { transform: scale(0.94, 1.08) skewX(-4deg); }
  70% { transform: scale(1.04, 0.94) skewX(3deg); }
  100% { transform: scale(0.97, 1.05) skewX(-2deg); }
}

.campfire__log {
  fill: #5a3620;
}

.campfire__log--cross {
  fill: #6b4128;
}

.campfire__stones {
  fill: #6f6a64;
  stroke: #3e3b37;
  stroke-width: 1.2;
}

:root[data-mode="dark"] .campfire__stones {
  fill: #5d5650;
  stroke: #26231f;
}

.campfire__spark {
  fill: #ffc35a;
  opacity: 0;
  animation: spark-rise 2.4s ease-out infinite;
}

.campfire__spark:nth-of-type(2) {
  animation-delay: 0.7s;
  animation-duration: 2.9s;
}

.campfire__spark:nth-of-type(3) {
  animation-delay: 1.4s;
  animation-duration: 2.2s;
}

.campfire__spark:nth-of-type(4) {
  animation-delay: 1.9s;
  animation-duration: 3.2s;
}

@keyframes spark-rise {
  0% { opacity: 0; translate: 0 0; }
  15% { opacity: 1; }
  100% { opacity: 0; translate: 8px -80px; }
}

/* Light and dark toggle */

.mode-toggle {
  position: absolute;
  z-index: 26;
  top: var(--gutter);
  right: var(--gutter);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid rgb(244 239 228 / 0.55);
  border-radius: 50%;
  background: rgb(8 12 20 / 0.25);
  color: #f4efe4;
  cursor: pointer;
}

.mode-toggle:hover {
  border-color: #f4efe4;
}

.mode-toggle:active {
  translate: 0 1px;
}

.mode-toggle__icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.mode-toggle__icon--moon {
  stroke: none;
}

:root[data-mode="dark"] .mode-toggle__icon--moon,
:root[data-mode="light"] .mode-toggle__icon--sun {
  display: none;
}

/* Footer under the scene, a scroll away */

.page--home .site-footer {
  --colour-bg: var(--footer-ground);
  --colour-surface: #1d2a22;
  --colour-surface-raised: #142019;
  --colour-text: var(--scene-text);
  --colour-text-muted: var(--scene-text-muted);
  --colour-line: var(--scene-line);
  --colour-accent: var(--scene-text);
  --colour-joe: #6fbf6a;
  background: var(--footer-ground);
  transition: background-color 900ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .name:not(.name--ready) .name__letter,
  :root[data-mode="dark"] .page--twinkle .stars__star,
  .campfire__glow,
  .campfire__spark,
  .tree--rustle,
  .meteor {
    animation: none;
  }

  .campfire__flame {
    animation-duration: 2.4s;
  }

  .scene__sky::after,
  .scene__sun,
  .scene__moon {
    transition: none;
  }
}