/* **************
Created using a tutorial from Redstapler
************** */

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

canvas {
  position: absolute;
  top:0;
  left:0;
  z-index:-99;
}

.login-div {
  max-width: 350px;
  padding: 35px;
  border-radius: 15px;
  color:white;
  background: rgba(8,8,8,0.7);
  box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.5);
}

.logo {
  background: #000 url("https://raw.githubusercontent.com/navin-navi/navin-navi.github.io/dev/static/logo.png") center no-repeat;
  background-size: 50px 50px;
  width:100px;
  height:100px;
  border-radius: 50%;
  margin:0 auto;
}

.row {
  margin-bottom: 5px;
}

.input-field {
    position: relative;
    margin-top: 5px;
    margin-bottom: 5px;
}

// **************
// Created using a tutorial from Redstapler
// **************

// Three JS needs mainly below three things

/* //////////////////////////////////////// */

// SCENE
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x03544e, 0.001);

/* //////////////////////////////////////// */

// CAMERA
camera = new THREE.PerspectiveCamera(60,window.innerWidth / window.innerHeight,1,1000);
camera.position.z = 1;
camera.rotation.x = 1.16;
camera.rotation.y = -0.12;
camera.rotation.z = 0.27;

/* //////////////////////////////////////// */

// RENDERER
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
renderer.setClearColor(scene.fog.color);

document.body.appendChild(renderer.domElement);

/* //////////////////////////////////////// */

// Composer
composer = new POSTPROCESSING.EffectComposer(renderer);
composer.addPass(new POSTPROCESSING.RenderPass(scene, camera));

/* //////////////////////////////////////// */

// Ambient Ligth to Scene
let ambient = new THREE.AmbientLight(0x555555);
scene.add(ambient);

/* //////////////////////////////////////// */

// DirectionalLight to Scene
let directionalLight = new THREE.DirectionalLight(0xff8c19);
directionalLight.position.set(0,0,1);
scene.add(directionalLight);

/* //////////////////////////////////////// */

//  PointLight to Scene
let orangeLight = new THREE.PointLight(0xcc6600,50,450,1.7);
orangeLight.position.set(200,300,100);
scene.add(orangeLight);
let redLight = new THREE.PointLight(0xd8547e,50,450,1.7);
redLight.position.set(100,300,100);
scene.add(redLight);
let blueLight = new THREE.PointLight(0x3677ac,50,450,1.7);
blueLight.position.set(300,300,200);
scene.add(blueLight);

/* //////////////////////////////////////// */

cloudParticles = []

// Smoke Loaders
let loader = new THREE.TextureLoader();
loader.load("https://raw.githubusercontent.com/navin-navi/codepen-assets/master/images/smoke.png", function(texture){
  cloudGeo = new THREE.PlaneBufferGeometry(500,500);
  cloudMaterial = new THREE.MeshLambertMaterial({
    map:texture,
    transparent: true
  });

  for(let p=0; p<50; p++) {
    let cloud = new THREE.Mesh(cloudGeo, cloudMaterial);
    cloud.position.set(
      Math.random()*800 -400,
      500,
      Math.random()*500-500
    );
    cloud.rotation.x = 1.16;
    cloud.rotation.y = -0.12;
    cloud.rotation.z = Math.random()*2*Math.PI;
    cloud.material.opacity = 0.55;
    cloudParticles.push(cloud);
    scene.add(cloud);
  }
});

// Stars background Loaders
loader.load("https://raw.githubusercontent.com/navin-navi/codepen-assets/master/images/stars.jpg", function(texture){
  const textureEffect = new POSTPROCESSING.TextureEffect({
    blendFunction: POSTPROCESSING.BlendFunction.COLOR_DODGE,
    texture: texture
  });
  textureEffect.blendMode.opacity.value = 0.2;

  const bloomEffect = new POSTPROCESSING.BloomEffect({
        blendFunction: POSTPROCESSING.BlendFunction.COLOR_DODGE,
        kernelSize: POSTPROCESSING.KernelSize.SMALL,
        useLuminanceFilter: true,
        luminanceThreshold: 0.3,
        luminanceSmoothing: 0.75
      });
  bloomEffect.blendMode.opacity.value = 1.5;

  let effectPass = new POSTPROCESSING.EffectPass(
    camera,
    bloomEffect,
    textureEffect
  );
  effectPass.renderToScreen = true;
  composer.addPass(effectPass);
});

/* //////////////////////////////////////// */

// Render animation on every rendering phase
function render() {
  requestAnimationFrame(render);
  // Post Processing Render
  composer.render(0.1);
  
  // Cloud rotation
  cloudParticles.forEach(p => {
    p.rotation.z -=0.001;
  });
}

render();

/* //////////////////////////////////////// */

// Update Camera Aspect Ratio and Renderer ScreenSize on Window resize
window.addEventListener( 'resize', function () {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize( window.innerWidth, window.innerHeight );
}, false );

/*////////////////////////////////////////*/