: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;
}

.wordmark {
  display: block;
  width: clamp(240px, 46vw, 460px);
  height: auto;
  margin: 0;
  filter: drop-shadow(0 6px 22px rgba(22, 35, 61, 0.18));
}

/* Plain-text pronunciation cue directly under the wordmark — the logo's
   leading stroke is a brushed-metal "X" mark standing in for the "K" (so
   the wordmark itself reads visually as "Xizuna"), but the brand is
   actually said "Kizuna". This line exists purely so nobody has to guess. */
.brand-name {
  margin: 0.1rem 0 0;
  font-size: clamp(0.85rem, 1.6vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-shadow: 0 1px 10px 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;
  }
}