/* 
===============
=== GENERAL === 
===============
*/

html{
scroll-snap-type: none;
scroll-behavior: smooth;
height: 100vh;
overflow: scroll;
}

::-webkit-scrollbar {
display: none;
}

p, h1, h2, h3, span, a, li, ul, img{
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}

.starting-page {
background-color: var(--primary-color);
}

p, h1, h2, span, a{
color: var(--dark-color);
}

/* 
=======================
=== DARK MODE LABEL === 
=======================
*/
.darkmode-label {
    position: absolute;
    top: 6px;
    left: 0;
    width: 100px;
    height: 40px;
    opacity: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: calc(3rem - 38px);
    transition: opacity 0.3s ease,
                transform 0.3s ease;
}

.darkmode-label p {
    width: 100%;
    font-size: 0.75em;
    font-style: italic;
}

.darkmode-label i {
    color: var(--dark-color);
    font-size: 1em;
}

.darkmode-label.disappear {
    transform: translateY(-5px);
    opacity: 0;
}


/* 
=======================
=== PROFILE SECTION === 
=======================
*/

.profile-section {
display: flex;
flex-direction: column;
justify-content: center;
height: 80%;
width: 80%;
margin: auto;
}

.profile-text-container {
display: flex;
flex-direction: column;
justify-content: center;
align-self: center;
text-align: center;
justify-content: center;
margin-top: 15vh;
padding-bottom: 30px;
}

.profile-text-wrapper {
display: flex;
justify-content: center;
}

.profile-spacer-div1 {
width: 100%;
height: 20px;
}
.profile-spacer-div2 {
width: 100%;
height: 30px;
}

.profile-text1 {
font-size: 1.1em;
letter-spacing: 1px;
font-weight: 400;
text-decoration: none;
color: var(--subfont-color);
scale: 2;

opacity: 0;
transition: opacity 0.75s cubic-bezier(.43,.01,.33,1),
            scale 0.5s cubic-bezier(.43,0,.33,1);
}

.profile-text2 {
max-width: 60vw;
align-self: center;
font-size: 1.1em;
letter-spacing: 1px;
font-weight: 400;
text-wrap: pretty;
color: var(--subfont-color);
line-height: 1.25em;

opacity: 0;
transform: translateY(50%);
transition: opacity 0.75s cubic-bezier(.43,.01,.33,1),
            transform .75s cubic-bezier(.43,.01,.33,1);
}

.profile-title {
fill: transparent;
transition: fill 0.3s cubic-bezier(.43,.01,.33,1),
            scale 0.5 cubic-bezier(.43,.01,.33,1);
}

.profile-title {
scale: 1;
}

.profile-title.dark {
    filter: invert(89%) sepia(2%) saturate(1630%) hue-rotate(330deg) brightness(107%) contrast(106%);
}

.profile-title path {
transition: stroke-dashoffset .75s cubic-bezier(.43,.01,.33,1);
}

.profile-btn-container {
display: flex;
flex-direction: row;
justify-content: center;
gap: 3rem;
margin: 0 auto;
padding-bottom: 0.5vmin;
}

.indiv-char {
font-style: italic;
}

/* 
======================
=== PROFILE BUTTON === 
======================
*/
.button.second-anim {
opacity: 0;
transform: translateY(40%);
transition: opacity 0.75s cubic-bezier(.43,.01,.33,1),
            transform .75s cubic-bezier(.43,.01,.33,1);
}

.prof-btn1, .prof-btn2 {
position: relative;
background: var(--gradient-color);
padding: 0.75rem 1.5rem;
border-radius: 2rem;
border: 2px solid var(--dark-color);
color: rgb(41, 41, 41);
display: flex;
align-items: center;
column-gap: .5rem;
overflow: hidden;
}

.btn-text {
color: rgb(41, 41, 41);
font-weight: 400;
text-decoration: none;
}

.btn-icon {
font-size: 1.5rem;
text-decoration: none;
}

.btn-text, .btn-icon {
position: relative;
z-index: 2;
}

/*=== REFLECTION SHAPE ===*/

.button-reflection1, .button-reflection2 {
width: 8px;
height: 120px;
background-color: var(--decor-color);
opacity: 0.8;
transform: rotate(30deg);
position: absolute;
inset: 0;
top: 0;
left: -180%;
margin: auto;
transition: left .6s cubic-bezier(.2, .5, .2, 1.2);
}

.button-reflection1::after {
content: "";
width: 26px;
height: 100%;
background-color: var(--decor-color);
position: absolute;
top: -1rem;
left: 1.25rem;
}

