:root {
  --cream: #f3ead6;
  --ink: #1b201f;
}

* { box-sizing: border-box; }

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

body {
  font-family: "Songti SC", "STSong", "Noto Serif CJK SC", Georgia, serif;
}

#stage {
  position: relative;
  width: 100vw;
  height: 100svh;
  min-height: 540px;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}

.world {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  background: #303937;
  transition: opacity 1.1s ease;
}

.world.ready { opacity: 1; }

.layer,
.cat,
.distant-glow,
.sea-light,
.weather-shade,
.storm-clouds,
.window-glow,
.low-mist,
.night-wash,
.light-wash,
.edge-vignette,
.grain,
.cat-contact,
.rain {
  position: absolute;
  pointer-events: none;
}

.layer {
  inset: -1.4%;
  width: 102.8%;
  height: 102.8%;
  object-fit: cover;
  object-position: center;
  will-change: transform, filter, opacity;
}

.backdrop { z-index: 1; }

.terrain {
  z-index: 4;
  filter: hue-rotate(12deg) saturate(.82) brightness(1.025);
}

.cottage { z-index: 6; }

.foliage {
  z-index: 9;
  filter: hue-rotate(14deg) saturate(.94) brightness(1.015);
}

.foliage-occluders {
  z-index: 15;
  filter: hue-rotate(14deg) saturate(.94) brightness(1.015);
}

.distant-glow {
  z-index: 2;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at 83% 27%, rgba(245,178,86,.31), transparent 18%),
    radial-gradient(ellipse at 76% 35%, rgba(255,201,124,.13), transparent 27%),
    linear-gradient(112deg, rgba(255,205,132,.12), transparent 48%);
  mix-blend-mode: screen;
}

.sea-light {
  z-index: 3;
  left: -1%;
  top: 23%;
  width: 36%;
  height: 40%;
  opacity: 0;
  background:
    repeating-linear-gradient(171deg, transparent 0 13px, rgba(241,222,177,.16) 13px 15px, transparent 15px 32px);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.9), transparent 94%);
  filter: blur(1.5px);
  mix-blend-mode: screen;
  transform-origin: center;
}

.weather-shade {
  z-index: 3;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at 24% 34%, rgba(41,57,61,.32), transparent 44%),
    linear-gradient(155deg, rgba(31,43,47,.38), rgba(44,48,51,.12) 48%, transparent 78%);
  mix-blend-mode: multiply;
}

.storm-clouds {
  z-index: 3;
  left: -12%;
  top: -9%;
  width: 90%;
  height: 58%;
  opacity: 0;
  background:
    radial-gradient(ellipse at 18% 36%, rgba(60,70,73,.56), transparent 31%),
    radial-gradient(ellipse at 47% 28%, rgba(73,78,80,.50), transparent 34%),
    radial-gradient(ellipse at 72% 20%, rgba(53,63,67,.42), transparent 30%);
  filter: blur(24px);
  mix-blend-mode: multiply;
  will-change: transform, opacity;
}

.window-glow {
  z-index: 7;
  right: 12.7%;
  top: 39.2%;
  width: 13%;
  height: 18%;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, rgba(255,184,91,.48), rgba(255,157,64,.13) 43%, transparent 72%);
  filter: blur(13px);
  mix-blend-mode: screen;
}

.cat {
  z-index: 13;
  left: 0;
  top: 0;
  width: clamp(100px, 8.1vw, 156px);
  height: auto;
  opacity: 0;
  transform-origin: 50% 92%;
  will-change: transform, opacity, filter;
  filter: drop-shadow(0 8px 8px rgba(28,22,14,.24));
}

.cat-a-maomao,
.cat-b-maomao { z-index: 14; }

.cat-a-feifei,
.cat-b-feifei {
  z-index: 13;
  width: clamp(104px, 8.5vw, 164px);
}

.cat-back-tail {
  transform-origin: 50% 92%;
}

.cat-back-feifei-tail {
  width: clamp(104px, 8.5vw, 164px);
}

.cat-branch {
  width: clamp(108px, 9.1vw, 170px);
  transform-origin: 50% 94%;
}

.cat-branch-feifei,
.cat-branch-feifei-step,
.cat-branch-feifei-tail {
  width: clamp(114px, 9.6vw, 178px);
}



