.map-section {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.floating-item {
    box-sizing: border-box;
    padding: 0.4rem;
    background-color: var(--floating-item);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow:
        0 10px 24px rgb(0 0 0 / 35%),
        inset 0 1px 0 rgb(255 255 255 / 7%);
}

.calendar-button {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;

    background-image: url('../images/icons/calendar.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
    
    cursor: pointer;
    
    transition: transform 180ms ease, border-color 180ms ease;
}

@media (hover: hover) {
    .calendar-button:hover {
        transform: translateY(-0.3rem);
        border-color: #8b929e;
    }
}

.date-info {
    box-sizing: border-box;

    font-size: 1rem;
    
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* .live-dot {
    width: 0.7rem;
    height: 0.7rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--green);
    box-shadow:
        0 0 0.5rem var(--green),
        0 0 0.5rem color-mix(in srgb, var(--green) 55%, transparent);
    animation: live-blink 1.5s ease-in-out infinite;
}

@keyframes live-blink {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.42;
        transform: scale(0.75);
    }
} */

.timeline {
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
    width: 100%;
    height: 4rem;

    box-sizing: border-box;
    padding-left: 1rem;
    padding-right: 1rem;
    
    touch-action: none;

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.timeline__track {
    position: relative;
    width: 100%;
    height: 1rem;

    box-sizing: border-box;
    padding: 0.2rem;
    border-radius: 100vw;
    background-color: #111318;
}

.timeline__fill {
    position: relative;
    top: 0;
    left: 0;
    height: 100%;

    border-radius: inherit;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.timeline__thumb {
    display: flex;
    justify-content: center;
    align-items: center;

    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);

    height: 2rem;
    box-sizing: border-box;
    padding: 0.5rem;
    border-radius: 5px;

    pointer-events: none;
}

.timeline__thumb.hover {
    transform: translate(-50%, -200%);
}

.timeline__thumb.live {
    background-color: var(--red);
    border-color: white;
}

.map {
    position: relative;
    display: inline-block; 
}

.map__image {
    max-width: 100%;
}

.marker {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 1;

    width: 0.1rem;
    height: 0.1rem;
    background-color: var(--red);

    filter: drop-shadow(0 0 4px rgb(255 56 76 / 70%));
}

.marker.big {
    z-index: 2;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    border: 1px solid #ffd5da;
    filter: 
        drop-shadow(0 0 5px var(--red))
        drop-shadow(0 0 11px rgb(255 56 76 / 55%));
    animation: location-blink 1.6s ease-in-out infinite;
}

@keyframes location-blink {
    0%, 100% {
    opacity: 1;
    }

    50% {
    opacity: 0.65;
    }
}

.marker.big > div {
    box-sizing: border-box;
    width: 100%;
    height: 100%;

    background-color: rgb(255 56 76 / 18%);
    border: 1px solid rgb(255 90 106 / 55%);
    border-radius: 50%;
   
    animation: location-pulse 1.6s ease-out infinite;
}

@keyframes location-pulse {
    0% {
        opacity: 0.7;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(6);
    }
}