@import url("variaveis.css");
@import url("fonts.css");
@import url("animations.css");

/* CSS variables. Not needed for the effect to work. */
:root {
	--bg-blend: luminosity;
	--fg-blend: darken;
	--opacity: 1;
}

.img-wrapper {
	background-color: var(--cor-fundo);
	display: flex;
	flex: 1 1 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}

.img-wrapper img {
	filter: grayscale(100%) contrast(1);
	flex: 1 0 100%;
	height: 100%;
	max-width: 100%;
	mix-blend-mode: var(--bg-blend);
	object-fit: cover;
	opacity: var(--opacity);
	position: relative;
	width: 100%;
}

.img-wrapper::before {
	background-color: var(--cor-texto);
	bottom: 0;
	content: "";
	height: 100%;
	left: 0;
	mix-blend-mode: var(--fg-blend);
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 1;
}

:root[data-theme="light"] {
	--clr-yellow-a0-old: #1e1b21;
	--clr-yellow-a10-old: #2b272f;
	--clr-yellow-a20-old: #3a333d;
	--clr-yellow-a30-old: #565157;
	--clr-yellow-a40-old: #807b82;
	--clr-yellow-a50-old: #bfbabb;

	--clr-gray-a0: #4a4225;
	--clr-gray-a10: #7a6d4c;
	--clr-gray-a20: #a09372;
	--clr-gray-a30: #c1b492;
	--clr-gray-a40: #dcd6a8;
	--clr-gray-a50: #f3efc2;

	--cor-texto: var(--clr-yellow-a10-old);
	--cor-fundo: var(--clr-gray-a40);
}

:root {
	--cor-texto: var(--clr-yellow-a40-old);
	--cor-fundo: var(--clr-gray-a0);
}

::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	background-color: var(--clr-gray-a0);
}

::-webkit-scrollbar {
	height: 10px;
	width: 10px;
	background-color: var(--cor-fundo);
}

::-webkit-scrollbar-thumb {
	background-color: var(--cor-texto);
}

/* Seleção de texto */
::selection {
	background: var(--cor-texto);
	color: var(--cor-fundo);
}

* {
	image-rendering: pixelated;
	font-smooth: never;
	-webkit-font-smoothing: none;

	scrollbar-width: thin;
	/* ou 'auto' para padrão */
	scrollbar-color: var(--cor-texto) var(--cor-fundo);
	/* polegar, trilho */
}

html,
body {
	height: 100%;
	min-height: 100%;
	margin: 0;
	padding: 0;
	cursor: default;
	overflow-x: hidden;
}

body {
	background-color: var(--cor-fundo);
	color: var(--cor-texto);
	font-family: var(--fonte-corpo);
	/* text-align: justify; */
	letter-spacing: 0.8px;
	overflow-y: scroll;
	overflow-x: hidden;
	font-size: 13px;
}

/* body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--cor-texto);
  mix-blend-mode: color;
  pointer-events: none;
  z-index: 9999;
} */

#conteudo {
	max-width: 98%;
	min-height: 100vh;
	margin: 0 auto;
	/* Centraliza horizontalmente */
	position: relative;

	display: flex;
	flex-direction: row;
	/* Para telas grandes */
	flex-wrap: wrap;
	/* Permite que os itens se movam para a linha seguinte */
	justify-content: space-between;
	/* Espaçamento entre as colunas */
}

#header {
	margin-top: 8px;
	top: 0;
	left: 0;
	width: 100%;
	padding: 10px;
	text-align: left;
}

#header a:hover {
	text-decoration: underline solid;
}

.italico {
	font-style: italic;
}

.negrito {
	font-weight: bold;
}

.espaçador {
	height: 12px;
	width: 100%;
}

a:has(p),
p a,
ul:not(.sitelist) li a,
legend a,
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	&[href^="http"]::after {
		content: " 🡭";
		display: inline-block;
		text-decoration: none;
		margin-left: 0.3ch;
		vertical-align: baseline;
		pointer-events: none;
		font-size: 0.9em;
	}
}

/* ----------------------------------------------
 * Anotações
 * ---------------------------------------------- */

.anotacoes {
	justify-items: center;
	column-count: 5;
	column-gap: 12px;
	width: 100%;
	/* max-width: 1600px; */
	margin: 0 auto;
	padding: 6px 0;
	margin-bottom: 42px;
}

.anotacoes .anotacao {
	display: inline-block;
	width: 100%;
	background: var(--cor-fundo);
	border: 1px solid var(--cor-texto);
	border-radius: 5px;
	margin: 0 0 12px 0;
	box-sizing: border-box;
	padding: 16px;
	break-inside: avoid;
	overflow: visible;
	/* Para evitar quebras feias */
}

/* Espaçamento automático entre elementos dentro da anotação */
.anotacao > * + * {
	margin-top: 8px !important;
}

