@import url("https://use.typekit.net/wxn2bww.css");
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* Color */
:root {
    --black: #191919;
    --white: #ffffff;
    --grey: #e3e3e3;
    --light-grey: #f5f5f5;
    --dark-grey: #343434;
    --yellow: #ffe57d;
    --light-yellow: #FFF7EA;
    --light-green: #DEE8E4;
}

* {
    font-family: "Work Sans", sans-serif;
    color: var(--black);
    font-size: 1rem;
}

main {
    margin-top: 120px;
}

/* body {
    background: linear-gradient(-45deg, #DEE8E4, #ffe57d, #FFF7EA, #e3e3e3);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    min-height: 100vh;
}

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

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
} */

/* ---------- PARTIALS SECTION STARTS----------*/
/* ----- Navigation bar (Mobile-first: horizontal top) ----- */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    z-index: 999;
}

.navbar {
    width: 100%;
}

#logo {
    width: 6em;
    margin-left: 1em;
}

nav ul {
    width: 100%;
    display: flex;
    align-items: center;
    list-style-type: none;
    gap: 2em;
    justify-content: center;
}

nav ul li a {
    text-decoration: none;
    color: #333333;
}

/* Responsive Navigation Alignment */
.nav-left-links,
.nav-right-links {
    flex: 1;
    text-align: center;
    justify-content: center;
}

@media only screen and (min-width: 992px) {
    .nav-left-links {
        padding-right: 4rem;
        justify-content: flex-end !important;
    }

    .nav-right-links {
        padding-left: 4rem;
        justify-content: flex-start !important;
    }
}

/* Mobile Dropdown Spacing */
@media only screen and (max-width: 991px) {

    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        display: flex !important;
        flex-direction: column;
        gap: 2em;
        margin-top: 1em;
    }

    /* Ensure the list blocks themselves don't have extra horizontal gaps */
    .nav-left-links,
    .nav-right-links {
        padding: 0 !important;
    }
}

/* ----- Rotating object ----- */
#rotating-object {
    margin-top: 3em;
    animation: rotating-object 10s infinite linear;
    width: 100%;
}

@keyframes rotating-object {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ----- UX, Video and Photo Partials ----- */

.section-title {
    font-family: "Work Sans", sans-serif;
    font-weight: 400;
    color: var(--black);
    font-size: 1.5rem;
    /* 32px */
    text-align: center;
    margin-bottom: 1em;
    /* margin-top: 1em; */
}

#ux-heading {
    margin-top: 1em;
}

.container {
    margin-top: 4em;
}

#intro-final-pos-link {
    font-size: 1.125rem;
}

.col-12.col-md-4 {
    padding: 0;
    border: solid 0.5px var(--grey);
    /* border-radius: 0; */
}

/* card animation */
.card {
    margin-bottom: 2em;
    border: none;
    /* border: solid 1px var(--grey); */
    /* overflow: hidden;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.5s;
     */
    height: 100%;
    width: 100%;
}

.card-body {
    padding-top: 0;

}

.card:hover {
    /* transform: translateY(-0.625em); */
    background-color: var(--light-grey);
    border-radius: 0;
}

.card-img-top {
    /* border-radius: 1em; */
    padding: 1em;
}

.card-title {
    font-family: "Work Sans", sans-serif;
    font-weight: 400;
    font-size: 1rem;
    /* 20px */
    font-weight: 500;
    line-height: 150%;
    /* margin-top: 12px; */
    text-decoration: none;
    color: var(--black);

}

.tag {
    text-transform: uppercase;
    font-size: 0.75rem;
    border-radius: 0.375em 0.5em;
    background-color: var(--light-green);
    display: inline-flex;
    padding: 0.5em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    justify-content: center;
    align-items: center;
}

/* Button: Default */
.button-view-project {
    display: block;
    padding: 1em;
    max-width: fit-content;
    padding-left: 1.5em;
    padding-right: 1.5em;
    background-color: var(--black);
    color: var(--white);
    border-radius: 0.5em;
    overflow: hidden;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    font-family: "Work Sans", sans-serif;
}

.button-view-project:hover {
    background-color: var(--dark-grey);
    color: var(--white);
}

/* Button: Disabled */
.button-view-project-disabled {
    display: block;
    padding: 1em;
    background-color: var(--grey);
    color: var(--white);
    border-radius: 0.25em;
    overflow: hidden;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    font-family: "Work Sans", sans-serif;
    cursor: not-allowed;
}

