/*
 * =================================
 * Celestial Timeline - CSS v1.4 (Expanded Capsule)
 * =================================
 * - Increased capsule height to 56px for better label containment.
 * - Increased internal horizontal padding from 20px to 40px on each side.
 * - This gives labels more room, especially at the extremes of the timeline.
 * =================================
 */

/* The main timeline container - Now a sleek, edgeless HUD style */
#celestial-timeline-container {
    position: absolute;
    bottom: 75px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    /* Wider but edgeless */
    height: 48px;
    /* Slightly slimmer */
    background-color: transparent;
    /* No more pill background */
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.5s ease, bottom 0.5s ease;
    pointer-events: none;
}

/* The actual timeline bar, drawn inside the container */
#celestial-timeline-container::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 1px;
    /* Thinner, more elegant */
    /* Fades out elegantly at both edges */
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.85) 15%,
            rgba(255, 255, 255, 0.85) 85%,
            rgba(255, 255, 255, 0) 100%);
    /* Drop shadow to make the thin line pop on bright backgrounds */
    filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.5));
}


/* When this class is added, the timeline becomes visible */
#celestial-timeline-container.visible {
    opacity: 1;
    bottom: 90px;
    /* Animate upwards to its final position */
    pointer-events: all;
}

/* 
 * The wrapper for each point and its labels. 
 * This is the element that gets animated along the timeline.
 */
.celestial-point-wrapper {
    position: absolute;
    top: 50%;
    /* Initial position is the center of the total width */
    left: 50%;
    opacity: 0;

    transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
        left 1.2s cubic-bezier(0.45, 0.05, 0.55, 0.95);
    transition-delay: 0.2s;

    pointer-events: none;
}

/* 
 * The actual circular point. 
 */
.celestial-point {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #FFFFFF;
    /* Add a tiny dark spread to the shadow to pop from white surfaces */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    pointer-events: all;
}

/* Common styles for both labels */
.celestial-name-label,
.celestial-time-label {
    position: absolute;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    /* Added slight weight for clarity */
    white-space: nowrap;
    /* Extra strong text-shadow mimicking a subtle dark glow/outline to contrast against ANY map background */
    text-shadow:
        0px 1px 3px rgba(0, 0, 0, 0.9),
        0px 0px 4px rgba(0, 0, 0, 0.7),
        0px 2px 8px rgba(0, 0, 0, 0.5);
}

/* Position for the name label (above the point) */
.celestial-name-label {
    transform: translate(-50%, -24px);
    /* Adjusted for new height */
}

/* Position for the time label (below the point) */
.celestial-time-label {
    transform: translate(-50%, 8px);
    /* Adjusted for new height */
}


/* --- Animation & State Control --- */

.celestial-point-wrapper.animate-in {
    opacity: 1;
}

.celestial-point-wrapper.labels-visible .celestial-name-label,
.celestial-point-wrapper.labels-visible .celestial-time-label {
    opacity: 1;
    transition-delay: 0.5s;
}

/* --- Mobile Responsiveness: Move to Top --- */
@media (max-width: 768px) {
    #celestial-timeline-container {
        bottom: auto;
        /* Disable bottom positioning */
        top: 55px;
        /* Start position for "rising" animation from top */
        width: 92%;
        /* Slightly wider on small screens for better label spacing */
        transition: opacity 0.5s ease, top 0.5s ease;
    }

    #celestial-timeline-container.visible {
        bottom: auto;
        top: 75px;
        /* Final position below the 50px logo bar */
    }

    /* Adjust labels if they feel too cramped, but standard layout should work */
}