<a class="navbar-brand hover-target" href="https://front.codes/" target="_blank">
		<img src="https://assets.codepen.io/1462889/fcy.png" alt="IG Logo">
	</a>	
						
	<div class="section">				
		<div class="center-wrap text-center">	
            <div class="container">
                <div class="row">
                    <div class="col-12 text-center parallax-fade-top">
                        <h1>Scroll</h1>	
                    </div>
                </div>
            </div>	
		</div>
	</div>				
	<div class="section">
	</div>				
	<div class="section">
	</div>	
			
    
	<div class='cursor' id="cursor"></div>
	<div class='cursor2' id="cursor2">					
	<div class="progress-wrap">
		<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
			<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
		</svg>
	</div>
    </div>
	<div class='cursor3' id="cursor3"></div>

/* Please ❤ this if you like it! */


@import url('https://fonts.googleapis.com/css?family=Muli:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext,vietnamese');



:root {
	font-size: 20px;
	--red: #da2c4d;
	--yellow: #f8ab37;
	--green: #2ecc71;
	--white: #ffffff;
	--grey-light: #f2f7f9;
	--grey: #ecedf3;
	--black: #080808;
	--black-blue: #1f2029;
	--black-blue-light: #353746;
	--black-blue-light-2: #404255;
	--black-blue-light-3: #4b4d64;
	--black-light: #424455;
}
body{
    font-family: 'Muli', sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.65;
	color: var(--grey);
	background-color: var(--black-blue);
	overflow-x: hidden;
	letter-spacing: 0.2px;
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear; 
	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;
}
h1{
    font-family: 'Muli', sans-serif;
	font-size: 11vw;
	font-weight: 800;
	line-height: 1;
    color: var(--white);
	background: linear-gradient(160deg, var(--white), var(--yellow));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.section {
    position: relative;
	width: 100%;
	display: block;
	height: 100vh;
}
.center-wrap {
    position: absolute;
	width: 100%;
	display: block;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}


/* #Progress
================================================== */

.progress-wrap {
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	border-radius: 50px;
	box-shadow: inset  0 0 0 2px rgba(255,255,255,0.2);
	z-index: 10000;
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.progress-wrap svg path { 
	fill: none; 
}
.progress-wrap svg.progress-circle path {
	stroke: var(--grey);
	stroke-width: 4;
	box-sizing: border-box;
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

/* #Cursor
================================================== */

.cursor,
.cursor2,
.cursor3{
	position: fixed;
	border-radius: 50%;	
	transform: translateX(-50%) translateY(-50%);
	pointer-events: none;
	left: -100px;
	top: 50%;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear;
}
.cursor{
	background-color: #fff;
	z-index: 99999;
	height: 0;
	width: 0;
}
.cursor2,.cursor3{
	height: 46px;
	width: 46px;
	z-index:99998;
	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out
}
.cursor2.hover,
.cursor3.hover{
	-webkit-transform:scale(1.4) translateX(-35%) translateY(-35%);
	transform:scale(1.4) translateX(-35%) translateY(-35%);
	border:none
}
.cursor2{
}
.cursor2.hover{
	background: rgba(255,255,255,0.1);
}
.cursor2.hover .progress-wrap {
	box-shadow: inset  0 0 0 2px rgba(255,255,255,0);
}
.cursor2.hover .progress-wrap svg.progress-circle path {
	opacity: 0.4;
}


.navbar-brand{
	height: 35px;
	position: fixed;
	top: 40px;
	right: 40px;
	z-index: 3;
	width: auto;
	display: inline-block;
	margin: 0;
	padding: 0;
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
}
.navbar-brand::after{
	position: absolute;
	content: '';
	top: 50%;
	left: 50%;
	width: 70px;
	transform: translate(-50%, -50%);
	height: 70px;
	opacity: 1;
	z-index: -1;
	background-image: linear-gradient(160deg, var(--black-blue-light-3), var(--black-blue-light));
	animation: border-transform 10s linear infinite alternate forwards;
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.navbar-brand img{
	padding: 7px 0;
	height: 100%;
	width: auto;
	display: block;
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
}
@-webkit-keyframes border-transform{
    0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
	14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
	28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
	42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
	56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
	70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
	84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
}
@keyframes border-transform{
    0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
	14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
	28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
	42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
	56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
	70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
	84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
}

/* Please ❤ this if you like it! */


(function($) { "use strict";

		
	//Parallax & fade on scroll	
	
	function scrollBanner() {
	  $(document).on('scroll', function(){
		var scrollPos = $(this).scrollTop();
		$('.parallax-fade-top').css({
		  'top' : (scrollPos/2.8)+'px',
		  'opacity' : 1-(scrollPos/600)
		});
	  });    
	}
	scrollBanner();	
    
	//Page cursors

    document.getElementsByTagName("body")[0].addEventListener("mousemove", function(n) {
        t.style.left = n.clientX + "px", 
		t.style.top = n.clientY + "px", 
		e.style.left = n.clientX + "px", 
		e.style.top = n.clientY + "px", 
		i.style.left = n.clientX + "px", 
		i.style.top = n.clientY + "px"
    });
    var t = document.getElementById("cursor"),
        e = document.getElementById("cursor2"),
        i = document.getElementById("cursor3");
    function n(t) {
        e.classList.add("hover"), i.classList.add("hover")
    }
    function s(t) {
        e.classList.remove("hover"), i.classList.remove("hover")
    }
    s();
    for (var r = document.querySelectorAll(".hover-target"), a = r.length - 1; a >= 0; a--) {
        o(r[a])
    }
    function o(t) {
        t.addEventListener("mouseover", n), t.addEventListener("mouseout", s)
    }
		
	$(document).ready(function(){"use strict";
	
		//Scroll indicator
		
		var progressPath = document.querySelector('.progress-wrap path');
		var pathLength = progressPath.getTotalLength();
		progressPath.style.transition = progressPath.style.WebkitTransition = 'none';
		progressPath.style.strokeDasharray = pathLength + ' ' + pathLength;
		progressPath.style.strokeDashoffset = pathLength;
		progressPath.getBoundingClientRect();
		progressPath.style.transition = progressPath.style.WebkitTransition = 'stroke-dashoffset 10ms linear';		
		var updateProgress = function () {
			var scroll = $(window).scrollTop();
			var height = $(document).height() - $(window).height();
			var progress = pathLength - (scroll * pathLength / height);
			progressPath.style.strokeDashoffset = progress;
		}
		updateProgress();
		$(window).scroll(updateProgress);
		
		
	});
	
})(jQuery);