:root {
  --sky-top: #aed3ec;
  --sky-mid: #d8e6e0;
  --sky-bottom: #f6d6b3;
  --sky-band-mid: #c6dde7;

  --mountain-far: #8aa6c7;
  --mountain-mid: #6f8aab;

  --hill-back-1: #9ecf8a;
  --hill-back-2: #74b070;
  --hill-front-1: #7fbf6f;
  --hill-front-2: #4d8a48;

  --cream: #fff5e0;
  --parchment: #fdf6e3;
  --warm-brown: #5a4232;
  --cocoa: #3a2a20;
  --rose: #e89a9a;
  --soft-peach: #ffd9b3;

  --jiji: #0e0d18;
  --jiji-eye: #f4d35e;

  --sun-grad-1: rgba(255, 240, 210, 0.95);
  --sun-grad-2: rgba(255, 230, 180, 0.55);
  --sun-grad-3: rgba(255, 220, 170, 0);
  --sun-size: 160px;
  --sun-opacity: 1;

  --moon-opacity: 0;
  --stars-opacity: 0;
  --fireflies-opacity: 0;
  --butterflies-opacity: 1;

  --landscape-filter: none;
  --cottage-filter: none;

  --title-color: var(--warm-brown);
  --title-shadow: rgba(255, 255, 255, 0.55);
  --subtitle-color: #7a6650;
}

* {
  box-sizing: border-box;
}

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

body {
  font-family: "Quicksand", system-ui, -apple-system, sans-serif;
  color: var(--warm-brown);
  background: var(--sky-top);
  -webkit-font-smoothing: antialiased;
}

.scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--sky-top) 0%,
    var(--sky-band-mid) 35%,
    var(--sky-mid) 60%,
    var(--sky-bottom) 100%
  );
  transition: background 1.5s ease;
}

.sun {
  position: absolute;
  top: 12vh;
  right: 18vw;
  width: var(--sun-size);
  height: var(--sun-size);
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    var(--sun-grad-1) 0%,
    var(--sun-grad-2) 35%,
    var(--sun-grad-3) 70%
  );
  filter: blur(2px);
  opacity: var(--sun-opacity);
  animation: sunGlow 9s ease-in-out infinite;
  transition: opacity 1.5s ease, background 1.5s ease, width 1.5s ease, height 1.5s ease;
}

@keyframes sunGlow {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cloud {
  position: absolute;
  width: 220px;
  height: auto;
  filter: drop-shadow(0 4px 8px rgba(120, 140, 160, 0.18));
  will-change: transform;
}

.cloud-1 {
  top: 8vh;
  left: -25%;
  width: 260px;
  animation: drift 90s linear infinite;
  animation-delay: -10s;
}

.cloud-2 {
  top: 16vh;
  left: -30%;
  width: 200px;
  opacity: 0.85;
  animation: drift 130s linear infinite;
  animation-delay: -45s;
}

.cloud-3 {
  top: 22vh;
  left: -20%;
  width: 300px;
  opacity: 0.7;
  animation: drift 160s linear infinite;
  animation-delay: -90s;
}

.cloud-4 {
  top: 5vh;
  left: -25%;
  width: 180px;
  opacity: 0.85;
  animation: drift 110s linear infinite;
  animation-delay: -65s;
}

@keyframes drift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(180vw); }
}

.birds {
  position: absolute;
  top: 18vh;
  left: -10%;
  width: 80px;
  height: 24px;
  opacity: 0.75;
  animation: birdsFly 70s linear infinite;
}

@keyframes birdsFly {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 0.75; }
  50%  { transform: translate(60vw, -3vh); opacity: 0.75; }
  90%  { opacity: 0.75; }
  100% { transform: translate(120vw, 2vh); opacity: 0; }
}

.mountains-far,
.mountains-mid {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
}

.mountains-far {
  bottom: 44vh;
  height: 22vh;
  filter: blur(0.6px);
}

.mountains-mid {
  bottom: 36vh;
  height: 22vh;
}

.haze {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 42vh;
  height: 14vh;
  background: linear-gradient(
    to bottom,
    rgba(255, 230, 200, 0) 0%,
    rgba(255, 220, 190, 0.55) 70%,
    rgba(190, 210, 170, 0.4) 100%
  );
  pointer-events: none;
}

.ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32vh;
  background: linear-gradient(
    to bottom,
    #9ecf8a 0%,
    #74b070 35%,
    #5d9a55 100%
  );
}

.hills-mid {
  position: absolute;
  left: 0;
  bottom: 28vh;
  width: 100%;
  height: 22vh;
}

.hills-front {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 28vh;
}

.windmills {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.windmill {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 6px 8px rgba(60, 80, 60, 0.18));

  overflow: visible;
}

.windmill-1 {
  left: 8vw;
  bottom: 22vh;
  width: 100px;
}

.windmill-2 {
  left: 40vw;
  bottom: 26vh;
  width: 78px;
  opacity: 0.95;
}

.windmill-3 {
  left: 76vw;
  bottom: 30vh;
  width: 60px;
  opacity: 0.9;
}

.windmill-blades {
  transform-box: fill-box;
  transform-origin: center;
  animation: spin 12s linear infinite;
}

.windmill-blades > g {
  transform: translate(50px, 70px);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.cottage-wrapper {
  position: absolute;
  left: 24vw;
  bottom: 26vh;
  width: 110px;
  filter: drop-shadow(0 6px 8px rgba(80, 60, 40, 0.22));
  z-index: 2;
}

.cottage {
  width: 100%;
  height: auto;
  display: block;
}

.cottage-smoke {
  position: absolute;
  bottom: 76%;
  left: 64%;
  width: 24px;
  height: 60px;
  pointer-events: none;
}

.smoke-puff {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(245, 240, 230, 0.95);
  filter: blur(2px);
  opacity: 0;
  animation: smokeRise 4.2s ease-out infinite;
}

.smoke-puff:nth-child(1) { animation-delay: 0s; }
.smoke-puff:nth-child(2) { animation-delay: -1.05s; }
.smoke-puff:nth-child(3) { animation-delay: -2.1s; }
.smoke-puff:nth-child(4) { animation-delay: -3.15s; }

@keyframes smokeRise {
  0%   { transform: translate(-50%, 0) scale(0.5); opacity: 0; }
  15%  { opacity: 0.95; }
  60%  { opacity: 0.7; }
  100% { transform: translate(-15%, -70px) scale(2); opacity: 0; }
}

.lantern {
  position: absolute;
  bottom: 5vh;
  right: 42vw;
  width: 60px;
  height: auto;
  z-index: 4;
  overflow: visible;
  filter: drop-shadow(0 0 22px rgba(255, 200, 110, 0.55))
          drop-shadow(0 4px 6px rgba(60, 40, 20, 0.3));
}

.lantern-flame {
  transform-box: fill-box;
  transform-origin: center;
  animation: lanternFlicker 2.4s ease-in-out infinite;
}

.lantern-halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: lanternHalo 3s ease-in-out infinite;
}