/* ---------- Footer ---------- */
footer {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    padding-left: 1em;
    padding-right: 1em;
    background-color: var(--black);
}

footer p {
    color: var(--white);
    text-align: center;
}

/* ---------- PARTIALS SECTION ENDS----------*/

/* *********************************************************** */
/* *********************************************************** */

/* make the footer to the end of the browser */
.page-fullscreen-flex {
    display: flex;
    flex-direction: column;
    min-height: 100vh;

}

.page-fullscreen-flex main {
    flex: 1;
    /* make the footer to the end of the browser */
}

/* ---------- |Phone| PAGE: HOME ---------- */
/* Section: intro */

.intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 6.5em;
}

#home-chuong-portrait {
    height: 300px;
    width: 300px;
    margin-top: 3em;
}

#intro-title-description-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1.5em;
    padding: 1em;

}

#intro-title {
    font-family: "ivymode", sans-serif;
    font-weight: 400;
    color: var(--black);
    font-size: 4rem;
    /* 64px */
    text-align: center;
    margin-bottom: 0.5em;
    line-height: 0.8em;
    /* margin-right: 1em; */
    position: relative;
    overflow: visible;
}


#intro-title .italic-word {
    font-family: "ivymode", sans-serif;
    font-weight: 400;
    font-size: 4rem;
    /* 64px */
    color: var(--black);
    font-style: italic;
}

#intro-description {
    font-family: "Work Sans", sans-serif;
    font-weight: 400;
    color: var(--black);
    font-size: 1.125rem;
    /* 20px*/
    text-align: center;
}

.button-get-to-know-me {
    max-width: 100%;
    display: block;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left: 1.5em;
    padding-right: 1.5em;
    background-color: var(--black);
    color: var(--white);
    border-radius: 0.5em;
    overflow: hidden;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    font-family: "Work Sans", sans-serif;
    margin-top: 2em;
}

/* -----Indicator----- */
.indicator-space {
    width: 100%;
    display: flex;
    justify-content: center;
    /* Centers horizontally */
}

.indicator {
    width: 140px;
    margin-top: 3em;
    margin-bottom: 3em;
    align-items: center;
}

/* Flickering asterisk */
#contact-asterisk {
    font-family: "Kalnia", serif;
    font-size: 5rem;
    margin: 0;
}

#contact-asterisk {
    animation: contact-asterisk 1s infinite alternate;
}

@keyframes contact-asterisk {
    from {
        opacity: 100;
    }

    to {
        opacity: 0;
    }
}

#contact {
    text-align: center;
    margin-bottom: 5em;
    color: var(--white);
}

#contact-title {
    font-family: "Work Sans", sans-serif;
    font-weight: 400;
    font-size: 2em;
}

#contact-email {
    font-size: 1.5rem;
    color: var(--white);
}

#social-media {
    margin-top: 2em;
}

#linkedin,
#behance,
#vimeo,
#resume {
    font-weight: 600;
    color: var(--white);
}

#linkedin:hover,
#behance:hover {
    color: var(--blue);
    cursor: pointer;
}

/* ---------- |Mobile| PAGE: PROJECTS ---------- */
#page-projects {
    margin-top: 120px;
}

/* Video responsive size */
.player {
    aspect-ratio: 16 / 9;
    width: 100%;
}

.highlight-text {
    background: var(--light-yellow);
    padding: 1em;
    border-radius: 0.5em;
}

/* ---------- |Mobile| PAGE: ABOUT ---------- */
#page-about {
    margin-top: 120px;
    margin-left: 1.5em;
    margin-right: 1.5em;
    margin-bottom: 5em;
}

#page-about-title {
    font-family: "ivymode", sans-serif;
    font-weight: 400;
    font-size: 2.5rem;
    margin-bottom: 1em;
    line-height: 1.2em;
    text-align: center;
}

#page-about-title .italic-word {
    font-style: italic;
    font-family: "ivymode", sans-serif;
    font-size: 2.5rem;
}

.about-tags-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 2em;
    width: 100%;
}

.about-tag {
    height: 40px;
    border-radius: 100px;
    border: 1px solid var(--black);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Work Sans", sans-serif;
    font-size: 0.6875rem;
    white-space: nowrap;
    opacity: 1;
}

#about-portrait {
    width: 100%;
    border-radius: 0.25em;
    margin-bottom: 1em;
}

#about-current-status {
    border: solid 2px var(--black);
    border-radius: 0.25em;
    margin-bottom: 1em;
    overflow: hidden;
}

