/* WORLD CYCLE - SKY, SUN, MOON, STARS */

/* === world layout === */

/* ============================
   WRAPPERS (no scale transform)
   - Keep translate for centering but remove scaling.
   - Their height matches the section (100%).
============================ */
.world-wrap {
  position: absolute;
  left: 50%;
  bottom: 0;                /* anchored to bottom of #follow-section */
  transform-origin: bottom center;
  transform: translateX(-50%); /* NO scale here */
  width: 200vw;             /* wide to avoid cropping edges */
  height: 100%;             /* match section height */
  pointer-events: none;
  z-index: 1;
}

/* internal containers size to wrapper */
.world {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ============================
   SKY + LAND (use percentages of wrapper height)
   - Because the wrapper height matches the section height,
     percentages automatically scale when --scene-scale changes.
============================ */
.sky {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60%;             /* top 60% of scene */
  transition: background 3s linear;
  z-index: 0;
  isolation: auto !important;
}

.stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  opacity: 0;
 }

.star {
  position: absolute;
  width: 0.1vw;
  height: 0.1vw;
  background: white;
  border-radius: 50%;
  opacity: 0.8;
  animation: twinkle 2s infinite ease-in-out;
}

.shootingstar {
  position: absolute;
  width: 0.25vw;           /* thin bright head */
  height: 0.25vw;
  background: white;
  border-radius: 50%;
  filter: drop-shadow(0 0 0.5vw rgba(255,255,255,0.8));
  opacity: 1;
  pointer-events: none;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

.sun, .moon {
  position: absolute;
  border-radius: 50%;
  width: 3.2vw;
  height: 3.2vw;   
  z-index: 2;
}

.moon {
  opacity: 1;
}

.sun {
  transform: translate(-50%, -50%);
  /*box-shadow: 0 0 30px rgba(255,255,255,0.5); - not used anymore because of .sun::before */
  background: radial-gradient(circle, #FFD93B 0%, #FFB200 100%);
}

/* Glow that spills around clouds */
.sun::before {
  content: "";
  position: absolute;
  inset: -4vw;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 220, 120, var(--glowOuter)) 0%,
    rgba(255, 220, 120, 0) 70%);
  filter: blur(1.2vw);
  pointer-events: none;
  transform: scale(var(--glowScale));
}

/* Bright inner bloom (doesn’t change as much) */
.sun::after {
  content: "";
  position: absolute;
  inset: -2vw;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 255, 200, var(--glowInner)) 0%,
    rgba(255, 255, 200, 0) 75%);
  filter: blur(0.7vw);
  pointer-events: none;
}

.moon-svg { 
  display:block; 
  width:100%; 
  height:100%; 
}

/* z-index 2 - any css for behind mountains - far clouds, planes */

.mountains {
  position: absolute;
  bottom: -2.9%;  /* just below horizon */
  justify-content: space-between;
  z-index: 4;  /* above background but below land */
}

.mountains.right-range {
  left: 120vw;
}

.mountains.left-range {
  left: 75vw;
}

.mountain {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20vw solid transparent;
  border-right: 20vw solid transparent;
  border-bottom: 35vw solid #3B3B3B;
  opacity: 1 ;
  transform-origin: bottom center;
}

.snowcap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
/*  mask-image: linear-gradient(to bottom, #F0F0F0 70%, transparent 100%); */
  mask-image: linear-gradient(
    to bottom,
    black 40%,       /* how much stays fully opaque */
    rgba(0,0,0,0.6) 60%,  /* how soft the midpoint is */
    transparent 100%      /* where it fades out */
  );
  z-index: 2;
}

.far-clouds {
  position: absolute;
  inset: 0;
  z-index: 3; /* behind mountains, behind land */
  pointer-events: none;
}

.far-cloud {
  position: absolute;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.6) 60%, transparent 100%);
  border-radius: 50%;
  filter: blur(1vw);
  pointer-events: none;
  mix-blend-mode: lighten; /* optional for soft blending */
  transition: transform 0.2s ease; /* for subtle billowing animation */
}

.near-clouds {
  position: absolute;
  inset: 0;
  z-index: 5; /* in front of mountains, behind land */
  pointer-events: none;
}

.near-cloud {
  position: absolute;
  background: #fff;
  border-radius: 3.1vw;
  filter: blur(1vw); 
  box-shadow: 0 0 10px rgba(255,255,255,0.6); 
  transition: transform 2s ease-in-out;
}

.near-cloud::before,
.near-cloud::after {
  content: '';
  position: absolute;
  background: #fff;
  border-radius: 50%;
  filter: blue(10px);
  width: 3.5vw;
  height: 4vw;
  top: -1.05vw;
  opacity: inherit;
}

.near-cloud::before {
  left: calc(1.75vw + var(--bumpShift, 0vw));
  transform: scale(var(--bumpScale, 1)); 
}

.near-cloud::after {
  right: calc(1.25vw - var(--bumpShift, 0vw));
  transform: scale(calc(var(--bumpScale, 1) * 0.9)); 
}