@keyframes lanternFlicker {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  40%      { opacity: 1;    transform: scale(1.06); }
  70%      { opacity: 0.78; transform: scale(0.96); }
}

@keyframes lanternHalo {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(1.15); }
}

.butterflies {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.butterfly {
  position: absolute;
  width: 32px;
  height: auto;
  filter: drop-shadow(0 2px 3px rgba(120, 80, 100, 0.2));
}

.butterfly-wings {
  transform-box: fill-box;
  transform-origin: center;
  animation: flap 0.32s ease-in-out infinite alternate;
}

@keyframes flap {
  0%   { transform: scaleX(1); }
  100% { transform: scaleX(0.35); }
}

.butterfly-1 {
  top: 35vh;
  left: -5%;
  animation: flutter1 26s linear infinite;
}

.butterfly-2 {
  top: 50vh;
  left: -5%;
  animation: flutter2 34s linear infinite;
  animation-delay: -8s;
  width: 26px;
}

.butterfly-3 {
  top: 22vh;
  left: -5%;
  animation: flutter3 30s linear infinite;
  animation-delay: -16s;
  width: 28px;
}

@keyframes flutter1 {
  0%   { transform: translate(0, 0)        rotate(-6deg); }
  20%  { transform: translate(25vw, -6vh)  rotate(8deg); }
  45%  { transform: translate(50vw, 4vh)   rotate(-4deg); }
  70%  { transform: translate(78vw, -8vh)  rotate(7deg); }
  100% { transform: translate(110vw, -2vh) rotate(0deg); }
}

@keyframes flutter2 {
  0%   { transform: translate(0, 0)        rotate(4deg); }
  25%  { transform: translate(28vw, 8vh)   rotate(-6deg); }
  55%  { transform: translate(58vw, -4vh)  rotate(5deg); }
  80%  { transform: translate(85vw, 6vh)   rotate(-3deg); }
  100% { transform: translate(110vw, 0)    rotate(0deg); }
}

@keyframes flutter3 {
  0%   { transform: translate(0, 0)        rotate(-3deg); }
  30%  { transform: translate(32vw, -4vh)  rotate(6deg); }
  60%  { transform: translate(64vw, 6vh)   rotate(-5deg); }
  100% { transform: translate(110vw, 2vh)  rotate(0deg); }
}

.grass-blades {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14vh;
  pointer-events: none;
  z-index: 3;
}

.grass-blade {
  position: absolute;
  bottom: 0;
  width: 5px;
  background: linear-gradient(
    to top,
    #2a5028 0%,
    #4a8a3a 70%,
    rgba(120, 175, 100, 0) 100%
  );
  border-radius: 50% 50% 0 0 / 90% 90% 0 0;
  transform-origin: bottom center;
  animation: bladeSway 4.5s ease-in-out infinite;
}

.grass-blade:nth-child(1)  { left: 4vw;  height: 38px; animation-delay: -0.2s; }
.grass-blade:nth-child(2)  { left: 11vw; height: 30px; animation-delay: -1.0s; }
.grass-blade:nth-child(3)  { left: 17vw; height: 34px; animation-delay: -2.1s; }
.grass-blade:nth-child(4)  { left: 24vw; height: 26px; animation-delay: -0.6s; }
.grass-blade:nth-child(5)  { left: 33vw; height: 36px; animation-delay: -1.7s; }
.grass-blade:nth-child(6)  { left: 42vw; height: 28px; animation-delay: -2.5s; }
.grass-blade:nth-child(7)  { left: 50vw; height: 32px; animation-delay: -0.9s; }
.grass-blade:nth-child(8)  { left: 56vw; height: 40px; animation-delay: -1.4s; }
.grass-blade:nth-child(9)  { left: 64vw; height: 30px; animation-delay: -2.2s; }
.grass-blade:nth-child(10) { left: 76vw; height: 34px; animation-delay: -1.1s; }
.grass-blade:nth-child(11) { left: 86vw; height: 38px; animation-delay: -0.4s; }
.grass-blade:nth-child(12) { left: 94vw; height: 32px; animation-delay: -1.9s; }

@keyframes bladeSway {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}

.mushroom {
  position: absolute;
  width: 26px;
  height: auto;
  filter: drop-shadow(0 2px 2px rgba(80, 40, 30, 0.25));
}

.mushroom-1 { left: 20vw; bottom: 1vh;  width: 30px; }
.mushroom-2 { left: 47vw; bottom: 2vh;  width: 22px; }
.mushroom-3 { left: 88vw; bottom: 1vh;  width: 24px; }

.flowers {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22vh;
  pointer-events: none;
}

.flower {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow:
    0 -7px 0 -2px currentColor,
    7px 0 0 -2px currentColor,
    0 7px 0 -2px currentColor,
    -7px 0 0 -2px currentColor,
    0 0 0 -3px #fff8d8;
  background: #fff8d8;
  animation: sway 5s ease-in-out infinite;
}

.flower-1  { color: #ffb3c6; left: 8vw;  bottom: 4vh;  animation-delay: -0.3s; }
.flower-2  { color: #ffd6e0; left: 14vw; bottom: 9vh;  animation-delay: -1.1s; transform: scale(0.85); }
.flower-3  { color: #c8a8e0; left: 28vw; bottom: 3vh;  animation-delay: -2.2s; transform: scale(1.1); }
.flower-4  { color: #ffb3c6; left: 38vw; bottom: 11vh; animation-delay: -0.7s; transform: scale(0.7); }
.flower-5  { color: #ffd9a8; left: 53vw; bottom: 5vh;  animation-delay: -1.6s; }
.flower-6  { color: #c8a8e0; left: 62vw; bottom: 10vh; animation-delay: -2.5s; transform: scale(0.9); }
.flower-7  { color: #ffb3c6; left: 72vw; bottom: 4vh;  animation-delay: -0.9s; transform: scale(1.15); }
.flower-8  { color: #ffd9a8; left: 82vw; bottom: 8vh;  animation-delay: -2s;   transform: scale(0.8); }
.flower-9  { color: #ffb3c6; left: 32vw; bottom: 7vh;  animation-delay: -1.4s; transform: scale(0.85); }
.flower-10 { color: #c8a8e0; left: 92vw; bottom: 3vh;  animation-delay: -0.5s; transform: scale(0.9); }

@keyframes sway {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(3deg)  translateY(-1px); }
}

.flower-2  { animation-name: sway-sm; }
.flower-3  { animation-name: sway-lg; }
.flower-4  { animation-name: sway-xs; }
.flower-6  { animation-name: sway-md; }
.flower-7  { animation-name: sway-xl; }
.flower-8  { animation-name: sway-sm2; }
.flower-9  { animation-name: sway-sm; }
.flower-10 { animation-name: sway-md; }

@keyframes sway-sm  { 0%,100% { transform: scale(0.85) rotate(-3deg);} 50%{ transform: scale(0.85) rotate(3deg);} }
@keyframes sway-sm2 { 0%,100% { transform: scale(0.8)  rotate(-3deg);} 50%{ transform: scale(0.8)  rotate(3deg);} }
@keyframes sway-md  { 0%,100% { transform: scale(0.9)  rotate(-3deg);} 50%{ transform: scale(0.9)  rotate(3deg);} }
@keyframes sway-lg  { 0%,100% { transform: scale(1.1)  rotate(-3deg);} 50%{ transform: scale(1.1)  rotate(3deg);} }
@keyframes sway-xl  { 0%,100% { transform: scale(1.15) rotate(-3deg);} 50%{ transform: scale(1.15) rotate(3deg);} }
@keyframes sway-xs  { 0%,100% { transform: scale(0.7)  rotate(-3deg);} 50%{ transform: scale(0.7)  rotate(3deg);} }

.spores {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.spore {
  position: absolute;
  bottom: -20px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, rgba(255,255,255,0.4) 70%, transparent 100%);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.55);
  opacity: 0;
  animation: floatUp 16s linear infinite;
}

.spore:nth-child(1)  { left: 5%;  animation-delay:  0s;    animation-duration: 17s; }
.spore:nth-child(2)  { left: 15%; animation-delay: -3s;    animation-duration: 21s; transform: scale(0.7); }
.spore:nth-child(3)  { left: 24%; animation-delay: -6s;    animation-duration: 19s; transform: scale(1.2); }
.spore:nth-child(4)  { left: 33%; animation-delay: -9s;    animation-duration: 24s; }
.spore:nth-child(5)  { left: 42%; animation-delay: -2s;    animation-duration: 18s; transform: scale(0.8); }
.spore:nth-child(6)  { left: 51%; animation-delay: -11s;   animation-duration: 22s; }
.spore:nth-child(7)  { left: 60%; animation-delay: -5s;    animation-duration: 20s; transform: scale(1.1); }
.spore:nth-child(8)  { left: 69%; animation-delay: -8s;    animation-duration: 23s; transform: scale(0.75); }
.spore:nth-child(9)  { left: 77%; animation-delay: -1s;    animation-duration: 19s; }
.spore:nth-child(10) { left: 85%; animation-delay: -13s;   animation-duration: 21s; transform: scale(1.1); }
.spore:nth-child(11) { left: 92%; animation-delay: -7s;    animation-duration: 25s; transform: scale(0.85); }
.spore:nth-child(12) { left: 97%; animation-delay: -4s;    animation-duration: 18s; }

@keyframes floatUp {
  0%   { transform: translate(0, 0)        scale(var(--s, 1)); opacity: 0; }
  10%  { opacity: 0.9; }
  50%  { transform: translate(40px, -55vh) scale(var(--s, 1)); opacity: 0.85; }
  90%  { opacity: 0.6; }
  100% { transform: translate(-30px, -110vh) scale(var(--s, 1)); opacity: 0; }
}

.cat-stage {
  position: absolute;
  bottom: 6vh;
  right: 14vw;
  width: 220px;
  height: 250px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
}

.cat {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 12px rgba(20, 30, 20, 0.25));
  transform-origin: center bottom;
  animation: catBreathe 4.5s ease-in-out infinite;
  pointer-events: auto;
}

@keyframes catBreathe {
  0%, 100% { transform: scaleY(1)     scaleX(1); }
  50%      { transform: scaleY(1.015) scaleX(0.99); }
}

.cat-tail {
  transform-box: fill-box;
  transform-origin: 0% 100%;
  animation: tailSwish 4s ease-in-out infinite;
}

@keyframes tailSwish {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(7deg); }
}

.cat-ears {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: earTwitch 7s ease-in-out infinite;
}

@keyframes earTwitch {
  0%, 88%, 100% { transform: rotate(0); }
  90%           { transform: rotate(-2deg); }
  93%           { transform: rotate(3deg); }
  96%           { transform: rotate(-1deg); }
}

.eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: blink 6s ease-in-out infinite;
}

@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  94%           { transform: scaleY(0.08); }
  96%           { transform: scaleY(1); }
}

.cat.meow {
  animation: catBreathe 4.5s ease-in-out infinite, catHop 0.7s ease-out;
}

@keyframes catHop {
  0%   { transform: translateY(0) rotate(0); }
  25%  { transform: translateY(-22px) rotate(-3deg) scale(1.03); }
  50%  { transform: translateY(-4px) rotate(2deg); }
  75%  { transform: translateY(-12px) rotate(-1deg); }
  100% { transform: translateY(0) rotate(0); }
}

.cat.meow .cat-ears {
  animation: earWiggleStrong 0.6s ease-out;
}

@keyframes earWiggleStrong {
  0%   { transform: rotate(0); }
  20%  { transform: rotate(-8deg); }
  45%  { transform: rotate(7deg); }
  70%  { transform: rotate(-4deg); }
  100% { transform: rotate(0); }
}

.cat.meow .cat-tail {
  animation: tailWiggle 0.7s ease-out;
}

@keyframes tailWiggle {
  0%   { transform: rotate(-4deg); }
  25%  { transform: rotate(15deg); }
  50%  { transform: rotate(-10deg); }
  75%  { transform: rotate(12deg); }
  100% { transform: rotate(-4deg); }
}

.speech-bubble {
  position: absolute;
  bottom: 220px;
  right: 90px;
  max-width: 260px;
  min-width: 180px;
  padding: 18px 22px;
  background: var(--parchment);
  color: var(--cocoa);
  border-radius: 22px;
  box-shadow:
    0 12px 28px rgba(80, 60, 40, 0.18),
    0 2px 6px rgba(80, 60, 40, 0.1),
    inset 0 0 0 1.5px #ead9b3;
  font-family: "Caveat", "Quicksand", cursive;
  font-size: 1.45rem;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  transform: translateY(8px) scale(0.9);
  transform-origin: bottom right;
  transition:
    opacity 0.35s ease,
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.speech-bubble.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.speech-bubble::after {
  content: "";
  position: absolute;
  right: 26px;
  bottom: -14px;
  width: 22px;
  height: 22px;
  background: var(--parchment);
  border-right: 1.5px solid #ead9b3;
  border-bottom: 1.5px solid #ead9b3;
  transform: rotate(45deg);
  border-bottom-right-radius: 6px;
}

.speech-bubble .saying {
  margin: 0;
}

.title {
  position: fixed;
  top: 3.5vh;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
  z-index: 10;
  text-shadow: 0 2px 14px var(--title-shadow);
  transition: text-shadow 1.5s ease;
}

.title h1 {
  margin: 0;
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  color: var(--title-color);
  letter-spacing: 0.01em;
  line-height: 1;
  transition: color 1.5s ease;
}

.title .subtitle {
  margin: 4px 0 0;
  font-family: "Quicksand", sans-serif;
  font-weight: 500;
  font-size: clamp(0.85rem, 1.3vw, 1.05rem);
  color: var(--subtitle-color);
  letter-spacing: 0.18em;
  text-transform: lowercase;
  opacity: 0.85;
  transition: color 1.5s ease;
}

.cat:focus-visible {
  outline: none;
  filter:
    drop-shadow(0 8px 12px rgba(20, 30, 20, 0.25))
    drop-shadow(0 0 12px rgba(255, 200, 110, 0.85));
}

.totoro {
  position: absolute;
  left: 32vw;
  bottom: 31vh;
  width: 36px;
  height: auto;
  opacity: 0.92;
  filter: drop-shadow(0 3px 4px rgba(40, 30, 20, 0.35));
  z-index: 1;
  animation: totoroBob 6s ease-in-out infinite;
  transform-origin: center bottom;
}

@keyframes totoroBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

.ferns {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.fern {
  position: absolute;
  width: 70px;
  height: auto;
  filter: drop-shadow(0 3px 4px rgba(40, 60, 30, 0.25));
  transform-origin: 50% 100%;
  animation: fernSway 5.5s ease-in-out infinite;
}

.fern-1 { left: 1vw;  bottom: 4vh;  width: 80px; animation-delay: -0.4s; }
.fern-2 { left: 16vw; bottom: 2vh;  width: 60px; animation-delay: -2.0s; }
.fern-3 { left: 68vw; bottom: 3vh;  width: 70px; animation-delay: -1.2s; }

@keyframes fernSway {
  0%, 100% { transform: rotate(-2.5deg); }
  50%      { transform: rotate(2.5deg); }
}

.acorns {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.acorn {
  position: absolute;
  width: 18px;
  height: auto;
  filter: drop-shadow(0 2px 2px rgba(80, 50, 30, 0.3));
}

.acorn-1 { left: 6vw;  bottom: 1vh; width: 18px; transform: rotate(-12deg); }
.acorn-2 { left: 53vw; bottom: 1vh; width: 16px; transform: rotate(8deg); }
.acorn-3 { left: 90vw; bottom: 2vh; width: 20px; transform: rotate(-4deg); }

.soot-sprites {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.soot-sprite {
  position: absolute;
  width: 22px;
  height: auto;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
}

.soot-sprite-1 { left: 12vw; bottom: 7vh; animation: sootBounce 2.4s ease-in-out infinite; }
.soot-sprite-2 { left: 30vw; bottom: 5vh; width: 18px; animation: sootBounce 2.8s ease-in-out infinite; animation-delay: -0.7s; }
.soot-sprite-3 { left: 50vw; bottom: 9vh; width: 24px; animation: sootBounce 2.6s ease-in-out infinite; animation-delay: -1.3s; }
.soot-sprite-4 { left: 64vw; bottom: 6vh; width: 20px; animation: sootBounce 2.2s ease-in-out infinite; animation-delay: -1.9s; }

@keyframes sootBounce {
  0%, 100% { transform: translateY(0)    rotate(0); }
  25%      { transform: translateY(-5px) rotate(-4deg); }
  50%      { transform: translateY(0)    rotate(0); }
  75%      { transform: translateY(-2px) rotate(3deg); }
}

.frog-scene {
  position: absolute;
  left: 36vw;
  bottom: 3vh;
  width: 110px;
  height: auto;
  filter: drop-shadow(0 4px 5px rgba(30, 50, 30, 0.3));
  z-index: 4;
  animation: frogBob 3.8s ease-in-out infinite;
  transform-origin: center bottom;
}

@keyframes frogBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

.frog-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: frogBlink 5.2s ease-in-out infinite;
}

.frog-eye-r { animation-delay: -0.04s; }

@keyframes frogBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  94%, 96%      { transform: scaleY(0.1); }
}

.stump {
  position: absolute;
  left: 7vw;
  bottom: 3vh;
  width: 80px;
  height: auto;
  filter: drop-shadow(0 4px 5px rgba(60, 40, 25, 0.3));
  z-index: 4;
}

.calcifer-face {
  transform-box: fill-box;
  transform-origin: center;
  animation: lanternFlicker 2.4s ease-in-out infinite;
}

.moon {
  position: absolute;
  top: 11vh;
  right: 16vw;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 32%,
    #fff8e7 0%,
    #f1e8cc 55%,
    #d8c9a5 100%
  );
  box-shadow:
    0 0 60px rgba(255, 245, 220, 0.45),
    0 0 120px rgba(220, 220, 255, 0.25),
    inset -10px -10px 22px rgba(60, 50, 80, 0.18);
  opacity: var(--moon-opacity);
  pointer-events: none;
  z-index: 0;
  transition: opacity 1.5s ease;
  animation: moonGlow 8s ease-in-out infinite;
}

@keyframes moonGlow {
  0%, 100% { box-shadow:
    0 0 50px rgba(255, 245, 220, 0.4),
    0 0 110px rgba(220, 220, 255, 0.22),
    inset -10px -10px 22px rgba(60, 50, 80, 0.18); }
  50%      { box-shadow:
    0 0 70px rgba(255, 245, 220, 0.55),
    0 0 140px rgba(220, 220, 255, 0.3),
    inset -10px -10px 22px rgba(60, 50, 80, 0.18); }
}

.moon-crater {
  position: absolute;
  border-radius: 50%;
  background: rgba(80, 70, 100, 0.18);
}
.moon-crater-1 { top: 28%; left: 22%; width: 14px; height: 14px; }
.moon-crater-2 { top: 52%; left: 58%; width: 9px;  height: 9px; }
.moon-crater-3 { top: 68%; left: 34%; width: 11px; height: 11px; }
.moon-crater-4 { top: 38%; left: 65%; width: 6px;  height: 6px; }

.stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--stars-opacity);
  z-index: 0;
  transition: opacity 1.5s ease;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.85);
  animation: starTwinkle 3s ease-in-out infinite;
}

@keyframes starTwinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.2); }
}

