/***********************************************************************************/
/*************************** General section stuff *********************************/
/***********************************************************************************/

.section {
	position: relative;
	top: 0; /* Stick to the top of the viewport */
	width: 100%;
	background-image: radial-gradient(#07bccc 2px, transparent 2px);
	background-size: 60px 60px;
	background-color: #1d1d1d;
	background-attachment: fixed;
}

.content-container {
	max-width: 1400px !important;
	margin: auto;
}

.overflow-hidden-wrapper {
    overflow: hidden;
}

@media screen and (max-width: 1280px) {
	.section {
		min-height: 100vh;
	}

	.section::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 3px;
		background: linear-gradient(90deg, #000, #171700, #282828);
		background-size: 200% 100%;
		animation: borderMove 3s linear infinite;
	}

	/* Chevron in the Middle */
	.animated-border::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%) translateY(100%);
		width: 0;
		height: 0;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-top: 15px solid #feb47b;
		/* Optional: Add a small animation to the chevron */
		animation: chevronBounce 2s ease-in-out infinite;
		z-index: 99;
	}
}

/* Keyframes for Border Animation */
@keyframes borderMove {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

/* Keyframes for Chevron Animation */
@keyframes chevronBounce {
	0%,
	100% {
		transform: translateX(-50%) translateY(100%);
	}
	50% {
		transform: translateX(-50%) translateY(110%);
	}
}

/***********************************************************************************/
/********************************* Section 1 ***************************************/
/***********************************************************************************/

.section1 {
	top: 0;
	font-family: var(--section-1-font);
}

.section1 .section1-content {
        height: 90vh;
        display: flex;
        width: 100%;
        align-items: flex-start;
        justify-content: center;
        position: relative;
        padding-top: 10vh;
}

.section1 .section1-content::after {
	content: "<Code> <Code> <Code> <Code> <Code> <Code> <Code> <Code>";
	position: fixed;
	place-content: center;
	font: clamp(5em, Min(65vh, 35vw), 39em) / 0.75 bebas neue, sans-serif;
	left: 50%;
	top: 0;
	width: 100vw;
	height: 100vh;
	transform: translate(-50vw, 0) rotate(30deg);
	border: #07bccc solid 10px;
	color: #e601c0;
	opacity: 0.5;
	overflow: hidden;
}

.section1 .section1-content::before {
	content: "";
	position: absolute;
	left: calc(90% - 100px);
	top: calc(60vh - 100px);
	width: 10vw;
	height: 10vw;
	transform: rotate(12deg);
	border: #e601c0 solid 15px;
	color: #e601c0;
	overflow: hidden;
	z-index: 20;
	background: url("../imgs/me.png") no-repeat center center;
	background-size: 100% 100%;
	filter: invert(60%) sepia(90%) saturate(2264%) hue-rotate(142deg);
}

.section1 .heading-name {
        transform: translate(-18%, -12%);
        color: white;
        font-weight: 900;

        -webkit-text-stroke: 4px #d6f4f4;
        font-variation-settings: "wght" 900, "ital" 1;
	text-align: center;
	color: transparent;
	text-shadow: 10px 10px 0px #07bccc, 15px 15px 0px #e601c0,
		20px 20px 0px #e9019a, 25px 25px 0px #f40468, 45px 45px 10px #482896;

	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
        font-size: 150pt;
        font-size: clamp(8rem, -0.875rem + 14.333vw, 18rem);
}

.section1 .heading-socials{
	position: absolute;
	left: 30px;
	bottom: 5vh;
	font-size: 2em;
}

.section1 .heading-socials a {
	text-decoration: none;
	color: white;
	margin-left: 10px;
	padding: 15px;
	background: rgba(0, 0, 0, 0.1);
}

.section1 .heading-subtext {
	position: absolute;
	color: white;
	top: 95%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 4em;
	text-shadow: 10px 10px 0px #07bccc, 1px 15px 0px #e601c0,
		20px 20px 0px #e9019a, 25px 25px 0px #f40468, 45px 45px 10px #482896;
}

.section1 .heading-location {
	position: absolute;
	color: white;
	top: 105%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 2em;
	text-shadow: 5px 5px 0px #07bccc, 8px 8px 0px #e601c0, 10px 10px 0px #e9019a,
		13px 13px 0px #f40468, 23px 23px 5px #482896;
}

.section1 .heading-container {
	position: relative;
	text-align: center;
	animation: textGlitch 5s infinite;
	box-shadow: var(--section-1-accent) solid 0 0 10px;
	padding: 1rem;
	width: 80vw;
	outline-offset: 45px;
	height: 60vh;
	max-height: 600px;
	box-shadow: 10px 10px 0px #07bccc, 15px 15px 0px #e601c0,
		20px 20px 0px #e9019a, 25px 25px 0px #f40468, 45px 45px 10px #482896;
	background: linear-gradient(-45deg, #07bccc, #e601c0, #e9019a, #482896);
	background-size: 400% 400%;
	animation: gradient 10s ease infinite;
	z-index: 10;
}

.scrolldown-container {
        position: absolute;
        left: 50%;
        bottom: clamp(42px, 10vh, 120px);
        transform: translateX(-50%);
        color: white;
        font-size: 1.5em;
        text-align: center;
        z-index: 999;
        pointer-events: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
        padding: 0 16px;
        width: max-content;
}

.scrolldown-container .scroll-text {
        display: block;
        font-size: clamp(0.75rem, 1.6vw, 1rem);
        letter-spacing: 0.35em;
        text-transform: uppercase;
        opacity: 0.85;
        margin-bottom: 12px;
        text-shadow: 0 0 8px rgba(7, 188, 204, 0.75), 0 0 14px rgba(230, 1, 192, 0.55);
}

.scrolldown-container .chevron {
        position: relative;
        width: 28px;
        height: 8px;
        opacity: 0;
        transform: scale3d(0.5, 0.5, 0.5) translateY(0);
        animation: chevronDrop 3s ease-out infinite;
}

.scrolldown-container .chevron:first-of-type {
        animation-delay: 1s;
}

.scrolldown-container .chevron:nth-of-type(2) {
        animation-delay: 2s;
}

.scrolldown-container .chevron + .chevron {
        margin-top: -6px;
}

.scrolldown-container .chevron::before,
.scrolldown-container .chevron::after {
        content: " ";
        position: absolute;
        top: 0;
        height: 100%;
        width: 51%;
        background: #fff;
}

.scrolldown-container .chevron::before {
        left: 0;
        transform: skew(0deg, 30deg);
}

.scrolldown-container .chevron::after {
        right: 0;
        width: 50%;
        transform: skew(0deg, -30deg);
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes chevronDrop {
        0% {
                opacity: 0;
                transform: scale3d(0.5, 0.5, 0.5) translateY(0);
        }
        25% {
                opacity: 1;
        }
        50% {
                transform: scale3d(0.85, 0.85, 0.85) translateY(14px);
        }
        75% {
                opacity: 1;
                transform: scale3d(0.9, 0.9, 0.9) translateY(24px);
        }
        100% {
                opacity: 0;
                transform: scale3d(0.5, 0.5, 0.5) translateY(38px);
        }
}

/***********************************************************************************/
/********************************* Section 2 ***************************************/
/***********************************************************************************/


.section2 {
        min-height: 100vh;
        max-width: 100vw !important;
        margin: 0;
        background: radial-gradient(
                                circle farthest-side at 0% 50%,
                                #1d1d1d 23.5%,
                                #0000 0
                        )
                        15.75px 22.5px,
                radial-gradient(circle farthest-side at 0% 50%, #222222 24%, #0000 0)
                        14.25px 22.5px,
                linear-gradient(#1d1d1d 14%, #0000 0, #0000 85%, #1d1d1d 0) 0 0,
                linear-gradient(
                                150deg,
                                #1d1d1d 24%,
                                #222222 0,
                                #222222 26%,
                                #0000 0,
                                #0000 74%,
                                #222222 0,
                                #222222 76%,
                                #1d1d1d 0
                        )
                        0 0,
                linear-gradient(
                                30deg,
                                #1d1d1d 24%,
                                #222222 0,
                                #222222 26%,
                                #0000 0,
                                #0000 74%,
                                #222222 0,
                                #222222 76%,
                                #1d1d1d 0
                        )
                        0 0,
                linear-gradient(90deg, #222222 2%, #1d1d1d 0, #1d1d1d 98%, #222222 0%) 0
                        0 #1d1d1d;
        background-size: 30px 45px;
}

.section2-content {
        position: relative;
        padding: 150px 100px;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 10px;
        grid-auto-rows: minmax(120px, auto);
        color: white;
        bottom: 0;
        top: 0;
        z-index: 2;
        overflow: visible;
}

.section2-content::before, .section2-content::after {
        content: "";
        position: absolute;
        place-content: center;
        width: 100vw !important;
        top: -55px;
        left: 0;

        --s: 15px;
        --b: 15px;
        --m: 3;

        background: linear-gradient(-45deg, #07bccc, #e601c0, #e9019a, #482896);
        background-size: 400% 400%;
        animation: gradient 10s ease infinite;
        --R: calc(var(--s) * sqrt(var(--m) * var(--m) + 1) + var(--b) / 2);
        height: calc(2 * var(--R));
        width: 100%;
        --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
        mask: radial-gradient(
                                var(--R) at left 50% bottom calc(-1 * var(--m) * var(--s)),
                                var(--_g)
                        )
                        calc(50% - 2 * var(--s)) calc(50% - var(--s) / 2 - var(--b) / 2) /
                        calc(4 * var(--s)) calc(var(--s) + var(--b)) repeat-x,
                radial-gradient(
                                var(--R) at left 50% top calc(-1 * var(--m) * var(--s)),
                                var(--_g)
                        )
                        50% calc(50% + var(--s) / 2 + var(--b) / 2) / calc(4 * var(--s))
                        calc(var(--s) + var(--b)) repeat-x;
}

.section2-content::before{
        top: auto;
        bottom: -55px;
        z-index: 999;
}

.section2 .box {
        font-size: 2em;
        padding: 10px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        border: white 5px solid;
        transition: transform 0.1s ease-out;
        background: #e601c0;
}

.section2 .box h1 {
        font-size: clamp(1.5rem, 1.2vw + 1rem, 2.5rem);
        text-align: center;
}

.section2 .box i{
	position: absolute;
	font-size: 3em;
	color: rgba(7, 188, 204, .5);
}

.section2 .box:nth-child(odd) {
	background: #121212;
}

.section2 .box.skills-header {
        border: white 5px solid;
        color: white;
        font-size: clamp(1.75rem, 1.25vw + 1.25rem, 3rem);
        background: linear-gradient(-45deg, #07bccc, #482896);
        grid-column: span 2;
}

/* 
.section2-content:has(.box:hover) .box:not(:hover) {
	transition: all 0.3s ease;
	transform: scale(.95);

} */


.section2-content .box:hover {
        transform: scale(1.05);
        transition: all 0.01s ease;
}

.section2 .skip-portfolio {
        position: absolute;
        top: clamp(48px, 7vw, 64px);
        left: 50%;
        transform: translate(-50%, 0);
        color: white;
        text-decoration: none;
        font-size: clamp(1.2rem, 1.2vw + 1rem, 1.6rem);
        padding: clamp(10px, 0.8vw + 8px, 14px) clamp(22px, 1.2vw + 18px, 32px);
        border: 2px solid #e601c0;
        border-radius: 5px;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.35em;
        white-space: nowrap;
        line-height: 1;
        pointer-events: auto;
        z-index: 1000;
        background: rgba(0, 0, 0, 0.25);
        box-shadow: 0 0 18px rgba(230, 1, 192, 0.35);
}

.section2 .skip-portfolio:hover {
        background: rgba(230, 1, 192, 0.9);
        box-shadow: 0 0 22px rgba(230, 1, 192, 0.55);
        transform: translate(-50%, 3px);
}

@media screen and (max-width: 1400px) {
        .section1 .section1-content::after,
        .section1 .section1-content::before {
                opacity: 0.2;
        }

        .section2-content {
                padding: 120px 70px;
                grid-template-columns: repeat(4, 1fr);
        }

        .section2 .box.skills-header {
                grid-column: span 2;
        }
}

@media screen and (max-width: 1024px) {
        .section1 .section1-content {
                height: auto;
                padding: clamp(120px, 26vh, 180px) clamp(24px, 6vw, 60px) clamp(90px, 22vh, 150px);
                flex-direction: column;
                align-items: center;
                gap: clamp(48px, 14vh, 140px);
        }

        .section1 .heading-container {
                width: 100%;
                height: auto;
                max-height: none;
        }

        .section1 .heading-name {
                font-size: clamp(3.5rem, 12vw, 8rem);
                transform: none;
        }

        .section1 .heading-subtext,
        .section1 .heading-location {
                position: static;
                transform: none;
                display: block;
        }

        .section1 .heading-subtext {
                margin-top: 30px;
                font-size: clamp(1.5rem, 4vw, 2.5rem);
        }

        .section1 .heading-location {
                margin-top: 12px;
                font-size: clamp(1rem, 3.2vw, 1.75rem);
        }

        .section1 .heading-socials {
                position: static;
                margin-top: 30px;
                display: flex;
                justify-content: center;
                gap: 15px;
        }

        .section1 .heading-socials a {
                margin: 0;
        }

        .section1 .scrolldown-container {
                position: static;
                transform: none;
                margin-top: 70px;
                width: 100%;
                min-height: auto;
                padding: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 18px;
        }

        .section1 .scrolldown-container .scroll-text {
                margin-bottom: 0;
        }

        .section1 .scrolldown-container .chevron {
                position: relative;
                left: 0;
                top: 0;
                transform: translate3d(0, 0, 0) scale3d(0.5, 0.5, 0.5);
                animation-name: moveMobile;
        }

        .section1 .scrolldown-container .chevron:first-of-type {
                animation-delay: 0.6s;
        }

        .section1 .scrolldown-container .chevron:nth-of-type(2) {
                animation-delay: 1.2s;
        }

        .section2-content {
                grid-template-columns: repeat(3, 1fr);
                padding: 150px 50px;
        }
}

@media screen and (max-width: 1024px) {
        @keyframes moveMobile {
                25% {
                        opacity: 1;
                }
                33% {
                        opacity: 1;
                        transform: translate3d(0, 30px, 0);
                }
                67% {
                        opacity: 1;
                        transform: translate3d(0, 40px, 0);
                }
                100% {
                        opacity: 0;
                        transform: translate3d(0, 55px, 0) scale3d(0.5, 0.5, 0.5);
                }
        }
}

@media screen and (max-width: 880px) {
        .nav-wrap {
                padding: 24px 18px 18px;
        }

        .nav {
                margin: 0 0 70px 18px;
        }

        .nav li {
                margin-bottom: clamp(32px, 10vw, 68px);
        }

        .nav li:after {
                height: clamp(220px, 60vh, 420px);
                left: -24px;
        }

        .nav li .nav-counter {
                font-size: clamp(18px, 5vw, 22px);
        }

        .nav li.active .nav-counter {
                font-size: clamp(30px, 9vw, 40px);
        }

        .section2 .skip-portfolio {
                top: clamp(44px, 7.5vw, 58px);
                font-size: clamp(1.1rem, 3.6vw, 1.4rem);
                padding: clamp(9px, 1.2vw + 6px, 12px) clamp(20px, 1.6vw + 14px, 26px);
        }
}

@media screen and (max-width: 768px) {
        .section2-content {
                grid-template-columns: repeat(2, 1fr);
                padding: 130px 30px 100px;
                grid-auto-rows: minmax(110px, auto);
        }

        .section2 .box {
                min-height: 110px;
        }

        .section2 .box.skills-header {
                grid-column: 1 / -1;
        }

        .section3 {
                height: auto;
        }

        .section2 .skip-portfolio {
                top: clamp(40px, 8.6vw, 54px);
                font-size: clamp(1.05rem, 4.2vw, 1.3rem);
                padding: clamp(8px, 1vw + 6px, 11px) clamp(18px, 1.5vw + 12px, 24px);
        }

        .section3-content .portfolio-scroll {
                --portfolio-card-width: clamp(420px, 94vw, 680px);
                --portfolio-card-gap: clamp(48px, 18vw, 90px);
                --portfolio-track-padding: clamp(36px, 20vw, 96px);
        }

        .section2 .skip-portfolio {
                top: clamp(40px, 8.6vw, 54px);
                font-size: clamp(1.05rem, 4.2vw, 1.3rem);
                padding: clamp(8px, 1vw + 6px, 11px) clamp(18px, 1.5vw + 12px, 24px);
        }

        .section3-content .portfolio-scroll {
                --portfolio-card-width: clamp(420px, 94vw, 680px);
                --portfolio-card-gap: clamp(48px, 18vw, 90px);
                --portfolio-track-padding: clamp(36px, 20vw, 96px);
        }
}

@media screen and (max-width: 560px) {
        .nav-wrap {
                padding: 20px 14px 14px;
        }

        .nav {
                margin: 0 0 60px 14px;
        }

        .nav li {
                margin-bottom: clamp(28px, 12vw, 56px);
        }

        .nav li:after {
                left: -20px;
                width: 16px;
        }

        .nav li .nav-counter {
                font-size: clamp(16px, 5.8vw, 20px);
        }

        .nav li.active .nav-counter {
                font-size: clamp(26px, 9vw, 34px);
        }

        .section1 .section1-content {
                padding: 130px 20px 90px;
                gap: clamp(40px, 18vh, 120px);
        }

        .section1 .scrolldown-container {
                margin-top: clamp(32px, 14vh, 84px);
        }

        .section1 .heading-name {
                font-size: clamp(2.75rem, 14vw, 5rem);
                text-shadow: 6px 6px 0px #07bccc, 8px 8px 0px #e601c0,
                        10px 10px 0px #e9019a, 14px 14px 0px #f40468,
                        24px 24px 6px #482896;
        }

        .section2-content {
                grid-template-columns: 1fr;
        }

        .section2 .skip-portfolio {
                max-width: none;
        }

        .section2 .box {
                min-height: 100px;
        }

        .section2 .box.skills-header {
                font-size: clamp(1.5rem, 6vw, 2.25rem);
        }

        .section2 .skip-portfolio {
                top: clamp(36px, 9vw, 48px);
                font-size: clamp(1rem, 4.8vw, 1.25rem);
                padding: clamp(7px, 0.9vw + 5px, 10px) clamp(16px, 1.4vw + 10px, 22px);
        }

        .section3-content .portfolio-scroll {
                --portfolio-card-width: clamp(360px, 100vw, 620px);
                --portfolio-card-gap: clamp(40px, 20vw, 72px);
                --portfolio-track-padding: clamp(30px, 22vw, 76px);
        }
}


/***********************************************************************************/
/********************************* Section 3 ***************************************/
/***********************************************************************************/

.section3 {
    height: 300vh; /* Replace min-height: 500vh with a fixed height */
}

.section3-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

.section3-content {
        position: relative;
        height: 100%;
        background: none;
        overflow: hidden;
}


.section3-content .portfolio-scroll {
        --portfolio-card-width: clamp(600px, 48vw, 880px);
        --portfolio-card-gap: clamp(70px, 8vw, 160px);
        --portfolio-track-padding: clamp(64px, 10vw, 160px);
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        display: flex;
        align-items: center;
        gap: var(--portfolio-card-gap);
        padding: 0 var(--portfolio-track-padding);
        width: max-content;
        will-change: transform;
}

.portfolio-scroll .portfolio-item {
        flex: 0 0 var(--portfolio-card-width);
        width: var(--portfolio-card-width);
        min-width: var(--portfolio-card-width);
        height: clamp(480px, 70vh, 720px);
        background: linear-gradient(-45deg, #07bccc, #482896);
        background-size: 300% 300%;
        animation: gradient 10s ease infinite;
        border-radius: 22px;
        padding: clamp(24px, 2.8vw, 36px);
        box-shadow: 0 30px 75px rgba(7, 188, 204, 0.25), 0 0 52px rgba(230, 1, 192, 0.35);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: clamp(22px, 3vw, 36px);
        color: #f8f9ff;
}

/***********************************************************************************/
/********************************* Section 4 ***************************************/
/***********************************************************************************/

.section4 {
	height: 100vh;
	width: 100vw !important;
	margin: 0;
	background: radial-gradient(
				circle farthest-side at 0% 50%,
				#1d1d1d 23.5%,
				#0000 0
			)
			15.75px 22.5px,
		radial-gradient(circle farthest-side at 0% 50%, #222222 24%, #0000 0)
			14.25px 22.5px,
		linear-gradient(#1d1d1d 14%, #0000 0, #0000 85%, #1d1d1d 0) 0 0,
		linear-gradient(
				150deg,
				#1d1d1d 24%,
				#222222 0,
				#222222 26%,
				#0000 0,
				#0000 74%,
				#222222 0,
				#222222 76%,
				#1d1d1d 0
			)
			0 0,
		linear-gradient(
				30deg,
				#1d1d1d 24%,
				#222222 0,
				#222222 26%,
				#0000 0,
				#0000 74%,
				#222222 0,
				#222222 76%,
				#1d1d1d 0
			)
			0 0,
		linear-gradient(90deg, #222222 2%, #1d1d1d 0, #1d1d1d 98%, #222222 0%) 0
			0 #1d1d1d;
	background-size: 30px 45px;
}

.section4-content {
        padding: 150px 100px;
        bottom: 0;
        top: 0;
        z-index: 2;
        overflow: visible;
}

.section4-content::before {
	content: "";
	position: absolute;
	place-content: center;
	width: 100vw !important;
	top: -55px;
	left: 0;

	--s: 15px;
	--b: 15px;
	--m: 3;

	background: linear-gradient(-45deg, #07bccc, #e601c0, #e9019a, #482896);
	background-size: 400% 400%;
	animation: gradient 10s ease infinite;
	--R: calc(var(--s) * sqrt(var(--m) * var(--m) + 1) + var(--b) / 2);
	height: calc(2 * var(--R));
	width: 100%;
	--_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
	mask: radial-gradient(
				var(--R) at left 50% bottom calc(-1 * var(--m) * var(--s)),
				var(--_g)
			)
			calc(50% - 2 * var(--s)) calc(50% - var(--s) / 2 - var(--b) / 2) / 
			calc(4 * var(--s)) calc(var(--s) + var(--b)) repeat-x,
		radial-gradient(
				var(--R) at left 50% top calc(-1 * var(--m) * var(--s)),
				var(--_g)
			)
			50% calc(50% + var(--s) / 2 + var(--b) / 2) / calc(4 * var(--s))
			calc(var(--s) + var(--b)) repeat-x;
}