.gate-passage {
    position: fixed;
    inset: 0;

    z-index: 5000;

    overflow: hidden;

    background:
        #020712;

    color: #ffffff;

    opacity: 0;

    transition:
        opacity 300ms ease;
}

.gate-passage.is-opening {
    opacity: 1;
}

.gate-passage__world {
    position: absolute;
    inset: -8%;

    background:
        linear-gradient(
            rgba(2, 8, 18, 0.20),
            rgba(2, 8, 18, 0.45)
        ),
        url(
            "/assets/images/ancient-gate/gate-00-ruined.webp"
        )
        center / cover
        no-repeat;

    transform:
        scale(1.04);

    transition:
        transform 1900ms
        cubic-bezier(
            0.18,
            0.70,
            0.22,
            1
        ),
        filter 1500ms ease;
}

.gate-passage__gate {
    position: absolute;

    left: 50%;
    top: 48%;

    width:
        min(
            42vw,
            520px
        );

    height:
        min(
            70vh,
            720px
        );

    transform:
        translate(
            -50%,
            -50%
        );

    border-radius:
        45% 45%
        14% 14%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(
                205,
                220,
                255,
                0.95
            )
            0%,
            rgba(
                108,
                142,
                224,
                0.70
            )
            40%,
            rgba(
                28,
                50,
                90,
                0.36
            )
            67%,
            transparent
            72%
        );

    filter:
        drop-shadow(
            0 0 45px
            rgba(
                127,
                171,
                255,
                0.55
            )
        );
}

.gate-passage__light {
    position: absolute;
    inset: 5%;

    border-radius:
        48% 48%
        16% 16%;

    background:
        radial-gradient(
            ellipse at center,
            #ffffff 0%,
            #a7c9ff 34%,
            rgba(
                89,
                129,
                215,
                0.82
            )
            58%,
            transparent
            74%
        );

    opacity: 0.15;

    transform:
        scaleY(0.05);

    transform-origin:
        center bottom;

    transition:
        opacity 900ms ease,
        transform 900ms
        cubic-bezier(
            0.2,
            0.75,
            0.2,
            1
        );
}

.gate-passage.is-opening
.gate-passage__light {
    opacity: 1;

    transform:
        scaleY(1);
}

.gate-passage__threshold {
    position: absolute;

    left: 8%;
    right: 8%;
    bottom: 4%;

    height: 12%;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(
                170,
                207,
                255,
                0.76
            ),
            transparent 68%
        );

    filter:
        blur(12px);
}

.gate-passage__dragon {
    position: absolute;

    left: 58%;
    bottom: 3%;

    width:
        min(
            27vw,
            360px
        );

    opacity: 0;

    transform:
        translate3d(
            0,
            80px,
            0
        )
        scale(0.82);

    transition:
        opacity 750ms ease,
        transform 1800ms
        cubic-bezier(
            0.20,
            0.70,
            0.18,
            1
        );
}

.gate-passage__dragon img {
    display: block;

    width: 100%;
    height: auto;

    filter:
        drop-shadow(
            0 24px 34px
            rgba(
                0,
                0,
                0,
                0.7
            )
        );
}

.gate-passage.is-opening
.gate-passage__dragon {
    opacity: 0.96;

    transform:
        translate3d(
            0,
            0,
            0
        )
        scale(1);
}

.gate-passage__copy {
    position: absolute;

    left: 50%;
    bottom: 8%;

    width:
        min(
            520px,
            calc(
                100% - 40px
            )
        );

    transform:
        translateX(-50%);

    text-align: center;

    text-shadow:
        0 2px 18px
        rgba(
            0,
            0,
            0,
            0.9
        );

    transition:
        opacity 500ms ease,
        transform 800ms ease;
}

.gate-passage__copy small {
    color: #e7ce8a;

    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.gate-passage__copy h2 {
    margin:
        8px 0 4px;

    font-size:
        clamp(
            2rem,
            6vw,
            4rem
        );
}

.gate-passage__copy p {
    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.78
        );
}

.gate-passage.is-crossing
.gate-passage__world {
    transform:
        scale(2.65);

    filter:
        brightness(1.6)
        blur(1px);
}

.gate-passage.is-crossing
.gate-passage__copy {
    opacity: 0;

    transform:
        translate(
            -50%,
            35px
        );
}

.gate-passage.is-crossing
.gate-passage__dragon {
    transform:
        translate3d(
            -18vw,
            -15vh,
            0
        )
        scale(0.62);

    opacity: 0.72;
}

.gate-passage.is-arriving {
    background:
        radial-gradient(
            circle at center,
            #5572a5,
            #091426 52%,
            #020712 100%
        );
}

.gate-passage.is-arriving
.gate-passage__world {
    opacity: 0;

    transition:
        opacity 700ms ease;
}

@media (max-width: 700px) {
    .gate-passage__gate {
        width: 72vw;
        height: 62vh;
    }

    .gate-passage__dragon {
        left: 54%;
        width: 48vw;
    }

    .gate-passage__copy {
        bottom: 12%;
    }
}

@media (
    prefers-reduced-motion:
    reduce
) {
    .gate-passage *,
    .gate-passage {
        transition-duration:
            1ms !important;
    }
}