:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; overflow: hidden; background: #0b1709; }
body { font-family: Arial, Helvetica, sans-serif; }

.scene {
  --mx: 0;
  --my: 0;
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  background: #14220d;
}

.world {
  position: absolute;
  z-index: -8;
  left: -2.5%;
  top: -2.5%;
  width: 105%;
  height: 105%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: translate(calc(var(--mx) * -11px), calc(var(--my) * -8px)) scale(1.025);
  filter: saturate(1.04) contrast(1.02);
  animation: scene-arrive 1.45s cubic-bezier(.2,.75,.2,1) both;
  transition: transform .18s ease-out;
  user-select: none;
}

.sunwash {
  position: absolute;
  z-index: -6;
  inset: -20% 35% 45% -20%;
  background: radial-gradient(ellipse, rgba(255, 221, 128, .21), transparent 68%);
  filter: blur(35px);
  mix-blend-mode: screen;
  animation: breathe 7s ease-in-out infinite alternate;
  pointer-events: none;
}

.rays {
  position: absolute;
  z-index: -5;
  inset: -12% 37% 25% -10%;
  transform: skewX(-17deg) translateX(calc(var(--mx) * -8px));
  background: repeating-linear-gradient(97deg, transparent 0 10%, rgba(255, 230, 164, .055) 11% 15%, transparent 16% 28%);
  filter: blur(10px);
  mix-blend-mode: screen;
  pointer-events: none;
}

.vignette {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 9, 3, .16), transparent 26%, transparent 70%, rgba(3, 8, 3, .5)),
    radial-gradient(ellipse at center, transparent 42%, rgba(2, 7, 2, .33) 100%);
  pointer-events: none;
}

.motes, .cheeseRain {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.motes i {
  position: absolute;
  left: var(--left);
  bottom: -3%;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: #ffe184;
  box-shadow: 0 0 6px 2px rgba(255, 205, 67, .7), 0 0 18px rgba(255, 188, 35, .45);
  opacity: 0;
  animation: float var(--duration) linear infinite var(--delay);
}

.cheeseRain { opacity: .62; }
.cheeseRain i {
  position: absolute;
  left: var(--left);
  top: -10%;
  font-style: normal;
  font-size: clamp(14px, 1.6vw, 23px);
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .35));
  animation: cheese-fall var(--duration) linear infinite var(--delay);
}

.leaves {
  position: absolute;
  z-index: 3;
  width: 24vmax;
  height: 35vmax;
  bottom: -13vmax;
  filter: blur(2px) drop-shadow(0 10px 18px rgba(0,0,0,.35));
  opacity: .58;
  pointer-events: none;
}

.leaves::before, .leaves::after {
  content: "";
  position: absolute;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 12% 70% 16% 65%;
  background: linear-gradient(145deg, #3f6422, #172d11 70%);
  box-shadow: 8vmax -5vmax 0 -1vmax #31521d, 15vmax -1vmax 0 -2vmax #52782a, 4vmax -13vmax 0 -2vmax #274818;
}

.leaves-left { left: -8vmax; transform: translate(calc(var(--mx) * 18px), calc(var(--my) * 10px)) rotate(8deg); }
.leaves-right { right: -12vmax; transform: translate(calc(var(--mx) * 24px), calc(var(--my) * 13px)) rotate(-35deg) scale(.85); }
.leaves-right::before, .leaves-right::after { background: linear-gradient(145deg, #416522, #142b0e 70%); }
.leaves::after { left: 38%; top: 25%; transform: rotate(80deg) scale(.8); }

.ground-haze {
  position: absolute;
  z-index: 2;
  inset: auto -10% -16% -10%;
  height: 30%;
  background: radial-gradient(ellipse, rgba(171, 193, 112, .12), transparent 66%);
  filter: blur(36px);
  pointer-events: none;
}

footer {
  position: absolute;
  z-index: 6;
  bottom: max(15px, env(safe-area-inset-bottom));
  left: 50%;
  translate: -50% 0;
  width: max-content;
  max-width: calc(100% - 30px);
  padding: 8px 12px;
  color: rgba(255, 241, 202, .82);
  background: rgba(9, 18, 8, .22);
  border: 1px solid rgba(255, 224, 145, .14);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  font: 650 clamp(9px, 1.15vw, 11px)/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 8px #000;
}

@keyframes scene-arrive { from { opacity: 0; transform: scale(1.09); filter: saturate(.75) blur(3px); } }
@keyframes breathe { to { opacity: .72; transform: scale(1.08) translate(2%, 2%); } }
@keyframes float {
  0% { opacity: 0; transform: translateY(0) translateX(0) scale(.55); }
  12%, 78% { opacity: .88; }
  100% { opacity: 0; transform: translateY(-108svh) translateX(38px) scale(1.25); }
}
@keyframes cheese-fall { to { transform: translateY(120svh) rotate(calc(var(--rotate) + 480deg)); } }

@media (max-aspect-ratio: 3/4) {
  .world { left: -4%; width: 108%; object-position: 68% center; }
  .sunwash { inset: -15% 10% 52% -35%; }
  .rays { right: 12%; }
  .cheeseRain { opacity: .42; }
  .leaves { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .world, .leaves-left, .leaves-right { transform: none; }
}