#current-box {
    border-bottom: 2px solid var(--black);
}

#about-current-title {
    font-weight: 600;
    padding: 1em;
    margin-bottom: 0;
}

#about-current-content {
    padding: 1em;
    padding-top: 1.5em;
}

.about-section-image {
    width: 100%;
    margin-top: 1em;
    margin-bottom: 1em;
}

.about-section {
    margin-bottom: 2em;
}

.about-title {
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
}

blockquote {
    font-family: "ivymode", sans-serif;
    font-style: italic;
    font-weight: 400;
    color: var(--black);
    font-size: 2rem;
    text-align: left;
    padding: 0.5em 0em 0.5em 1em;
    /* top right bottom left */
    line-height: 1.5em;
    border-left: solid 2px var(--black);
}

.hyperlink-hightlight {
    color: var(--black);
    background-color: var(--yellow);
}

#intro-final-pos-link {
    font-size: 1.125rem;
    font-weight: 400;
    background-color: transparent;
}

.hyperlink-normal {
    color: var(--black);
}

work-exp-time-des {
    margin-top: 1em;
    margin-bottom: 0;
}

.work-experience-time,
.education-time {
    font-weight: 600;
    margin-bottom: 0;
}

#about-important-info {
    margin-top: 1em;
}

/* PAGE: PHOTO */


#intro-title-photo {
    font-family: "ivymode", sans-serif;
    font-weight: 400;
    max-width: 574px;
    color: var(--black);
    font-size: 4rem;
    /* 64px */
    text-align: center;
    margin-bottom: 0.5em;
    line-height: 0.8em;
}

#intro-title-photo .italic-word-photo {
    font-family: "ivymode", sans-serif;
    font-weight: 400;
    font-size: 4rem;
    color: var(--black);
    font-style: italic;
}

/* ---------- |Mobile| PAGE: CONTACT ---------- */
#page-contact {
    margin-top: 120px;
    padding-left: 1.5em;
    padding-right: 1.5em;
    margin-bottom: 5em;
}

#page-contact-title {
    font-family: "ivymode", sans-serif;
    font-weight: 400;
    font-size: 2.5rem;
    margin-bottom: 1em;
}

.contact-info-block {
    margin-bottom: 1em;
}

.contact-info-title {
    font-weight: 600;
    margin-bottom: 0;
}

.contact-info-detail {
    font-size: 1.5em;
    color: var(--black);
}

#contact-image {
    max-width: 100%;
    border-radius: 0.25em;
    margin-top: 1em;
}

/* *********************************************************** */
/* *********************************************************** */

/* ---------- |Mobile| SUBPAGE ---------- */
.alert-info {
    margin-top: 1em;
}

.main-container {
    margin-top: 120px;
    padding: 1em;
    margin-bottom: 2em;
}

.go-to-project {
    color: var(--black);
    display: inline-block;
    margin-bottom: 1em;
}

.data-value {
    margin-bottom: 2em;
}

/* .data-value:last-child {
    margin-bottom: 0em;
} */

.data-value .data {
    margin-bottom: 0;
    font-weight: 600;
    color: var(--dark-grey);
}

.data-value .value {
    font-size: 1.25rem;
    margin-bottom: 0;
}

.subpage-title {
    margin-bottom: 1em;
}

.value-longtext {
    margin-bottom: 0;
}

.block-project-overview .data-value {
    margin-bottom: 0;
}

