:root {
  color-scheme: dark;
  --night: #050607;
  --gold: #d8b56e;
  --moon-size: 124px;
}

* { box-sizing: border-box; }

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

body {
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 56% 38% at 74% 17%, rgba(92, 75, 45, .105), transparent 80%),
    radial-gradient(ellipse 75% 28% at 48% 56%, rgba(77, 61, 37, .075), transparent 86%),
    linear-gradient(160deg, #08090b 0%, #050607 52%, #070809 100%);
}

.canvas-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.blessing-layer { z-index: 1; }
.poem-layer { z-index: 4; }

.moon {
  position: absolute;
  z-index: 2;
  top: clamp(42px, 10.3dvh, 100px);
  right: clamp(36px, 12vw, 180px);
  width: var(--moon-size);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 14% 10% at 38% 32%, rgba(139, 133, 111, .12), transparent 100%),
    radial-gradient(ellipse 17% 13% at 63% 56%, rgba(156, 146, 118, .105), transparent 100%),
    radial-gradient(ellipse 11% 8% at 42% 67%, rgba(148, 140, 113, .11), transparent 100%),
    radial-gradient(circle at 37% 29%, #fffaf0 0%, #fbf1d9 33%, #e9d9b5 67%, #c9b489 100%);
  box-shadow:
    inset -7px -9px 15px rgba(103, 77, 42, .2),
    inset 4px 5px 12px rgba(255, 255, 244, .56),
    0 0 20px rgba(249, 224, 168, .34),
    0 0 55px rgba(233, 190, 112, .14),
    0 0 125px rgba(216, 174, 100, .075);
  animation: moon-breathe 7.5s ease-in-out infinite alternate;
}

.moon::before {
  content: "";
  position: absolute;
  inset: -42%;
  border-radius: 50%;
  z-index: -1;
  background: radial-gradient(circle, rgba(238, 207, 143, .13) 0%, rgba(238, 207, 143, .045) 35%, transparent 69%);
}

.moon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: .52;
  background:
    radial-gradient(ellipse 8% 6% at 69% 29%, rgba(126, 119, 99, .15), transparent 100%),
    radial-gradient(ellipse 15% 8% at 31% 53%, rgba(128, 118, 94, .09), transparent 100%),
    radial-gradient(ellipse 9% 12% at 57% 78%, rgba(116, 109, 94, .08), transparent 100%);
  filter: blur(2px);
}

.poem-halo {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 53%;
  width: min(88vw, 850px);
  height: min(24vh, 195px);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(180, 125, 58, .085), rgba(118, 81, 39, .022) 55%, transparent 75%);
  pointer-events: none;
}

.scene-vignette {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 86% 82% at 50% 48%, transparent 45%, rgba(0, 0, 0, .24) 100%);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes moon-breathe {
  from { filter: brightness(.97); }
  to { filter: brightness(1.055); }
}

@media (max-height: 480px) and (orientation: landscape) {
  .moon { top: 9vh; right: 10vw; }
  .poem-halo { top: 58%; }
}

@media (prefers-reduced-motion: reduce) {
  .moon { animation-duration: 14s; }
}