/*
 * QueenK world composition.
 *
 * This is NOT a card.
 * This is NOT the puzzle UI.
 *
 * World animation/rendering is composited between
 * the background scenery and interactive UI.
 */

.world-restoration-layer {
    position: fixed;
    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;
}

.world-restoration-layer__image {
    position: absolute;

    left: 50%;
    top: 48%;

    width:
        min(
            1120px,
            100vw
        );

    height: auto;

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

    opacity: 0.70;

    /*
     * Current prototype art contains black pixels.
     * Screen compositing makes those dark pixels
     * integrate into the existing environment rather
     * than appear as a rectangular black video box.
     *
     * Blender assets will ultimately replace this
     * workaround with transparent/composited media.
     */
    mix-blend-mode: screen;

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            #000 38%,
            rgba(0, 0, 0, 0.92) 54%,
            rgba(0, 0, 0, 0.42) 72%,
            transparent 92%
        );

    mask-image:
        radial-gradient(
            ellipse at center,
            #000 38%,
            rgba(0, 0, 0, 0.92) 54%,
            rgba(0, 0, 0, 0.42) 72%,
            transparent 92%
        );

    transition:
        opacity 220ms ease,
        filter 300ms ease;
}

.world-restoration-layer__image.is-transitioning {
    opacity: 0.30;

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

/*
 * Disable the old boxed restoration artwork.
 *
 * The HUD can still show restoration objective and
 * progress data; visual world reconstruction is now
 * owned by world-renderer.js.
 */
.sanctuary-visual {
    display: none;
}

/*
 * Foundation impact effect.
 *
 * Only the world restoration layer moves.
 * Puzzle controls, backpack and HUD do not shake.
 */
body.world-foundation-shake
.world-restoration-layer {
    animation:
        queenk-foundation-shake
        620ms
        cubic-bezier(
            0.36,
            0.07,
            0.19,
            0.97
        )
        both;
}

body.world-foundation-shake::after {
    content: "";

    position: fixed;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center 62%,
            rgba(226, 193, 125, 0.16),
            transparent 54%
        );

    animation:
        queenk-restoration-dust
        700ms ease-out
        both;
}

@keyframes queenk-foundation-shake {
    0% {
        transform:
            translate3d(
                0,
                0,
                0
            );
    }

    15% {
        transform:
            translate3d(
                -5px,
                2px,
                0
            );
    }

    30% {
        transform:
            translate3d(
                5px,
                -3px,
                0
            );
    }

    44% {
        transform:
            translate3d(
                -4px,
                3px,
                0
            );
    }

    58% {
        transform:
            translate3d(
                3px,
                -2px,
                0
            );
    }

    74% {
        transform:
            translate3d(
                -2px,
                1px,
                0
            );
    }

    100% {
        transform:
            translate3d(
                0,
                0,
                0
            );
    }
}

@keyframes queenk-restoration-dust {
    0% {
        opacity: 0;
    }

    22% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@media (max-width: 600px) {
    .world-restoration-layer__image {
        top: 43%;

        width:
            max(
                760px,
                165vw
            );

        opacity: 0.58;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.world-foundation-shake
    .world-restoration-layer,

    body.world-foundation-shake::after {
        animation: none;
    }
}

/* =========================================================
   Ancient Gate unlock transition
   Final animation will be replaced by Blender assets.
   ========================================================= */

body.ancient-gate-unlocking
.world-restoration-layer__image {
    animation:
        queenk-gate-unlock-pulse
        900ms
        ease-in-out
        both;
}

body.ancient-gate-unlocking::before {
    content: "";

    position: fixed;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center 52%,
            rgba(119, 200, 255, 0.32),
            rgba(92, 160, 255, 0.10) 34%,
            transparent 67%
        );

    animation:
        queenk-gate-unlock-flash
        900ms ease-out
        both;
}

@keyframes queenk-gate-unlock-pulse {
    0% {
        filter:
            brightness(1);
    }

    45% {
        filter:
            brightness(1.9)
            drop-shadow(
                0 0 28px
                rgba(111, 203, 255, 0.8)
            );
    }

    100% {
        filter:
            brightness(1.08);
    }
}

@keyframes queenk-gate-unlock-flash {
    0% {
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* =========================================================
   Dragon story reveal
   ========================================================= */

.dragon-story-reveal {
    position: fixed;
    inset: 0;

    z-index: 900;

    display: grid;
    place-items: center;

    padding: 20px;

    background:
        radial-gradient(
            circle at center,
            rgba(20, 50, 74, 0.72),
            rgba(2, 7, 15, 0.95)
        );

    backdrop-filter:
        blur(8px);
}

.dragon-story-reveal__content {
    width:
        min(
            440px,
            100%
        );

    text-align: center;

    color: #ffffff;
}

.dragon-story-reveal img {
    display: block;

    width:
        min(
            330px,
            80vw
        );

    max-height: 48vh;

    margin:
        0 auto 14px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 18px 40px
            rgba(0, 0, 0, 0.55)
        );
}

.dragon-story-reveal small {
    color:
        rgba(
            230,
            215,
            164,
            0.78
        );

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

.dragon-story-reveal h2 {
    margin:
        8px 0 20px;

    color: #f4d27a;

    font-size:
        clamp(
            2rem,
            8vw,
            3.5rem
        );
}

.dragon-story-reveal button {
    min-width: 140px;

    padding: 12px 20px;

    border:
        1px solid
        rgba(241, 202, 111, 0.68);

    border-radius: 999px;

    background:
        rgba(8, 21, 35, 0.88);

    color: #fff1c5;

    font: inherit;
    cursor: pointer;
}