:root {
    --bg-dark: #121619;
    --sand: #D8CFAF;
    --leaf-green: #6A7152;
    --deep-green: #233329;
    --text-light: #f8f9fa;
}

body {
    background:
            linear-gradient(
                    135deg,
                    var(--bg-dark) 0%,
                    var(--deep-green) 100%
            );

    background-attachment: fixed;

    color: var(--text-light);

    font-family: 'Inter', sans-serif;

    min-height: 100vh;

    margin: 0;
}



/* HERO SECTION */

.hero-section {
    padding-top: 25vh;
    padding-bottom: 5vh;

    display: flex;
    align-items: center;

    /* Relative so the loader can be absolutely positioned over the card area */
    position: relative;
}



/* LOADING OVERLAY (shown while sheet + hero image are fetching) */

.card-loader {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    /* Sit behind the card */
    z-index: 0;

    pointer-events: none;

    opacity: 1;
    transition: opacity 0.4s ease;
}

.card-loader--hidden {
    opacity: 0;
}



/* PROFILE CARD */

.profile-card {
    background-color: rgba(255, 255, 255, 0.03);

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 20px;

    overflow: hidden;

    width: 100%;

    box-shadow: 0 15px 35px rgba(0,0,0,0.4);

    /* Always above the spinner */
    position: relative;
    z-index: 1;

    /* Transition always present — guarantees it fires on class swap */
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Card starts invisible and lifted */
.card-hidden {
    opacity: 0;
    transform: translateY(20px);
}

/* Card fades in and settles into place */
.card-visible {
    opacity: 1;
    transform: translateY(0);
}



/* HERO IMAGE */

.hero-image-container {
    overflow: hidden;

    position: relative;

    /* Mobile: natural aspect ratio, full card width */
    aspect-ratio: 1 / 1;

    background-color: var(--leaf-green);
}

@media (min-width: 768px) {
    /* Desktop: stretch to fill the full column height alongside the content */
    .hero-image-container {
        aspect-ratio: unset;
        height: 100%;
        min-height: 420px;
    }
}

.hero-img {
    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    opacity: 1;

    transition: opacity 0.6s ease;
}

.hero-img--loading {
    opacity: 0;
}



/* CARD CONTENT REVEAL (staggered top-to-bottom after card fades in) */

.card-reveal {
    opacity: 0;

    transform: translateY(10px);

    transition:
            opacity 0.45s ease var(--delay, 0s),
            transform 0.45s ease var(--delay, 0s);
}

.card-reveal.revealed {
    opacity: 1;

    transform: translateY(0);
}

/* HR uses the same system — no special class needed */
.hr-fade {
    /* overrides the default Bootstrap <hr> opacity so the reveal works cleanly */
}



/* PORTFOLIO SECTION */

.portfolio-section {
    margin-top: 10px;

    padding-bottom: 50px;

    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.section-hidden {
    /* default state — already set by the base rule above */
}

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



/* SHARED TEXT STYLES */

.subtitle {
    color: var(--leaf-green);

    font-weight: 700;

    font-size: 0.85rem;

    letter-spacing: 3px;
}

.info-text {
    color: var(--sand);

    font-weight: 500;
}

.info-link {
    color: var(--sand);

    font-weight: 500;

    text-decoration: none;

    transition: color 0.2s ease;
}

.info-link:hover {
    color: var(--text-light);

    text-decoration: underline;
}

h6 {
    color: var(--text-light);

    opacity: 0.7;

    text-transform: uppercase;

    font-size: 0.7rem;

    letter-spacing: 2px;
}



/* INFO ROWS (icon + text inline) */

.info-icon-row {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 6px;
}

.info-icon {
    color: var(--leaf-green);

    font-size: 0.85rem;

    flex-shrink: 0;
}



/* SOCIALS */

.social-row {
    border-top: 1px solid rgba(255,255,255,0.08);

    padding-top: 20px;
}

.social-row-no-border {
    padding-top: 4px;
}

.social-icons {
    display: flex;

    gap: 14px;

    flex-wrap: wrap;
}

.social-icon {
    width: 48px;

    height: 48px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    background: rgba(255,255,255,0.05);

    border: 1px solid rgba(255,255,255,0.08);

    color: var(--sand);

    font-size: 1.2rem;

    transition: all 0.3s ease;
}

.social-icon:hover {
    background: var(--leaf-green);

    color: white;

    transform: translateY(-2px);

    border-color: var(--leaf-green);
}



/* FILTER BUTTONS */

.btn-filter {
    background: transparent;

    border: 1px solid var(--leaf-green);

    color: var(--leaf-green);

    padding: 8px 22px;

    border-radius: 50px;

    transition: background 0.3s ease, color 0.3s ease, opacity 0.4s ease, transform 0.4s ease;

    font-size: 0.85rem;

    font-weight: 600;

    opacity: 1;

    transform: translateY(0);
}

.btn-filter--hidden {
    opacity: 0;

    transform: translateY(8px);
}

.btn-filter.active,
.btn-filter:hover {
    background: var(--leaf-green);

    color: white;
}



/* MASONRY GRID */

.mosaic-grid {
    column-count: 3;

    column-gap: 20px;

    width: 100%;
}

.mosaic-item {
    display: inline-block;

    width: 100%;

    margin-bottom: 20px;

    break-inside: avoid;

    opacity: 0;

    transform: translateY(18px);

    transition: opacity 0.5s ease, transform 0.5s ease;
}

.mosaic-item.is-visible {
    opacity: 1;

    transform: translateY(0);
}

.mosaic-item img {
    width: 100%;

    height: auto;

    min-height: 200px;

    object-fit: cover;

    border-radius: 10px;

    display: block;

    transition: transform 0.3s ease;

    border: 1px solid rgba(255,255,255,0.1);

    background: rgba(255,255,255,0.03);
}

.mosaic-item:hover img {
    transform: scale(1.02);
}



/* RESPONSIVE */

@media (max-width: 992px) {

    .mosaic-grid {
        column-count: 2;
    }
}

@media (max-width: 576px) {

    .mosaic-grid {
        column-count: 1;
    }

    .social-icons {
        justify-content: center;
    }
}