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

body{
  font-family: poppins, sans-serif;
  background:
  radial-gradient(circle at top,#0f172a,#020617 70%);
  color: white;
  overflow-x: hidden;
}

.hero{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

#stars{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}

.star{
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  animation: twinkle 2s infinite alternate;
}

.content{
  width: 90%;
  max-width: 700px;
  z-index: 2;
  padding-top: 180px;
  animation: fadeUp 2s ease;
}

h1{
  font-size: clamp(3rem, 7vw, 5.5rem);
  letter-spacing: 3px;
  margin-bottom: 20px;
  color: white;
  text-shadow: 
  0 0 10px #ffffff,
  0 0 20px #9effb0,
  0 0 40px #22c55e;
  animation:titleGlow 3s ease-in-out infinite;
}

p{
  font-size: 1.2rem;
  line-height: 2;
  margin-bottom: 40px;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

button{
  padding: 15px 35px;
  border: none;
  border-radius: 50px;
  font-size: 18px;
  cursor: pointer;
  background:linear-gradient(90deg,#22c55e,#16a34a);
  color: white;
  font-weight: bold;
  box-shadow: 0 0 20px rgba(34, 197, .6);
  transition: .3s;
}

button:hover{
  transform: scale(1.08);
  box-shadow: 0 0 35px rgba(34, 197, 94, .9);
}

.seed{
  width: 30px;
  height: 45px;
  background: #7CFF6B;
  border-radius: 50% 50% 60% 60%;
  position:absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 25px #7CFF6B;
  animation: float 3s ease-in-out infinite;
}

@keyframes float{
  0%{
    transform: translate(-50%, 0);
  }
  50%{
    transform: translate(-50%, -18px);
  }
  100%{
    transform: translate(-50%, 0);
  }
}

.stars{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  background-image: 
  radial-gradient(white 1px, transparent 1px),
  radial-gradient(white 1.5px, transparent 1.5px),
  radial-gradient(#22c55e 1px, transparent 1px);

  background-size: 
  120px 120px,
  180px 180px,
  250px 250px;

  background-position: 
  0 0,
  40px 60px,
  100px 150px;

  animation: starsMove 80s linear infinite;

  opacity: .8;
}

@keyframes starsMove{
  from{
    transform: translateY(0);
  }
  to{
    transform: translateY(-250px);
  }
}

.seed::before{
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(34, 197, 94, .15);
  filter: blur(20px);
  z-index: -1;
}

.story{
  min-height: 100vh;
  background: #050816;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80px 20px;
  opacity: 0;
  transform: translateY(80px);
  transition: all 1s ease;
  position:relative;
  overflow:hidden;
}

.story-content{
  max-width: 700px;
  text-align: center;
}

.story-content h2{
  font-size: 3rem;
  color: #7CFF6B;
  margin-bottom: 20px;
}

.story-content p{
  color: white;
  font-size: 1.3rem;
  line-height: 1.8;
}

@keyframes twinkle{
  from{
    opacity: .2;
    transform: scale(.8);
  }

  to{
    opacity: 1;
    transform: scale(1.5);
  }
}

@keyframes fadeUp{
  from{
    opacity: 0;
    transform: translateY(40px);
  }

  to{
    opacity: 1;
    transform: translateY(0);
  }
}

.story-dark{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:80px 20px;

  background:
  radial-gradient(circle at center,#3b2b1f 0%,#1b120d 45%,#000 100%);
  position:relative;
  overflow:hidden;
}

.story-dark::before{
  content:"";
  position:absolute;
  inset:0;

  background:
  repeating-linear-gradient(
    45deg,
    transparent 0px,
    transparent 28px,
    rgba(255,255,255,.03) 30px,
    transparent 32px
  ),
  repeating-linear-gradient(
    -45deg,
    transparent 0px,
    transparent 40px,
    rgba(255,255,255,.02) 42px,
    transparent 44px
  );

  opacity:.4;
}

.story-dark h2{
  color:#d69e2e;
  text-shadow:0 0 15px rgba(214,158,46,.5);
}

.story.show{
  opacity: 1;
  transform: translateY(0);
}

.story-rain{
  min-height:100vh;
  background:linear-gradient(to bottom,#000814,#001d3d);
  display:flex;
  justify-content:center;
  align-items:center;
  padding:80px 20px;
  position: relative;
  overflow: hidden;
}

.story-rain h2{
  color:#7dd3fc;
}

.story-forest{
  min-height:100vh;
  background:linear-gradient(to bottom,#052e16,#14532d,#166534);
  display:flex;
  justify-content:center;
  align-items:center;
  padding:80px 20px;
  position:relative;
  overflow:hidden;
}

.story-forest h2{
  color:#86efac;
}

.story-end{
  min-height:100vh;
  background:radial-gradient(circle,#14532d,#02140a);
  display:flex;
  justify-content:center;
  align-items:center;
  padding:80px 20px;
  position:relative;
  overflow:hidden;
}

.story-end h2{
  color:white;
}

button{
  animation:pulse 2.5s infinite;
}

@keyframes pulse{
  0%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.05);
  }

  100%{
    transform:scale(1);
  }
}

@keyframes titleGlow{

0%{
text-shadow:
0 0 10px #fff,
0 0 20px #22c55e;
}

50%{
text-shadow:
0 0 25px #fff,
0 0 60px #22c55e;
}

100%{
text-shadow:
0 0 10px #fff,
0 0 20px #22c55e;
}
}

#progress-bar{
  position:fixed;
  left:20px;
  top:0;
  width:6px;
  height:0;
  background:linear-gradient(#7CFF6B,#22c55e);
  border-radius:20px;
  z-index:999;
  transition:height .1s linear;
}

.rain{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:hidden;
}

.drop{
  position:absolute;
  top:-20px;
  width:2px;
  height:18px;
  background:linear-gradient(to bottom,#bdefff,#4fc3f7);
  border-radius:5px;
  animation:rainFall linear infinite;
  opacity:.7;
}

@keyframes rainFall{
  from{
    transform:translateY(-30px);
  }

  to{
    transform:translateY(110vh);
  }
}

.leaves{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}

.leaf{
  position:absolute;
  bottom:-30px;
  width:12px;
  height:12px;
  background:#7CFF6B;
  border-radius:0 100% 0 100%;
  opacity:.8;
  box-shadow:0 0 10px #7CFF6B;
  animation:leafFloat linear infinite;
}

@keyframes leafFloat{

  0%{
    transform:translateY(0) rotate(0deg);
    opacity:0;
  }

  10%{
    opacity:1;
  }

  100%{
    transform:translateY(-110vh) rotate(360deg);
    opacity:0;
  }

}

#loader{
  position:fixed;
  inset:0;
  background:#020617;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  z-index:9999;
  transition:opacity 1s ease;
}

#loader.hide{
  opacity:0;
  pointer-events:none;
}

.loader-seed{
  width:30px;
  height:45px;
  background:#7CFF6B;
  border-radius:50% 50% 60% 60%;
  box-shadow:0 0 25px #7CFF6B;
  animation:loaderFloat 2s ease-in-out infinite;
}

#loader h2{
  margin-top:25px;
  color:white;
}

#loader p{
  color:#a5f3a1;
  font-size:1rem;
}

@keyframes loaderFloat{

  0%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-12px);
  }

  100%{
    transform:translateY(0);
  }

}

.particles{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.particle{
    position:absolute;
    bottom:-20px;
    width:6px;
    height:6px;
    background:#7CFF6B;
    border-radius:50%;
    box-shadow:0 0 10px #7CFF6B;
    opacity:.8;
    animation:particleRise linear infinite;
}

@keyframes particleRise{

    0%{
        transform:translateY(0) scale(.5);
        opacity:0;
    }

    20%{
        opacity:1;
    }

    100%{
        transform:translateY(-110vh) scale(1.3);
        opacity:0;
    }

}

.dust{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.dust-particle{
    position:absolute;
    width:3px;
    height:3px;
    background:#b08968;
    border-radius:50%;
    opacity:.4;
    animation:dustMove linear infinite;
}

@keyframes dustMove{

    from{
        transform:translateX(-50px);
    }

    to{
        transform:translateX(110vw);
    }

}

.hope-stars{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.hope-star{
    position:absolute;
    width:4px;
    height:4px;
    background:white;
    border-radius:50%;
    box-shadow:0 0 12px white;
    animation:hopeTwinkle 2s infinite alternate;
}

@keyframes hopeTwinkle{

    from{
        opacity:.2;
        transform:scale(.8);
    }

    to{
        opacity:1;
        transform:scale(1.8);
    }

}

@media (max-width: 768px){

    h1{
        font-size:2.8rem;
    }

    .story-content h2{
        font-size:2.2rem;
    }

    p{
        font-size:1rem;
        line-height:1.8;
    }

    button{
        padding:12px 28px;
        font-size:16px;
    }

    .content{
        padding:120px 20px 0;
    }

}

.credit{
    margin-top:40px;
    font-size:.9rem;
    color:#b8c2cc;
    opacity:.8;
}

#seed3d{
    position:absolute;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    width:260px;
    height:260px;
    z-index:2;
}

#ending{
    background: linear-gradient(
        to bottom,
        #050816,
        #0d2f1b,
        #2f8f52
    );

    transition: background 2s ease;
}

body.ending-mode{

    background:
    radial-gradient(circle at top,
    #143d22,
    #07140d 80%);

    transition:2s;
}

#ending h2{
    text-shadow:
    0 0 15px #7CFF6B,
    0 0 30px #22c55e;
}