/* Portfolio Header */

#portfolio-header {
    display: flex;
    gap: 10px;
    align-items: center;
}

#portfolio-header-image-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-basis: 50%;
}

.portfolio-header-image {
    /* Limit the displayed size while keeping it responsive */
    max-width: 320px;
    /* change this value to make the image larger/smaller */
    width: 100%;
    height: auto;
    object-fit: cover;
    cursor: pointer;
}


#portfolio-header-text-container {
    display: flex;
    flex-direction: column;
    gap: 34px;
    flex-basis: 50%;
}

.header-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Button Column */

#button-column {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


a.button#goto-ee-projects-page-button {
    padding: 10px 20px;
    background-color: var(--COLOR-1);
}

a.button#goto-ee-projects-page-button .button-text {
    font-size: 15px;
}

a.button#goto-swe-projects-page-button {
    padding: 3px 10px;
    background-color: var(--COLOR-6);
    border: 3px solid #141414;
}

a.button#goto-swe-projects-page-button .button-text {
    font-size: 10px;
}

a.button#goto-swe-projects-page-button .right-arrow-icon {
    width: 5%;
}


a.button#goto-swe-projects-page-button {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-6px);
    transition: opacity 150ms ease, transform 150ms ease;
}

a.button#goto-ee-projects-page-button:hover+a.button#goto-swe-projects-page-button,
a.button#goto-swe-projects-page-button:hover {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

/* Prevent brief hover-loss when moving the mouse from the EE button to the SWE button
   by extending the EE button's hover area down into the gap. Only on devices that
   support hover (desktop pointers). */
@media (hover: hover) and (pointer: fine) {
    a.button#goto-ee-projects-page-button {
        position: relative;
    }

    a.button#goto-ee-projects-page-button::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 10px;
        /* slightly larger than the gap to be safe */
        /* transparent element that captures pointer so :hover stays active */
        background: transparent;
        pointer-events: auto;
    }
}



/* About Section */

#about-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.about-section-content {
    display: flex;
    flex-direction: column;
    gap: 34px;
}

/* Interactive Cat */

#interactive-cat-container {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 60px;
    height: 60px;
    z-index: 1000;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease;
}

#interactive-cat-container:hover {
    transform: scale(1.1);
}

#interactive-cat-container:active {
    transform: scale(0.95);
}

#interactive-cat-icon {
    width: 100%;
    height: auto;
    object-fit: contain;
}

#interactive-cat-heart {
    position: absolute;
    top: -20px;
    width: 30px;
    height: auto;
    opacity: 0;
    pointer-events: none;
    transform: translateY(0);
}

.show-heart #interactive-cat-heart {
    animation: heartPop 1s ease-out forwards;
}

@keyframes heartPop {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.5);
    }

    20% {
        opacity: 1;
        transform: translateY(-10px) scale(1.2);
    }

    40% {
        transform: translateY(-15px) scale(1);
    }

    80% {
        opacity: 1;
        transform: translateY(-25px) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-30px) scale(0.8);
    }
}

/* Fun Fact Container (Note Style) */
.fun-fact-container {
    position: fixed;
    bottom: 30px;
    left: 110px;
    padding: 16px 20px;
    padding-right: 40px;
    /* space for close button */
    background-color: var(--COLOR-2, #f0f0f0);
    color: var(--TEXT-1, #000000);
    border: 2px solid #141414;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    max-width: 250px;
    line-height: 1.4;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 999;
    user-select: none;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.fun-fact-container.visible {
    opacity: 1;
    transform: translateX(0);
}

.fun-fact-close-btn {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.fun-fact-close-btn:hover {
    opacity: 1;
}


/* Mobile layout for portfolio header */
@media only screen and (max-width: 800px) {
    #portfolio-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    #portfolio-header-image-container {
        flex-basis: auto;
        align-items: center;
    }

    .portfolio-header-image {
        max-width: 200px;
    }

    #portfolio-header-text-container {
        flex-basis: auto;
        align-items: center;
    }

    #button-column {
        width: 100%;
        align-items: center;
    }

    #button-column a.button {
        width: fit-content;
    }
}