@import url('/.library/css/default.css');
@import url('/.library/website/css/loading.css');
/* ----- ----- ----- */
header {
	z-index: 1;

	display: flex;
	flex-direction: column;

	height: 100svh;
	background: var(--color-background);
	/* ----- ----- ----- */
	& img {
		margin: var(--margin);
		margin-bottom: 0;
	}
	/* ----- ----- ----- */
	& nav {
		padding-left: var(--margin);
		padding-right: var(--margin);
		/* ----- ----- ----- */
		& button {
			padding: 12px;
			/* ----- ----- ----- */
			&.active {
				border-bottom: 2px solid;
				color: var(--color-primary);
			}
		}
	}
}
/* ----- ----- ----- */
main > section {
	padding: var(--margin);
}
main > hr.horizontal {
	width: calc(100% - var(--margin) * 2);
	margin: 0 var(--margin);
}
/* ----- ----- ----- */
.default { color: var(--color-default); }
.primary { color: var(--color-primary); }
.secondary { color: var(--color-secondary); }


.item { width: 92px; }



li { max-width:400px }



#photos {
position: absolute;
bottom: 16px;
right: 16px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background: rgba(42, 42, 47, .565);
}



address {
position: relative;
background-image: url('/.library/img/others/minimap.webp');
overflow: hidden;
max-width: 400px;
}
address::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.1);
}




.timeline {
height: 2.5rem;
}
.timeline::before {
content: "";
border-radius: 0.5rem;
width: 100%;
height: 0.5rem;
position: absolute;
background: rgb(232,232,232);
z-index: -1;
top: 0.4rem;
}
.timeline::after {
background: -webkit-linear-gradient(left, #3abe4d 30%, #77e988 80%, #3abe4d) 0 0 / 50% 100%;
animation-name: status;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
content: "";
border-radius: 0.5rem;
height: 0.5rem;
position: absolute;
width: 3rem;
z-index: -1;
top: 0.4rem;
min-width: 48px;
}
.timeline.step-1::after { width: 5%; }
.timeline.step-2::after { width: 60%; }
.timeline.step-3::after { width: 100%; }
.timeline span::before {
content: '';
border: 1px solid rgba(0,0,0,0.2);
border-radius: 50%;
width: 17px;
height: 17px;
position: absolute;
top: 0;
}
.timeline[class*='step-'] span::before {
background: #f4f5f7;
}
.timeline.step-1 span:nth-of-type(-n+1)::before,
.timeline.step-2 span:nth-of-type(-n+2)::before,
.timeline.step-3 span:nth-of-type(-n+3)::before {
background: var(--online);
}
.timeline.step-1 span:nth-of-type(1),
.timeline.step-2 span:nth-of-type(2),
.timeline.step-3 span:nth-of-type(3) {
color: var(--online);
font-weight: 700;
}




section#description section {
max-height: 240px;
mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
transition: max-height 1s;
}
section#description section.show {
max-height: 2000px;
mask-image: none;
transition: max-height 1s;
}


/* click */

/* * A 'mágica' da animação acontece aqui.
* Por padrão, a lista 'ul' que vem depois da div clicável terá altura máxima 0,
* ficará invisível e com overflow escondido.
* Adicionamos uma transição suave para as propriedades que vamos alterar.
*/
section.flex-col > ul {
max-height: 0;
opacity: 0;
overflow: hidden;
visibility: hidden; /* Ajuda a esconder completamente o elemento */
transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in, visibility 0s linear 0.5s;
}

/* * Quando a lista 'ul' tiver a classe 'active', ela se expandirá.
* Damos uma altura máxima grande o suficiente para caber o conteúdo.
* A opacidade volta a 1 e a visibilidade se torna 'visible'.
*/
section.flex-col > ul.active {
opacity: 1;
visibility: visible;
max-height: 480px;
transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in 0.2s, visibility 0s linear 0s;
}