.crypt-page-controls {
    position: relative;
    z-index: 90;
}

.crypt-signal-box {
    position: fixed;
    z-index: 90;
    top: clamp(0.8rem, 2vw, 1.35rem);
    left: clamp(0.8rem, 2vw, 1.35rem);

    display: inline-flex;
    align-items: center;
    gap: 0.55rem;

    min-height: 2.55rem;
    padding: 0.62rem 0.85rem;

    color: var(--crypt-text-dim);
    background:
        linear-gradient(
            135deg,
            rgba(38, 52, 58, 0.94),
            rgba(9, 18, 21, 0.96)
        );

    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
}

.crypt-signal-box .signal-light {
    flex: 0 0 auto;
}


.crypt-signal-box::after {
    right: auto;
    bottom: 0;
    left: 0;

    width: 38%;
    height: 1px;
    border: 0;
    border-radius: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--crypt-laser),
            transparent
        );

    box-shadow:
        0 0 0.45rem rgba(0, 255, 225, 0.42);

    animation:
        crypt-signal-scan 3.6s linear infinite;
}

@keyframes crypt-signal-scan {
    from {
        transform: translateX(-110%);
        opacity: 0;
    }

    15%,
    78% {
        opacity: 0.72;
    }

    to {
        transform: translateX(365%);
        opacity: 0;
    }
}


.crypt-return {
    position: fixed;
    z-index: 92;
    top: clamp(0.55rem, 1.6vw, 1rem);
    right: clamp(1rem, 4vw, 4.5rem);

    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.72rem;

    min-height: 4rem;

    color: var(--crypt-laser);
    background: transparent;
    text-decoration: none;

    isolation: isolate;
    overflow: visible;
}

.crypt-return:focus-visible {
    outline: 1px solid rgba(0, 255, 225, 0.72);
    outline-offset: 0.42rem;
    border-radius: 3px;
}


.crypt-return__label {
    display: block;

    max-width: 0;
    overflow: hidden;

    opacity: 0;
    transform: translateX(0.6rem);

    color: var(--crypt-text);
    white-space: nowrap;

    font-family: var(--font-ui);
    font-size: clamp(1rem, 1.4vw, 1.3rem);
    font-weight: 700;
    letter-spacing: 0.065em;
    line-height: 1.1;
    text-transform: uppercase;

    text-shadow:
        0 0 0.2rem rgba(244, 221, 220, 0.64),
        0 0 0.48rem rgba(0, 255, 225, 0.88),
        0 0 1rem rgba(0, 255, 225, 0.46),
        0 0 1.6rem rgba(155, 92, 255, 0.34);

    transition:
        max-width 420ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 180ms ease,
        transform 260ms ease;
}

.crypt-return:not(.is-leaving):is(:hover, :focus-visible)
    .crypt-return__label {
    max-width: 22rem;
    opacity: 1;
    transform: translateX(0);

    color: var(--crypt-text);
    background: transparent;
}

.crypt-skull {
    --skull-cavity: rgba(5, 11, 13, 0.86);
    --skull-detail: rgba(234, 217, 214, 0.72);

    position: relative;

    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;

    width: clamp(3.15rem, 4.5vw, 4.25rem);

    line-height: 0;
    isolation: isolate;
}

.crypt-skull__svg {
    display: block;
    width: 100%;
    height: auto;

    overflow: visible;
    shape-rendering: geometricPrecision;

    filter:
        drop-shadow(
            0 0.16rem 0.3rem
            rgba(0, 0, 0, 0.62)
        )
        drop-shadow(
            0 0 0.42rem
            rgba(155, 92, 255, 0.18)
        );
}


.crypt-return,
.crypt-return__label {
    user-select: none;
    -webkit-user-select: none;
}

.crypt-return:focus-visible {
    outline: none;
    box-shadow: none;
}

.crypt-return:focus-visible .crypt-return__label {
    text-shadow:
        0 0 2px rgba(244, 221, 220, 1),
        0 0 6px rgba(0, 255, 225, 1),
        0 0 14px rgba(0, 255, 225, 0.72),
        0 0 24px rgba(155, 92, 255, 0.5);
}

.crypt-return:focus-visible .crypt-skull__svg {
    filter:
        drop-shadow(0 0 0.3rem rgba(0, 255, 225, 0.48))
        drop-shadow(0 0 0.75rem rgba(155, 92, 255, 0.34));
}