body .anotacao img {
	width: 100%;
	margin: 0;
	border: 1px solid var(--cor-texto);
	border-radius: 5px;
	/* filter: url(#duotone); */
	user-select: none;
	/* pointer-events: none; */
	z-index: 0;
	/* filter: sepia(1) brightness(0.82) saturate(0.65); */
	transition: all 0.5s cubic-bezier(0.25, 0.85, 0.3, 1.2);
}

body .anotacao img:hover {
	transform: scale(1.06);
	z-index: 90;
	filter: none;
	position: relative;
}

.anotacao img.banner {
	width: 88px;
	height: 31px;
	border-radius: 0;
	margin: 5px 0px 10px 0px;
}

.anotacao img.banner:hover {
	transform: none;
}

/* NSFW blur effect */
.anotacao img.nsfw {
	filter: blur(18px);
	clip-path: inset(0 round 5px);
}

.anotacao img.nsfw:hover {
	filter: none; /* Remove blur e herda outros filtros se houver */
}

/* Desabilitar blur NSFW quando o switch estiver desativado */
body.disable-nsfw-blur .anotacao img.nsfw,
body.disable-nsfw-blur .anotacao img.nsfw:hover {
	filter: none !important;
}

h1,
h2,
h3 {
	font-family: "Voxel", sans-serif;
	text-transform: none;
	margin-bottom: 4px;
	margin-top: 0;
}

h1.title {
	font-size: 3em;
}

.anotacao h1 {
	font-size: 1.71em;
}

.anotacao h2 {
	font-size: 1.36em;
	margin-top: 12px;
}

.anotacao h3 {
	font-size: 1.14em;
}

ul {
	margin-top: 0;
}

li {
	margin-left: -26px;
}

p {
	margin: 0 0 8px 0;
	/* margin: 0; */
}

legend {
	margin: 4px 0 8px 0;
	font-size: 0.96em;
}

a:link,
a:visited,
a:active {
	color: var(--cor-texto);
	text-decoration: underline dotted;
}

.censurado {
	letter-spacing: 0px;
}

hr {
	border: none;
	text-align: center;
	height: 1em;
	position: relative;
}

hr::before {
	content: "*****";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* font-family: monospace; */
	font-family: var(--fonte-corpo);
	font-size: 1.2em;
	background: transparent;
	padding: 0 10px;
	color: var(--cor-texto);
}

.anotacao pre {
	border: 1px dashed var(--cor-texto);
	border-radius: 5px;
	cursor: pointer;
	margin-top: 0;
	padding: 4px;

	display: block;
	overflow-x: auto;
	max-width: 100%;
	white-space: pre;
	/* font-size: 10px; */
	font-size: clamp(0.45, 2vw, 1em);
	font-family: var(--fonte-corpo);
}

.tooltip {
	position: fixed;
	background-color: var(--cor-fundo);
	color: var(--cor-texto);
	padding: 4px 8px;
	border-radius: 6px;
	font-size: 0.82;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s;
	z-index: 9999;
}

#page-loader {
	position: fixed;
	inset: 0;
	background: var(--clr-black-a0);
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	opacity: 1;
	user-select: none;
	pointer-events: none;
}

#page-loader.fade-out {
	opacity: 0;
	pointer-events: none;
}

#page-loader img {
	opacity: 0;
	transform: translateY(40px);
	animation: loader-fadein-up 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	/* animation-delay: 0.3s; */
	width: 220px;
	height: auto;
	filter: contrast(4) brightness(1) grayscale(0.9);
}

#page-loader.fade-out img {
	/* Força a animação de saída SEM transition, usando animation */
	animation: loader-fadeout-up 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes loader-fadein-up {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes loader-fadeout-up {
	to {
		opacity: 0;
		transform: translateY(-40px);
	}
}

/* style-my-tootltips plugin, tooltip styling */
#s-m-t-tooltip {
	/* basic */
	max-width: 300px;
	z-index: 10;
	margin: 24px 14px 7px 12px;
	padding: 3px 6px;

	background: var(--cor-texto) !important;
	border-radius: 0 5px 5px 5px !important;
	border: 0;
	box-shadow: -2px 0 12px rgba(0, 0, 0, 0.4);

	font-family: var(--fonte-corpo) !important;
	font-size: 0.92;
	color: var(--cor-fundo) !important;
	text-transform: lowercase;
}

@media (max-width: 1240px) {
	.anotacoes {
		column-count: 3;
	}
}
@media (max-width: 1024px) {
	.anotacoes {
		column-count: 2;
	}
}
@media (max-width: 770px) {
	.anotacoes {
		column-count: 1;
	}
	.anotacao {
		width: 100%;
	}

	.anotacao img:hover {
		transform: scale(1);
	}
}