/* CUSTOM STYLES */

/* Particle Background - Full Screen & Behind Content */
#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

/* Container for each section's sub text (the text following the dash) */
.section-content {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    .section-content.visible {
        opacity: 1;
        transform: translateY(0);
    }

.photo-row {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 20px 0 26px;
    overflow: visible;
    align-items: start;
    --photo-gap: 12px;
}

.photo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    margin: 0;
    left: 0;
    transition: left 0.4s ease, filter 0.4s ease, opacity 0.4s ease;
    cursor: pointer;
    --center-shift: 0px;
}

    .photo-card:nth-child(1) {
        --center-shift: calc(100% + var(--photo-gap));
    }

    .photo-card:nth-child(2) {
        --center-shift: 0px;
    }

    .photo-card:nth-child(3) {
        --center-shift: calc(-100% - var(--photo-gap));
    }

.photo-frame {
    position: relative;
    height: 150px;
    border-radius: 16px;
    overflow: hidden;
    background: #10101a;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 111, 63, 0.2);
    transform-origin: center;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, filter 0.4s ease, opacity 0.4s ease;
}

    .photo-frame::after {
        content: "";
        position: absolute;
        inset: -10px;
        border-radius: 20px;
        background: radial-gradient(circle at 20% 20%, rgba(255, 111, 63, 0.45), transparent 60%);
        opacity: 0;
        filter: blur(10px);
        transition: opacity 0.4s ease;
        z-index: -1;
    }

    .photo-frame img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        filter: saturate(1.05) contrast(1.05);
        transform: scale(1.02);
        transition: transform 0.6s ease, filter 0.6s ease;
    }

    .photo-frame:hover img {
        transform: scale(1.06);
    }

.photo-caption {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-align: center;
    color: #ffb48a;
    font-weight: 700;
}

.photo-row.active .photo-card:not(.enlarged) {
    opacity: 0.75;
}

.photo-row.active .photo-card:not(.enlarged) .photo-frame {
    transform: scale(0.94);
    filter: saturate(0.85) brightness(0.8);
}

.photo-card.enlarged {
    left: var(--center-shift);
    z-index: 3;
}

.photo-card.enlarged .photo-frame {
    transform: scale(3) translateY(-6px);
    box-shadow: 0 24px 38px rgba(0, 0, 0, 0.45);
    border-color: rgba(255, 111, 63, 0.65);
    animation: photoFloat 4s ease-in-out infinite;
}

.photo-card.enlarged img {
    transform: scale(1.2);
    filter: saturate(1.2) contrast(1.1);
}

.photo-card.enlarged .photo-frame::after {
    opacity: 1;
}

@keyframes photoFloat {
    0%, 100% {
        transform: scale(3) translateY(-6px);
    }
    50% {
        transform: scale(3) translateY(-10px);
    }
}

@media (max-width: 700px) {
    .photo-row {
        --photo-stack-height: 190px;
        --photo-stack-offset: 12px;
        grid-template-columns: 1fr;
        height: var(--photo-stack-height);
        padding: 6px 0 0;
        transition: height 0.35s ease;
    }

    .photo-row .photo-card {
        --center-shift: 0px;
        gap: 12px;
        grid-area: 1 / 1;
        transform-origin: top center;
        transform: translateY(calc(var(--stack-order, 0) * var(--photo-stack-offset))) scale(calc(1 - (var(--stack-order, 0) * 0.03))) rotate(calc(var(--stack-order, 0) * -0.5deg));
        opacity: calc(1 - (var(--stack-order, 0) * 0.08));
        transition: transform 0.45s ease, opacity 0.35s ease;
        pointer-events: none;
    }

    .photo-row .photo-card.is-active {
        pointer-events: auto;
    }

    .photo-row .photo-card.is-hidden {
        opacity: 0;
        pointer-events: none;
    }

    .photo-row .photo-card.is-removed {
        opacity: 0;
        transform: translateY(-14px) scale(0.94) rotate(-1.5deg);
        pointer-events: none;
    }

    .photo-row .photo-card .photo-caption {
        opacity: 0;
        line-height: 1.35;
        transition: opacity 0.3s ease;
    }

    .photo-row .photo-card.is-active .photo-caption {
        opacity: 1;
    }

    .photo-row.active .photo-card:not(.enlarged) {
        opacity: 1;
    }

    .photo-row.active .photo-card:not(.enlarged) .photo-frame {
        transform: none;
        filter: none;
    }

    .photo-card.enlarged {
        left: 0;
    }

    .photo-card.enlarged .photo-frame {
        transform: none;
        animation: none;
    }
}

