:root {
  --sky-top: #2f7fd0;
  --sky-upper: #5fa3e0;
  --sky-horizon: #dcedf9;
  --snow: #f7fbff;
  --rock: #8ea3ba;
  --rock-deep: #6b7f96;
  --ink: #16233d;
  --ink-soft: #2b3c5c;
  --sakura: #f6c6d3;
  --sakura-deep: #e0708f;
  --momiji: #c1453a;
  --gold: #d8922f;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--sky-horizon);
}

body {
  position: relative;
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif;
  color: var(--ink);
}

/* Fixed clear-day scene — a bright, high-alpine blue-sky mood, deliberately
   not adapting to system light/dark, same reasoning as the previous
   night version: a "dark mode" variant would undercut the whole point of
   this specific scene. */
#sky {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 22% 14%, rgba(255, 250, 230, 0.55), transparent 62%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-upper) 46%, var(--sky-horizon) 100%);
  z-index: 0;
}

#sun {
  position: fixed;
  top: 9%;
  left: 14%;
  width: min(8vw, 96px);
  height: min(8vw, 96px);
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #fffdf5, #ffe9ad 68%, rgba(255, 233, 173, 0.1) 100%);
  box-shadow: 0 0 90px 26px rgba(255, 233, 173, 0.45);
  z-index: 1;
}

canvas#fall {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: block;
}

#mountains-far {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 14vh;
  width: 100%;
  height: 32vh;
  z-index: 3;
  pointer-events: none;
}

#mountains-near {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 6vh;
  width: 100%;
  height: 30vh;
  z-index: 3;
  pointer-events: none;
}

#ground {
  position: fixed;
  left: 0;
  right: 0;
  bottom: -2px;
  width: 100%;
  height: 20vh;
  z-index: 4;
  pointer-events: none;
}

#branch {
  position: fixed;
  top: 0;
  left: -2%;
  width: min(46vw, 520px);
  height: auto;
  z-index: 5;
  opacity: 0.96;
  filter: drop-shadow(0 12px 18px rgba(22, 35, 61, 0.18));
}

main {
  position: relative;
  z-index: 6;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8vh 6vw 14vh;
  gap: 0.9rem;
  animation: rise 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

h1 {
  margin: 0;
  font-weight: 600;
  font-size: clamp(2.6rem, 8vw, 5.2rem);
  letter-spacing: 0.04em;
  color: var(--ink);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5), 0 6px 26px rgba(255, 255, 255, 0.55);
}

.tagline {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  max-width: 34ch;
  line-height: 1.7;
  margin-top: 0.4rem;
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.55);
}

.status {
  margin-top: 2.4rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #a1650f;
  opacity: 0.95;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}

.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px 2px rgba(216, 146, 47, 0.6);
}

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

@media (prefers-reduced-motion: reduce) {
  main {
    animation: none;
  }
}