.star:nth-child(1)  { top: 4vh;  left: 6vw;  animation-delay: -0.2s; }
.star:nth-child(2)  { top: 7vh;  left: 14vw; animation-delay: -1.1s; }
.star:nth-child(3)  { top: 3vh;  left: 22vw; animation-delay: -2.3s; }
.star:nth-child(4)  { top: 11vh; left: 31vw; animation-delay: -0.6s; }
.star:nth-child(5)  { top: 6vh;  left: 38vw; animation-delay: -1.9s; }
.star:nth-child(6)  { top: 14vh; left: 46vw; animation-delay: -2.6s; }
.star:nth-child(7)  { top: 8vh;  left: 54vw; animation-delay: -0.8s; }
.star:nth-child(8)  { top: 4vh;  left: 62vw; animation-delay: -1.5s; }
.star:nth-child(9)  { top: 17vh; left: 70vw; animation-delay: -2.0s; }
.star:nth-child(10) { top: 6vh;  left: 78vw; animation-delay: -0.4s; }
.star:nth-child(11) { top: 12vh; left: 86vw; animation-delay: -1.7s; }
.star:nth-child(12) { top: 9vh;  left: 94vw; animation-delay: -2.4s; }
.star:nth-child(13) { top: 21vh; left: 4vw;  animation-delay: -0.9s; }
.star:nth-child(14) { top: 19vh; left: 12vw; animation-delay: -1.4s; }
.star:nth-child(15) { top: 24vh; left: 19vw; animation-delay: -2.1s; }
.star:nth-child(16) { top: 22vh; left: 26vw; animation-delay: -0.5s; }
.star:nth-child(17) { top: 26vh; left: 33vw; animation-delay: -1.6s; }
.star:nth-child(18) { top: 18vh; left: 40vw; animation-delay: -2.7s; }
.star:nth-child(19) { top: 23vh; left: 49vw; animation-delay: -0.7s; }
.star:nth-child(20) { top: 27vh; left: 56vw; animation-delay: -1.3s; }
.star:nth-child(21) { top: 20vh; left: 63vw; animation-delay: -2.5s; }
.star:nth-child(22) { top: 25vh; left: 71vw; animation-delay: -0.3s; }
.star:nth-child(23) { top: 18vh; left: 79vw; animation-delay: -1.8s; }
.star:nth-child(24) { top: 23vh; left: 87vw; animation-delay: -2.2s; }
.star:nth-child(25) { top: 28vh; left: 92vw; animation-delay: -1.0s; }
.star:nth-child(26) { top: 30vh; left: 8vw;  animation-delay: -2.8s; }
.star:nth-child(27) { top: 32vh; left: 28vw; animation-delay: -0.4s; }
.star:nth-child(28) { top: 34vh; left: 52vw; animation-delay: -1.6s; }
.star:nth-child(29) { top: 31vh; left: 75vw; animation-delay: -2.3s; }
.star:nth-child(30) { top: 33vh; left: 96vw; animation-delay: -0.8s; }

