@property --k {
	syntax: '<number>';
	initial-value: -1;
	inherits: true
}

@property --ang {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false
}

* { margin: 0 }

html {
	scrollbar-width: none;
	height: calc(var(--n)*100%)
}

body, header, main, section, 
article, figure { display: grid }

body {
	--dir: 0;
	grid-template-rows: max-content 1fr max-content;
	position: fixed;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	color: #dedede;
	font: clamp(.625em, 3vmin, 1.5em)/ 1.25 saira, sans-serif;
	animation: k 1s linear;
	animation-timeline: scroll();
	
	&::before {
		position: absolute;
		inset: 0;
		z-index: -1;
		background: #010f0d;
		filter: url(#grain);
		content: ''
	}
	
	@media (max-aspect-ratio: 2/ 3) { --dir: 1 }
}

@keyframes k { to { --k: 1 } }

svg[height='0'][aria-hidden='true'] { position: fixed }

header {
	place-content: center;
	place-items: center;
	padding: .5em;
	text-align: center;
	text-wrap: balance
}

em { max-width: 32em }

main {
	overflow: hidden;
	perspective: 50em
}

section, article { transform-style: preserve-3d }

section {
	--r: calc(2 + var(--dir))/ 3;
	--w: clamp(4em, min(50vh, 25vw), 18em);
	--z: calc(var(--f, 1.25)*-.5*var(--w)/tan(.5turn/var(--n)));
	place-self: center;
	translate: 0 0 var(--z);
	rotate: var(--dir) calc(1 - var(--dir)) 0 calc((var(--k) + .5)*-1turn);
}

article, header, figure, img, figcaption { grid-area: 1/ 1 }

article {
	/* item progress value */
	--j: var(--i)/var(--n);
	/* linear difference between this item's progress value  
	 * and progress value of highlighted item in front - 
	 * it's a value in the [0, 1] interval */
	--dif-lin: calc(var(--j) - mod(var(--k) + 1, 1));
	/* absolute value of linear difference */
	--abs-lin: abs(var(--dif-lin));
	/* difference between middle & absolute linear difference */
	--dif-mid: calc(.5 - var(--abs-lin));
	--abs-mid: abs(var(--dif-mid));
	/* relative distance to from this item 
	 * to highlighted one in front */
	--dif-arc: calc(2*(.5 - var(--abs-mid)));
	/* relative distance limit */
	--lim: .35;
	--sel: max(0, calc((var(--lim) - var(--dif-arc))/var(--lim)));
	--out: calc(1 - var(--sel));
	--hov: 0;
	width: var(--w);
	aspect-ratio: var(--r);
	transform: 
		rotate3d(var(--dir), calc(1 - var(--dir)), 0, calc(var(--j)*1turn))
		translatez(var(--z))
		rotate(calc(var(--dir)*.5turn));
	
	header { rotate: y calc((1 + var(--hov))*.5turn) }
	
	&:hover, &:focus-within { --hov: round(var(--sel)) }
	
	@supports not (scale: abs(-1)) {
		--abs-lin: max(var(--dif-lin), -1*var(--dif-lin));
		--abs-mid: max(var(--dif-mid), -1*var(--dif-mid))
	}
}

article header, figure {
	--ang: calc(-45deg + var(--hov)*180deg);
	overflow: hidden;
	position: relative;
	border: solid 4px #0000;
	border-radius: .5em;
	backface-visibility: hidden;
	box-shadow: 5px 5px 13px #000;
	background: 
		var(--url) 50%/ cover padding-box, 
		linear-gradient(#666 0 0) padding-box, 
		repeating-conic-gradient(from var(--ang), 
				#0000 0% 15%, 
				color-mix(in srgb, 
					#06f44d calc(var(--sel)*100%), #333) 20% 30%, 
				#0000 35% 50%) 
			border-box #121212;
	background-blend-mode: multiply, normal, normal;
	isolation: isolate;
	/* prevent edge glitching on article hover */
	pointer-events: none;
	transition: .35s ease-out;
	transition-property: rotate, --ang;
	
	&::after {
		position: absolute;
		inset: 0;
		opacity: var(--out);
		background: #031e1c;
		mix-blend-mode: color;
		pointer-events: none;
		content: ''
	}
}

/* reverse from parent */
h2, em, img, a { pointer-events: auto }

h2, em, figcaption {
	opacity: round(up, var(--sel));
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4)
}

h2 { font-size: 1.125em }

figure { rotate: y calc(var(--hov)*.5turn) }

img {
	width: 100%;
	height: 100%;
	aspect-ratio: var(--r);
	object-fit: cover;
	object-position: var(--pos)
}

figcaption {
	align-self: end;
	padding: .5em;
	background: rgba(255, 255, 255, 0.2);
	color: #040404;
	font: Max(.75rem, .75em) caveat, cursive;
	text-align: right;
	backdrop-filter: blur(5px) brightness(1.5);
	
	a { color: #063724 }
}

/* just support info boxes if it lacks support */
aside {
	position: fixed;
	bottom: 0;
	padding: .5em;
}

.box-info-scrollani {
	margin: .5em;
	border-left: solid 5px #30dc69;
	padding: .75em;
	box-shadow: 2px 2px 5px hsla(0, 0%, 0%, .35);
	background: #1d8553;
	color: #fff;
	font: 1em/ 1.25 ubuntu, trebuchet ms, arial, sans-serif;
	
	@supports (animation-timeline: scroll()) { display: none }
}

kbd {
	padding: 2px;
	background: hsla(0, 0%, 0%, .35);
	font: 1.1em/ 1.2 ubuntu mono, consolas, monaco, monospace
}
#scroll-indicator-top {
  position: fixed;
  top: 40px;
  left: 20px;
  font-size: 36px;
  color: #00ff99;
  z-index: 9999;
  opacity: 0.8;
  pointer-events: none;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(8px);
  }
  60% {
    transform: translateY(4px);
  }
}
footer {
    background-color: #f0f0f0; /* Cor de fundo clara para visualização */
    color: #333;
    padding: 10px;
    text-align: center;
    font-size: 0.8em;
	font: 1em/ 1.25 ubuntu, trebuchet ms, arial, sans-serif;
    border-top: 1px solid #ccc;
    width: 100%;
    box-sizing: border-box; /* Garante que padding não aumente a largura */
    margin-top: 30px; /* Adiciona um espaço acima do rodapé */
}
.nombre{
	text-align: center;
	text-shadow: 0px 10px rgba(46, 204, 113,.6);
	color: white;
  	font-family: 'Raleway', sans-serif !important;
  	font-size: 50px;
	font-weight: bold;
	animation-delay: 0.5s;
}

.nombre p{
	margin-top:20px;
}
.scroll-indicator {
	text-align: center;
	font-size: 15px;
  	color: #e2ece8;
  	text-shadow: 0px 10px rgba(46, 204, 113,.6);
  	animation: fadeIn 1s ease-in-out;
  	text-align: center;
  	@keyframes fadeIn {
    	0% {
      		opacity: 0;
    	}
    100% {
      opacity: 1;
    }
  }

}
#logo-fixa img {
  height: 90px;  /* ou o tamanho que você quiser */
  width: auto;
  opacity: 0.95;
  transition: transform 0.3s ease;
  border: 2px solid #4CAF50; /* verde escuro ou tom da sua paleta */
  border-radius: 8px; /* bordas levemente arredondadas */
  background-color: #111; /* se quiser um fundo sutil */
  padding: 4px; /* espaçamento entre a borda e a imagem */
  position: fixed;
	top: 15px;
	left: 15px;

}


#logo-fixa img:hover {
  transform: scale(1.05); /* efeito sutil ao passar o mouse */
}