@media (max-width: 520px) {
    .photo-row {
        --photo-stack-height: 220px;
    }

    .photo-frame {
        height: 180px;
    }
}

/* Vertical, minimal scroll progress indicator positioned to the left of the content */
#scrollProgress {
    position: fixed;
    top: 10%; /* 10% from the top of the viewport */
    /* 
       For desktop view, position the indicator immediately to the left of the content.
       The container uses 75% width with a max-width of 525px.
       Its left edge is at: calc(50% - (min(525px, 75vw) / 2))
       To leave a 20px gap between the content and the indicator, the indicator’s right edge should be 20px to the left of the container.
       Since the indicator is 8px wide, its left position becomes:
         calc(50% - (min(525px, 75vw) / 2) - 20px - 8px)
       which simplifies to:
         calc(50% - (min(525px, 75vw) / 2) - 28px)
    */
    left: calc(50% - (min(525px, 75vw) / 2) - 28px);
    width: 8px; /* Slim track width */
    height: 80%; /* Track spans 80% of the viewport height */
    background: rgba(255, 255, 255, 0.2); /* Subtle track background */
    border-radius: 4px; /* Rounded edges */
    z-index: 1000; /* Appear above most content */
    overflow: hidden;
}

    #scrollProgress > div {
        width: 100%;
        height: 0; /* Will be updated via JS */
        background: #ff6f3f; /* Bright progress fill */
        border-radius: 4px;
        transition: height 0.25s ease-out;
    }

/* Responsive adjustment for smaller viewports */
@media (max-width: 800px) {
    #scrollProgress {
        /* On mobile, simply position the indicator 10px from the left */
        left: 10px;
        right: auto;
    }
}

/* EXISTING STYLES */

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.5;
    color: #e2e2e2;
    background-color: #1b1b2f;
    overflow-x: hidden;
}

/* 
  Updated container styles:
  - Uses 75% width of the viewport (up to a maximum of 525px)
  - This subtly widens the content area while keeping it centered.
*/
.container {
    width: 75%;
    max-width: 525px;
    margin: auto;
    padding: 20px;
    background-color: #0f0f1a;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

h1, h2 {
    color: #ff6f3f;
    text-align: center;
}

h1 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 2.2em;
}

h2 {
    margin-top: 35px;
    font-size: 1.4em;
    border-bottom: 2px solid #ff6f3f;
    padding-bottom: 8px;
}

p {
    margin: 18px 0;
    color: #b3b3cc;
    font-size: 0.9em;
    font-weight: bold;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    background: #2a2a3d;
    margin: 16px 0;
    padding: 12px;
    border-radius: 8px;
    color: #e2e2e2;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: transform 0.6s ease, background-color 0.6s ease;
    opacity: 0;
    transform: translateY(20px);
    font-weight: bold;
}

    li.visible {
        opacity: 1;
        transform: translateY(0);
    }

.main-text {
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 6px;
}

.extra-info {
    font-size: 0.9em;
    color: #b3b3c7;
}

.skills-list .extra-info {
    display: block;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-6px);
    transition: max-height 0.45s ease, opacity 0.3s ease, transform 0.3s ease;
}

.skills-list li.active .extra-info {
    max-height: 100px;
    opacity: 1;
    transform: translateY(0);
}

.contact-info {
    text-align: center;
    margin-top: 35px;
    color: #e2e2e2;
    font-size: 0.9em;
}

    .contact-info a {
        color: #e2e2e2;
        text-decoration: none;
        margin: 0 8px;
        position: relative;
        transition: color 0.6s ease;
    }

        .contact-info a:hover {
            color: #ff6f3f;
        }

        .contact-info a::after {
            content: '';
            position: absolute;
            width: 0%;
            height: 2px;
            background-color: #ff6f3f;
            bottom: -3px;
            left: 0;
            transition: width 0.6s ease;
        }

        .contact-info a:hover::after {
            width: 100%;
        }

@media (max-width: 768px) {
    h1 {
        font-size: 1.8em;
    }

    h2 {
        font-size: 1.2em;
    }

    p, li {
        font-size: 0.85em;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.5em;
    }

    h2 {
        font-size: 1em;
    }

    p, li {
        font-size: 0.8em;
    }

    .container {
        padding: 15px;
    }
}


.expertise-title {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 1em;
}