.cat-contact {
  z-index: 12;
  width: clamp(52px, 4.8vw, 94px);
  height: clamp(12px, 1.1vw, 22px);
  border-radius: 50%;
  opacity: 0;
  background: rgba(46,34,23,.28);
  filter: blur(7px);
  transform-origin: center;
  will-change: transform, opacity;
}

.rain {
  z-index: 16;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  mix-blend-mode: screen;
}

.low-mist {
  z-index: 17;
  left: -10%;
  right: -10%;
  bottom: -12%;
  height: 50%;
  opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(220,220,204,.13) 38%, rgba(202,207,201,.28));
  filter: blur(28px);
  will-change: transform, opacity;
}

.night-wash {
  z-index: 18;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at 83% 33%, rgba(90,111,126,.17), transparent 24%),
    linear-gradient(180deg, rgba(33,48,61,.25), rgba(19,31,39,.45));
  mix-blend-mode: multiply;
}

.light-wash {
  z-index: 19;
  inset: 0;
  opacity: .12;
  background:
    radial-gradient(circle at 18% 11%, rgba(255,219,156,.38), transparent 34%),
    linear-gradient(125deg, rgba(246,191,112,.10), transparent 52%);
  mix-blend-mode: soft-light;
}

.edge-vignette {
  z-index: 20;
  inset: 0;
  box-shadow: inset 0 0 150px rgba(16,20,19,.30);
}

.grain {
  z-index: 21;
  inset: 0;
  opacity: .038;
  mix-blend-mode: multiply;
  background-image: repeating-radial-gradient(circle at 13% 17%, rgba(28,28,23,.48) 0 1px, transparent 1px 4px);
  background-size: 7px 7px;
}

.caption {
  position: absolute;
  z-index: 30;
  margin: 0;
  max-width: min(86vw, 1120px);
  color: var(--cream);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.045em;
  text-shadow: 0 3px 28px rgba(20,18,14,.62);
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;
}

.caption-world {
  left: 7vw;
  top: 15vh;
  font-size: clamp(48px, 5.6vw, 92px);
}

.caption-ways {
  left: 7vw;
  bottom: 9vh;
  font-size: clamp(48px, 5.7vw, 94px);
}

.caption-final {
  left: 7vw;
  bottom: 10vh;
  max-width: min(78vw, 1180px);
  font-size: clamp(38px, 4.65vw, 78px);
  line-height: 1.16;
  letter-spacing: -.035em;
}

.sound-gate {
  position: absolute;
  z-index: 45;
  left: 50%;
  bottom: 10vh;
  min-width: 184px;
  padding: 13px 22px 14px;
  border: 1px solid rgba(236,220,188,.42);
  border-radius: 999px;
  color: rgba(250,243,226,.96);
  background: rgba(28,29,25,.72);
  box-shadow: 0 12px 34px rgba(17,16,13,.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font: inherit;
  font-size: 15px;
  letter-spacing: .08em;
  cursor: pointer;
  opacity: 0;
  transform: translate3d(-50%, 10px, 0);
  transition: opacity .35s ease, transform .35s ease, background .2s ease;
  pointer-events: none;
}

.sound-gate.visible {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
  pointer-events: auto;
}

.sound-gate:hover { background: rgba(42,42,35,.82); }
.sound-gate:disabled { cursor: wait; opacity: .64; }
.sound-gate:focus-visible {
  outline: 2px solid rgba(250,234,194,.92);
  outline-offset: 4px;
}

.loading {
  position: absolute;
  z-index: 40;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(243,234,214,.72);
  font-size: 15px;
  letter-spacing: .18em;
  background: var(--ink);
  transition: opacity .8s ease;
  pointer-events: none;
}

.loading.hidden { opacity: 0; }

@media (max-width: 900px) {
  .caption-world,
  .caption-ways,
  .caption-final { left: 6vw; }

  .caption-ways { bottom: 10vh; }
  .caption-final { bottom: 11vh; max-width: 86vw; }

  .cat { width: clamp(92px, 8.8vw, 124px); }
  .cat-a-feifei,
  .cat-b-feifei { width: clamp(96px, 9.2vw, 132px); }

  .cat-side { width: clamp(132px, 14.2vw, 184px); }
  .cat-side-feifei { width: clamp(138px, 14.7vw, 192px); }
}

@media (prefers-reduced-motion: reduce) {
  .grain { opacity: .025; }
}