@use "sass:meta";
.home {
	@include meta.load-css("highlight.js/styles/github.css");

	&--container {
		margin: auto;
		position: relative;
	}

	&--toolbar {
		.v-toolbar__content {
			gap: 1rem;
			justify-content: space-between;
			padding: 1rem;
		}

		.main {
			font-size: 1.6rem;
			font-weight: 800;
			text-transform: uppercase;
			letter-spacing: 0.01rem;
			cursor: pointer;
		}

		.email {
			display: flex;
			gap: 0.3rem;
			align-items: center;
			justify-content: center;
		}

		.btn-grp {
			display: flex;
			gap: 0.5rem;
		}

		.btn {
			display: flex;
			gap: 0.2rem;
			cursor: pointer;

			align-items: center;
			justify-content: center;
			padding: 0.3rem 0.5rem;
			border-radius: 4px;

			&:hover {
				background-color: #d4d4d4;
			}
		}
	}

	&--content {
		background-color: #f5f5f5;
		padding: 2rem;
		display: flex;

		@media only screen and (max-width: 600px) {
			flex-direction: column;
			padding: 0.8rem;
		}
	}

	&--sidebar {
		width: 18rem;

		@media only screen and (max-width: 600px) {
			width: 100%;
			height: 2rem;
			margin-bottom: 1rem;
		}

		.linkedin,
		.github,
		.twitter {
			position: absolute;
			left: 2rem;
			font-size: 2rem;

			@media only screen and (max-width: 600px) {
				position: initial;
			}
		}

		.linkedin {
			top: 300px;
		}

		.github {
			top: 340px;
			color: black;
		}

		.twitter {
			top: 380px;
			color: dodgerblue;
		}
	}

	&--intro {
		padding-block: 10rem;
		padding-inline: 3rem;
		margin-bottom: 4rem;
		display: flex;
		gap: 4rem;
		flex-wrap: wrap;
		justify-content: start;

		@media only screen and (max-width: 600px) {
			padding-inline: 0.8rem;
			padding-block: 1rem;
		}

		.full-name {
			font-size: 3rem;
			font-weight: 900;
			text-transform: uppercase;
		}

		.title {
			font-size: 1.5rem;
			font-weight: bold;
			margin-bottom: 1rem;
		}

		.lets-talk {
			margin-top: 3rem;
			margin-left: 2rem;
			background-color: darkorange;
			color: white;
			border-radius: 50%;
			height: 4rem;
			width: 4rem;
			position: relative;
			outline: 20px solid orange;
			overflow: visible;

			/* Add these properties for hover state handling */
			cursor: pointer;
			transition: transform 0.3s ease;

			.lets,
			.talk {
				position: absolute;
			}

			.lets {
				top: 0.6rem;
				left: 1rem;
			}

			.talk {
				top: 1.7rem;
				left: 1.5rem;
			}

			/* Position for the ripple elements */
			&::before,
			&::after {
				content: "";
				position: absolute;
				top: 50%;
				left: 50%;
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background-color: rgba(255, 165, 0, 0.3); /* subtle orange */
				transform: translate(-50%, -50%) scale(0);
				opacity: 0;
				z-index: -1;
				pointer-events: none;
			}

			/* Hover state - start the animations */
			&:hover {
				transform: scale(1.05);

				&::before {
					animation: ripple 2s infinite ease-out;
				}

				&::after {
					animation: ripple 2s infinite ease-out 1s; /* Delayed start for second ripple */
				}
			}
		}

		.right-panel,
		.left-panel {
			padding: 1rem;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.left-panel {
			flex-direction: column;
			align-items: start;
			flex-basis: 30%;
		}
	}

	&--services {
		&--title {
			padding-block: 1rem;

			h2 {
				font-size: clamp(1.5rem, 3vh, 3rem);
			}
		}

		.experience {
			font-size: 1.2rem;
		}

		margin-bottom: 8rem;
	}

	&--works {
		margin-bottom: 8rem;

		.cards-list {
			display: flex;
			gap: 1rem;
			flex-wrap: wrap;
			justify-content: start;

			.work--card {
				flex-basis: 48%;

				@media only screen and (max-width: 400px) {
					flex-basis: 100%;
				}

				&--title {
					font-size: clamp(1rem, 3vh, 3rem);
				}
			}
		}

		.links {
			width: 100%;
			a {
				font-size: 1rem;
				text-transform: capitalize;
				color: #1867c0;

				&:hover {
					text-decoration: underline;
				}
			}
		}
	}

	&--experience {
		margin-bottom: 2rem;
	}
	&--tools {
		margin-bottom: 8rem;
	}
}

body.dark {
	.home {
		@include meta.load-css("highlight.js/styles/github-dark.css");
		&--content {
			background-color: #121212;
			color: white;
		}
	}
}

/* Ripple animation */
@keyframes ripple {
	0% {
		transform: translate(-50%, -50%) scale(0.8);
		opacity: 0.7;
	}
	100% {
		transform: translate(-50%, -50%) scale(2.5);
		opacity: 0;
	}
}