.fireflies {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--fireflies-opacity);
  z-index: 4;
  transition: opacity 1.5s ease;
}

.firefly {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #ffe585;
  border-radius: 50%;
  box-shadow:
    0 0 8px #ffe585,
    0 0 18px rgba(255, 229, 133, 0.55);
  animation: fireflyGlow 1.6s ease-in-out infinite alternate;
}

@keyframes fireflyGlow {
  0%   { box-shadow: 0 0 4px #ffe585, 0 0 10px rgba(255, 229, 133, 0.3); opacity: 0.55; }
  100% { box-shadow: 0 0 12px #ffe585, 0 0 24px rgba(255, 229, 133, 0.75); opacity: 1; }
}

.firefly-1 { left: 12vw; bottom: 18vh; animation: fireflyGlow 1.7s ease-in-out infinite alternate, fireflyDrift1 14s ease-in-out infinite; }
.firefly-2 { left: 22vw; bottom: 24vh; animation: fireflyGlow 1.4s ease-in-out infinite alternate -0.4s, fireflyDrift2 12s ease-in-out infinite -2s; }
.firefly-3 { left: 36vw; bottom: 14vh; animation: fireflyGlow 1.9s ease-in-out infinite alternate -0.7s, fireflyDrift3 16s ease-in-out infinite -4s; }
.firefly-4 { left: 48vw; bottom: 22vh; animation: fireflyGlow 1.5s ease-in-out infinite alternate -1.0s, fireflyDrift1 13s ease-in-out infinite -6s; }
.firefly-5 { left: 56vw; bottom: 12vh; animation: fireflyGlow 1.8s ease-in-out infinite alternate -1.3s, fireflyDrift2 15s ease-in-out infinite -8s; }
.firefly-6 { left: 66vw; bottom: 20vh; animation: fireflyGlow 1.6s ease-in-out infinite alternate -0.6s, fireflyDrift3 11s ease-in-out infinite -3s; }
.firefly-7 { left: 80vw; bottom: 16vh; animation: fireflyGlow 1.7s ease-in-out infinite alternate -1.5s, fireflyDrift1 17s ease-in-out infinite -9s; }
.firefly-8 { left: 90vw; bottom: 24vh; animation: fireflyGlow 1.5s ease-in-out infinite alternate -0.9s, fireflyDrift2 13s ease-in-out infinite -5s; }

@keyframes fireflyDrift1 {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(18px, -22px); }
  50%      { transform: translate(34px, 6px); }
  75%      { transform: translate(12px, 24px); }
}
@keyframes fireflyDrift2 {
  0%, 100% { transform: translate(0, 0); }
  30%      { transform: translate(-22px, -14px); }
  60%      { transform: translate(8px, -26px); }
  85%      { transform: translate(20px, 12px); }
}
@keyframes fireflyDrift3 {
  0%, 100% { transform: translate(0, 0); }
  20%      { transform: translate(14px, 18px); }
  45%      { transform: translate(-18px, 8px); }
  70%      { transform: translate(-6px, -22px); }
}

.mountains-far,
.mountains-mid,
.hills-mid,
.hills-front,
.ground,
.cottage-wrapper,
.windmills,
.haze {
  transition: filter 1.5s ease;
}

.butterflies {
  opacity: var(--butterflies-opacity);
  transition: opacity 1.5s ease;
}

body.mode-morning {
  --sky-top: #f4c8d8;
  --sky-band-mid: #ffd8c0;
  --sky-mid: #fde2c8;
  --sky-bottom: #ffead0;

  --sun-grad-1: rgba(255, 220, 180, 0.95);
  --sun-grad-2: rgba(255, 180, 140, 0.55);
  --sun-grad-3: rgba(255, 160, 120, 0);
  --sun-size: 130px;
  --sun-opacity: 0.85;

  --title-color: #6a4838;
  --title-shadow: rgba(255, 240, 220, 0.7);
  --subtitle-color: #8a6850;
}
body.mode-morning .mountains-far { filter: blur(0.6px) hue-rotate(-10deg) saturate(0.9) brightness(1.02); }
body.mode-morning .mountains-mid { filter: hue-rotate(-10deg) saturate(0.9) brightness(1.02); }
body.mode-morning .hills-mid,
body.mode-morning .hills-front,
body.mode-morning .ground       { filter: hue-rotate(-5deg) saturate(0.95) brightness(1.02); }

body.mode-evening {
  --sky-top: #c878a0;
  --sky-band-mid: #f29870;
  --sky-mid: #ffb878;
  --sky-bottom: #ffd07c;

  --sun-grad-1: rgba(255, 170, 90, 0.95);
  --sun-grad-2: rgba(255, 130, 70, 0.6);
  --sun-grad-3: rgba(240, 100, 60, 0);
  --sun-size: 200px;
  --sun-opacity: 1;

  --title-color: #5a2a18;
  --title-shadow: rgba(255, 200, 150, 0.7);
  --subtitle-color: #6a3a28;
}
body.mode-evening .mountains-far { filter: blur(0.6px) hue-rotate(20deg) saturate(0.9) brightness(0.85); }
body.mode-evening .mountains-mid { filter: hue-rotate(20deg) saturate(0.9) brightness(0.85); }
body.mode-evening .hills-mid,
body.mode-evening .hills-front,
body.mode-evening .ground       { filter: hue-rotate(15deg) saturate(0.95) brightness(0.88); }
body.mode-evening .cottage-wrapper { filter: hue-rotate(8deg) brightness(0.92); }
body.mode-evening .windmills    { filter: hue-rotate(15deg) brightness(0.9); }

body.mode-night {
  --sky-top: #0c1430;
  --sky-band-mid: #15203f;
  --sky-mid: #1c2548;
  --sky-bottom: #2a2c4a;

  --sun-opacity: 0;
  --moon-opacity: 0.95;
  --stars-opacity: 1;
  --fireflies-opacity: 1;
  --butterflies-opacity: 0;

  --title-color: #f5e8d0;
  --title-shadow: rgba(40, 30, 70, 0.8);
  --subtitle-color: #c0b89a;
}
body.mode-night .mountains-far { filter: blur(0.6px) brightness(0.4) saturate(0.6); }
body.mode-night .mountains-mid { filter: brightness(0.4) saturate(0.6); }
body.mode-night .hills-mid,
body.mode-night .hills-front,
body.mode-night .ground       { filter: brightness(0.42) saturate(0.65); }
body.mode-night .haze         { opacity: 0; }
body.mode-night .cottage-wrapper { filter: brightness(0.65); }
body.mode-night .windmills    { filter: brightness(0.55) saturate(0.6); }
body.mode-night .lantern      {
  filter:
    drop-shadow(0 0 32px rgba(255, 200, 110, 0.85))
    drop-shadow(0 0 60px rgba(255, 200, 110, 0.45))
    drop-shadow(0 4px 6px rgba(20, 10, 30, 0.55));
}
body.mode-night .frog-scene,
body.mode-night .stump,
body.mode-night .ferns,
body.mode-night .acorns,
body.mode-night .flowers,
body.mode-night .grass-blades,
body.mode-night .soot-sprites { filter: brightness(0.6) saturate(0.7); }
body.mode-night .cat          { filter: drop-shadow(0 8px 12px rgba(20, 30, 20, 0.45)) brightness(0.85); }
body.mode-night .totoro       { filter: drop-shadow(0 3px 4px rgba(40, 30, 20, 0.55)) brightness(0.55); }

#mode-badge {
  position: fixed;
  left: 14px;
  bottom: 14px;
  padding: 6px 12px;
  background: rgba(30, 24, 22, 0.62);
  color: #fff5d4;
  border-radius: 999px;
  font-family: "Quicksand", system-ui, -apple-system, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 100;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 245, 212, 0.18);
}