.subpage-project-info {
    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    /* border: solid 1px var(--dark-grey); */
    padding: 1em;
    border-radius: 0.5em;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.subpage-title-section {
    margin-top: 1em;
}

.subpage-image {
    width: 100%;
    margin-bottom: 1em;
}

.company-link {
    color: var(--black);
}

/* *********************************************************** */
/* *********************************************************** */

/* ---------- DESKTOP VIEW ---------- */
@media only screen and (min-width: 768px) {



    .intro p {
        margin: auto;
        max-width: 60%;
    }

    /* ---------- |Desktop| PAGE: HOME ---------- */
    /* Section: intro */
    #home-chuong-portrait {
        height: 300px;
        width: 300px;
    }

    .intro {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 3em;

    }

    #intro-title {
        font-family: "ivymode", sans-serif;
        font-weight: 400;
        color: var(--black);
        font-size: 6rem;
        text-align: center;
        margin-bottom: 0.5em;
        line-height: 0.6em;
        position: relative;
        overflow: visible;
    }

    #intro-title .italic-word {
        font-family: "ivymode", sans-serif;
        font-weight: 400;
        font-size: 6rem;
        color: var(--black);
        font-style: italic;
    }

    /* Greeting animation desktop font size */
    #intro-title .greeting {
        font-size: 5rem !important;
    }

    #intro-description {
        font-family: "Work Sans", sans-serif;
        font-weight: 300;
        color: var(--black);
        font-size: 1.25rem;
        text-align: center;
        max-width: 50rem;
    }

    .container {
        margin-top: 4em;
    }

    /* ---------- |Desktop| PAGE: ABOUT ---------- */
    #page-about {
        max-width: 60%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 120px;
        margin-bottom: 3em;
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-areas:
            "about-page-title about-page-title"
            "about-tags-container about-tags-container"
            "about-general about-important-info"
            "about-about-me about-about-me";
        gap: 0.5em;
    }

    #page-about-title {
        grid-area: about-page-title;
        text-align: center;
        line-height: 1.2em;
    }

    .about-tags-container {
        grid-area: about-tags-container;
    }

    .about-tag {
        font-size: 0.875rem;

    }

    #about-portrait {
        max-width: 100%;
    }

    #about-general {
        grid-area: about-general;
    }

    #about-important-info {
        grid-area: about-important-info;
        padding-left: 3em;
        margin-top: 0;
    }

    #about-about-me {
        grid-area: about-about-me;
    }

    /* ---------- |Desktop| PAGE: PROJECTS ---------- */
    #section-video {
        max-width: 80%;
        margin: auto;
        gap: 3em;
    }



    /* ---------- |Desktop| SUBPAGE ---------- */
    .main-container {
        max-width: 70%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 120px;
    }

    .subpage-project-info {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-areas:
            "block-data-value block-project-overview"
            "block-data-value block-project-overview";
        gap: 1em;
    }

    .block-data-value {
        grid-area: block-data-value;
    }

    .block-project-overview {
        grid-area: block-project-overview;
    }

    .data-value:last-child {
        margin-bottom: 0;
    }

}

/* ---------- Greeting Animation ---------- */
/* Keyframe animation for fade-in effect */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Base style for all greetings - start hidden */
.greeting {
    display: inline-block;
    opacity: 0;
    animation: slideInUp 0.4s ease-out forwards;
    font-family: "ivymode", sans-serif;
    font-weight: 400;
    font-size: 4rem;
    /* Match mobile #intro-title size */
}

/* Stagger the animations for each greeting */
.greeting-1 {
    animation-delay: 0.2s;
    /* Starts after image is barely visible */
}

.greeting-2 {
    animation-delay: 0.4s;
}

.greeting-3 {
    animation-delay: 0.6s;
}

/* New Animation for Hero Section */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 1. Image */
#home-chuong-portrait {
    opacity: 0;
    /* Start hidden */
    animation: slideInUp 0.5s ease-out forwards;
    animation-delay: 0.1s;
}

/* 2. Title (Greetings) - Updated definition to use slideInUp and new delays */
/* Original .greeting and .greeting-1/2/3 rules need update/override */
/* We will override existing .greeting animation here or modify the original block. */
/* Let's modify the original block instead to rely on slideInUp */

/* 3. Description */
#intro-description {
    opacity: 0;
    animation: slideInUp 0.5s ease-out forwards;
    animation-delay: 0.8s;
    font-weight: 300;
}

/* 4. Button */
.button-get-to-know-me {
    opacity: 0;
    animation: slideInUp 0.5s ease-out forwards;
    animation-delay: 0.9s;
}

/* 5. Projects Section */
#research-heading,
.row>.col-12.col-md-4 {
    opacity: 0;
    animation: slideInUp 0.5s ease-out forwards;
    animation-delay: 1.1s;
}

/* Add slight stagger to the project cards */
.row>.col-12.col-md-4:nth-child(1) {
    animation-delay: 1.1s;
}

.row>.col-12.col-md-4:nth-child(2) {
    animation-delay: 1.2s;
}

.row>.col-12.col-md-4:nth-child(3) {
    animation-delay: 1.3s;
}

.row>.col-12.col-md-4:nth-child(4) {
    animation-delay: 1.4s;
}

.row>.col-12.col-md-4:nth-child(5) {
    animation-delay: 1.5s;
}

.row>.col-12.col-md-4:nth-child(6) {
    animation-delay: 1.6s;
}

/* 6. Footer Section */
footer {
    opacity: 0;
    animation: slideInUp 0.5s ease-out forwards;
    animation-delay: 1.8s;
}