/* =========================================================
   ElsElysion – animated sky background
   Shared by the website (behind header + content) and the
   forum (the banner strip under the top bar).
   - The sky image slowly zooms/pans (Ken Burns).
   - Three cloud layers drift sideways and loop seamlessly
     (each layer moves exactly one tile width per cycle).
   - Everything stops for users with "reduce motion".
   ========================================================= */

.ee-sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #a9bde8;
}

.ee-sky__img {
  position: absolute;
  inset: -4%;
  background: #a9bde8 url("../img/background.jpg") center 40% / cover no-repeat;
  animation: ee-sky-drift 40s ease-in-out infinite alternate;
  will-change: transform;
}

.ee-cloud {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  background-repeat: repeat-x;
}

/* Far layer: thin, faint clouds at the top, drifting left */
.ee-cloud--far {
  top: 0;
  height: 280px;
  opacity: .55;
  filter: blur(10px);
  background-image:
    radial-gradient(ellipse 240px 70px at 220px 90px, #fff 0%, rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 320px 90px at 700px 60px, #f4eeff 0%, rgba(244,238,255,0) 70%),
    radial-gradient(ellipse 200px 60px at 1150px 120px, #fff 0%, rgba(255,255,255,0) 70%);
  background-size: 1400px 280px;
  animation: ee-cloud-far 160s linear infinite;
}

/* Mid layer: long wisps across the middle */
.ee-cloud--mid {
  top: 38%;
  height: 200px;
  opacity: .4;
  filter: blur(14px);
  background-image:
    radial-gradient(ellipse 380px 40px at 300px 100px, #fff 0%, rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 260px 30px at 1000px 70px, #fff 0%, rgba(255,255,255,0) 70%);
  background-size: 1600px 200px;
  animation: ee-cloud-mid 200s linear infinite;
}

/* Near layer: big puffy "sea of clouds" at the bottom, drifting right */
.ee-cloud--near {
  bottom: -40px;
  height: 340px;
  opacity: .9;
  filter: blur(8px);
  background-image:
    radial-gradient(ellipse 260px 120px at 200px 230px, #fff 0%, rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 220px 100px at 470px 260px, #f1ecff 0%, rgba(241,236,255,0) 72%),
    radial-gradient(ellipse 300px 130px at 780px 240px, #fff 0%, rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 180px 90px at 1010px 270px, #e9e4ff 0%, rgba(233,228,255,0) 72%);
  background-size: 1200px 340px;
  animation: ee-cloud-near 110s linear infinite;
}

@keyframes ee-sky-drift {
  from { transform: scale(1) translate3d(-1.2%, 0, 0); }
  to   { transform: scale(1.07) translate3d(1.2%, -.8%, 0); }
}
@keyframes ee-cloud-far  { from { background-position: 0 0; } to { background-position: -1400px 0; } }
@keyframes ee-cloud-mid  { from { background-position: 0 0; } to { background-position: -1600px 0; } }
@keyframes ee-cloud-near { from { background-position: 0 0; } to { background-position: 1200px 0; } }

@media (prefers-reduced-motion: reduce) {
  .ee-sky__img,
  .ee-cloud { animation: none; }
}