body.preview #mode-badge {
  opacity: 0.85;
  transform: translateY(0);
}

.audio-toggle {
  position: fixed;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255, 245, 212, 0.22);
  border-radius: 50%;
  background: rgba(30, 24, 22, 0.42);
  color: #fff5d4;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0.6;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.audio-toggle:hover,
.audio-toggle:focus-visible {
  opacity: 1;
  transform: scale(1.06);
  outline: none;
}

.audio-toggle:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 245, 212, 0.4);
}

.audio-toggle.is-on {
  background: rgba(60, 80, 60, 0.55);
  opacity: 0.9;
  box-shadow: 0 0 12px rgba(255, 245, 212, 0.18);
}

.audio-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}

.audio-toggle .audio-icon-on { display: none; }
.audio-toggle .audio-icon-off { display: block; }
.audio-toggle.is-on .audio-icon-on { display: block; }
.audio-toggle.is-on .audio-icon-off { display: none; }

body.mode-night .audio-toggle {
  background: rgba(20, 18, 30, 0.55);
  border-color: rgba(255, 245, 212, 0.18);
}

body.mode-night .audio-toggle.is-on {
  background: rgba(40, 50, 70, 0.6);
  box-shadow: 0 0 14px rgba(255, 220, 140, 0.22);
}