.button-reflection2::after {
content: "";
width: 40px;
height: 100%;
background-color: var(--decor-color);
position: absolute;
top: -1rem;
left: .8rem;
}

/*=== MOVING GEOMETRIC SHAPES === */
.button img {
position: absolute;
opacity: 0;
pointer-events: none;
filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(328deg) brightness(98%) contrast(101%);
transition: transform .5s, opacity .5s;
}

.button img.dark {
filter: invert(97%) sepia(98%) saturate(3%) hue-rotate(333deg) brightness(104%) contrast(100%);
}

.button__star-1 {
width:20px;
top: -14px;
left: -16px;
transform: rotate(48deg);
}

.button__star-2 {
width: 40px;
right: -10px;
top: -4px;
transform: rotate(-48deg) scale(.1);
}

.button__circle-1 {
width: 8px;
top: -8px;
left: 58px;
transform: scale(.1);
}

.button__circle-2 {
width: 8px;
right: 34px;
bottom: -8px;
transform: scale(.1);
}

.button__diamond {
width: 18px;
top: -18px;
right: 62px;
transform: scale(.1);
}

.button__triangle {
width: 30px;
left: 15px;
bottom: -16px;
transform: rotate(-48deg) scale(.1);
}

/*=== GRADIENT SHADOW ===*/
.button-shadow {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: var(--gradient-color);
padding: 1.25rem 3rem;
border-radius: 4rem;
border: 2px solid var(--dark-color);
z-index: -1;
transition: transform .3s;
}

.button:hover .button-shadow {
transform: translate(-0.3rem, 0.3rem);
}

/*=== MOVE REFLECTION ===*/
.button:hover .button-reflection1 {
left: 120%;
}

.button:hover .button-reflection2 {
left: -70%;
}

/*=== GEOMETRIC SHAPES APPEAR ===*/
.button:hover {
transform: rotate(-4deg) scale(1.1);
}

.button:active {
transform: scale(1);
}

.button:hover img {
opacity: 1;
}

.button:hover .button__star-1 {
transform: scale(1.1);
transition-delay: .1s;
}

.button:hover .button__star-2 {
transform: scale(1.1);
}

.button:hover .button__circle-1 {
transform: translateY(-8px) scale(1.1);
transition-delay: .1s;
}

.button:hover .button__circle-2 {
transform: translate(-20px, 20px) scale(1.1);
}

.button:hover .button__diamond {
transform: translateY(7px) rotate(-24deg) scale(1.1);
}

.button:hover .button__triangle {
transform: rotate(-12deg) scale(1.1);
}

/* 
==================
=== DOWN ARROW === 
==================
*/

.down-arrow-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
}

.wavy-scroll {
display: flex;
justify-content: center;
align-items: center;
}

.wavy-scroll span {
color: var(--dark-color);
margin: 0 2px;
font-size: 1.4vmin;
animation: wavy 5s ease-in-out infinite;
animation-delay: calc(0.1s * var(--i));
opacity: 0;
transition: opacity 0.75s cubic-bezier(.43,.01,.33,1);
}

@keyframes wavy {
0% {transform: translateY(0px);}
6% {transform: translateY(-6px);}
12% {transform: translateY(0px);}
100% {transform: translateY(0px);}
}

.down-arrow {
margin: 0 auto;
width: 50px;
height: 50px;
opacity: 0;
transition: filter .25s ease-in-out,
            opacity 1.5s cubic-bezier(.43,.01,.33,1);
animation: bounce .6s linear infinite alternate;
}

.down-arrow.dark {
-webkit-filter: invert(1);
filter: invert(94%) sepia(100%) saturate(2%) hue-rotate(167deg) brightness(109%) contrast(101%);
}

@keyframes bounce {
0% {transform: translateY(0px);}
10% {transform: translateY(0.1px);}
20% {transform: translateY(0.4px);}
30% {transform: translateY(0.9px);}
40% {transform: translateY(1.6px);}
50% {transform: translateY(2.5px);}
60% {transform: translateY(3.6px);}
70% {transform: translateY(4.9px);}
80% {transform: translateY(6.4px);}
90% {transform: translateY(8.1px);}
100% {transform: translateY(10.0px);}
}

/* 
=========================
=== INTER-PAGE CURVES === 
=========================
*/

