:root {
    --bg-color: #1a1a1e;
    --text-color: #ffffff;
    --text-muted: #cccccc;
    --accent-color: #ffd700;
    --card-bg: rgba(255, 255, 255, 0.05);
    --border-color: rgba(255, 255, 255, 0.1);
    --card-width: 200px;
    --card-height: 300px;
    --bg-image: url('assets/backgrounds/bg-dark.png');
    --highlight-gradient: linear-gradient(135deg, #fff 30%, var(--accent-color) 100%);
}

/* Navigation Dropdown */
.nav-dropdown {
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 5000;
}

.dropdown-btn {
    background: rgba(26, 26, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-color);
    padding: 10px 24px;
    border-radius: 40px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    backdrop-filter: blur(15px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.dropdown-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

.dropdown-content {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: rgba(26, 26, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    width: 180px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px);
}

.nav-dropdown:hover .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-content a {
    display: block;
    color: var(--text-color);
    padding: 14px 20px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.dropdown-content a:last-child {
    border-bottom: none;
}

.dropdown-content a:hover {
    background: rgba(255, 215, 0, 0.08);
    color: var(--accent-color);
    padding-left: 25px;
}

.dropdown-content a.active {
    color: var(--accent-color);
    font-weight: 700;
    background: rgba(255, 215, 0, 0.04);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* Fixed background with slightly reduced opacity */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 0.4;
    /* Further reduced for maximum legibility */
    z-index: -1;
    pointer-events: none;
}

.viewport {
    width: 100%;
    height: 100%;
}

.scroll-container {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    /* scroll-behavior: smooth; <-- Removed to prevent "stuck" feeling on manual scroll */
}

/* 
   We extend the track so scrolling continues past the card reveal.
   The sticky scene stays pinned while we scroll through this track.
   Once we hit the bottom of this track, the sticky element unpins (moves up).
*/
.content-track {
    height: 300vh;
    position: relative;
    background: transparent;
    /* allow lower layers if any */
}

.sticky-scene {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: transparent;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

.hero-section {
    position: absolute;
    top: 5%;
    /* Moved up to accommodate bio */
    width: 100%;
    text-align: center;
    z-index: 20;
    transition: opacity 0.5s;
    pointer-events: none;
    padding: 0 1rem;
}

.main-title {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    /* Slightly smaller to fit more text */
    margin-bottom: 2rem;
    background: linear-gradient(to right, #fff, #888);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about-container {
    display: flex;
    align-items: center;
    /* Centered vertically for a balanced look */
    justify-content: center;
    gap: 3rem;
    max-width: 1100px;
    margin: 0 auto 1rem auto;
    padding: 0 2rem;
}

.profile-photo {
    flex-shrink: 0;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--accent-color);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.2);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.profile-photo:hover {
    transform: scale(1.05);
    border-color: #fff;
}

.profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-section {
    flex: 1;
    text-align: left;
    /* Changed to left-aligned for side-by-side */
    line-height: 1.6;
    font-size: 1.3rem;
    /* Increased for impact since text is shorter */
    color: #ccc;
    font-weight: 300;
}

.about-section p {
    margin-bottom: 1.2rem;
}

.highlight {
    font-weight: 600;
    background: var(--highlight-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.1);
}

.subtitle {
    font-size: 0.9rem;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 600;
    /* Black outline for each letter */
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

.gallery-ticker-wrap {
    width: 100%;
    overflow: hidden;
    margin-bottom: 3rem;
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.gallery-ticker {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: gallery-scroll 35s linear infinite;
}

.gallery-ticker img {
    height: 180px;
    /* Uniform height */
    width: auto;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-ticker img:hover {
    transform: scale(1.05);
    border-color: var(--accent-color);
}

@keyframes gallery-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.scene {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 1500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.table-surface {
    position: absolute;
    bottom: -10%;
    width: 120%;
    height: 50vh;
    background: radial-gradient(circle at center, #2a2a2e 0%, #000000 80%);
    transform: rotateX(60deg);
    border-radius: 50%;
    box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.5);
    z-index: 0;
}

.cards-container {
    position: absolute;
    top: 30%;
    /* Lifted significantly high to ensure outer cards clear bottom */
    left: 50%;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    z-index: 10;
}

/* 
   Wrapper positions the element in the 3D fan fan.
   It does NOT move on hover. It just sits there.
*/
.card-wrapper {
    position: absolute;
    width: var(--card-width);
    height: var(--card-height);

    /* Pivot context for the fan */
    transform-origin: 50% 250%;

    /* We don't transition the wrapper's transform on hover, only on scroll */
    transition: transform 0.1s linear;

    /* Ensure the child visual can be 3D transformed relative to this */
    transform-style: preserve-3d;

    /* Position centering */
    left: calc(var(--card-width) * -0.5);
    top: calc(var(--card-height) * -0.5);

    z-index: 10;
    pointer-events: auto;
    /* Catch mouse events */
}

/* 
   The Visual part does the interaction (pop up).
   It is a child of the wrapper.
*/
.card-visual {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #1a1a1a;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);

    /* Optimization */
    will-change: transform;

    /* Smooth transition for the POP effect */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s;
    user-select: none;
    cursor: pointer;
    overflow: hidden;
    /* For the image */
}

.card-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* When wrapper is hovered, we affect the visual */
.card-wrapper.hovered .card-visual {
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
    border-color: var(--accent-color);
}

/*
   GLITCH FIX:
   When the visuals move UP, we create an invisible bridge 
   so the mouse doesn't fall into the gap and trigger mouseleave.
*/
.card-visual::after {
    content: '';
    position: absolute;
    bottom: -100px;
    /* Extend below */
    left: -20%;
    width: 140%;
    height: 100px;
    background: transparent;
    pointer-events: auto;
    display: none;
}

.card-wrapper.hovered .card-visual::after {
    display: block;
    /* Activate bridge on hover */
}

.card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    color: white;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s;
}

.card-visual:hover .card-overlay {
    opacity: 1;
}

.instruction-overlay {
    position: absolute;
    bottom: 50px;
    width: 100%;
    text-align: center;
    font-size: 0.9rem;
    color: #666;
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
}

/* --- Ticker Section --- */
.ticker-section {
    position: relative;
    z-index: 2;
    /* Above the sticky scene if needed */
    background: transparent;
    padding: 4rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ticker-wrap {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.ticker {
    display: inline-block;
    padding-left: 100%;
    /* Use CSS animation for infinite loop */
    animation: ticker 30s linear infinite;
}

.ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0 4rem;
    font-size: 3rem;
    color: #333;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.3s;
    text-decoration: none;
    cursor: pointer;
}

.ticker__item:hover {
    color: var(--accent-color);
    transform: scale(1.05);
}

.ticker-logo {
    height: 40px;
    width: auto;
    filter: grayscale(1) brightness(0.5);
    transition: all 0.3s;
}

.ticker__item:hover .ticker-logo {
    filter: grayscale(0) brightness(1);
}

@keyframes ticker {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* --- Timeline Section --- */
.timeline-section {
    position: relative;
    background: transparent;
    padding: 4rem 2rem;
    color: var(--text-color);
    min-height: 50vh;
}

.section-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    margin-bottom: 2rem;
    text-align: center;
}

.timeline {
    max-width: 800px;
    margin: 0 auto;
    border-left: 2px solid #333;
    padding-left: 2rem;
}

.timeline-item {
    margin-bottom: 2rem;
    position: relative;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -2.6rem;
    top: 0.5rem;
    width: 1rem;
    height: 1rem;
    background: #333;
    border-radius: 50%;
    transition: background 0.3s;
}

.timeline-item:hover::before {
    background: var(--accent-color);
}

.date {
    font-size: 0.9rem;
    color: var(--accent-color);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.content {
    font-size: 1.5rem;
    font-weight: 300;
}

.timeline-past {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
}

.timeline-past.expanded {
    max-height: 2000px;
    opacity: 1;
    margin-top: 2rem;
    overflow: visible;
}

.timeline-toggle-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.timeline-toggle {
    background: transparent;
    border: 1px solid #333;
    color: #666;
    padding: 0.6rem 2rem;
    border-radius: 30px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.3s;
}

.timeline-toggle:hover {
    border-color: var(--accent-color);
    color: #fff;
}

.timeline-toggle.active {
    background: rgba(255, 215, 0, 0.1);
    border-color: var(--accent-color);
    color: #fff;
}

/* --- Connect Section --- */
.connect-section {
    padding: 6rem 2rem;
    text-align: center;
    background: transparent;
}

.connect-section h2 {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    margin-bottom: 3rem;
    color: var(--text-color);
}

.connect-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.connect-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 1rem 2.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.85rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.connect-btn:hover {
    background: #fff;
    color: #000;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    border-color: #fff;
}

.connect-btn svg,
.connect-btn img {
    width: 20px;
    height: 20px;
    fill: currentColor;
    object-fit: contain;
}

@media (max-width: 600px) {
    .connect-links {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .connect-btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}