@media (max-width: 760px) {
  .cat-stage {
    right: 50%;
    transform: translateX(50%);
    width: 180px;
    height: 200px;
    bottom: 14vh;
  }

  .speech-bubble {
    right: auto;
    left: 50%;
    transform: translate(-50%, 8px) scale(0.9);
    bottom: 200px;
    max-width: 80vw;
    font-size: 1.3rem;
  }

  .speech-bubble.visible {
    transform: translate(-50%, 0) scale(1);
  }

  .speech-bubble::after {
    right: auto;
    left: 50%;
    margin-left: -11px;
  }

  .windmill-3 { display: none; }
  .sun { width: 110px; height: 110px; top: 8vh; right: 8vw; }

  .fern-3        { display: none; }
  .stump         { left: 4vw; width: 60px; }
  .frog-scene    { left: 50%; transform: translateX(-50%); width: 80px; bottom: 1vh; }
  .soot-sprite-3 { display: none; }
  .soot-sprite-4 { display: none; }
  .totoro        { width: 28px; left: 50vw; bottom: 38vh; }
  .acorn-2       { display: none; }

  .audio-toggle { top: 10px; right: 10px; width: 34px; height: 34px; }
  .audio-toggle svg { width: 16px; height: 16px; }
}

.cat .eye-inner {
  transform-box: fill-box;
  transform-origin: center;
  transform: translate(var(--eye-x, 0px), var(--eye-y, 0px));
  transition: transform 0.18s ease-out;
}

