@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@800&display=swap");

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

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #030610;
}

#sky {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
}

.title-wrap {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Shippori Mincho", "Yu Mincho", serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 7vw, 4rem);
  color: #fdf5d0;
  letter-spacing: 0.18em;
  text-shadow:
    0 0 36px rgba(255, 228, 110, 0.95),
    0 0 12px rgba(255, 240, 180, 0.5),
    0 4px 8px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  animation: titleShow 4.5s ease forwards;
}

.title-wrap span {
  display: block;
  line-height: 1.2;
}

@keyframes titleShow {
  0% {
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  72% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.tree {
  position: fixed;
  z-index: 2;
  left: 19%;
  bottom: 8vh;
  width: clamp(100px, 15vw, 180px);
  height: clamp(150px, 28vh, 260px);
  pointer-events: none;
  filter: drop-shadow(10px 12px 10px rgba(0, 0, 0, 0.28));
}

.tree-front-two {
  left: 4%;
  transform: scale(0.72);
  transform-origin: bottom left;
  opacity: 0.88;
}

.tree-front-three {
  left: 35%;
  transform: scale(0.56);
  transform-origin: bottom left;
  opacity: 0.78;
}

.tree-front-four {
  left: 60%;
  transform: scale(0.7);
  transform-origin: bottom left;
  opacity: 0.7;
}

.tree-front-five {
  left: 84%;
  transform: scale(0.48);
  transform-origin: bottom left;
  opacity: 0.62;
}

.tree-front-two .tree-crown {
  background:
    radial-gradient(circle at 25% 57%, #9b8b32 0 25%, transparent 26%),
    radial-gradient(circle at 65% 28%, #e0b84e 0 29%, transparent 30%),
    radial-gradient(circle at 76% 68%, #b89b38 0 27%, transparent 28%),
    radial-gradient(circle at 42% 35%, #f0cf68 0 26%, #92752c 64%, #3a321e 100%);
}

.tree-front-two .tree-crown::before,
.tree-front-two .tree-crown::after {
  background: linear-gradient(145deg, #e0b84e, #92752c 72%);
}

.tree-front-three .tree-crown {
  background:
    radial-gradient(circle at 27% 56%, #a15b27 0 25%, transparent 26%),
    radial-gradient(circle at 65% 30%, #e09a38 0 29%, transparent 30%),
    radial-gradient(circle at 75% 67%, #bd6e2d 0 27%, transparent 28%),
    radial-gradient(circle at 42% 34%, #eab04d 0 26%, #9a5127 64%, #33251d 100%);
}

.tree-front-three .tree-crown::before,
.tree-front-three .tree-crown::after {
  background: linear-gradient(145deg, #e09a38, #9a5127 72%);
}

.tree-trunk {
  position: absolute;
  z-index: 1;
  left: 47%;
  bottom: 0;
  width: 16%;
  height: 58%;
  border-radius: 45% 45% 12% 12%;
  background: linear-gradient(90deg, #24171a, #4b2d23 52%, #1c1519);
  transform-origin: bottom center;
  transform: rotate(4deg);
  animation: trunkSway 5s ease-in-out infinite;
}

@keyframes trunkSway {
  0%,
  100% {
    transform: rotate(3deg);
  }
  50% {
    transform: rotate(5deg);
  }
}

.tree-back {
  left: 78%;
  bottom: 8vh;
  width: clamp(78px, 11vw, 132px);
  height: clamp(112px, 21vh, 192px);
  opacity: 0.72;
  transform: scale(0.82);
  transform-origin: bottom center;
  z-index: 2;
}

.tree-crown {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 5%;
  width: 92%;
  height: 64%;
  border-radius: 48% 52% 42% 50%;
  background:
    radial-gradient(circle at 29% 55%, #74692d 0 25%, transparent 26%),
    radial-gradient(circle at 65% 31%, #b18436 0 29%, transparent 30%),
    radial-gradient(circle at 74% 68%, #875d2a 0 27%, transparent 28%),
    radial-gradient(circle at 42% 35%, #cca146 0 26%, #6b4e2c 64%, #29291e 100%);
}

.tree-crown::before,
.tree-crown::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, #cca146, #6b4e2c 72%);
  box-shadow: inset -5px -6px 9px rgba(38, 27, 29, 0.22);
}

.tree-crown::before {
  left: -8%;
  top: 24%;
  width: 42%;
  height: 58%;
}

.tree-crown::after {
  right: -7%;
  top: 35%;
  width: 45%;
  height: 56%;
}

.tree-branch {
  position: absolute;
  z-index: 1;
  height: 5%;
  border-radius: 50%;
  background: linear-gradient(180deg, #59452b, #29251d);
  opacity: 0.78;
  transform-origin: left center;
}

.tree-branch-one {
  left: 45%;
  top: 32%;
  width: 34%;
  transform: rotate(-25deg);
}
.tree-branch-two {
  left: 49%;
  top: 40%;
  width: 32%;
  transform: rotate(-8deg);
}
.tree-branch-three {
  left: 51%;
  top: 48%;
  width: 35%;
  transform: rotate(12deg);
}
.tree-branch-four {
  left: 48%;
  top: 55%;
  width: 29%;
  transform: rotate(25deg);
}
.tree-branch-five {
  left: 43%;
  top: 38%;
  width: 27%;
  transform: rotate(164deg);
}

.rocks {
  position: fixed;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 8vh;
  height: 9vh;
  pointer-events: none;
}

.rock {
  position: absolute;
  display: block;
  border-radius: 55% 45% 35% 30%;
  background: linear-gradient(145deg, #657078 0%, #3d464e 58%, #202830 100%);
  box-shadow:
    inset 5px 4px 5px rgba(210, 220, 212, 0.12),
    0 4px 8px rgba(0, 0, 0, 0.42);
}

.rock-one {
  left: 31%;
  bottom: 1px;
  width: 44px;
  height: 25px;
  transform: rotate(-8deg);
}
.rock-two {
  left: 36%;
  bottom: 0;
  width: 25px;
  height: 16px;
  transform: rotate(12deg);
}
.rock-three {
  right: 17%;
  bottom: 2px;
  width: 34px;
  height: 20px;
  transform: rotate(-14deg);
}
.rock-four {
  left: 55%;
  bottom: 1px;
  width: 30px;
  height: 18px;
}
.rock-five {
  left: 72%;
  bottom: 3px;
  width: 40px;
  height: 23px;
}

.mountain-trees {
  position: fixed;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

.hill-tree {
  position: absolute;
  width: 4px;
  height: 25px;
  background: #111722;
  transform-origin: bottom center;
}

.hill-tree::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 22px;
  height: 7px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #080d18;
}

.hill-tree::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 28px;
  height: 35px;
  transform: translateX(-50%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: #111722;
}

.hill-tree-one {
  left: 52%;
  bottom: 15vh;
  transform: scale(0.8);
}
.hill-tree-two {
  left: 70%;
  bottom: 31vh;
  transform: scale(0.55);
}
.hill-tree-three {
  left: 88%;
  bottom: 24vh;
  transform: scale(0.7);
}

.hill-tree-two {
  background: #151a1d;
}
.hill-tree-three {
  background: #1b1a1b;
}

.engawa {
  position: fixed;
  z-index: 5;
  left: 50%;
  width: calc(100% + clamp(64px, 12vw, 96px));
  bottom: 0;
  height: 9vh;
  min-height: 52px;
  pointer-events: none;
  perspective: 420px;
  transform: translateX(-50%);
}

.engawa-floor {
  position: absolute;
  inset: 7% -2vw -1px;
  transform: rotateX(11deg);
  transform-origin: bottom;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(45, 24, 17, 0.3) 0 2px,
      transparent 2px 48px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(224, 157, 82, 0.08) 0 1px,
      transparent 1px 9px
    ),
    linear-gradient(180deg, #805537 0%, #4b2d21 58%, #1a1417 100%);
  border-top: 4px solid #a06b3a;
  box-shadow:
    0 -10px 24px rgba(0, 0, 0, 0.32),
    inset 0 8px 16px rgba(255, 204, 127, 0.08);
}

.engawa-rail {
  position: absolute;
  left: -2vw;
  right: -2vw;
  top: 9%;
  height: 13px;
  background: linear-gradient(180deg, #bd8245, #704429 55%, #3b241d);
  border-top: 2px solid rgba(255, 214, 145, 0.42);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.55);
}

.sanbo-wrap {
  position: fixed;
  bottom: 8vh;
  left: 74%;
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  justify-content: center;
}

.sanbo-set {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dango-tower {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-bottom: 1px;
}

.dango-tower::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 8px;
  bottom: 5px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #6b411e, #d29a54 45%, #70431e);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.45);
}

.dango-row {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 1px;
}

.dango {
  display: block;
  width: clamp(19px, 3vw, 26px);
  height: clamp(19px, 3vw, 26px);
  border-radius: 50%;
  background: radial-gradient(
    circle at 33% 30%,
    #fffefa 0%,
    #f4efe2 40%,
    #ddd5bc 78%,
    #c8be9e 100%
  );
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.52),
    inset 0 -1px 3px rgba(0, 0, 0, 0.1);
}

.sanbo-tray {
  width: clamp(68px, 10vw, 90px);
  height: 8px;
  background: linear-gradient(180deg, #c09448 0%, #8a6228 100%);
  border-radius: 2px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
  margin-top: 0;
}

.sanbo-skirt {
  width: clamp(48px, 7.5vw, 62px);
  height: clamp(18px, 3vw, 26px);
  background: linear-gradient(180deg, #a07640 0%, #7a5828 100%);
  clip-path: polygon(12% 0%, 88% 0%, 100% 100%, 0% 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}

@media (max-width: 480px) {
  .title-wrap {
    font-size: 2rem;
  }
  .tree {
    left: 4%;
    bottom: 9vh;
    transform: scale(0.8);
    transform-origin: bottom left;
  }
  .tree {
    bottom: 6vh;
  }
  .tree-front-two {
    left: -8%;
  }
  .tree-front-three {
    left: 20%;
  }
  .tree-front-four {
    left: 47%;
  }
  .tree-front-five {
    left: 76%;
  }
  .hill-tree-one {
    bottom: 18vh;
  }
  .hill-tree-two {
    bottom: 30vh;
  }
  .hill-tree-three {
    bottom: 25vh;
  }
  .engawa {
    height: 8vh;
    min-height: 48px;
  }
  .sanbo-wrap {
    bottom: 7vh;
    left: 73%;
  }
}