.emphi-login-page {
    background-color: #fafcfd;
}

.emphi-login-scene {
    --emphi-card-width: min(28rem, calc(100vw - 2rem));
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: calc(var(--emphi-card-width) * 1.477551);
    padding-top: calc(var(--emphi-card-width) * .693878);
    isolation: isolate;
}

.emphi-login-card {
    width: var(--emphi-card-width);
    max-width: none;
    margin-inline: auto;
    border-color: #cdd5dd;
    border-radius: .375rem;
    isolation: isolate;
}

.emphi-login-illustration {
    position: absolute;
    z-index: 1;
    top: calc(var(--emphi-card-width) * -.693878);
    left: calc(var(--emphi-card-width) * -.235714);
    width: calc(var(--emphi-card-width) * 1.477551);
    aspect-ratio: 1448 / 1086;
    pointer-events: none;
    mask-image:
        linear-gradient(to bottom, transparent 0%, #000 2%, #000 93%, transparent 100%),
        linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
    mask-composite: intersect;
}

.emphi-login-illustration > img,
.emphi-login-face {
    display: block;
    width: 100%;
    height: 100%;
}

.emphi-login-face {
    position: absolute;
    inset: 0;
    overflow: visible;
}

.emphi-login-card > :not(.emphi-login-illustration) {
    position: relative;
    z-index: 2;
}

.emphi-eyelid {
    opacity: 0;
}

.emphi.is-blinking .emphi-eyelid {
    animation: emphi-login-blink 210ms ease-in-out;
}

@keyframes emphi-login-blink {
    0%, 30%, 71%, 100% { opacity: 0; }
    31%, 70% { opacity: 1; }
}

@media (max-width: 600px) {
    .emphi-login-scene {
        --emphi-card-width: min(28rem, 80vw);
    }
}

@media (max-width: 480px) {
    .emphi-login-card {
        padding: 1.5rem;
    }
}

@media (max-width: 360px) {
    .emphi-login-card a {
        gap: .5rem;
        padding-inline: .75rem;
        font-size: .8125rem;
    }
}

@media (max-width: 300px) {
    .emphi-login-card h1 {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .emphi-login-card a {
        gap: .375rem;
        padding-inline: .5rem;
        font-size: .75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .emphi.is-blinking .emphi-eyelid {
        animation: none;
    }
}