.cat.sleeping .eye {
  animation: none;
  transform: scaleY(0.05);
}

.cat.sleeping {
  animation: catBreathe 5.4s ease-in-out infinite, catCurl 0.6s ease-out forwards;
}

@keyframes catCurl {
  0%   { transform: translateY(0) rotate(0); }
  100% { transform: translateY(6px) rotate(-3deg); }
}

.cat-zzz {
  position: absolute;
  bottom: 200px;
  right: 28px;
  width: 60px;
  height: 80px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 6;
}

.cat-zzz.active { opacity: 1; }

.cat-zzz .z {
  position: absolute;
  font-family: "Caveat", cursive;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 4px rgba(80, 60, 40, 0.45);
  animation: zFloat 3.2s ease-in-out infinite;
}

.cat-zzz .z1 { left: 0;  bottom: 0;  font-size: 1.2rem; animation-delay: 0s; }
.cat-zzz .z2 { left: 14px; bottom: 18px; font-size: 1.6rem; animation-delay: -1.0s; }
.cat-zzz .z3 { left: 30px; bottom: 36px; font-size: 2.1rem; animation-delay: -2.0s; }

@keyframes zFloat {
  0%   { transform: translate(0, 0) rotate(-4deg); opacity: 0; }
  20%  { opacity: 0.95; }
  100% { transform: translate(20px, -50px) rotate(8deg); opacity: 0; }
}

.cat.pet-streak {
  filter:
    drop-shadow(0 8px 12px rgba(20, 30, 20, 0.25))
    drop-shadow(0 0 22px rgba(255, 200, 220, 0.85));
}

.cat.pet-streak .cat-tail {
  animation: tailWiggle 0.45s ease-in-out infinite;
}

.cat.yawning .cat-mouth-yawn { opacity: 1; }
.cat .cat-mouth-yawn { opacity: 0; transition: opacity 0.3s; }

.scene .frog-scene,
.scene .totoro,
.scene .lantern,
.scene .cottage,
.scene .mushroom,
.scene .soot-sprite {
  cursor: pointer;
  pointer-events: auto;
}

body:not(.mode-night) .scene .butterfly {
  cursor: pointer;
  pointer-events: auto;
}

body.mode-night .scene .moon,
body.mode-night .scene .stars .star {
  cursor: pointer;
  pointer-events: auto;
}

.scene .frog-scene.tap-hop { animation: frogHop 0.6s ease-out; }
@keyframes frogHop {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-22px) scale(1.04, 0.96); }
  70%  { transform: translateY(-4px) scale(0.98, 1.02); }
  100% { transform: translateY(0); }
}

.scene .totoro.tap-bob { animation: totoroBob 0.7s ease-out; }
@keyframes totoroBob {
  0%   { transform: scale(1)   rotate(0); }
  30%  { transform: scale(1.12) rotate(-4deg); }
  60%  { transform: scale(1.05) rotate(3deg); }
  100% { transform: scale(1)   rotate(0); }
}

.scene .lantern.tap-flare .lantern-flame { animation: lanternFlare 0.9s ease-out; }
.scene .lantern.tap-flare .lantern-halo  { animation: lanternHaloBurst 0.9s ease-out; }
@keyframes lanternFlare {
  0%   { transform: scaleY(1)    scaleX(1);    opacity: 0.85; }
  40%  { transform: scaleY(1.5)  scaleX(1.15); opacity: 1; }
  100% { transform: scaleY(1)    scaleX(1);    opacity: 0.85; }
}
@keyframes lanternHaloBurst {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.6); }
}

