*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  background: #1a2418;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── sparkles ───────────────────────────────────────── */

#sparkles {
  position: absolute;
  inset: 0;
  filter: blur(14px);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* ── scene ─────────────────────────────────────────── */

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

.layer {
  position: absolute;
  border-radius: 50%;
  will-change: transform, opacity;
}

/* sky — big pale blue-grey ellipse, top half */
.sky {
  width: 160%;
  height: 75%;
  top: -20%;
  left: -30%;
  background: radial-gradient(ellipse, #9ab8cc 0%, #7a9db5 40%, #4a7090 75%, transparent 100%);
  filter: blur(90px);
  opacity: 0.75;
  animation: a-sky 55s ease-in-out infinite alternate;
}

/* warm golden hour blush, upper-right */
.warm {
  width: 70%;
  height: 45%;
  top: 0%;
  right: -10%;
  background: radial-gradient(ellipse, #c9a060 0%, #b8864a 40%, transparent 75%);
  filter: blur(100px);
  opacity: 0.18;
  animation: a-warm 70s ease-in-out infinite alternate;
}

/* fell mass, left shoulder */
.fell-l {
  width: 75%;
  height: 60%;
  top: 28%;
  left: -20%;
  background: radial-gradient(ellipse, #253320 0%, #3a4a30 55%, transparent 100%);
  filter: blur(65px);
  opacity: 1;
  animation: a-fl 48s ease-in-out infinite alternate;
}

/* fell mass, right shoulder */
.fell-r {
  width: 70%;
  height: 60%;
  top: 22%;
  right: -18%;
  background: radial-gradient(ellipse, #1e2e1a 0%, #324228 55%, transparent 100%);
  filter: blur(65px);
  opacity: 1;
  animation: a-fr 62s ease-in-out infinite alternate;
}

/* central fell — darkest, pushes down toward the lake */
.fell-c {
  width: 90%;
  height: 45%;
  top: 38%;
  left: 5%;
  background: radial-gradient(ellipse, #141e12 0%, #1e2e1a 60%, transparent 100%);
  filter: blur(55px);
  opacity: 0.95;
  animation: a-fc 75s ease-in-out infinite alternate;
}

/* heather — subtle purple bloom in the fells */
.heather {
  width: 55%;
  height: 35%;
  top: 42%;
  left: 22%;
  background: radial-gradient(ellipse, #5a4868 0%, #6b587a 45%, transparent 80%);
  filter: blur(85px);
  opacity: 0.22;
  animation: a-heather 90s ease-in-out infinite alternate;
}

/* lake — steel blue-green, bottom third */
.lake {
  width: 100%;
  height: 55%;
  bottom: -10%;
  left: 0%;
  background: radial-gradient(ellipse, #3a5868 0%, #4a6878 40%, #2a4050 70%, transparent 100%);
  filter: blur(75px);
  opacity: 0.85;
  animation: a-lake 80s ease-in-out infinite alternate;
}

/* shimmer — light reflected on water */
.shimmer {
  width: 45%;
  height: 22%;
  bottom: 18%;
  left: 28%;
  background: radial-gradient(ellipse, #90b8c8 0%, #6898b0 45%, transparent 75%);
  filter: blur(55px);
  mix-blend-mode: screen;
  opacity: 0.35;
  animation: a-shimmer 38s ease-in-out infinite alternate;
}

/* mist — pale veil at the fell/lake boundary */
.mist {
  width: 130%;
  height: 28%;
  top: 48%;
  left: -15%;
  background: radial-gradient(ellipse, rgba(200,215,205,0.12) 0%, rgba(180,200,190,0.04) 60%, transparent 100%);
  filter: blur(110px);
  animation: a-mist 100s ease-in-out infinite alternate;
}

/* ── keyframes ──────────────────────────────────────── */

@keyframes a-sky {
  0%   { transform: translate(0%,    0%)    scale(1);    }
  40%  { transform: translate(2%,    3%)    scale(1.03); }
  100% { transform: translate(-1.5%, -2%)   scale(0.97); }
}
@keyframes a-warm {
  0%   { transform: translate(0%, 0%)   scale(1);    opacity: 0.18; }
  50%  { transform: translate(-6%, 4%)  scale(1.12); opacity: 0.10; }
  100% { transform: translate(4%, -3%)  scale(0.88); opacity: 0.25; }
}
@keyframes a-fl {
  0%   { transform: translate(0%, 0%)  scale(1);    }
  100% { transform: translate(3%, -2%) scale(1.04); }
}
@keyframes a-fr {
  0%   { transform: translate(0%, 0%)   scale(1);    }
  100% { transform: translate(-4%, -1%) scale(1.03); }
}
@keyframes a-fc {
  0%   { transform: translate(0%,  0%)  scale(1);    }
  50%  { transform: translate(2%,  1%)  scale(1.02); }
  100% { transform: translate(-1%, -1%) scale(0.98); }
}
@keyframes a-heather {
  0%   { transform: translate(0%,   0%)  scale(1);    opacity: 0.22; }
  50%  { transform: translate(6%,  -4%)  scale(1.2);  opacity: 0.32; }
  100% { transform: translate(-4%,  3%)  scale(0.85); opacity: 0.12; }
}
@keyframes a-lake {
  0%   { transform: translate(0%,  0%)  scale(1);    }
  100% { transform: translate(-2%, 2%)  scale(1.03); }
}
@keyframes a-shimmer {
  0%   { transform: translate(0%,   0%)  scale(1);    opacity: 0.35; }
  25%  { transform: translate(4%,  -2%)  scale(1.15); opacity: 0.45; }
  75%  { transform: translate(-3%,  3%)  scale(0.88); opacity: 0.18; }
  100% { transform: translate(2%,   1%)  scale(1.05); opacity: 0.38; }
}
@keyframes a-mist {
  0%   { transform: translate(0%, 0%)  scale(1);    }
  100% { transform: translate(3%, 1%)  scale(1.06); }
}

/* ── type ───────────────────────────────────────────── */

main {
  position: relative;
  z-index: 10;
  text-align: center;
  pointer-events: none;
}

h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: normal;
  letter-spacing: 0.08em;
  color: #e8dfc8;
  text-shadow:
    0 1px 40px rgba(0, 0, 0, 0.6),
    0 0 80px rgba(0, 0, 0, 0.3);
}

.letter {
  display: inline-block;
  opacity: 0;
  animation: letter-in 0.65s ease-out forwards;
}

@keyframes letter-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}