@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    --cor-primaria: #96BE46;
    --cor-secundaria: #4F4662;
    --color-background: #1A1721;
    --color-text: #ECEAF0;
}

html {
	scroll-snap-type: y mandatory;
	scroll-behavior: smooth;
}

body {
	background-color: var(--color-background);
	font-family: "Manrope", sans-serif;
  timeline-scope: --p1, --p2, --p3, --p4;
}

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

section {
  width: 100%;
  min-height: 100dvh;
  padding-left: 12%;
  padding-right: 12%;
  box-sizing: border-box;
  scroll-snap-align: start;
}

/* Mobile Config */
@media (max-width: 768px) {
    html, body {
        scroll-snap-type: none;
        scroll-behavior: auto;
        overscroll-behavior: auto;
    }

    body {
        timeline-scope: none;
    }

    * {
        scroll-snap-align: none;
        scroll-snap-stop: normal;
    }

    section {
        min-height: 100svh;
        padding-left: 5%;
        padding-right: 5%;
    }
}
/* End Mobile Config */

/* Menu Highlight */
@keyframes menu-active-link {
  0%, 25% { 
    color: var(--color-text); 
    opacity: 0.7;
  }
  45%, 55% { 
    color: var(--cor-primaria); 
    opacity: 1;
  }
  75%, 100% { 
    color: var(--color-text); 
    opacity: 0.7;
  }
}

/* Configuração base para os links do menu */
a[href="#home"],
a[href="#services"],
a[href="#projects"],
a[href="#about"] {
  animation-name: menu-active-link;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-range: cover 0% cover 100%;
}

/* Conexão com as mesmas timelines das seções */
a[href="#home"]:not(.fps-link)     { animation-timeline: --p1; }
a[href="#services"]:not(.fps-link) { animation-timeline: --p2; }
a[href="#projects"]:not(.fps-link) { animation-timeline: --p3; }
a[href="#about"]:not(.fps-link)    { animation-timeline: --p4; }
/* End Menu Hightlight*/


/* Header */
li, a, button, .logo {
	font-family: "Manrope", sans-serif;
	font-weight: 500;
	font-size: 16px;
	color: var(--color-text);
	text-decoration: none;
}

#click {
	display: none;
}

header {
	position: fixed;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left: 12%;
	padding-right: 12%;
	width: 100%;
}

.nav__links {
	list-style: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav__links li {
	display: inline-block;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 20px;
	padding-right: 20px;
}

.nav__links li a {
	transition: all 0.3s ease 0s;
}

.nav__links li a:hover, .active {
	color: var(--cor-primaria);
}

button {
	padding-top: 9px;
	padding-bottom: 9px;
	padding-left: 25px;
	padding-right: 25px;
	background-color: var(--cor-primaria);
	border: none;
	border-radius: 50px;
	cursor: pointer;
	transition: all 0.3s ease 0s;
}

button:hover {
	background-color: var(--cor-secundaria);
}

.logo {
	font-size: 18px;
	font-weight: 600;
}

.menu-btn {
	color: var(--color-text);
	display: none;
	cursor: pointer;
	padding-left: 10px;
}

@media (max-width: 1250px) {
	.nav__links {
		position: fixed;
		top: 80px;
		left: -100%;
		background-color: var(--color-background);
		height: 100dvh;
		width: 100%;
		display: block;
		text-align: center;
		transition: all 0.3s ease;
	}

	.cta {
		display: inline-flex;
		position: fixed;
		bottom: 80px;
		width: 100vw;
		left: -100%;
		justify-content: center;
		transition: all 0.3s ease;
	}


	#click:not(:checked) ~ .nav__links{
		left: -100%;
	}
	
	#click:not(:checked) ~ .cta{
		left: -100%;
	}

	#click:checked ~ .nav__links {
		left: 0%;
	}

	#click:checked ~ .cta{
		left: 0%;
	}

	#click:checked ~ .menu-btn i:before {
		content: "\f00d";
	}

	.nav__links li {
		display: block;
		margin-top: 40px;
	}

	.menu-btn {
		display: inline-block;
	}
}
/* End Header */

/* Dot Nav*/
#home { 
  view-timeline-name: --p1; 
  view-timeline-axis: block; 
}

#services { 
  view-timeline-name: --p2; 
  view-timeline-axis: block; 
}

#projects { 
  view-timeline-name: --p3; 
  view-timeline-axis: block; 
}

#about { 
  view-timeline-name: --p4; 
  view-timeline-axis: block; 
}

.fps-dot--1 { animation-timeline: --p1; }
.fps-dot--2 { animation-timeline: --p2; }
.fps-dot--3 { animation-timeline: --p3; }
.fps-dot--4 { animation-timeline: --p4; }

.fps-dot--1 { animation-timeline: --p1; }
.fps-dot--2 { animation-timeline: --p2; }
.fps-dot--3 { animation-timeline: --p3; }
.fps-dot--4 { animation-timeline: --p4; }

.fps-rail {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 999;
}

