/*
 * QueenK reusable Story Character presentation.
 *
 * Character artwork is composited over Story Scene backgrounds.
 * This layer is presentation-only.
 */

.story-character-layer {
    position: fixed;
    inset: 0;

    z-index: 4;

    overflow: hidden;

    pointer-events: none;
}


/*
 * Generic actor box.
 *
 * Do not size characters using viewport height alone.
 * Width is the better constraint for portrait character art,
 * especially on wide desktop gameplay screens.
 */
.story-character {
    --character-width-desktop:
        clamp(
            220px,
            22vw,
            390px
        );

    --character-width-mobile:
        clamp(
            150px,
            42vw,
            260px
        );

    position: absolute;

    bottom: 0;

    width:
        var(
            --character-width-desktop
        );

    max-height: 88vh;

    opacity: 0;

    transform:
        translateX(0);

    transform-origin:
        bottom center;

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


/*
 * Generic positions.
 */
.story-character[
    data-position="left"
] {
    left:
        clamp(
            16px,
            4vw,
            72px
        );
}


.story-character[
    data-position="center"
] {
    left: 50%;

    transform:
        translateX(-50%);
}


.story-character[
    data-position="right"
] {
    right:
        clamp(
            16px,
            4vw,
            72px
        );
}


/*
 * Reusable left entrance.
 */
.story-character[
    data-entrance="walk-in-left"
] {
    transform:
        translateX(-120%);
}


.story-character[
    data-entrance="walk-in-left"
].is-entered {
    opacity: 1;

    transform:
        translateX(0);
}


/*
 * Character artwork keeps its own aspect ratio.
 */
.story-character__image {
    display: block;

    width: 100%;
    height: auto;

    max-height: 88vh;

    object-fit: contain;
    object-position: bottom center;

    user-select: none;

    -webkit-user-drag: none;
}


/*
 * Mobile / narrow layouts.
 */
@media (max-width: 720px) {
    .story-character {
        width:
            var(
                --character-width-mobile
            );

        max-height: 68vh;
    }

    .story-character[
        data-position="left"
    ] {
        left: 8px;
    }

    .story-character__image {
        max-height: 68vh;
    }
}


/*
 * Very short screens.
 */
@media (max-height: 700px) {
    .story-character {
        width:
            clamp(
                180px,
                18vw,
                290px
            );

        max-height: 72vh;
    }

    .story-character__image {
        max-height: 72vh;
    }
}


@media (prefers-reduced-motion: reduce) {
    .story-character {
        transition: none;
    }
}


/* =========================================================
   Story character visibility layer
   ========================================================= */

/*
 * Story characters must sit above puzzle presentation while
 * a character/story beat is active.
 *
 * Dialogue will eventually sit above this layer.
 */
.story-character-layer {
    z-index: 9000 !important;
}

.story-character {
    visibility: visible !important;
}

.story-character__image {
    visibility: visible !important;
    opacity: 1 !important;
}