/* ===========================================
   TIMELINE.CSS - Sacred Timeline Section
   Loki-style with horizontal line and nodes
   =========================================== */

/* Main Section Container */
.timeline-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    /* Allow starfield to show through */
    padding: 2rem 0;
    overflow: hidden;
}

.sacred-title {
    font-family: var(--font-cinzel);
    font-size: 3rem;
    color: var(--accent-gold);
    text-align: center;
    margin-bottom: 2rem;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    z-index: 10;
}

/* Monitor Container - Wrapper for the image and screen */
.monitor-container {
    position: relative;
    width: 90%;
    max-width: 1200px;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
}

.monitor-bg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    z-index: 1;
    /* Send background back */
    /* Bring frame forward above screen content */
    position: relative;
}

/* The "Screen" Area - This is where content scrolls */
.monitor-screen {
    position: absolute;
    /* Adjusted to avoid bezel overlap - tighter bounds */
    /* Bezel fix dimensions retained */
    top: 18%;
    left: 10.2%;
    width: 78.5%;
    height: 58%;
    background: transparent;
    /* Reverted to transparent */
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 5;
    /* Keep content above background */
    /* Below the monitor frame */

    /* Hide scrollbar for cleaner look */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.monitor-screen::-webkit-scrollbar {
    display: none;
}

/* === THE SACRED TIMELINE LINE DESIGN === */

.timeline-scroll-track {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    /* Alignment handled by absolute positioning inside */
    justify-content: flex-start;
    height: 100%;
    padding: 0 80px;
    /* Padding for first/last items */
    min-width: max-content;
    /* Ensure it grows horizontally */
    position: relative;
    z-index: 6;
    /* Content above background */

    /* Sacred Timeline Grid Lines */
    background-image:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 100% 20%, 100% 10%;
    /* Primary and secondary grid lines */
    background-position: 0 59%;
    /* Align grid relative to the main line if possible */
}

/* The main horizontal timeline line */
.timeline-line {
    position: absolute;
    top: 59%;
    left: 0;
    width: 100%;
    /* Spans the full scroll track */
    height: 3px;
    background: linear-gradient(90deg,
            rgba(255, 215, 0, 0.1) 0%,
            #ffd700 20%,
            #ffd700 80%,
            rgba(255, 215, 0, 0.1) 100%);
    transform: translateY(-50%);
    z-index: 1;
    box-shadow:
        0 0 10px rgba(255, 215, 0, 0.5),
        0 0 20px rgba(255, 215, 0, 0.2);
}

/* Individual Event Node */
.timeline-event {
    position: relative;
    display: block;
    /* Use block to allow absolute positioning of children relative to full height */
    width: 160px;
    height: 100%;
    /* Take full height of track */
    margin: 0 25px;
    flex-shrink: 0;
    z-index: 2;
}

/* DECORATIVE CURVES / BRANCHES (Sacred Timeline Style) */

/* 1. White Arch over "Present" / Current Node */
.timeline-event.current::before {
    content: '';
    position: absolute;
    /* Centered on the 59% line */
    top: 59%;
    left: 50%;
    width: 140px;
    height: 140px;

    /* Arch shape */
    border: 2px solid transparent;
    border-top-color: rgba(255, 255, 255, 0.9);
    /* Bright white arch */

    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    /* Rotate to center arch on top */

    opacity: 1;
    z-index: 0;
    pointer-events: none;
    box-shadow: 0 -5px 15px rgba(255, 255, 255, 0.3);
    /* Glow upwards */
}

/* 2. Yellow Swoops/Branches for other events (simulating the reference image) */

/* Branch Down (e.g., for Past events) - Swoop under the line */
.timeline-event.past:nth-child(odd)::before {
    content: '';
    position: absolute;
    top: 59%;
    left: 0%;
    width: 100px;
    height: 80px;
    border: 2px solid transparent;
    border-bottom-color: rgba(255, 215, 0, 0.6);
    /* Gold swoop */
    border-right-color: rgba(255, 215, 0, 0.3);
    border-radius: 50%;
    transform: translateY(-10%) rotate(20deg);
    z-index: 0;
}

/* Branch Down Alternate (e.g. for Future events) */
.timeline-event.future:nth-child(even)::before {
    content: '';
    position: absolute;
    top: 59%;
    right: 10%;
    width: 90px;
    height: 90px;
    border: 2px solid transparent;
    border-bottom-color: rgba(255, 215, 0, 0.6);
    border-left-color: rgba(255, 215, 0, 0.3);
    border-radius: 50%;
    transform: translateY(-10%) rotate(-20deg);
    z-index: 0;
}

/* The node/dot on the line */
.timeline-node {
    width: 16px;
    height: 16px;
    border-radius: 50%;

    /* Precise alignment to the line */
    position: absolute;
    top: 59%;
    left: 50%;
    transform: translate(-50%, -50%);

    background: #2a2a2a;
    border: 2px solid #aaa;
    z-index: 3;
    transition: all 0.3s ease;
}

/* Node states - Past (grey/white) */
.timeline-event.past .timeline-node {
    background: #444;
    border-color: #888;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}

/* Node states - Current (glowing yellow) */
.timeline-event.current .timeline-node {
    width: 24px;
    height: 24px;
    background: #ffd700;
    border-color: #fff;
    box-shadow:
        0 0 15px rgba(255, 215, 0, 0.8),
        0 0 30px rgba(255, 215, 0, 0.4);
    animation: pulse-glow 2s ease-in-out infinite;
}

/* Node states - Future (green) */
.timeline-event.future .timeline-node {
    background: #002211;
    border-color: #00ff88;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
}


/* "PRESENT" label above current event */
.present-label {
    position: absolute;
    top: 35%;
    /* Fixed percentage relative to container height */
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-michroma);
    font-size: 1rem;
    color: #ffd700;
    letter-spacing: 3px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
    white-space: nowrap;
}

/* Event label container (below the node) */
.event-label {
    position: absolute;
    top: 66%;
    /* Positioned below the 59% line */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 140px;
}

/* Date styling */
.t-date {
    font-family: var(--font-michroma);
    font-size: 0.8rem;
    display: block;
    margin-bottom: 4px;
    letter-spacing: 2px;
}

/* Title styling */
.t-title {
    font-family: var(--font-rajdhani);
    font-size: 0.95rem;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1.1;
}

/* Date colors based on state */
.timeline-event.past .t-date {
    color: #666;
}

.timeline-event.current .t-date {
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.timeline-event.future .t-date {
    color: #00ff88;
}

/* Title colors based on state */
.timeline-event.past .t-title {
    color: #888;
}

.timeline-event.current .t-title {
    color: #fff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.timeline-event.future .t-title {
    color: #aaa;
}

/* Pulse animation for current event */
@keyframes pulse-glow {

    0%,
    100% {
        box-shadow:
            0 0 15px rgba(255, 215, 0, 0.8),
            0 0 30px rgba(255, 215, 0, 0.4);
    }

    50% {
        box-shadow:
            0 0 20px rgba(255, 215, 0, 1),
            0 0 45px rgba(255, 215, 0, 0.6);
    }
}

/* Connecting line segments between nodes with color transitions */
.timeline-event::after {
    content: '';
    position: absolute;
    top: 59%;
    left: 50%;
    /* Start from center */
    width: calc(100% + 50px);
    /* Reach to next node (width + margin * 2) roughly */
    height: 3px;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
    /* Default hidden, only show specific coloring if needed, otherwise main line handles it. 
       Actually, the prompt asks for alignment. The main line is continuous. 
       Let's keep these as "overlays" if we want segment coloring, or rely on the main background line.
       Ref design: Main line is continuous yellow.
       Let's hide these per-event lines effectively to clean up, or make them very subtle.
    */
    display: none;
}

/* Scroll Hint Indicator */
.scroll-hint {
    position: absolute;
    bottom: 30%;
    /* Positioned strictly inside the screen */
    right: 45%;
    /* Positioned strictly inside the screen */
    color: rgba(255, 215, 0, 0.7);
    font-family: var(--font-rajdhani);
    font-size: 0.85rem;
    letter-spacing: 2px;
    z-index: 6;
    animation: flashHint 2s infinite;
    pointer-events: none;
}

@keyframes flashHint {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }
}

/* Responsive adjustments - Mobile Vertical Timeline */
/* Responsive adjustments - Mobile Vertical Timeline */
@media (max-width: 768px) {
    .timeline-section {
        height: auto;
        min-height: 100vh;
        padding-top: 100px;
        background-color: transparent;
        /* Show global starfield */
    }

    .sacred-title {
        font-size: 2rem;
        margin-bottom: 3rem;
    }

    /* Hide Monitor & Scroll Hint elements */
    .monitor-bg,
    .scroll-hint,
    .present-label {
        display: none;
    }

    /* Reset Container for vertical flow */
    .monitor-container {
        width: 100%;
        max-width: 100%;
        aspect-ratio: auto;
        margin: 0;
        padding: 0 20px;
        overflow: hidden;
        /* Ensure content doesn't spill */
    }

    .monitor-screen {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        background: transparent !important;
        /* Ensure no bg blocks stars */
        overflow: visible;
        padding-bottom: 100px;
    }

    /* Vertical Track */
    .timeline-scroll-track {
        flex-direction: column;
        height: auto;
        width: 100%;
        padding: 0;
        position: relative;
    }

    /* Vertical Line - Centered */
    .timeline-line {
        width: 3px;
        height: 100%;
        top: 0;
        left: 50%;
        /* Center the line */
        transform: translateX(-50%);
        bottom: 0;
        background: linear-gradient(180deg,
                rgba(255, 215, 0, 0.1) 0%,
                #ffd700 20%,
                #ffd700 80%,
                rgba(255, 215, 0, 0.1) 100%);
    }

    /* Hide extra horizontal bounds */
    .timeline-scroll-track::before,
    .timeline-scroll-track::after {
        display: none;
    }

    /* Individual Events - Stacked & Alternating */
    .timeline-event {
        width: 50%;
        /* Half width */
        height: auto;
        margin-bottom: 60px;
        display: flex;
        align-items: center;
        padding: 0 20px;
        /* Space from center line */
        box-sizing: border-box;

        /* Animation Base State */
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    }

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

    /* ODD items -> RIGHT side */
    .timeline-event:nth-child(odd) {
        margin-left: 50%;
        text-align: left;
        flex-direction: row;
        justify-content: flex-start;
    }

    /* EVEN items -> LEFT side */
    .timeline-event:nth-child(even) {
        margin-left: 0;
        text-align: right;
        flex-direction: row-reverse;
        /* Flip so node is near center */
        justify-content: flex-start;
        /* Because row-reverse, start is right side */
    }

    /* Adjust Node positioning to sit on center line */
    .timeline-node {
        position: absolute;
        flex-shrink: 0;
        /* Reset from desktop */
        top: auto;
        left: auto;
        transform: none;
    }

    /* Odd Nodes (Left edge of Right block) */
    .timeline-event:nth-child(odd) .timeline-node {
        left: -8px;
        /* Half of width (16px) to center on line */
    }

    /* Even Nodes (Right edge of Left block) */
    .timeline-event:nth-child(even) .timeline-node {
        right: -8px;
        /* Half of width (16px) to center on line */
    }

    /* Current Event Node Sizing */
    .timeline-event.current .timeline-node {
        width: 22px;
        height: 22px;
    }

    .timeline-event:nth-child(odd).current .timeline-node {
        left: -11px;
        /* Adjust for larger size */
    }

    .timeline-event:nth-child(even).current .timeline-node {
        right: -11px;
    }

    /* Remove decorative curves on mobile for cleanliness */
    .timeline-event.current::before,
    .timeline-event.past:nth-child(odd)::before,
    .timeline-event.future:nth-child(even)::before {
        display: none;
    }

    /* Content Layout */
    .event-label {
        position: static;
        transform: none;
        width: auto;
    }

    .t-date {
        font-size: 0.85rem;
        color: var(--accent-gold);
        margin-bottom: 2px;
    }

    .t-title {
        font-size: 1.1rem;
    }

    /* Connecting lines - vertical segments if needed? 
       The main .timeline-line handles the continuous track. 
    */
    .timeline-event::after {
        display: none;
        /* Hide per-event lines */
    }
}