#intro-overlay {
    display: none;
}

@media (prefers-reduced-motion: no-preference) {
    #intro-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background-color: var(--color-tertiary);
        z-index: 9999;
        justify-content: center;
        align-items: center;
        clip-path: inset(0 0 0 0);
        transition: clip-path 1s cubic-bezier(0.77, 0, 0.175, 1);

        &.is-active { 
            display: flex; 
        }

        &.is-closing { 
                clip-path: inset(0 0 100% 0); 
                .intro-content { opacity: 0; transition: opacity 0.4s; }
        }
    }

    .intro-text {
        color: var(--color-on-tertiary);
        font-family: moret, serif;
        font-size: 5rem;
        font-weight: bold;
        display: flex;
        align-items: center;

        span:first-child {
            opacity: 0;
            transform: translateY(2rem);
            animation: introIn 0.5s ease forwards 0.3s;
        }

        .wipe {
            display: inline-grid;
            grid-template-columns: 0fr;
            opacity: 0;
            overflow: hidden;
            animation: 
            introIn 0.5s ease forwards 1s, 
            wipeAuto 1s cubic-bezier(0.4, 0, 0.2, 1) forwards 1.2s;
            
            & > span { 
                min-width: 0; 
                white-space: nowrap; 
            }
        }
    }

    @keyframes introIn {
        to { opacity: 1; transform: translateY(0); }
    }

    @keyframes wipeAuto {
        to { grid-template-columns: 1fr; }
    }

    .no-scroll { 
        overflow: hidden; 
        height: 100%; 
    }

    @media (max-width: 768px) {
        .intro-text { 
            font-size: 3rem; 
        }
    }
}