:root {
  color-scheme: dark;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  background: #111820;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.viewport {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  background: #111820;
}

/* Figma 原始画布：1600 × 900。屏幕变化时保持 16:9 和所有元素的相对位置。 */
.scene {
  position: relative;
  width: min(100vw, 177.7777778vh);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-image: url("assets/mountain-background.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.scene::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  background:
    url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%201600%20900%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpolyline%20points%3D%27297%2C892%20329%2C844%20361%2C796%20393%2C732%20425%2C692%20457%2C663%20489%2C642%20521%2C581%20553%2C511%20585%2C501%20617%2C498%20649%2C455%20681%2C400%20713%2C353%20745%2C332%20777%2C328%20809%2C308%20841%2C307%20873%2C347%20905%2C377%20937%2C388%20969%2C404%201001%2C413%201033%2C409%201065%2C456%201097%2C491%201129%2C492%201161%2C552%201193%2C569%201225%2C613%201257%2C652%201289%2C721%201321%2C759%201353%2C778%201385%2C779%201417%2C812%201449%2C833%201481%2C845%201513%2C870%201539%2C892%27%20fill%3D%27none%27%20stroke%3D%27%23fff4b8%27%20stroke-width%3D%279%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpolyline%20points%3D%27297%2C892%20329%2C844%20361%2C796%20393%2C732%20425%2C692%20457%2C663%20489%2C642%20521%2C581%20553%2C511%20585%2C501%20617%2C498%20649%2C455%20681%2C400%20713%2C353%20745%2C332%20777%2C328%20809%2C308%20841%2C307%20873%2C347%20905%2C377%20937%2C388%20969%2C404%201001%2C413%201033%2C409%201065%2C456%201097%2C491%201129%2C492%201161%2C552%201193%2C569%201225%2C613%201257%2C652%201289%2C721%201321%2C759%201353%2C778%201385%2C779%201417%2C812%201449%2C833%201481%2C845%201513%2C870%201539%2C892%27%20fill%3D%27none%27%20stroke%3D%27%23ffb300%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E")
    center / 100% 100% no-repeat;
  content: "";
  filter:
    drop-shadow(0 0 3px #fff1a8)
    drop-shadow(0 0 9px rgb(255 204 55 / 0.78))
    drop-shadow(0 0 18px rgb(255 155 0 / 0.5));
  pointer-events: none;
  transition: opacity 240ms ease;
}

.scene--completed::after {
  animation: mountain-golden-glow 2.8s ease-in-out infinite alternate;
  opacity: 1;
}

.scene__ink-title,
.scene__ink-credit {
  position: absolute;
  z-index: 2;
  margin: 0;
  color: #080201;
  font-family: "STXingkai", "FZShuTi", "STKaiti", "KaiTi", "Kaiti SC", "Microsoft YaHei", cursive;
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  pointer-events: none;
  -webkit-text-stroke: 0.012em rgb(255 225 190 / 0.28);
  text-shadow:
    0 0 0.025em rgb(255 232 200 / 0.72),
    0.035em 0.035em 0 rgb(255 212 190 / 0.28),
    -0.018em 0.025em 0 rgb(0 0 0 / 0.38),
    0 0.12em 0.22em rgb(0 0 0 / 0.18);
  transform: rotate(-5deg) skewX(-7deg);
}

.scene__ink-title::after,
.scene__ink-credit::after {
  position: absolute;
  inset: -0.08em -0.1em;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 18% 54%, rgb(0 0 0 / 0.18), transparent 39%),
    radial-gradient(ellipse at 88% 42%, rgb(0 0 0 / 0.12), transparent 36%);
  content: "";
  filter: blur(0.025em);
  opacity: 0.5;
  transform: rotate(2deg);
}

.scene__ink-title {
  top: 7.5%;
  left: 6.5%;
  font-size: clamp(48px, 7vw, 118px);
}

.scene__ink-credit {
  bottom: 7.5%;
  left: 5.5%;
  font-size: clamp(17px, 2vw, 34px);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.cabin {
  position: absolute;
  z-index: 1;
  display: block;
  width: 4.1875%; /* 67 / 1600 */
  height: 7.4444444%; /* 67 / 900 */
  color: #ffe89a;
  cursor: pointer;
  outline: none;
  text-decoration: none;
}

.cabin__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: drop-shadow(0 0 0 rgb(255 202 43 / 0));
  transform-origin: center;
  transition:
    filter 180ms ease,
    transform 180ms ease;
  user-select: none;
  -webkit-user-drag: none;
}

.cabin__hint {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  padding: 0.32em 0.7em;
  border: 1px solid rgb(255 211 82 / 0.95);
  border-radius: 999px;
  opacity: 0;
  background: rgb(48 28 0 / 0.9);
  box-shadow:
    0 0 10px rgb(255 194 38 / 0.45),
    inset 0 0 7px rgb(255 220 105 / 0.18);
  color: #ffe89a;
  font-size: clamp(10px, 0.9vw, 16px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  pointer-events: none;
  text-shadow: 0 0 7px rgb(255 190 30 / 0.85);
  transform: translate(-50%, 6px) scale(0.92);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
  white-space: nowrap;
}

.cabin:is(:hover, :focus-visible) {
  z-index: 3;
}

.cabin--visited {
  z-index: 2;
}

.cabin--visited .cabin__image {
  animation: cabin-read-glow 2.35s ease-in-out infinite alternate;
  filter:
    drop-shadow(0 0 2px #fff0aa)
    drop-shadow(0 0 8px rgb(255 207 69 / 0.86))
    drop-shadow(0 0 18px rgb(255 174 0 / 0.78));
}

/* drop-shadow 会根据 PNG 的透明边缘描出木屋轮廓，而不是矩形外框。 */
.cabin:is(:hover, :focus-visible) .cabin__image {
  animation: cabin-golden-pulse 1.25s ease-in-out infinite alternate;
  filter:
    drop-shadow(0 0 2px #fff4b3)
    drop-shadow(0 0 7px #ffd34e)
    drop-shadow(0 0 15px rgb(255 170 0 / 0.95));
  transform: scale(1.1);
}

.cabin:is(:hover, :focus-visible) .cabin__hint {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

@keyframes cabin-golden-pulse {
  from {
    filter:
      drop-shadow(0 0 2px #fff4b3)
      drop-shadow(0 0 6px #ffd34e)
      drop-shadow(0 0 12px rgb(255 170 0 / 0.82));
  }

  to {
    filter:
      drop-shadow(0 0 3px #fffbe1)
      drop-shadow(0 0 10px #ffdc64)
      drop-shadow(0 0 22px rgb(255 157 0 / 1));
  }
}

@keyframes cabin-read-glow {
  from {
    filter:
      drop-shadow(0 0 1px #ffeaa0)
      drop-shadow(0 0 6px rgb(255 207 69 / 0.65))
      drop-shadow(0 0 14px rgb(255 174 0 / 0.55));
  }

  to {
    filter:
      drop-shadow(0 0 2px #fff6c8)
      drop-shadow(0 0 10px rgb(255 216 89 / 0.9))
      drop-shadow(0 0 22px rgb(255 174 0 / 0.82));
  }
}

@keyframes mountain-golden-glow {
  from {
    filter:
      drop-shadow(0 0 2px #fff1a8)
      drop-shadow(0 0 7px rgb(255 204 55 / 0.58))
      drop-shadow(0 0 14px rgb(255 155 0 / 0.38));
  }

  to {
    filter:
      drop-shadow(0 0 4px #fff8c8)
      drop-shadow(0 0 12px rgb(255 218 76 / 0.78))
      drop-shadow(0 0 22px rgb(255 155 0 / 0.58));
  }
}

.cabin--top {
  left: 51.875%; /* 830 / 1600 */
  top: 47%; /* 423 / 900 */
}

.cabin--right {
  left: 66.8125%; /* 1069 / 1600 */
  top: 66.6666667%; /* 600 / 900 */
}

.cabin--bottom {
  left: 41.25%; /* 660 / 1600 */
  top: 81.1111111%; /* 730 / 900 */
}

.room-scene {
  position: relative;
  display: grid;
  width: min(100vw, 177.7777778vh);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  place-items: center;
  background: #15110f;
}

.room-scene::before,
.room-scene::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.room-scene::before {
  background:
    linear-gradient(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.38)),
    url("assets/house-interior.webp") center / cover no-repeat;
  filter: blur(10px);
  opacity: 0.72;
  transform: scale(1.06);
}

.room-scene::after {
  background:
    linear-gradient(rgb(0 0 0 / 0.04), rgb(0 0 0 / 0.22)),
    url("assets/house-interior.webp") center / contain no-repeat;
}

.blackboard {
  position: relative;
  z-index: 2;
  width: min(34%, 540px);
  min-width: 310px;
  filter:
    drop-shadow(0 22px 30px rgb(0 0 0 / 0.56))
    drop-shadow(0 0 18px rgb(255 220 150 / 0.12));
}

.blackboard__image {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.blackboard__text {
  position: absolute;
  inset: 12% 6% 10%;
  display: grid;
  place-items: center start;
  padding: 0.4em;
  color: #f4f0df;
  font-family: "KaiTi", "STKaiti", "Microsoft YaHei", sans-serif;
  font-size: clamp(8px, 0.82vw, 15px);
  line-height: 1.24;
  overflow: hidden;
  text-align: left;
  text-shadow: 0 0 4px rgb(255 255 255 / 0.22);
  white-space: pre-wrap;
  outline: none;
}

.blackboard__text:empty::before {
  color: rgb(244 240 223 / 0.58);
  content: "在这里输入文字";
}

.back-home {
  position: absolute;
  top: 4%;
  left: 4%;
  z-index: 3;
  padding: 0.5em 1em;
  border: 1px solid rgb(255 231 170 / 0.7);
  border-radius: 999px;
  background: rgb(10 6 3 / 0.55);
  box-shadow: 0 8px 18px rgb(0 0 0 / 0.28);
  color: #fff0c2;
  font-size: clamp(13px, 1vw, 18px);
  text-decoration: none;
  text-shadow: 0 0 8px rgb(255 204 89 / 0.45);
}

.back-home:is(:hover, :focus-visible) {
  background: rgb(10 6 3 / 0.78);
}

.portfolio-scene {
  color: #fff7df;
}

.portfolio-deck {
  position: relative;
  z-index: 2;
  width: min(94%, 1420px);
  height: min(86%, 760px);
}

.portfolio-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.portfolio-pages {
  position: relative;
  width: 100%;
  height: calc(100% - 156px);
}

.portfolio-page {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: clamp(12px, 1.4vw, 22px);
  padding: clamp(18px, 2vw, 30px);
  border: 1px solid rgb(255 229 168 / 0.34);
  border-radius: 28px;
  opacity: 0;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgb(24 16 10 / 0.66), rgb(8 6 5 / 0.42)),
    radial-gradient(circle at 50% 0%, rgb(255 213 128 / 0.18), transparent 48%);
  box-shadow:
    0 22px 48px rgb(0 0 0 / 0.48),
    inset 0 0 28px rgb(255 231 170 / 0.08);
  pointer-events: none;
  transform: translateY(14px) scale(0.98);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

#portfolio-page-1:checked ~ .portfolio-pages .portfolio-page--one,
#portfolio-page-2:checked ~ .portfolio-pages .portfolio-page--two,
#portfolio-page-3:checked ~ .portfolio-pages .portfolio-page--three {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.portfolio-title {
  margin: 0;
  color: #ffe7a4;
  font-size: clamp(34px, 5vw, 78px);
  letter-spacing: 0.12em;
  line-height: 1;
  text-align: center;
  text-shadow:
    0 0 10px rgb(255 201 88 / 0.64),
    0 6px 14px rgb(0 0 0 / 0.42);
}

.gafati-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 28px);
  align-items: center;
  justify-items: center;
}

.gafati-card {
  display: grid;
  width: 100%;
  height: min(48vh, 410px);
  margin: 0;
  place-items: center;
  border: 2px solid rgb(255 238 187 / 0.72);
  border-radius: 18px;
  background: rgb(255 255 255 / 0.9);
  box-shadow:
    0 18px 26px rgb(0 0 0 / 0.38),
    0 0 18px rgb(255 214 121 / 0.14);
  overflow: hidden;
}

.gafati-card img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.portfolio-description {
  position: relative;
  width: min(96%, 1180px);
  min-height: 4.15em;
  margin: 12px auto 0;
  padding: 0.72em 1.2em;
  border: 2px solid rgb(255 238 190 / 0.66);
  border-radius: 22px;
  background: rgb(0 0 0 / 0.78);
  color: #fff5d6;
  font-size: clamp(17px, 1.55vw, 28px);
  font-weight: 900;
  line-height: 1.42;
  text-align: center;
  box-shadow:
    0 18px 32px rgb(0 0 0 / 0.42),
    inset 0 0 18px rgb(255 215 120 / 0.08);
  text-shadow:
    0 2px 6px rgb(0 0 0 / 0.85),
    0 0 12px rgb(255 213 116 / 0.24);
}

.portfolio-description__page {
  position: absolute;
  inset: 50% 1.2em auto;
  opacity: 0;
  transform: translateY(-50%);
}

#portfolio-page-1:checked ~ .portfolio-description .portfolio-description__page--one,
#portfolio-page-2:checked ~ .portfolio-description .portfolio-description__page--two,
#portfolio-page-3:checked ~ .portfolio-description .portfolio-description__page--three {
  opacity: 1;
}

.portfolio-pager {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
}

.portfolio-pager label {
  display: grid;
  width: clamp(34px, 3.2vw, 48px);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgb(255 233 170 / 0.5);
  border-radius: 50%;
  background: rgb(11 7 4 / 0.6);
  box-shadow: 0 8px 18px rgb(0 0 0 / 0.28);
  color: #fff0c4;
  cursor: pointer;
  font-size: clamp(14px, 1.3vw, 20px);
  font-weight: 900;
  text-shadow: 0 0 8px rgb(255 204 89 / 0.45);
}

#portfolio-page-1:checked ~ .portfolio-pager label[for="portfolio-page-1"],
#portfolio-page-2:checked ~ .portfolio-pager label[for="portfolio-page-2"],
#portfolio-page-3:checked ~ .portfolio-pager label[for="portfolio-page-3"],
.portfolio-pager label:is(:hover, :focus-visible) {
  background: #caa04d;
  color: #1c1205;
}

.mindmap-scene {
  color: #fff3cf;
}

.mindmap-board {
  position: relative;
  z-index: 2;
  width: min(88%, 1240px);
  height: min(76%, 650px);
  border: 1px solid rgb(255 229 168 / 0.36);
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 50%, rgb(255 216 128 / 0.2), transparent 36%),
    linear-gradient(135deg, rgb(23 15 9 / 0.84), rgb(5 4 3 / 0.58));
  box-shadow:
    0 24px 52px rgb(0 0 0 / 0.52),
    inset 0 0 40px rgb(255 231 170 / 0.08);
  overflow: hidden;
}

.mindmap-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter:
    drop-shadow(0 0 4px rgb(255 202 73 / 0.8))
    drop-shadow(0 0 14px rgb(255 169 34 / 0.35));
  pointer-events: none;
}

.mindmap-lines path {
  fill: none;
  stroke: rgb(255 218 125 / 0.86);
  stroke-linecap: round;
  stroke-width: 0.62;
}

.mindmap-node {
  position: absolute;
  display: grid;
  min-width: 8.2em;
  min-height: 3em;
  place-items: center;
  padding: 0.55em 1.1em;
  border: 2px solid rgb(255 235 174 / 0.72);
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgb(47 30 13 / 0.96), rgb(15 10 6 / 0.92));
  box-shadow:
    0 12px 24px rgb(0 0 0 / 0.38),
    inset 0 0 16px rgb(255 212 105 / 0.1);
  color: #fff0bd;
  font-size: clamp(14px, 1.2vw, 22px);
  font-weight: 900;
  line-height: 1.18;
  text-align: center;
  text-shadow:
    0 2px 6px rgb(0 0 0 / 0.75),
    0 0 10px rgb(255 206 87 / 0.22);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.mindmap-node--center {
  left: 50%;
  top: 50%;
  min-width: 10.8em;
  min-height: 4.4em;
  border-color: rgb(255 244 190 / 0.9);
  background:
    radial-gradient(circle at 50% 25%, rgb(255 236 170 / 0.28), transparent 48%),
    linear-gradient(145deg, rgb(152 92 26 / 0.96), rgb(54 26 9 / 0.96));
  color: #fff8d9;
  font-size: clamp(20px, 2vw, 36px);
}

.mindmap-node--main {
  min-width: 8.8em;
  font-size: clamp(16px, 1.55vw, 28px);
}

.mindmap-node--tech {
  left: 30%;
  top: 50%;
  background:
    linear-gradient(145deg, rgb(28 61 91 / 0.96), rgb(8 20 31 / 0.95));
}

.mindmap-node--aesthetic {
  left: 70%;
  top: 50%;
  background:
    linear-gradient(145deg, rgb(98 48 92 / 0.96), rgb(28 11 32 / 0.95));
}

.mindmap-node--leaf {
  min-width: 8em;
  min-height: 2.8em;
  background:
    linear-gradient(145deg, rgb(31 25 17 / 0.95), rgb(8 7 5 / 0.92));
}

.mindmap-node--tech-1 {
  left: 13%;
  top: 15%;
}

.mindmap-node--tech-2 {
  left: 13%;
  top: 32%;
}

.mindmap-node--tech-3 {
  left: 13%;
  top: 50%;
}

.mindmap-node--tech-4 {
  left: 13%;
  top: 68%;
}

.mindmap-node--tech-5 {
  left: 13%;
  top: 85%;
}

.mindmap-node--aesthetic-1 {
  left: 87%;
  top: 28%;
}

.mindmap-node--aesthetic-2 {
  left: 87%;
  top: 50%;
}

.mindmap-node--aesthetic-3 {
  left: 87%;
  top: 72%;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  .cabin--visited .cabin__image,
  .cabin:is(:hover, :focus-visible) .cabin__image,
  .scene--completed::after {
    animation: none;
  }
}