@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(//fonts.gstatic.com/s/materialicons/v41/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}

@keyframes fadeInScroll {
    0% {
        opacity: 0;
        visibility: hidden;
    }

    100% {
        opacity: 1;
        visibility: visible;
    }
}

.scroll-wrapper {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.scroll-container {
    display: flex;
    align-items: center;
    width: auto;
    height: auto;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    animation: fadeInScroll 1.85s ease-in-out forwards;
    animation-delay: 350ms;
    pointer-events: auto;
}

/* Apply opacity transition to the scroll handles only */
.scroll-handle {
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    /* Smooth fade-in for the scroll handles */
}

/* When the scroll-container becomes visible, fade in the scroll handles */
.scroll-container.visible .scroll-handle {
    opacity: 1;
    /* Fade in scroll handles */
}

.scroll-handle {
    width: auto;
    height: 75px;
    object-fit: contain;
    z-index: 2;
    transition: transform .8s ease;
    /* Keep transform animation */
}

.paper-wrapper {
    width: 0;
    height: 64px;
    overflow: hidden;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -1px;
    margin-right: -1px;
    transition: width 1s ease;
    background-image: url(../assets/opening-sequence/paper.svg);
}

.play-text {
    font-size: 18px;
    font-weight: 400;
    color: #2F9078;
    font-family: 'Poppins', serif;
    white-space: nowrap;
    z-index: 3;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}