.aircraft {
  position: absolute;
  inset: 0;
  z-index: 4; /* in front of mountains, behind land */
  pointer-events: none;  
}

.jet {
  position: absolute;
  top: 20%; /* change altitude */
  left: -10%; /* start off-screen */
  width: 2.6vw;
  height: 0.6vw;
  pointer-events: none;
}

.jet.toRight {
  transform: scale(-1);
}

.jet-body {
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.2vw;
  height: 0.13vw;
  background: #dfe8f1;
  border-radius: 0.13vw;
  transform: translateY(-50%);
}

.jet-tail {
  position: absolute;
  left: 1.2vw;
  top: 50%;
  width: 0.15vw;
  height: 0.2vw;
  background: #dfe8f1;
  border-radius: 0.05vw;
  transform: translate(-100%, -100%) skewX(-12deg);
  transform-origin: bottom center;
}

.jet.toRight .jet-tail {
  transform: translate(-100%, -100%) skewX(12deg) scale(-1);
}

.contrail {
  position: absolute;
  /*left: 52vw;  /* length of trail behind jet */
  top: 50%;
  width: 30vw;
  height: 0.26vw;
  transform: translateY(-50%);
  background: linear-gradient(to right, rgba(255,255,255,0.9), rgba(255,255,255,0));
  filter: blur(0.07vw);
  opacity: 0.55;
}

.jet-light {
  position: absolute;
  top: 45%;
  width: 0.26vw;
  height: 0.26vw;
  left: 0.55vw;
  border-radius: 50%;
  opacity: 0;
}

.jet.night .jet-body,
.jet.night .jet-tail {
  background: black;
}

.jet.night .contrail {
  opacity: 0;
}

.jet.night .jet-light {
  animation: lightBlink 1.2s infinite;
}

.jet.night.speed .jet-light {
  opacity: 1;
}

.jet-light.red {
  background: red;
}

.jet-light.green {
  background: green;
}

.jet-light.white {
  left: 1vw;
  top: 30%;
  background: white;
}

.jet.toRight .jet-light.white {
  top: 65%;
}

@keyframes lightBlink {
  0%, 80%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

.copters {
}

.balloons {
}

.land {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;             /* bottom 40% of scene */
  background: #A2653E;
  z-index: 4;
}

.land::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 40px;
  background: radial-gradient(ellipse at center, rgba(255,200,150,0.4), transparent 70%);
  opacity: 0.3;
}

.pond {
  position: absolute;
  bottom: 40%;
  left: 10%;
  width: 200px;
  height: 30px;
  background: radial-gradient(ellipse at center, #3a8fb7 0%, #2b6a8d 80%);
  border-radius: 50%;
  transform: translateX(-50%);
  opacity: 0.8;
  z-index: 7;
  overflow: hidden;
}

.pond::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.3);
  mix-blend-mode: overlay;
  animation: shimmer 3s infinite ease-in-out;
  opacity: 0.3;
}

@keyframes shimmer {
  0%, 100% { transform: translateX(0); opacity: 0.2; }
  50% { transform: translateX(20px); opacity: 0.5; }
}

.hills {
  position: absolute;
  bottom: 32%;
  left: 0;
  width: 100%;
  height: 120px;
  z-index: 1; /* behind land */
  pointer-events: none;
}

.hill {
  position: absolute;
  bottom: 0;
  width: 250px;
  height: 120px;
  background: radial-gradient(circle at center, #5C783D 0%, #3B4E26 100%);
  border-radius: 50%;
  opacity: 1;
  transform: scaleX(1.5);
}

/* Optional: night overlay for darker nights */
.night-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0,0,30,0.2);
  pointer-events: none;
  z-index: 5;
}

.firepit {
  position: absolute;
  bottom: 3.5vw; /* wherever your ground level visually sits */
  left: 50%;
  transform: translateX(-50%);

  width: 3vw;
  height: 1.4vw;
  border-radius: 50% / 40%;

  background:
    radial-gradient(ellipse at center,
      #3a3a3a 0%,
      #1e1e1e 60%,
      transparent 60%
    ),
    #5a5a5a; /* stone rim */

  box-shadow:
    0 0.3vw 0.3vw rgba(0,0,0,0.5);
}

.firepit::before,
.firepit::after {
  content: "";
  position: absolute;
  bottom: 1vw;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5vw;
  height: 1.6vw;
  border-radius: 50% 50% 40% 40%;
  background: radial-gradient(circle at 50% 80%, orange, gold, transparent);
  animation: flame 0.6s infinite alternate ease-in-out;
  opacity: 0; /* off until nighttime */
}

.firepit::after {
  width: 2vw;
  height: 2.6vw;
  background: radial-gradient(circle at 50% 80%, red, orange, transparent);
  animation-duration: 0.9s;
}

.firepit.lit::before,
.firepit.lit::after {
  opacity: 1;
}

.firepit.speed::before {
  animation-duration: 0.001s;
}

.firepit.speed::after{
  animation-duration: 0.002s;
}

@keyframes flame {
  0% { transform: translateX(-50%) scale(1); }
  100% { transform: translateX(-50%) scale(1.15); }
}