<div id="flexContainer">
  <div id="bigWorld" class="flexText">
    <p>THE WORLD<br>
      <span>IS&nbsp;BIG</span>
    </p>
  </div>
  <div id="goodLook" class="flexText">
    <p>& I want to have a good look at it</p>
  </div> 
  <div id="beforeDark" class="flexText">
      BEFORE<br>
      IT&nbsp;GETS<span id="dark">DARK</span><br>
      <span id="quote">- John Muir</span>
  </div>
</div>

@import url("https://use.typekit.net/pdq8vol.css");

html{
  height: 100%;
}

body {
  margin: 0px;
  justify-content: center;
  font-family: acumin-pro-condensed;
  font-weight: 900;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, #aec6db 25%, #668ba6 35%, #000 55%);
  /*background: linear-gradient(180deg, #CAD1EA 15%, #E7BBBD 15%, #E7BBBD 25%, #DD565D 25%, #DD565D 35%, #DF82BA 35%, #DF82BA 45%, #BA6C9B 45%, #BA6C9B 55%, #000 55%); Alt Sunset*/
  background-size: 100% 300%;
  background-position: 0% 20%;
}

p {
  margin: 0px;
}

#flexContainer {
  height: 100%;
  min-height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; 
}

.flexText {
  text-align: center;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

#bigWorld {
  display: flex;
  align-items: flex-end;
  flex: 1 0 40%;
  margin: 0 0 0px 0;
  text-align: center;
  font-size: 9em;
  line-height: 1.35em;
  background: radial-gradient(#F4A156 10%, #EFC94C 15%, #000 15.1%);
    background-size: 2400px 2400px;
    background-clip: text;
    -webkit-background-clip: text;
    background-position: 50px 100px;
  color: transparent;
  z-index: -2;
  align-content: flex-end;
}

#bigWorld span {
  line-height: 0.05em;
  font-size: 1.85em;
}

#bigWorld p {
  margin: -15px 20px;
  align-self: flex-end;
  display: block;
  height: 100%;
}

#goodLook{
  flex: 1 1 20%;
  margin: 0px;
  line-height: 0.15em;
  text-align: center;
  background-color: black;
  font-family: acumin-pro-extra-condensed, sans-serif;
  color: #000;
  
  font-size: 3.45em; 
}

#goodLook p {
  position: relative;
  top: -15%;
  height: 10%;
}

#beforeDark{
  align-items: flex-start;
  margin: -40px 0 0 0;
  background-color: black;
  color: #000;
  flex: 1 1 40%;
  line-height: 0.95;
  font-size: 4.5em;
}

#dark{
  font-size: 2.56em;
  line-height: 0.65em;
}

#quote {
  font-size: 0.4em;
  text-align: right;
  position: absolute;
  bottom: 10%;
  right: 20%;
}

.star {
  margin: -10px 0 0 -10px;
  padding: 0px;
  z-index: 2;
  color: white;
  opacity: 0;
  font-size: 2em;
  line-height: 0.76em;
  text-align: center;
/*   background: radial-gradient( rgba( 255,255,255,0.8 ) 25%, rgba( 255,255,255,0 ) 120% ); */
  position: absolute;
  height: 20px;
  width: 20px;
  animation: twinkle 1s ease-in-out 0s infinite normal;
  /*cubic-bezier(0.5, -0.5, 0.5, 1.5)*/
}

@keyframes twinkle {
  0% {transform: rotate(45deg);}
  20% {transform: rotate(35deg);}
  40% {transform: rotate(45deg);}
  60% {transform: rotate(55deg);}
  100% {transform: rotate(45deg);}
}

@media screen and (max-width: 680px) {
    #bigWorld {
      margin: 0 0 -195px 0;
      font-size: 5em;
      line-height: 1.35em;
      background-size: 1200px 1200px;
    }

    #bigWorld span {
      margin-top: -20px;
      line-height: 0.05em;
      font-size: 1.85em;
    }
  
    #bigWorld p {
      margin: -60px 10px;
    }

    #goodLook{
      flex: 1 1 10%;
      font-size: 1.85em;
    }

    #beforeDark{
      margin: -40px 0 0 0;
      font-size: 2.4em;
    }

    #dark{
      margin-bottom: 13px;
      font-size: 2.56em;
    }

    #quote {
      font-size: 0.4em;
      bottom: 10%;
      right: 10%;
    }
}

let bigWorld = document.getElementById("bigWorld");
let goodLook = document.getElementById("goodLook");
let beforeDark = document.getElementById("beforeDark");
let starDivs = document.getElementsByClassName("star");
let flexContainer = document.getElementById("#flexContainer");

document.addEventListener("mousemove", moveSun);


//Star positions, array of objects
var positions = [
  {x:3,y:3},
  {x:4,y:10},
  {x:15,y:7},
  {x:96,y:20},
  {x:85,y:10},
  {x:90,y:5},
];

//Create the stars based on the positions array
function createStars(pos){
  //For each position
  for (let i = 0; i < pos.length; i++){
    //Create the star element as a div (& associated properties)
    let newStar = document.createElement("div");
      newStar.classList.add("star");
      newStar.textContent = "*";
      newStar.style.top = `${pos[i].y}%`;
      newStar.style.animationDelay = `${i/2}s`;
      newStar.style.left = `${pos[i].x}%`;
    //Add the star to the actual document
    document.body.appendChild(newStar);
  }
}

createStars(positions);

//Called to update graphics depending on the mouse position. 
function moveSun(e) {
  //Mouse position in percent
  let percentWidth = (e.clientX / window.innerWidth)*100;
  let percentHeight = (e.clientY / window.innerHeight)*100;
  
  //Slide the masked sun up and down
  bigWorld.style.backgroundPosition = `50% ${-percentHeight-(sunMod())}%`
  
  //Fade out "THE WORLD IS BIG"
  bigWorld.style.opacity = `${150-percentHeight}%`;
  
  //Fade the "...good look..." text alpha
  goodLook.style.color = `rgba(102,139, 166,${midReveal(percentHeight, 60, 10)/100}`;
  
  //Fade the "...gets dark..." text alpha
  beforeDark.style.color = `rgba(102,139, 166,${-70+percentHeight}%`;
  
  //Adjust the sky color (stretched gradient)
  document.body.style.backgroundPosition = `0% ${percentHeight}%`; 
  
  //Update each star's opacity
  for (let i = 0; i < starDivs.length; i++){
    starDivs[i].style.opacity = `${-40+percentHeight}%`;
  }
}

//Adjust position of "sun" relative to mouse...
function sunMod(){
  let width =  window.innerWidth;
  let mod = 0;
  (width < 680) ? mod=80 : mod=50;
  return mod;
}

//Returns an opacity value within a certain range... for revealing middle text
function midReveal(percent, point, max) {
  //Current height in percent, middle point where text should be most visible, max where text starts to fade in
  
  //Difference between midpoint and current height
  let diff = Math.abs(point-percent);
  if (diff <= max) {
    return Math.abs(100-diff*10);
  } else {
    return 0;
  } 
}