.spacer {
height: 75vh;
width: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

.trans-curve-1 {
background-image: url('/assets/wave-transition-1.svg');
}

.trans-curve-1.dark {
background-image: url('/assets/wave-transition-2.svg');
}

/* 
========================
=== ABOUT ME SECTION === 
========================
*/

.about-me-page {
background-color: var(--secondary-color);
height: 100vh;
}

.am-header {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
height: 82%;
justify-content: center;
gap: 10vw;
padding: 1rem 0;
}

.intro-container {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-top: 20vh;
width: 30%;
}

.title-text {
font-size: 40px;
letter-spacing: 1px;
line-height: 1.1em;
font-weight: 600;
text-align: left;
}

.em {
font-size: 0.5em;
}

.body-text {
font-size: 1rem;
width: 50vmin;
display: flex;
flex-direction: column;
gap: 1.25rem;
line-height: 1.5rem;
}

.profile-pic {
width: 30vmin;
height: 30vmin;
}

.ring-wrapper {
position: relative;
top: 6vh;
}

.prof-slider-wrapper {
position: relative;
width: 250px;
height: 250px;
margin: 0 auto;
}

.prof-slider {
display: flex;
aspect-ratio: 1/1;
overflow: auto;
scroll-snap-type: x mandatory;
box-shadow: 0 1.5rem 3rem -.75rem rgba(var(--dark-rgb-value), 0.25);
border-radius: 5vmin;
}

.prof-slider img {
flex: 1 0 100%;
height: 100%;
scroll-snap-align: start;
object-fit: cover;
}

.slider-nav {
display: flex;

column-gap: 1rem;
position: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}

.slider-nav a {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background-color: #fff;
opacity: 0.75;
transition: opacity 0.25s ease, transform 0.25s ease;
}

.slider-nav a:hover {
opacity: 1;
}

.slider-nav a:active {
transform: scale(0.9);
}

.prof-slider-wrapper p {
font-style: italic;
font-size: .8rem;
position: absolute;
left: 43%;
margin-top: .5rem;
}

/* 
====================
=== DYNAMIC RING === 
====================
*/

.ring {
position: relative;
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
.ring .rot-ring {
position: absolute;
inset: 0;
border: 2px solid #fff;
transition: 0.5s;
}
.ring .rot-ring:nth-child(1) {
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
animation: animate 6s linear infinite;
}
.ring .rot-ring:nth-child(2) {
border-radius: 41% 44% 56% 59%/38% 62% 63% 37%;
animation: animate 4s linear infinite;
}
.ring .rot-ring:nth-child(3) {
border-radius: 41% 44% 56% 59%/38% 62% 63% 37%;
animation: animate2 10s linear infinite;
}
.ring:hover .rot-ring {
border: 6px solid var(--clr);
filter: drop-shadow(0 0 20px var(--clr));
}
@keyframes animate {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}
@keyframes animate2 {
0% {
    transform: rotate(360deg);
}
100% {
    transform: rotate(0deg);
}
}

/* 
=========================
=== LEARN MORE BUTTON === 
=========================
*/

.lm-container {
position: relative;
height: 2rem;
}
.lm-container a {
position: absolute;
border: 0;
display: inline-block;
width: 10rem;
height: auto;
outline: none;
vertical-align: middle;
background: transparent;
}

.lm-text {
font-size: .9rem;
font-weight: 500;
position: absolute;
inset: 0;
margin-left: 1.7rem;
padding: 0.8125rem 0;
color: var(--dark-color);
line-height: .3;
text-align: center;
transition: all 0.4s cubic-bezier(0.65,0,.076,1);
}

.lm-circle {
position: relative;
display: block;
margin: 0;
width: 2rem;
height: 2rem;
background: var(--dark-color);
border-radius: 1.625rem;
transition: all 0.4s cubic-bezier(0.65,0,.076,1);
}

.lm-icon {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background: #fff;
}

.lm-arrow {
left: 0.4rem;
width: .8rem;
height: .125rem;
border-radius: 0.0625rem;
background: none;
transition: all 0.4s cubic-bezier(0.65,0,.076,1);
}

.lm-arrow::before {
content: "";
position: absolute;
top: -.23rem;
right: 0rem;
width: 0.4rem;
height: 0.4rem;
border-top: 0.125rem solid var(--primary-color);
border-right: 0.125rem solid var(--primary-color);
border-radius: 0.0625rem;
transform: rotate(45deg);
transition: border-top 0.5s ease-in-out, border-right 0.5s ease-in-out;
}

.lm-btn:hover .lm-circle {
width: 100%;
}

.lm-btn:hover .lm-arrow {
background: var(--primary-color);
transform: translateX(1rem);
}

.lm-btn:hover .lm-text {
color: var(--primary-color);
}

/* 
============================
=== SOCIAL MEDIA BUTTONS === 
============================
*/

.social-media {
position: relative;
margin-left: -5px;
}

.sm-wrapper .sm-button{
display: inline-block;
height: 40px;
width: 40px;
margin: 0 5px;
overflow: hidden;
background: #fff;
border-radius: 50px;
box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
transition: all 0.3s ease-out;
}
.sm-wrapper .sm-button.github:hover{
width: 130px;
}
.sm-wrapper .sm-button.linkedin:hover{
width: 148px;
}
.sm-wrapper .sm-button.insta:hover{
width: 160px;
}
.sm-wrapper .sm-button.email:hover{
width: 130px;
}
.sm-wrapper .sm-button .sm-icon{
display: inline-block;
height: 40px;
width: 40px;
text-align: center;
border-radius: 50px;
box-sizing: border-box;
line-height: 40px;
transition: all 0.3s ease-out;
}
.sm-wrapper .sm-button.github:hover .sm-icon{
background: rgb(13, 17, 23);
}
.sm-wrapper .sm-button.linkedin:hover .sm-icon{
background: rgb(7, 98, 200);
}
.sm-wrapper .sm-button.insta:hover .sm-icon{
background: rgb(214, 41, 118);
}
.sm-wrapper .sm-button.email:hover .sm-icon{
background: rgb(0, 79, 159);
}
.sm-wrapper .sm-button .sm-icon i{
color: #000;
font-size: 18px;
line-height: 40px;
transition: all 0.3s ease-out;
}
.sm-wrapper .sm-button:hover .sm-icon i{
color: #fff;
}
.sm-wrapper .sm-button span{
font-size: 16px;
font-weight: 500;
line-height: 40px;
margin-left: 10px;
transition: all 0.3s ease-out;
}
.sm-wrapper .sm-button.github span{
color: rgb(13, 17, 23);
}
.sm-wrapper .sm-button.linkedin span{
color: rgb(7, 98, 200);
}
.sm-wrapper .sm-button.insta span{
color: rgb(214, 41, 118);
}
.sm-wrapper .sm-button.email span{
color: rgb(0, 79, 159);
}

/* 
=================================
=== 2ND INTER-PAGE TRANSITION === 
=================================
*/

.trans-curve-2 {
background-image: url('/assets/wave-transition-3.svg');
}

.trans-curve-2.dark {
background-image: url('/assets/wave-transition-4.svg');
}

/* 
===============================
=== WORK EXPERIENCE SECTION === 
===============================
*/

.work-experience-page {
background-color: var(--tertiary-color);
min-height: 100vh;
}

.we-header {
position: relative;
display: flex;
flex-direction: row;
gap: 1rem;
align-items: center;
height: 100%;
justify-content: center;
padding: 1rem 0;
}

.we-header.container {
max-width: 95%;
}

/* 
================
=== TIMELINE === 
================
*/

.timeline-container {
position: relative;
max-width: 800px;
height: 80vh;
background-color: rgba(var(--dark-rgb-value), 0.025);
max-width: 50vw;
margin: 10vh 5vw 10vh 0;
overflow-y: scroll;
mask-image: linear-gradient(0deg, transparent,#fff 20%,#fff 80%,transparent);
scroll-behavior: smooth;
}

.timeline{
margin-top: 125px;
margin-bottom: 20px;
height: var(--scroll-height);
}

.timeline:before{
content:'';
position:absolute;
left:50%;
top: 60px;
width:2px;
height: var(--scroll-height);
background:#c5c5c5;
}
.timeline ul{
padding:0;
margin:0;
max-height: 100%;
max-height: 60vh;
}
.timeline ul li{
list-style:none;
position:relative;
width:50%;
padding:20px 40px;
box-sizing:border-box;
}
.timeline ul li:nth-child(odd){
float:left;
text-align:right;
clear:both;
}
.timeline ul li:nth-child(even){
float:right;
text-align:left;
clear:both;
}
.content{
padding-bottom:20px;
}
.timeline ul li:nth-child(odd):before
{
content:'';
position:absolute;
width:10px;
height:10px;
top:24px;
right:-6px;
background: var(--accent-color);
border-radius:50%;
box-shadow:0 0 0 3px rgba(var(--decor-value), 0.5);
}
.timeline ul li:nth-child(even):before
{
content:'';
position:absolute;
width:10px;
height:10px;
top:24px;
left:-4px;
background: var(--accent-color);
border-radius:50%;
box-shadow:0 0 0 3px rgba(var(--decor-value), 0.5);
}
.timeline ul li h3{
padding:0;
margin:0;
color:var(--accent-color);
font-weight:600;
}
.timeline ul li p{
margin:10px 0 0;
padding:0;
}
.timeline ul li .time h4{
margin:0;
padding:0;
font-size:14px;
}
.timeline ul li:nth-child(odd) .time
{
position:absolute;
top:12px;
right:-165px;
margin:0;
padding:8px 16px;
background:var(--accent-color);
color:#fff;
border-radius:18px;
box-shadow:0 0 0 3px rgba(var(--decor-value), 0.6);
}
.timeline ul li:nth-child(even) .time
{
position:absolute;
top:12px;
left:-165px;
margin:0;
padding:8px 16px;
background:var(--accent-color);
color:#fff;
border-radius:18px;
box-shadow:0 0 0 3px rgba(var(--decor-value), 0.6);
}

/* 
========================
=== EXPERIENCE CONTENT === 
========================
*/

.exp-container {
display: flex;
flex-direction: column;
max-width: 30vw;
gap: .5rem;
margin-top: 10vh;
padding: 1rem;
}

.exp-title {
width: 100%;
font-size: 36px;
letter-spacing: 1px;
line-height: 1.1em;
font-weight: 600;
text-align: left;
}

.em-muscle {
font-size: 1.5rem;
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}

.exp-body-text {
display: flex;
flex-direction: column;
gap: 1.25rem;
line-height: 1.5rem;
margin-bottom: 1rem;
}

.exp-body-text p span {
font-style: italic;
}

.exp-btn-container {
margin-bottom: .25rem;
}

.last-updated {
font-size: .7rem;
}


/* 
=====================
=== SKILLS SLIDER === 
=====================
*/
.skill-sliders {
display: flex;
flex-direction: column;
gap: .5rem;
margin: 10px 0;
}

.slider{
width: 100%;
height: var(--height);
overflow: hidden;
mask-image: linear-gradient(
    to right,
    transparent,
    #000 10% 90%,
    transparent);
}

.slider .list{
display: flex;
width: 100%;
min-width: calc(var(--width) * var(--quantity));
position: relative;
}

.slider .list .item{
position: absolute;
left: 100%;
width: var(--width);
height: var(--height);
border: 1.5px solid;
border-color: var(--dark-color);
border-radius: 8px;
text-align: center;
line-height: 1rem;
opacity: 0.75;
animation: autoRun var(--time) linear infinite;
transition: border-color 0.25s ease-in-out,
            background-color 0.25s ease-in-out,
            opacity 0.3s ease-in-out;
animation-delay: calc((var(--time) / var(--quantity)) * (var(--position) - 1) )!important;
}

.slider .list .item p{
color: var(--dark-color);
margin-top: calc((var(--height) - 1rem) / 2);
}

.slider .list .item p{
    width: 100%;
}

@keyframes autoRun{
from{
    left: 100%;
}to{
    left: calc(var(--width) * -1);
}
}

.slider:hover .item{
animation-play-state: paused!important;
}

.slider .item:before{
    content: "";
    background: rgba(var(--decor-value), 0.2);
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
    z-index: -1;
    padding-bottom: 1px;
    box-sizing: unset;
}

.slider .item:hover{
border-color: var(--accent-color);
opacity: 1;
}

.slider .item:hover:before {
    width: 100%;
}

.slider[reverse="true"] .item{
animation: reversePlay var(--time) linear infinite;
}
@keyframes reversePlay{
from{
    left: calc(var(--width) * -1);
}to{
    left: 100%;
}
}

/* 
===================================
=== SCROLL INTO VIEW ANIMATIONS === 
===================================
*/

.ring.hidden {
transform: translateX(0);
filter: blur(.5px);
transition: all 1.25s;
opacity: 0;
transition-delay: 500ms;
}
.ring.show {
transform: translateX(0);
filter: blur(0);
opacity: 1;
}

.bmp.para:nth-child(2) {
transition-delay: 200ms;
}
.bmp.para:nth-child(3){
transition-delay: 400ms;
}
.bmp.para:nth-child(4){
transition-delay: 80ms;
}
.bmp.para:nth-child(5){
transition-delay: 800ms;
}

.timeline.hidden {
transform: translateY(20%);
transition-delay: 500ms;
}

.timeline.show {
transform: translateY(0);
}

.exp-title.hidden, .exp-body-text .hidden, .lm-container.exp-btn-container.hidden, .last-updated.hidden {
transform: translateX(20%);
}

.exp-title.show, .exp-body-text .show, .lm-container.exp-btn-container.show, .last-updated.show {
transform: translateX(0);
}


/* ========================== */

footer {
    height: 3vh;
    padding-bottom: 1vh;
    background-color: var(--tertiary-color);
  }