.expertise-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* Adjust spacing between items */
}

    .expertise-list li {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
        background-color: #ffe5d0;
        padding: 12px 18px;
        border-radius: 18px;
        font-size: 1rem;
        font-weight: bold;
        color: #ff6f3f;
        min-width: 280px; /* Ensures a balanced look */
        text-align: left;
        justify-content: flex-start;
        max-height: 56px;
        overflow: hidden;
        transition: transform 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease, max-height 0.6s ease;
    }

        .expertise-list li::before {
            content: "";
            position: absolute;
            left: 8px;
            top: 10px;
            bottom: 10px;
            width: 3px;
            border-radius: 999px;
            background: linear-gradient(180deg, #ff6f3f, #ffb48a);
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .expertise-list li.active {
            background-color: #fff1e6;
            max-height: 140px;
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 12px 24px rgba(255, 111, 63, 0.25);
        }

        .expertise-list li.active::before {
            opacity: 1;
        }

        .expertise-list li:not(.active):hover {
            transform: translateY(-2px);
            background-color: #ffe5d0; /* Subtle color change on hover */
        }

        .expertise-list li i {
            margin-top: 2px;
            color: #ff6600;
            font-size: 1.2em;
        }

        .expertise-text {
            display: flex;
            flex-direction: column;
            gap: 6px;
            flex: 1;
        }

        .expertise-name {
            font-size: 1rem;
            text-align: center;
        }

        .expertise-detail {
            font-size: 0.85rem;
            font-weight: 600;
            color: #cc5a2e;
            max-height: 0;
            opacity: 0;
            transform: translateY(-6px);
            transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.4s ease;
        }

        .expertise-list li.active .expertise-detail {
            max-height: 60px;
            opacity: 1;
            transform: translateY(0);
        }

:root {
    --dark-bg: #121212; /* Dark background */
    --card-bg: #1e1e1e; /* Tile background */
    --text-color: #e0e0e0; /* Main text */
    --accent: #ff6600; /* Highlight color */
    --hover-bg: #292929; /* Hover background */
    --border-color: rgba(255, 102, 0, 0.5); /* Border with transparency */
}

body {
    background-color: var(--dark-bg);
    color: var(--text-color);
}

.technology-title {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 1em;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.technology-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    max-width: 700px;
    margin: 0 auto;
    justify-content: center;
    padding: 10px;
}

    .technology-grid span {
        display: flex;
        align-items: center;
        background: var(--card-bg);
        padding: 12px 18px;
        border-radius: 12px;
        font-size: 1rem;
        color: var(--text-color);
        transition: transform 0.3s ease-out, background-color 0.3s ease-out, box-shadow 0.3s ease-out;
        text-align: center;
        justify-content: center;
        font-weight: 500;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        border: 1px solid var(--border-color); /* New border */
        position: relative;
        overflow: hidden;
    }

        .technology-grid span:hover {
            transform: scale(1.05);
            background: var(--hover-bg);
            box-shadow: 0 0 10px var(--accent);
            border-color: var(--accent); /* Border glows on hover */
        }

        /* Cool Neon Glow Effect */
        .technology-grid span::before {
            content: "";
            position: absolute;
            top: -2px;
            left: -2px;
            width: calc(100% + 4px);
            height: calc(100% + 4px);
            border-radius: 12px;
            border: 2px solid var(--accent);
            opacity: 0;
            transition: opacity 0.3s ease-out;
        }

        .technology-grid span:hover::before {
            opacity: 1;
        }

.technology-grid span i {
    margin-right: 0.5em;
    color: var(--accent);
    font-size: 1.3em;
}

.technology-stack {
    position: relative;
}

@media (max-width: 700px) {
    .technology-stack {
        --stack-count: 1;
        --stack-offset: 10px;
        --stack-height: 96px;
        height: var(--stack-height);
        margin: 0 auto;
        padding: 6px 0 0;
        transition: height 0.35s ease;
    }

    .technology-stack .technology-grid {
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0;
        max-width: 100%;
        z-index: 2;
    }

    .technology-stack .technology-grid span {
        grid-area: 1 / 1;
        width: 100%;
        justify-content: flex-start;
        text-align: left;
        padding: 14px 16px;
        transform-origin: top center;
        transform: translateY(calc(var(--stack-order, 0) * var(--stack-offset))) scale(calc(1 - (var(--stack-order, 0) * 0.03))) rotate(calc(var(--stack-order, 0) * -0.6deg));
        opacity: calc(1 - (var(--stack-order, 0) * 0.06));
        transition: transform 0.45s ease, opacity 0.35s ease, box-shadow 0.35s ease;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
        pointer-events: none;
        will-change: transform, opacity;
    }

    .technology-stack .technology-grid span.is-active {
        pointer-events: auto;
    }

    .technology-stack .technology-grid span.is-hidden {
        opacity: 0;
        pointer-events: none;
    }

    .technology-stack .technology-grid span.is-removed {
        opacity: 0;
        transform: translateY(-16px) scale(0.92) rotate(-2deg);
        pointer-events: none;
    }
}