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

body {
  background: #0d0d1a;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: sans-serif;
}

/* ═══════════════════════════════════════
   SCENE CONTAINER
═══════════════════════════════════════ */
.scene {
  position: relative;
  width: min(900px, 95vw);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  border: 2px solid rgba(255,220,160,0.12);
  box-shadow: 0 0 80px rgba(0,0,0,0.6);
}

/* ─── Cycle timing (20s total) ───
   0→25% = dawn   25→50% = day   50→75% = dusk   75→100% = night */

/* ═══════════════════════════════════════
   SKY
═══════════════════════════════════════ */
.sky {
  position: absolute;
  inset: 0;
  animation: skyColor 20s ease-in-out infinite;
}

@keyframes skyColor {
  0%    { background: linear-gradient(180deg,#1a0a3a 0%,#3d1c60 50%,#c0607a 100%); } /* pre-dawn */
  15%   { background: linear-gradient(180deg,#e07050 0%,#f59060 40%,#f9c07a 100%); } /* sunrise */
  35%   { background: linear-gradient(180deg,#5bbae8 0%,#82cff4 50%,#c8e8f8 100%); } /* midday  */
  50%   { background: linear-gradient(180deg,#5bbae8 0%,#82cff4 50%,#c8e8f8 100%); } /* midday  */
  65%   { background: linear-gradient(180deg,#e07050 0%,#f08060 40%,#f6b070 100%); } /* sunset  */
  80%   { background: linear-gradient(180deg,#1a0a3a 0%,#2a1050 50%,#6a2840 100%); } /* dusk    */
  100%  { background: linear-gradient(180deg,#06060f 0%,#0c0c20 50%,#1a0a3a 100%); } /* night   */
}

/* ═══════════════════════════════════════
   STARS
═══════════════════════════════════════ */
.stars {
  position: absolute;
  inset: 0;
  animation: starFade 20s ease-in-out infinite;
}
.stars span {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #fff;
  animation: twinkle 2.5s ease-in-out infinite alternate;
}
/* Scatter stars manually */
.stars span:nth-child(1)  { top:5%;  left:10%; animation-delay:0s;    width:2px; height:2px; }
.stars span:nth-child(2)  { top:8%;  left:25%; animation-delay:.4s;  }
.stars span:nth-child(3)  { top:3%;  left:45%; animation-delay:.8s;   width:2px; height:2px; }
.stars span:nth-child(4)  { top:12%; left:62%; animation-delay:.2s;  }
.stars span:nth-child(5)  { top:6%;  left:78%; animation-delay:.6s;   width:2px; height:2px; }
.stars span:nth-child(6)  { top:15%; left:88%; animation-delay:1s;   }
.stars span:nth-child(7)  { top:20%; left:5%;  animation-delay:.3s;   width:2px; height:2px; }
.stars span:nth-child(8)  { top:18%; left:35%; animation-delay:.9s;  }
.stars span:nth-child(9)  { top:9%;  left:55%; animation-delay:1.2s;  width:2px; height:2px; }
.stars span:nth-child(10) { top:22%; left:70%; animation-delay:.5s;  }
.stars span:nth-child(11) { top:4%;  left:90%; animation-delay:1.4s;  width:2px; height:2px; }
.stars span:nth-child(12) { top:16%; left:20%; animation-delay:.7s;  }
.stars span:nth-child(13) { top:25%; left:50%; animation-delay:1.1s;  width:2px; height:2px; }
.stars span:nth-child(14) { top:10%; left:15%; animation-delay:.15s; }
.stars span:nth-child(15) { top:7%;  left:95%; animation-delay:.85s;  width:2px; height:2px; }

@keyframes starFade {
  0%   { opacity:.9; } /* pre-dawn */
  20%  { opacity:0;  } /* sunrise  */
  70%  { opacity:0;  } /* sunset   */
  85%  { opacity:1;  } /* night    */
  100% { opacity:.9; }
}
@keyframes twinkle {
  from { opacity:.4; transform:scale(1);   }
  to   { opacity:1;  transform:scale(1.4); }
}

/* ═══════════════════════════════════════
   SUN / MOON ORB
═══════════════════════════════════════ */
.orb {
  position: absolute;
  width: 80px; height: 80px;
  border-radius: 50%;
  left: 50%;
  transform: translateX(-50%);
  animation: orbTravel 20s ease-in-out infinite, orbStyle 20s ease-in-out infinite;
}

@keyframes orbTravel {
  0%   { top: 75%; } /* below horizon pre-dawn */
  15%  { top: 28%; } /* sunrise peek            */
  40%  { top: 10%; } /* high noon               */
  60%  { top: 22%; } /* afternoon               */
  72%  { top: 28%; } /* setting                 */
  80%  { top: 68%; } /* below horizon           */
  88%  { top: 12%; } /* moon high               */
  100% { top: 12%; }
}

@keyframes orbStyle {
  0%   { background:radial-gradient(circle at 40% 40%,#fff5cc,#f2b800 50%,#e07000 80%);
         box-shadow:0 0 40px 20px rgba(240,160,40,.5);
         width:80px; height:80px; }
  15%  { background:radial-gradient(circle at 40% 40%,#fff5cc,#f2b800 50%,#e07000 80%);
         box-shadow:0 0 60px 30px rgba(240,160,40,.6); }
  35%  { background:radial-gradient(circle at 40% 40%,#fffce0,#f5e040 40%,#f0b800 70%);
         box-shadow:0 0 80px 40px rgba(255,220,60,.5);
         width:80px; height:80px; }
  65%  { background:radial-gradient(circle at 40% 40%,#fff0cc,#f0a020 50%,#c06010 80%);
         box-shadow:0 0 60px 30px rgba(220,100,20,.6); }
  78%  { background:radial-gradient(circle at 40% 40%,#fff0cc,#f0a020 50%,#c06010 80%);
         box-shadow:0 0 30px 15px rgba(220,100,20,.3); }
  85%  { background:radial-gradient(circle at 35% 35%,#ffffff,#e8eef8 50%,#b0c8e8 80%);
         box-shadow:0 0 40px 20px rgba(180,210,255,.4);
         width:70px; height:70px; }
  100% { background:radial-gradient(circle at 35% 35%,#ffffff,#e8eef8 50%,#b0c8e8 80%);
         box-shadow:0 0 40px 20px rgba(180,210,255,.4);
         width:70px; height:70px; }
}

/* ═══════════════════════════════════════
   CLOUDS
═══════════════════════════════════════ */
.cloud {
  position: absolute;
  border-radius: 50px;
  animation: cloudDrift 20s ease-in-out infinite, cloudFade 20s ease-in-out infinite;
}
.cloud::before, .cloud::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: inherit;
}

.cl-a {
  width:160px; height:44px; top:18%; left:5%;
  background:#fff;
  animation-duration: 22s, 20s;
  animation-delay: 0s, 0s;
}
.cl-a::before { width:80px; height:80px; top:-40px; left:22px; }
.cl-a::after  { width:60px; height:60px; top:-30px; left:70px; }

.cl-b {
  width:120px; height:34px; top:14%; left:55%;
  background:#fff;
  animation-duration: 28s, 20s;
  animation-delay: 1s, 0s;
}
.cl-b::before { width:62px; height:62px; top:-32px; left:16px; }
.cl-b::after  { width:48px; height:48px; top:-24px; left:52px; }

.cl-c {
  width:200px; height:54px; top:22%; right:8%;
  background:#fff;
  animation-duration: 18s, 20s;
  animation-delay: .5s, 0s;
}
.cl-c::before { width:100px; height:100px; top:-50px; left:28px; }
.cl-c::after  { width:76px;  height:76px;  top:-38px; left:90px; }

@keyframes cloudDrift {
  0%   { transform:translateX(0);    }
  50%  { transform:translateX(50px); }
  100% { transform:translateX(0);    }
}
@keyframes cloudFade {
  0%   { opacity:.5; }  /* pre-dawn soft */
  18%  { opacity:.95; } /* day clear     */
  60%  { opacity:.9;  }
  78%  { opacity:.4;  } /* night fade    */
  100% { opacity:.5;  }
}

/* ═══════════════════════════════════════
   MOUNTAINS BACK
═══════════════════════════════════════ */
.mtn {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.mtn-back {
  height: 55%;
  background:
    radial-gradient(ellipse 28% 22% at 22% 100%,  var(--mc) 0%,transparent 70%),
    radial-gradient(ellipse 30% 25% at 50% 100%,  var(--mc) 0%,transparent 70%),
    radial-gradient(ellipse 24% 20% at 76% 100%,  var(--mc) 0%,transparent 70%),
    radial-gradient(ellipse 20% 18% at 88% 100%,  var(--mc) 0%,transparent 70%);
  animation: mtnBackColor 20s ease-in-out infinite;
}
.mtn-mid {
  height: 42%;
  background:
    radial-gradient(ellipse 26% 24% at 15% 100%, var(--mmc) 0%,transparent 65%),
    radial-gradient(ellipse 30% 28% at 42% 100%, var(--mmc) 0%,transparent 65%),
    radial-gradient(ellipse 26% 24% at 68% 100%, var(--mmc) 0%,transparent 65%),
    radial-gradient(ellipse 22% 20% at 92% 100%, var(--mmc) 0%,transparent 65%);
  animation: mtnMidColor 20s ease-in-out infinite;
}

@keyframes mtnBackColor {
  0%,100% { background:
    radial-gradient(ellipse 28% 22% at 22% 100%,#5a4880 0%,transparent 70%),
    radial-gradient(ellipse 30% 25% at 50% 100%,#6a5890 0%,transparent 70%),
    radial-gradient(ellipse 24% 20% at 76% 100%,#5c4a82 0%,transparent 70%),
    radial-gradient(ellipse 20% 18% at 88% 100%,#584478 0%,transparent 70%); }
  18%      { background:
    radial-gradient(ellipse 28% 22% at 22% 100%,#9080b8 0%,transparent 70%),
    radial-gradient(ellipse 30% 25% at 50% 100%,#a090c8 0%,transparent 70%),
    radial-gradient(ellipse 24% 20% at 76% 100%,#9282ba 0%,transparent 70%),
    radial-gradient(ellipse 20% 18% at 88% 100%,#8878b0 0%,transparent 70%); }
  45%      { background:
    radial-gradient(ellipse 28% 22% at 22% 100%,#7880a8 0%,transparent 70%),
    radial-gradient(ellipse 30% 25% at 50% 100%,#8890b8 0%,transparent 70%),
    radial-gradient(ellipse 24% 20% at 76% 100%,#7a82aa 0%,transparent 70%),
    radial-gradient(ellipse 20% 18% at 88% 100%,#7078a0 0%,transparent 70%); }
  68%      { background:
    radial-gradient(ellipse 28% 22% at 22% 100%,#705068 0%,transparent 70%),
    radial-gradient(ellipse 30% 25% at 50% 100%,#806078 0%,transparent 70%),
    radial-gradient(ellipse 24% 20% at 76% 100%,#72526a 0%,transparent 70%),
    radial-gradient(ellipse 20% 18% at 88% 100%,#684860 0%,transparent 70%); }
}

@keyframes mtnMidColor {
  0%,100% { background:
    radial-gradient(ellipse 26% 24% at 15% 100%,#2e2848 0%,transparent 65%),
    radial-gradient(ellipse 30% 28% at 42% 100%,#252040 0%,transparent 65%),
    radial-gradient(ellipse 26% 24% at 68% 100%,#2c2646 0%,transparent 65%),
    radial-gradient(ellipse 22% 20% at 92% 100%,#2a2442 0%,transparent 65%); }
  18%      { background:
    radial-gradient(ellipse 26% 24% at 15% 100%,#4a4868 0%,transparent 65%),
    radial-gradient(ellipse 30% 28% at 42% 100%,#3d3b60 0%,transparent 65%),
    radial-gradient(ellipse 26% 24% at 68% 100%,#484668 0%,transparent 65%),
    radial-gradient(ellipse 22% 20% at 92% 100%,#464460 0%,transparent 65%); }
  45%      { background:
    radial-gradient(ellipse 26% 24% at 15% 100%,#3a4060 0%,transparent 65%),
    radial-gradient(ellipse 30% 28% at 42% 100%,#303858 0%,transparent 65%),
    radial-gradient(ellipse 26% 24% at 68% 100%,#383e5e 0%,transparent 65%),
    radial-gradient(ellipse 22% 20% at 92% 100%,#363c5c 0%,transparent 65%); }
  68%      { background:
    radial-gradient(ellipse 26% 24% at 15% 100%,#2e2036 0%,transparent 65%),
    radial-gradient(ellipse 30% 28% at 42% 100%,#261830 0%,transparent 65%),
    radial-gradient(ellipse 26% 24% at 68% 100%,#2c1e34 0%,transparent 65%),
    radial-gradient(ellipse 22% 20% at 92% 100%,#281a30 0%,transparent 65%); }
}

/* ═══════════════════════════════════════
   TREES
═══════════════════════════════════════ */
.trees {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.trees-back  { height: 35%; }
.trees-front { height: 45%; }

.tree-group-back polygon  { animation: treeBackColor  20s ease-in-out infinite; }
.tree-group-front polygon { animation: treeFrontColor 20s ease-in-out infinite; }

@keyframes treeBackColor {
  0%,100% { fill:#1e1632; }
  20%     { fill:#2e2848; }
  45%     { fill:#252044; }
  68%     { fill:#1a1028; }
}
@keyframes treeFrontColor {
  0%,100% { fill:#100c22; }
  20%     { fill:#1c1830; }
  45%     { fill:#181428; }
  68%     { fill:#0e0a1c; }
}

/* ═══════════════════════════════════════
   GROUND
═══════════════════════════════════════ */
.ground {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 8%;
  animation: groundColor 20s ease-in-out infinite;
}
@keyframes groundColor {
  0%,100% { background:linear-gradient(180deg,#0e0a1c,#06040e); }
  20%     { background:linear-gradient(180deg,#1e1840,#100e28); }
  45%     { background:linear-gradient(180deg,#1a1838,#0e0c22); }
  68%     { background:linear-gradient(180deg,#0c0818,#06040e); }
}

/* ═══════════════════════════════════════
   BIRD
═══════════════════════════════════════ */
.bird-wrap {
  position: absolute;
  top: 30%;
  animation: birdFly 14s linear infinite, birdHeight 7s ease-in-out infinite, birdDayVisible 20s ease-in-out infinite;
}
.bird { display:flex; gap:2px; }
.bird i {
  display: block;
  width: 22px; height: 7px;
  border-top: 3px solid #1c1a35;
  border-radius: 50% 50% 0 0 / 7px 7px 0 0;
  font-style: normal;
}
.bird i:first-child {
  transform-origin: right center;
  animation: wingFlap 0.55s ease-in-out infinite alternate;
}
.bird i:last-child {
  transform-origin: left center;
  animation: wingFlap 0.55s ease-in-out infinite alternate-reverse;
}

@keyframes wingFlap {
  from { transform:rotate(-18deg); }
  to   { transform:rotate(16deg);  }
}
@keyframes birdFly {
  from { left:-60px; }
  to   { left:110%;  }
}
@keyframes birdHeight {
  0%,100% { margin-top:0;    }
  50%     { margin-top:-18px; }
}
@keyframes birdDayVisible {
  0%   { opacity:0; }
  20%  { opacity:1; }
  70%  { opacity:1; }
  80%  { opacity:0; }
  100% { opacity:0; }
}

/* ═══════════════════════════════════════
   FIREFLIES (night only)
═══════════════════════════════════════ */
.fireflies { position:absolute; inset:0; pointer-events:none; }
.fireflies span {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #c8ff80;
  animation: fireflyFloat 4s ease-in-out infinite, fireflyBlink 2s ease-in-out infinite, fireflyNight 20s ease-in-out infinite;
}
.fireflies span:nth-child(1) { top:62%; left:18%; animation-delay:0s,  0s,   0s;   }
.fireflies span:nth-child(2) { top:58%; left:35%; animation-delay:.8s, .5s,  0s;   }
.fireflies span:nth-child(3) { top:65%; left:52%; animation-delay:1.5s,1.2s, 0s;   }
.fireflies span:nth-child(4) { top:55%; left:68%; animation-delay:.4s, .8s,  0s;   }
.fireflies span:nth-child(5) { top:70%; left:78%; animation-delay:2s,  .3s,  0s;   }
.fireflies span:nth-child(6) { top:60%; left:88%; animation-delay:1.1s,1.6s, 0s;   }

@keyframes fireflyFloat {
  0%,100% { transform:translateY(0)   translateX(0);   }
  33%     { transform:translateY(-12px) translateX(8px);  }
  66%     { transform:translateY(8px)  translateX(-6px); }
}
@keyframes fireflyBlink {
  0%,100% { opacity:0;   box-shadow:none; }
  50%     { opacity:1;   box-shadow:0 0 8px 4px rgba(180,255,80,.7); }
}
@keyframes fireflyNight {
  0%   { opacity:0; }
  75%  { opacity:0; }
  85%  { opacity:1; }
  100% { opacity:1; }
}