.crypt-skull__artboard {
    transform-box: fill-box;
    transform-origin: 53% 55%;
    will-change: transform;
}


.crypt-skull__asset #SkullBase {
    fill: url("#crypt-skull-glass");
    stroke: url("#crypt-skull-metal");

    stroke-width: 1.35px;
    stroke-linecap: round;
    stroke-linejoin: round;

    paint-order: fill stroke;
    vector-effect: non-scaling-stroke;
}

.crypt-skull__asset #SkullDetails,
.crypt-skull__asset #Teeth {
    fill: var(--skull-cavity);
    stroke: var(--skull-detail);

    stroke-width: 0.72px;
    stroke-linecap: round;
    stroke-linejoin: round;

    opacity: 0.7;
    vector-effect: non-scaling-stroke;
}

.crypt-skull__asset #Teeth {
    fill: var(--crypt-paper);
    stroke-width: 0.62px;
    opacity: 0.58;
}

.crypt-skull__asset #SkullEyeL,
.crypt-skull__asset #SkullEyeR,
.crypt-skull__asset #SkullNose {
    fill: var(--skull-cavity);
    stroke: rgba(180, 106, 76, 0.72);

    stroke-width: 0.78px;
    stroke-linecap: round;
    stroke-linejoin: round;

    paint-order: fill stroke;
    vector-effect: non-scaling-stroke;
}

.crypt-skull__liquid {
    transform-box: fill-box;
    transform-origin: 88% 58%;
    will-change: transform, opacity;
}

.crypt-skull__liquid-body {
    opacity: 0.72;
}

.crypt-skull__liquid-surface {
    fill: none;
    stroke: var(--crypt-laser);

    stroke-width: 0.7px;
    stroke-linecap: round;
    opacity: 0.9;

    vector-effect: non-scaling-stroke;

    filter:
        drop-shadow(
            0 0 0.2rem
            rgba(0, 255, 225, 0.7)
        )
        drop-shadow(
            0 0 0.45rem
            rgba(155, 92, 255, 0.34)
        );
}

.crypt-skull__inner-wall {
    fill: none;
    stroke: rgba(17, 26, 29, 0.74);

    stroke-width: 0.72px;
    stroke-linecap: round;
    stroke-linejoin: round;

    opacity: 0.66;
    vector-effect: non-scaling-stroke;
}

.crypt-skull__highlight {
    fill: none;
    stroke: rgba(244, 221, 220, 0.56);

    stroke-width: 0.78px;
    stroke-linecap: round;

    opacity: 0.5;
    vector-effect: non-scaling-stroke;
}

.crypt-skull__highlight--warm {
    stroke: rgba(193, 154, 63, 0.62);
    opacity: 0.38;
}

.crypt-return:not(.is-leaving):is(:hover, :focus-visible)
    .crypt-skull__artboard {
    animation:
        crypt-skull-shake 430ms ease-in-out both;
}

.crypt-return:not(.is-leaving):is(:hover, :focus-visible)
    .crypt-skull__svg {
    filter:
        drop-shadow(
            0 0 0.28rem
            rgba(0, 255, 225, 0.42)
        )
        drop-shadow(
            0 0 0.72rem
            rgba(155, 92, 255, 0.3)
        );
}

.crypt-return.is-leaving {
    pointer-events: none;
}

.crypt-return.is-leaving .crypt-return__label {
    max-width: 0;
    opacity: 0;
    transform: translateX(0.45rem);
}

.crypt-return.is-leaving .crypt-skull__artboard {
    animation:
        crypt-skull-side-tip
        720ms
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;
}

.crypt-return.is-leaving .crypt-skull__liquid {
    animation:
        crypt-skull-liquid-drain
        680ms 80ms
        cubic-bezier(0.4, 0, 0.2, 1)
        forwards;
}


.crypt-return__pour {
    position: absolute;
    z-index: -1;

    top: 57%;
    left: 77%;

    width: clamp(7rem, 19vw, 20rem);
    height: 0.28rem;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #00ffe1,
            #9b5cff 38%,
            #ff3cac 72%,
            #401a33
        );

    opacity: 0;
    transform:
        translateY(-50%)
        rotate(2deg)
        scaleX(0);

    transform-origin: left center;

    filter:
        drop-shadow(
            0 0 0.32rem
            rgba(0, 255, 225, 0.66)
        )
        drop-shadow(
            0 0 0.72rem
            rgba(155, 92, 255, 0.38)
        );

    pointer-events: none;
}

