/*  



	Author : Amedea

	Author URI : https://amedeapro.com

	Author : Moskva Yigit

	Author URI : http://moskvayigit.com

	Version : 0.0.4.5



	Table of Contents

	- Scroll Focus

	 

*/



/*----------------------------

	.-- Scroll Focus

-----------------------------*/



.scroll--focus__sticky-visual {

  position: fixed;

  top: 0;

  right: 0;

  width: 50%;

  height: 100vh;

  display: grid;

  place-items: center;

  z-index: 10;

  pointer-events: none;

  border-left: 1px solid rgba(255, 255, 255, 0.05);

}



.scroll--focus__shape-container {

  position: absolute;

  width: 400px;

  height: 400px;

  display: grid;

  place-items: center;

  opacity: 0;

  animation-name: shape-fade;

  animation-fill-mode: both;

  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

}



.scroll--focus__shape-1 {

  animation-timeline: --s1;

}

.scroll--focus__shape-2 {

  animation-timeline: --s2;

}

.scroll--focus__shape-3 {

  animation-timeline: --s3;

}

.scroll--focus__shape-4 {

  animation-timeline: --s4;

}

.scroll--focus__shape-5 {

  animation-timeline: --s5;

}

.scroll--focus__shape-6 {

  animation-timeline: --s6;

}



.scroll--focus__content {

  width: 50%;

  padding-bottom: 20vh;

  position: relative;

  z-index: 20;

}



.scroll--focus__header {

  height: 90vh;

  display: flex;

  align-items: center;

  padding-left: 10vw;

}



.scroll--focus__scroll-section {

  height: 100vh;

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding-left: 10vw;

  padding-right: 2rem;

  view-timeline-axis: block;

  view-timeline-inset: 40% 40%;

}



.scroll--focus__s1 {

  view-timeline-name: --s1;

}



.scroll--focus__s2 {

  view-timeline-name: --s2;

}



.scroll--focus__s3 {

  view-timeline-name: --s3;

}



.scroll--focus__s4 {

  view-timeline-name: --s4;

}



.scroll--focus__s5 {

  view-timeline-name: --s5;

}



.scroll--focus__s6 {

  view-timeline-name: --s6;

}



.scroll--focus__closing-section {

  height: 60vh;

  display: flex;

  align-items: center;

  padding-left: 10vw;

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  margin-top: 10vh;

}



.scroll--focus__container h1 {

  font-size: 1.5rem;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  font-weight: 300;

  margin: 0;

  color: var(--accent);

  opacity: 0.8;

}



.scroll--focus__title-large {

  display: block;

  font-size: 5rem;

  font-weight: 800;

  letter-spacing: -0.02em;

  color: var(--text-light);

  margin-top: 1rem;

  line-height: 1;

}



.scroll--focus__focus-text {

  font-size: 3.5rem;

  font-weight: 600;

  line-height: 1.1;

  color: var(--text-muted);

  margin: 0;

  max-width: 500px;

  letter-spacing: -0.02em;

  animation: content-focus linear both;

  animation-timeline: view();

  animation-range: cover 0% cover 100%;

}



.scroll--focus__description {

  font-size: 1.1rem;

  color: #666;

  margin-top: 1.5rem;

  max-width: 420px;

  line-height: 1.7;

  font-weight: 300;

  border-left: 2px solid var(--accent);

  padding-left: 1.5rem;

  animation: content-focus linear both;

  animation-timeline: view();

  animation-range: cover 0% cover 100%;

}



.scroll--focus__closer {

  font-size: 1.2rem;

  font-weight: 300;

  color: var(--text-muted);

}



.scroll--focus__closer strong {

  display: block;

  font-size: 2rem;

  color: var(--text-light);

  margin-bottom: 1rem;

}



.scroll--focus__desktop-progress {

  position: absolute;

  left: -1px;

  top: 0;

  width: 3px;

  height: 100%;

  background: var(--accent);

  transform-origin: top;

  transform: scaleY(0);

  animation: progress-grow linear;

  animation-timeline: scroll();

  z-index: 20;

}



.scroll--focus__mobile-progress {

  display: none;

  position: fixed;

  bottom: 30px;

  right: 30px;

  width: 60px;

  height: 60px;

  z-index: 100;

  background: rgba(0, 0, 0, 0.8);

  border-radius: 50%;

  padding: 5px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

  backdrop-filter: blur(10px);

}



.scroll--focus__mobile-progress svg {

  width: 100%;

  height: 100%;

  transform: rotate(-90deg);

}



.scroll--focus__progress-circle {

  fill: none;

  stroke: var(--accent);

  stroke-width: 8;

  stroke-linecap: round;

  stroke-dasharray: 1;

  stroke-dashoffset: 1;

  animation: circle-grow linear;

  animation-timeline: scroll();

}



.scroll--focus__track-circle {

  fill: none;

  stroke: rgba(255, 255, 255, 0.1);

  stroke-width: 8;

}



@keyframes shape-fade {

  entry 0% {

    opacity: 0;

    transform: translateY(40px) scale(0.9);

  }

  entry 100% {

    opacity: 1;

    transform: translateY(0) scale(1);

  }

  exit 0% {

    opacity: 1;

    transform: translateY(0) scale(1);

  }

  exit 100% {

    opacity: 0;

    transform: translateY(-40px) scale(1.1);

  }

}



@keyframes content-focus {

  0% {

    filter: blur(12px);

    opacity: 0;

    transform: scale(0.8) translateY(40px);

    border-color: transparent;

  }

  45%,

  55% {

    filter: blur(0);

    opacity: 1;

    transform: scale(1) translateY(0);

    color: var(--text-light);

    border-color: var(--accent);

  }

  100% {

    filter: blur(12px);

    opacity: 0;

    transform: scale(0.95) translateY(-40px);

    border-color: transparent;

  }

}



@keyframes progress-grow {

  to {

    transform: scaleY(1);

  }

}



@keyframes circle-grow {

  to {

    stroke-dashoffset: 0;

  }

}





@media (max-width: 768px) {

	

  .scroll--focus__sticky-visual {

    opacity: 0.1;

    width: 100%;

    z-index: -1;

    border-left: none;

  }



  .scroll--focus__content {

    width: 100%;

  }

  .scroll--focus__scroll-section {

    padding-left: 1.5rem;

    padding-right: 1.5rem;

  }

  .scroll--focus__header {

    padding-left: 1.5rem;

  }



  .scroll--focus__focus-text {

    font-size: 2rem;

  }

  .scroll--focus__title-large {

    font-size: 3.5rem;

  }



  .scroll--focus__desktop-progress {

    display: none;

  }

  .scroll--focus__mobile-progress {

    display: block;

  }

  

}