@media (max-width: 768px) {
    .fps-rail {
        display: none;
    }
}

.fps-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 30px;
  min-height: 30px;
  text-decoration: none;
}

.fps-label {
  position: absolute;
  right: 36px;
  color: var(--color-text);
  background: var(--cor-secundaria);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform: translateX(8px);
}

.fps-link:hover .fps-label {
  opacity: 1;
  transform: translateX(0);
}

.fps-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.3;
  transition: background-color 0.3s ease;
  
  animation-name: fps-active-dot;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-range: cover 0% cover 100%;
}

@keyframes fps-active-dot {
  0%, 25% { 
    transform: scale(1); 
    opacity: 0.3; 
  }
  45%, 55% { 
    transform: scale(1.8); 
    opacity: 1; 
    background-color: var(--cor-primaria); 
  }
  75%, 100% { 
    transform: scale(1); 
    opacity: 0.3; 
  }
}
/* End Dot Nav */

/* Carousel */
.car-22, .car-22 *, .car-22 *::before, .car-22 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.car-22 ::selection {
  background: #fff;
  color: #111;
}
.car-22 {
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100dvh;
  padding: 40px 20px;
  background: #0c0d10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.car-22__stage {
  position: relative;
  width: min(760px,100%);
}
.car-22__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.car-22__slides {
  position: relative;
  aspect-ratio: 12/7;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 60px -34px rgba(0,0,0,.9);
}
.car-22__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .7s ease;
  pointer-events: none;
}
.car-22__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(6,7,10,.78),transparent 65%);
}
.car-22__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12) translateX(6%);
  transition: transform 1s cubic-bezier(.2,.8,.2,1);
}
.car-22__body {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(22px,5vw,52px);
  max-width: 90%;
  color: #fff;
  transform: translateX(-14%);
  opacity: 0;
  transition: transform .8s cubic-bezier(.2,.8,.2,1) .12s,opacity .8s .12s;
}
.car-22__kick {
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cor-primaria);
  margin-bottom: 10px;
}
.car-22__title {
  font-size: clamp(26px,5vw,44px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.01em;
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
}
.car-22__lead {
  font-size: 15px;
  line-height: 1.55;
  color: #dfe2e8;
  margin-top: 12px;
  max-width: 85%;
}
.car-22__radio:nth-of-type(1):checked ~ .car-22__slides .car-22__slide:nth-child(1), .car-22__radio:nth-of-type(2):checked ~ .car-22__slides .car-22__slide:nth-child(2), .car-22__radio:nth-of-type(3):checked ~ .car-22__slides .car-22__slide:nth-child(3) {
  opacity: 1;
  pointer-events: auto;
}
.car-22__radio:nth-of-type(1):checked ~ .car-22__slides .car-22__slide:nth-child(1) .car-22__bg, .car-22__radio:nth-of-type(2):checked ~ .car-22__slides .car-22__slide:nth-child(2) .car-22__bg, .car-22__radio:nth-of-type(3):checked ~ .car-22__slides .car-22__slide:nth-child(3) .car-22__bg {
  transform: scale(1.06) translateX(0);
}
.car-22__radio:nth-of-type(1):checked ~ .car-22__slides .car-22__slide:nth-child(1) .car-22__body, .car-22__radio:nth-of-type(2):checked ~ .car-22__slides .car-22__slide:nth-child(2) .car-22__body, .car-22__radio:nth-of-type(3):checked ~ .car-22__slides .car-22__slide:nth-child(3) .car-22__body {
  transform: translateX(0);
  opacity: 1;
}
.car-22__nav {
  position: absolute;
  right: clamp(18px,4vw,40px);
  bottom: clamp(18px,4vw,40px);
  z-index: 3;
  display: flex;
  gap: 9px;
}
.car-22__pip {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  cursor: pointer;
  transition: transform .2s,background .2s;
}
.car-22__pip:hover {
  background: rgba(255,255,255,.6);
}
.car-22__radio:nth-of-type(1):checked ~ .car-22__nav .car-22__pip:nth-child(1), .car-22__radio:nth-of-type(2):checked ~ .car-22__nav .car-22__pip:nth-child(2), .car-22__radio:nth-of-type(3):checked ~ .car-22__nav .car-22__pip:nth-child(3) {
  background: var(--cor-primaria);
  transform: scale(1.3);
}
.car-22__radio:nth-of-type(1):focus-visible ~ .car-22__nav .car-22__pip:nth-child(1), .car-22__radio:nth-of-type(2):focus-visible ~ .car-22__nav .car-22__pip:nth-child(2), .car-22__radio:nth-of-type(3):focus-visible ~ .car-22__nav .car-22__pip:nth-child(3) {
  outline: 3px solid var(--cor-primaria);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .car-22__slide, .car-22__bg, .car-22__body {
    transition: opacity .3s;
  }
  .car-22__bg {
    transform: none!important;
  }
  .car-22__body {
    transform: none!important;
  }
}
/* End Carousel CSS*/