:root {
  --paper: #f4e2c5;
  --ink: #2c1a11;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: "Noto Serif SC", serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 14%, rgba(255, 178, 78, 0.62), transparent 38%),
    radial-gradient(circle at 82% 18%, rgba(235, 111, 42, 0.32), transparent 30%),
    radial-gradient(circle at 50% 88%, rgba(214, 132, 40, 0.24), transparent 34%),
    var(--paper);
  overflow: hidden;
}

.ambient {
  position: fixed;
  inset: -20vmax;
  background:
    conic-gradient(from 0deg at 40% 60%, rgba(241, 153, 75, 0.3), rgba(214, 95, 46, 0.22), rgba(248, 215, 170, 0.2), rgba(241, 153, 75, 0.3));
  filter: blur(32px);
  animation: drift 18s ease-in-out infinite alternate;
  pointer-events: none;
}

.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
}

#scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.title {
  position: absolute;
  top: 1rem;
  left: 1rem;
  margin: 0;
  z-index: 2;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1;
  letter-spacing: 0.02em;
  font-family: "Abril Fatface", serif;
  color: #6e260f;
  text-shadow: 0 4px 14px rgba(255, 222, 172, 0.8);
  animation: rise 700ms cubic-bezier(0.22, 0.75, 0.2, 1);
}

@keyframes drift {
  from {
    transform: rotate(-2deg) scale(1);
  }
  to {
    transform: rotate(2deg) scale(1.08);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 640px) {
  .title {
    top: 0.75rem;
    left: 0.75rem;
  }
}