/* Playground page */

#playground-main {
    height: calc(var(--vh, vh) * 300);
    background: #000
}

#playground-main-inner {
    position: absolute;
    inset: 0;
    height: calc(var(--vh, vh) * 100)
}

#playground-main-timeline {
    position: absolute;
    top: 50%;
    left: 0;
    height: 10px;
    width: 100vw;
    z-index: 2;
    cursor: pointer
}

@media (hover: hover) {
    #playground-main-timeline:hover #playground-main-timeline-line {
        transform: scaleZ(1)
    }
}

#playground-main-timeline-line {
    position: absolute;
    inset: 0;
    transform: scale3d(1, .1, 1);
    transition: .3s transform cubic-bezier(.35, 0, 0, 1)
}

#playground-main-timeline-line-bg {
    position: absolute;
    inset: 0;
    background: white;
    opacity: .2
}

#playground-main-timeline-line-progress {
    position: absolute;
    inset: 0;
    background: white;
    transform: scale3d(0, 1, 1);
    transform-origin: left
}

.playground-main-timeline-event {
    position: absolute;
    top: calc(50% - 2.5rem);
    height: 5rem
}

.playground-main-timeline-event.--hover .playground-main-timeline-text {
    opacity: 1
}

.playground-main-timeline-event.--hover .playground-main-timeline-dot,
.playground-main-timeline-event.--active .playground-main-timeline-dot {
    background: var(--color-blue)
}

.playground-main-timeline-text {
    color: #fff;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 1.2rem;
    letter-spacing: .024rem;
    opacity: 0;
    transition: .3s opacity cubic-bezier(.35, 0, 0, 1)
}

.playground-main-timeline-dot {
    position: absolute;
    top: calc(50% - 3px);
    background: white;
    height: 6px;
    width: 6px;
    border-radius: 100%;
    transition: .3s background cubic-bezier(.35, 0, 0, 1)
}

.playground-main-event {
    position: absolute;
    padding: 4rem 5rem;
    width: 58rem;
    aspect-ratio: 3 / 2;
    background: var(--color-green);
    border-radius: 1.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.playground-main-event-top {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.playground-main-event-top-text {
    font-size: 1.2rem
}

.playground-main-event-bottom {
    line-height: .9
}

.playground-main-event-bottom-text {
    font-size: 7.8rem
}

#playground-bottom {
    position: absolute;
    bottom: var(--base-padding-y);
    right: var(--base-padding-x)
}

#playground-bottom-text {
    font-family: CustomMono;
    color: var(--color-green);
    font-size: 2.4rem
}