.scene .lantern .lantern-flame {
  transform-box: fill-box;
  transform-origin: center bottom;
}
.scene .lantern .lantern-halo {
  transform-box: fill-box;
  transform-origin: center;
}

.scene .mushroom.tap-poof { animation: mushroomPoof 0.6s ease-out; }
@keyframes mushroomPoof {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18) translateY(-3px); }
  100% { transform: scale(1); }
}

.scene .soot-sprite.tap-wobble { animation: sootWobble 0.7s ease-out; }
@keyframes sootWobble {
  0%   { transform: rotate(0)   scale(1); }
  20%  { transform: rotate(-12deg) scale(1.15); }
  50%  { transform: rotate(10deg)  scale(0.95); }
  80%  { transform: rotate(-5deg)  scale(1.05); }
  100% { transform: rotate(0)   scale(1); }
}

.scene .butterfly.tap-flutter { animation: butterflyFlash 0.9s ease-out; }
@keyframes butterflyFlash {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.4); }
  60%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

.scene .moon.tap-wink { animation: moonWink 0.9s ease-out; }
@keyframes moonWink {
  0%, 100% { transform: scaleY(1); }
  40%, 60% { transform: scaleY(0.08); }
}

.scene .star.tap-shine {
  animation: starShine 0.7s ease-out !important;
}
@keyframes starShine {
  0%   { transform: scale(1);    opacity: 1; }
  40%  { transform: scale(2.4);  opacity: 1; box-shadow: 0 0 14px white; }
  100% { transform: scale(1);    opacity: var(--star-opacity, 1); }
}

.scene .cottage.tap-warm { animation: cottageWarm 1.2s ease-out; }
@keyframes cottageWarm {
  0%, 100% { filter: var(--cottage-filter); }
  50%      { filter: var(--cottage-filter) drop-shadow(0 0 18px rgba(255, 210, 120, 0.65)); }
}

.shooting-stars-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.shooting-star {
  position: absolute;
  width: 4px;
  height: 4px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 8px white, 0 0 16px rgba(255, 255, 255, 0.6);
  transform: translate(0, 0);
  animation: shootingStar 1.6s ease-out forwards;
}

.shooting-star::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  width: 90px;
  height: 1.5px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.85));
  transform: translateY(-50%) rotate(0);
  border-radius: 1px;
  filter: blur(0.4px);
}

@keyframes shootingStar {
  0%   { transform: translate(0, 0)        rotate(35deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(-220px, 160px) rotate(35deg); opacity: 0; }
}

.hot-air-balloon {
  position: absolute;
  bottom: 60vh;
  left: -120px;
  width: 70px;
  height: auto;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 4px 8px rgba(40, 30, 30, 0.18));
}

.hot-air-balloon.flying {
  animation: balloonDrift 32s linear forwards;
}

@keyframes balloonDrift {
  0%   { left: -120px;  bottom: 55vh; opacity: 0; }
  6%   { opacity: 1; }
  25%  { bottom: 62vh; }
  50%  { bottom: 58vh; }
  75%  { bottom: 64vh; }
  94%  { opacity: 1; }
  100% { left: 110vw;   bottom: 60vh; opacity: 0; }
}

.totoro-walk {
  position: absolute;
  bottom: 14vh;
  left: -160px;
  width: 130px;
  height: auto;
  z-index: 7;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 8px 8px rgba(30, 30, 30, 0.4));
}

.totoro-walk.walking {
  animation: totoroStroll 12s linear forwards;
}

@keyframes totoroStroll {
  0%   { left: -160px; opacity: 0; transform: translateY(0); }
  6%   { opacity: 1; }
  10%  { transform: translateY(-3px); }
  20%  { transform: translateY(0); }
  30%  { transform: translateY(-3px); }
  40%  { transform: translateY(0); }
  50%  { transform: translateY(-3px); }
  60%  { transform: translateY(0); }
  70%  { transform: translateY(-3px); }
  80%  { transform: translateY(0); }
  90%  { transform: translateY(-3px); opacity: 1; }
  100% { left: 110vw; transform: translateY(0); opacity: 0; }
}

.hearts-layer,
.confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  overflow: hidden;
}

.heart {
  position: absolute;
  font-size: 1.8rem;
  color: #ff6b8e;
  text-shadow: 0 1px 3px rgba(120, 30, 60, 0.25);
  animation: heartFloat 2.6s ease-out forwards;
  pointer-events: none;
  user-select: none;
}

@keyframes heartFloat {
  0%   { transform: translate(0, 0) scale(0.6) rotate(-10deg); opacity: 0; }
  20%  { opacity: 1; transform: translate(var(--hx, 0px), -20px) scale(1.1) rotate(-2deg); }
  100% { transform: translate(var(--hx, 0px), -180px) scale(0.6) rotate(8deg); opacity: 0; }
}

.confetti-piece {
  position: absolute;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  animation: confettiFall 2.8s ease-in forwards;
  pointer-events: none;
}

@keyframes confettiFall {
  0%   { transform: translate(0, -10vh) rotate(0); opacity: 1; }
  100% { transform: translate(var(--cx, 0px), 110vh) rotate(720deg); opacity: 0.8; }
}

.smoke-burst .smoke-puff {
  animation-duration: 1.2s !important;
  transform: scale(2);
}

.visit-hud {
  position: fixed;
  bottom: 14px;
  right: 16px;
  font-family: "Quicksand", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--warm-brown);
  background: rgba(255, 245, 220, 0.6);
  border-radius: 12px;
  padding: 6px 12px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(80, 60, 40, 0.12);
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  text-transform: lowercase;
}

.visit-hud.visible {
  opacity: 0.85;
  transform: translateY(0);
}

body.mode-night .visit-hud {
  background: rgba(40, 50, 80, 0.55);
  color: #e8eef5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

body.mode-evening .visit-hud {
  background: rgba(255, 220, 180, 0.55);
  color: #5a3a25;
}

@media (max-width: 720px) {
  .visit-hud {
    bottom: 8px;
    right: 8px;
    font-size: 0.7rem;
    padding: 4px 9px;
  }

  .hot-air-balloon { width: 50px; }
  .totoro-walk     { width: 95px; bottom: 12vh; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .windmill-blades {
    animation: spin 60s linear infinite !important;
  }
}