@import "tailwindcss";

:root {
	--hero-color: #e58019;

	--light-color: #fffdf4;
	--dark-color: #5e5e5e;

	/* hover */
	--hero-color-hover: #f08c2d;
	--dark-color-hover: #5e5e5ecc;
}

/* FONTS */
.inter {
	font-family: "Inter", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
}

.tiny5-regular {
	font-family: "Tiny5", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.jersey-10-regular {
	font-family: "Jersey 10", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.jersey-20-regular {
	font-family: "Jersey 20", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.monospace {
	font-family: monospace;
	font-optical-sizing: auto;
	font-style: normal;
}

/* BUTTON STYLES */

.btn {
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;

	padding: 8px 16px;
	height: 48px;

	border-radius: 8px;
	color: var(--light-color);

	font-weight: 600;
}

.btn-primary {
	background-color: var(--hero-color);
}

.btn-primary:hover {
	background-color: var(--hero-color-hover);
}

.btn-secondary {
	background-color: var(--dark-color);
}

.btn-secondary:hover {
	background-color: var(--dark-color-hover);
}

/* STYLES */

/* main  */

.hero-container {
	padding: 8rem 1rem;
}

.numbers-container {
	margin-top: 2rem;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4rem;
}

.number {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.actual-number {
	font-size: 2.25rem;
	font-family: "Jersey 20", sans-serif;
	line-height: normal;
	color: var(--hero-color);
}

.number-description {
	font-size: 0.875rem;
	font-family: monospace;
	color: var(--dark-color);
	text-align: center;
}

/* SECTIONS */

/* features section */

.features-section {
	padding: 2rem 2rem;
	padding-top: 0;
}

.cards-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	margin-top: 2rem;
}

.card {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	background-color: rgb(229, 128, 25, 0.2);
	border-radius: 8px;
	padding: 24px;
}

.card-icon {
	width: fit-content;
}

.card-title {
	font-size: 18px;
	color: var(--hero-color);
	font-weight: 600;
}

.card-description {
	font-size: 14px;
	color: var(--dark-color);
	font-family: monospace;
	flex-basis: 100%;
}

/* welcome section */

.welcome-section {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1rem;

	padding: 6rem 2rem;
}

.disciplines-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;

	margin-top: 2rem;
}

.discipline {
	display: flex;
	gap: 0.5rem;
	background-color: rgb(229, 128, 25, 0.2);
	border-radius: 8px;
	padding: 1rem;
}

.discipline:hover {
	background-color: rgb(229, 128, 25, 0.15);
}

.discipline-name {
	color: var(--dark-color);
}

/* join the community section */

.join-community-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;

	padding: 5rem 2rem;
	padding-top: 0;
}

/* footer */

.bit-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;

	padding: 1rem;
}

.socials-container {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}

/* RESPONSIVE DESIGN */

/* Tablets */

@media (max-width: 768px) {
	.numbers-container {
		gap: 3rem;
	}

	.cards-container {
		grid-template-columns: repeat(2, 1fr);
	}

	.disciplines-container {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobiles */

@media (max-width: 426px) {
	.numbers-container {
		gap: 1rem;
	}

	.cards-container {
		grid-template-columns: repeat(1, 1fr);
	}

	.disciplines-container {
		grid-template-columns: repeat(1, 1fr);
	}
}

/* Animation keyframes */

/* Initial hidden state */
.animate-on-scroll {
	opacity: 0;
	transform: translateY(40px);
	transition: all 0.6s ease-out;
}

/* Top animation variant */
.animate-top {
	transform: translateY(-40px);
}

/* When visible */
.animate-on-scroll.animate-in {
	opacity: 1;
	transform: translateY(0);
}

/* Optional stagger helpers */
.delay-1 {
	transition-delay: 0.2s;
}

.delay-2 {
	transition-delay: 0.3s;
}

.delay-3 {
	transition-delay: 0.4s;
}

.delay-4 {
	transition-delay: 0.5s;
}

/* Custom scrollbar */

/* width */
::-webkit-scrollbar {
	cursor: grab;
	width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px grey;
	border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: var(--hero-color);
	border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: var(--hero-color-hover);
}