/*
|--------------------------------------------------------------------------
| Nicole Moudaber Intro
|--------------------------------------------------------------------------
|
| The animation sits over the existing homepage Cover block.
| It does NOT introduce its own background.
|
*/

.hp-cover {
    position: relative;
}


/*
|--------------------------------------------------------------------------
| Intro overlay
|--------------------------------------------------------------------------
*/

.nm-intro {
    position: fixed;
    inset: 0;

    z-index: 50;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100vw;
    height: 100vh;
    height: 100dvh;

    overflow: hidden;

    /*
     * Important:
     * Let the existing homepage hero remain visible underneath.
     */
    background: transparent;

    opacity: 1;
    visibility: visible;

    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| Stage
|--------------------------------------------------------------------------
*/

.nm-intro__stage {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: min(80vw, 900px);
    height: min(45vh, 450px);
}


/*
|--------------------------------------------------------------------------
| NM logo
|--------------------------------------------------------------------------
*/

.nm-intro__logo {
    position: absolute;

    display: block;

    width: clamp(150px, 18vw, 280px);
    height: auto;

    opacity: 0;

    /*
     * Actual SVG artwork is black.
     * Turn it white without modifying the source SVG.
     */
    filter: invert(1);

    /*
     * Animation starts oversized.
     */
    transform: scale(1.6);

    transform-origin: center center;

    will-change: opacity, transform;
}


/*
|--------------------------------------------------------------------------
| Nicole Moudaber wordmark
|--------------------------------------------------------------------------
*/

.nm-intro__wordmark {
    position: absolute;

    display: flex;
    align-items: center;
    justify-content: center;

    width: min(72vw, 780px);

    opacity: 0;

    will-change: opacity;
}

.nm-intro__wordmark svg {
    display: block;

    width: 100%;
    height: auto;

    overflow: visible;
}


/*
|--------------------------------------------------------------------------
| Override SVG artwork colour
|--------------------------------------------------------------------------
|
| NicoleMoudaber.svg contains black fill declarations directly on its
| paths, so override them once the SVG has been injected inline.
|
*/

.nm-intro__wordmark svg path {
    fill: #fff !important;
    stroke: none !important;
}


/*
|--------------------------------------------------------------------------
| Individual letters
|--------------------------------------------------------------------------
*/

.nm-intro__wordmark #text236 > g {
    opacity: 0;

    transform-box: fill-box;
    transform-origin: center center;

    will-change: opacity, transform;
}


/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 782px) {

    .nm-intro__logo {
        width: clamp(120px, 32vw, 190px);
    }

    .nm-intro__wordmark {
        width: 84vw;
    }
}


/*
|--------------------------------------------------------------------------
| Reduced motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

    .nm-intro {
        display: none;
    }
}