.crypt-return__pour::after {
    position: absolute;
    top: 50%;
    right: -0.22rem;

    width: 0.46rem;
    aspect-ratio: 1;

    content: "";

    border-radius: 50%;
    background: #ff3cac;

    opacity: 0;
    transform:
        translateY(-50%)
        scale(0.4);

    box-shadow:
        0 0 0.42rem
        rgba(255, 60, 172, 0.72);
}

.crypt-return.is-leaving .crypt-return__pour {
    animation:
        crypt-return-pour-right
        690ms 105ms
        ease-out
        forwards;
}

.crypt-return.is-leaving .crypt-return__pour::after {
    animation:
        crypt-return-pour-drop
        560ms 180ms
        ease-out
        forwards;
}

@keyframes crypt-skull-shake {
    0%,
    100% {
        transform: rotate(0deg) translate3d(0, 0, 0);
    }

    18% {
        transform: rotate(-5deg) translate3d(-0.02rem, 0, 0);
    }

    38% {
        transform: rotate(5deg) translate3d(0.025rem, -0.015rem, 0);
    }

    58% {
        transform: rotate(-3.5deg) translate3d(-0.018rem, 0.012rem, 0);
    }

    78% {
        transform: rotate(2.5deg) translate3d(0.012rem, 0, 0);
    }
}

@keyframes crypt-skull-side-tip {
    0% {
        transform: rotate(0deg) translate3d(0, 0, 0);
    }

    48% {
        transform:
            rotate(64deg)
            translate3d(0.05rem, -0.03rem, 0);
    }

    100% {
        transform:
            rotate(58deg)
            translate3d(0.08rem, 0, 0);
    }
}

@keyframes crypt-skull-liquid-drain {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    58% {
        opacity: 0.7;
        transform: scale(0.72, 0.82);
    }

    100% {
        opacity: 0.08;
        transform: scale(0.18, 0.46);
    }
}

@keyframes crypt-return-pour-right {
    0% {
        opacity: 0;
        transform:
            translateY(-50%)
            rotate(2deg)
            scaleX(0);
    }

    18% {
        opacity: 0.94;
    }

    72% {
        opacity: 0.76;
        transform:
            translateY(-50%)
            rotate(2deg)
            scaleX(1);
    }

    100% {
        opacity: 0;
        transform:
            translateY(-50%)
            rotate(2deg)
            scaleX(1);
    }
}

@keyframes crypt-return-pour-drop {
    0% {
        opacity: 0;
        transform:
            translateY(-50%)
            translateX(-1rem)
            scale(0.4);
    }

    42% {
        opacity: 0.96;
        transform:
            translateY(-50%)
            translateX(0)
            scale(1);
    }

    100% {
        opacity: 0;
        transform:
            translateY(-50%)
            translateX(0.8rem)
            scale(0.48);
    }
}

@media (max-width: 36rem) {
    .crypt-signal-box {
        top: 0.65rem;
        left: 0.65rem;

        min-height: 2.3rem;
        padding: 0.52rem 0.68rem;

        font-size: 0.6rem;
    }

    .crypt-return {
        top: 0.42rem;
        right: 0.75rem;
    }

    .crypt-skull {
        width: 3.15rem;
    }

    .crypt-return__label {
        position: absolute;
        top: calc(100% + 0.25rem);
        right: 0;

        padding: 0.38rem 0;

        font-size: 0.62rem;
    }

    .crypt-return:not(.is-leaving):is(:hover, :focus-visible)
        .crypt-return__label {
        max-width: 16rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .crypt-signal-box::after {
        animation: none;
    }

    .crypt-return:not(.is-leaving):is(:hover, :focus-visible)
        .crypt-skull__artboard,
    .crypt-return.is-leaving .crypt-skull__artboard,
    .crypt-return.is-leaving .crypt-skull__liquid,
    .crypt-return.is-leaving .crypt-return__pour,
    .crypt-return.is-leaving .crypt-return__pour::after {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
    }
}