/** Colours */
@import "./theme.css";

/* Override Tailwind's color reset - force color inheritance */
@layer base {
	* {
		color: inherit;
	}
}

.trbl-green {
	border-radius: 15px;
	background: var(--greenerBg);
}

.trbl-green::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		to bottom left,
		var(--secondary),
		var(--background) 35%
	);
	z-index: -1;
	border-radius: inherit;
	margin: -2px;
}

/** Structure & layout */
/* section {
	position: relative;
	height: 100vh;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
} */

body {
	/* background: var(--background);
	margin: 0;
	overflow-y: scroll;
	height: auto;
	min-height: 100vh; */
	font-family: Satoshi, sans-serif;
	overflow-x: hidden;
	/* color: var(--foreground);
	scroll-behavior: smooth; */
	/* color: var(--foreground); */
}

* {
	box-sizing: border-box;
}

.flex {
	display: flex;
}

.hori {
	flex-direction: row;
}

.vert {
	flex-direction: column;
}

.adapt {
	flex-direction: row;
}

.absolute {
	position: absolute;
}

.fixed {
	position: fixed;
}

.flexCentreHori {
	align-items: center;
}

.flexCentreVert {
	justify-content: center;
}

.centre {
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
}

.textCentre {
	text-align: center;
}

/** Font */
/* p,
h1,
h2,
h3,
h4,
span {
	margin-top: 0;
} */

/* h1 {
	font-weight: 700;
	font-size: 5em;
}

h2 {
	font-weight: 700;
	font-size: 3em;
}

p {
	font-size: 1.5em;
} */

.fancy {
	font-family: playfairDisplay, serif;
}

.accentBlue {
	color: var(--primary);
}

.blue {
	--accent: var(--primary);
}

.green {
	--accent: var(--secondary);
}

.halfAccent {
	background: linear-gradient(
		180deg,
		var(--foreground) 50%,
		var(--accent) 100%
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.halfAccentTop {
	background: linear-gradient(0, var(--foreground) 30%, var(--accent) 80%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.semiHidden {
	scale: 0.6;
	opacity: 0.6;
}

/** Colours */
.bgAccentBlue {
	background: var(--primary);
}

/** Shapes */
.circle {
	border-radius: 100%;
}

/** Behaviour */
#followCursor {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	user-select: none;
	pointer-events: none;
	clip-path: none;
	/* transition: all 0.3s cubic-bezier(0.31, -0.01, 0.07, 1.02); */
}

noscript {
	display: block;
	text-align: center;
	padding: 3rem 2rem;
	background: color-mix(in oklch, var(--destructive) 10%, transparent);
	border: 2px solid color-mix(in oklch, var(--destructive) 30%, transparent);
	border-radius: 10px;
	margin: 2rem;
	color: var(--destructive);
}

/** Positioning */
.top {
	top: 0;
}

.bottom {
	margin-top: auto;
	margin-bottom: 0;
	bottom: 0;
}

.bottom * {
	margin: 0;
}

.left {
	left: 0;
}

.right {
	right: 0;
}

.relative {
	position: relative;
}

.absolute {
	position: absolute;
}

/** Appearance */
.mobileOnly {
	display: none;
	user-select: none;
}

.hidden {
	display: none;
	user-select: none;
	pointer-events: none;
	opacity: 0;
}

/** Elements */
/* .card {
	backdrop-filter: blur(10px);
	border-radius: 25px;
	box-shadow: 0 0 100px color-mix(in oklch, var(--muted) 30%, transparent) inset;
}

button {
	cursor: pointer;
	user-select: none;
}

input,
button,
textarea {
	font-family: Satoshi, sans-serif;
}

a {
	color: var(--primary);
	text-decoration: none;
	transition: color 0.3s ease;
}

a:hover {
	color: var(--secondary);
} */

/** Keyframes */
@keyframes scale {
	from {
		transform: scale(0);
	}
	to {
		transform: scale(1);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideInLeft {
	from {
		opacity: 0;
		transform: translateX(-100px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(100px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Utility animation classes */
.fadeIn {
	animation: fadeIn 0.6s ease forwards;
}

.slideInLeft {
	animation: slideInLeft 0.6s ease forwards;
}

.slideInRight {
	animation: slideInRight 0.6s ease forwards;
}

/* Preloader */
.loader {
	--uib-size: 40px;
	--uib-color: var(--foreground);
	--uib-speed: 1.1s;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--uib-size);
	width: var(--uib-size);
	animation: rotate var(--uib-speed) linear infinite;
}

.loader::before,
.loader::after {
	content: "";
	height: 25%;
	width: 25%;
	border-radius: 50%;
	background-color: var(--uib-color);
	transition: background-color 0.3s ease;
}

.loader::before {
	animation: wobble2 calc(var(--uib-speed) * 1.25) ease-in-out infinite;
}

.loader::after {
	animation: wobble calc(var(--uib-speed) * 1.25) ease-in-out infinite;
}

.loader::before {
	margin-right: 10%;
}

@keyframes wobble {
	0%,
	100% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(calc(var(--uib-size) * 0.2)) scale(1.1);
	}
}

@keyframes wobble2 {
	0%,
	100% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(calc(var(--uib-size) * -0.2)) scale(1.1);
	}
}

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@media screen and (max-width: 1230px) {
	#followCursor,
	#foreground {
		display: none;
		user-select: none;
		pointer-events: none;
	}

	/** Fonts */

	/* h1 {
		font-weight: 700;
		font-size: 3rem;
	}

	h2 {
		font-weight: 700;
		font-size: 2rem;
	}

	p {
		font-size: 1rem;
	} */

	/* Flexboxes */
	.adapt {
		flex-direction: column;
	}

	/* body *:not(.mobileOnly) {
		display: none;
		user-select: none;
	}

	.mobileOnly {
		margin-top: 15vw;
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		display: block;
		user-select: text;
		text-align: center;
		padding: 20vh 15vw;
	}

	.mobileOnly * {
		display: block !important;
		user-select: text !important;
	}

	h1 {
		font-size: 4em;
		overflow-wrap: break-word;
	}

	p {
		font-size: 1em;
		opacity: 75%;
	}

	img {
		transform: scale(5);
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 100px;
		filter: invert(92%) sepia(13%) saturate(400%) hue-rotate(155deg)
			brightness(99%) contrast(94%);
	} */
}