/*
 * ============================================================
 * LIVING SKELETON
 * SKELETON.CSS
 * VERSIONE POSA COMPLETA
 * ============================================================
 *
 * IMPORTANTE:
 *
 * skeleton-front.svg
 * skeleton-right.svg
 * skeleton-left.svg
 *
 * sono considerate TRE POSE COMPLETE.
 *
 * Il CSS NON deve quindi spostare separatamente:
 * testa
 * busto
 * bacino
 * gambe
 * piedi
 * braccia
 *
 * Il movimento del personaggio viene effettuato dal
 * contenitore .skeleton-character.
 *
 * ============================================================
 */


/* ============================================================
   SCENA
   ============================================================ */

#living-skeleton-scene {

    position: fixed !important;

    left: 0 !important;
    top: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    overflow: hidden !important;

    pointer-events: none !important;

    z-index: 999990 !important;

}


/* ============================================================
   CONTENITORE SCHELETRO
   ============================================================ */

.skeleton-character {

    position: absolute !important;

    left: 0;
    top: 0;

    width: 180px;
    height: 365px;

    margin: 0;
    padding: 0;

    visibility: hidden;
    opacity: 0;

    pointer-events: none !important;

    transform-origin: 50% 100%;

    /*
     * IMPORTANTISSIMO:
     *
     * il contenitore è l'unico elemento che
     * viene spostato durante la camminata.
     */

    will-change:
        left,
        top,
        transform,
        opacity;

}


/* ============================================================
   VISIBILITÀ
   ============================================================ */

.skeleton-character.is-visible {

    visibility: visible;
    opacity: 1;

}


.skeleton-character.is-hidden {

    visibility: hidden;
    opacity: 0;

}


/* ============================================================
   LE TRE POSE
   ============================================================ */

.skeleton-front,
.skeleton-right,
.skeleton-left {

    position: absolute !important;

    left: 0 !important;
    top: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    visibility: hidden;
    opacity: 0;

    pointer-events: none !important;

    /*
     * Nessuna trasformazione sulle pose.
     */

    transform: none !important;

}


/* ============================================================
   SVG DELLE POSE
   ============================================================ */

.skeleton-character .skeleton-front svg,
.skeleton-character .skeleton-right svg,
.skeleton-character .skeleton-left svg {

    position: absolute !important;

    left: 0 !important;
    top: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    overflow: visible !important;

    pointer-events: none !important;

}


/* ============================================================
   UNA SOLA VISTA ALLA VOLTA
   ============================================================ */

.skeleton-character.view-front .skeleton-front {

    visibility: visible;
    opacity: 1;

}


.skeleton-character.view-right .skeleton-right {

    visibility: visible;
    opacity: 1;

}


.skeleton-character.view-left .skeleton-left {

    visibility: visible;
    opacity: 1;

}


/*
 * Quando nessuna vista è selezionata,
 * tutte rimangono nascoste.
 */


/* ============================================================
   CAMBIO VISTA
   ============================================================ */

.skeleton-character.view-changing .skeleton-front,
.skeleton-character.view-changing .skeleton-right,
.skeleton-character.view-changing .skeleton-left {

    transition:
        opacity 0.12s linear;

}


/* ============================================================
   EMERSIONE DAL TERRENO
   ============================================================ */

.skeleton-character.emerging {

    visibility: visible;
    opacity: 1;

    animation:
        skeleton-emerge
        1.7s
        cubic-bezier(.22,.75,.3,1)
        forwards;

}


@keyframes skeleton-emerge {

    0% {

        transform:
            translateY(360px)
            scale(.82);

        opacity: 0;

    }

    55% {

        transform:
            translateY(-8px)
            scale(.88);

        opacity: 1;

    }

    75% {

        transform:
            translateY(3px)
            scale(.88);

    }

    90% {

        transform:
            translateY(-1px)
            scale(.88);

    }

    100% {

        transform:
            translateY(0)
            scale(.88);

        opacity: 1;

    }

}


/* ============================================================
   STATO A TERRA
   ============================================================ */

.skeleton-character.on-ground {

    transform-origin: 50% 100%;

}


/* ============================================================
   CAMMINATA
   ============================================================ */

/*
 * NON facciamo più saltare il personaggio.
 *
 * Il corpo rimane sostanzialmente stabile.
 *
 * L'animazione delle gambe verrà gestita all'interno
 * degli SVG quando necessario.
 */

.skeleton-character.is-walking {

    animation:
        skeleton-walk-body
        .62s
        ease-in-out
        infinite;

}


@keyframes skeleton-walk-body {

    0% {

        transform:
            translateY(0)
            rotate(0deg);

    }

    25% {

        transform:
            translateY(-1px)
            rotate(-.25deg);

    }

    50% {

        transform:
            translateY(0)
            rotate(0deg);

    }

    75% {

        transform:
            translateY(-1px)
            rotate(.25deg);

    }

    100% {

        transform:
            translateY(0)
            rotate(0deg);

    }

}


/* ============================================================
   CORSA
   ============================================================ */

.skeleton-character.is-running {

    animation:
        skeleton-run-body
        .30s
        ease-in-out
        infinite;

}


@keyframes skeleton-run-body {

    0% {

        transform:
            translateY(0)
            rotate(-1deg);

    }

    50% {

        transform:
            translateY(-3px)
            rotate(1deg);

    }

    100% {

        transform:
            translateY(0)
            rotate(-1deg);

    }

}


/* ============================================================
   PAURA
   ============================================================ */

.skeleton-character.is-scared {

    animation:
        skeleton-scared
        .20s
        ease-in-out
        infinite;

}


@keyframes skeleton-scared {

    0% {

        transform:
            translateX(0)
            rotate(0deg);

    }

    25% {

        transform:
            translateX(-2px)
            rotate(-1deg);

    }

    50% {

        transform:
            translateX(2px)
            rotate(1deg);

    }

    75% {

        transform:
            translateX(-1px)
            rotate(-.5deg);

    }

    100% {

        transform:
            translateX(0)
            rotate(0deg);

    }

}


/* ============================================================
   TESTA
   ============================================================ */

/*
 * IMPORTANTE:
 *
 * NON impostiamo position:absolute.
 *
 * La testa rimane dove si trova nell'SVG.
 *
 * Il JS potrà eventualmente applicare una classe
 * all'SVG della posa attiva.
 */


/* ============================================================
   CADUTA TESTA
   ============================================================ */

/*
 * Queste classi vengono mantenute per compatibilità
 * con il JS.
 *
 * La trasformazione della testa verrà applicata
 * direttamente al gruppo SVG corretto dal JS,
 * non tramite position:absolute.
 */

.skeleton-character.head-falling {

    /*
     * nessuna animazione del contenitore
     */

}


.skeleton-character.head-picking {

    /*
     * nessuna animazione del contenitore
     */

}


/* ============================================================
   DISASSEMBLAGGIO
   ============================================================ */

.skeleton-character.is-disassembled {

    animation:
        skeleton-disassemble-body
        .45s
        ease-out
        forwards;

}


@keyframes skeleton-disassemble-body {

    0% {

        transform:
            translateY(0)
            rotate(0deg)
            scale(.88);

        opacity: 1;

    }

    40% {

        transform:
            translateY(8px)
            rotate(-2deg)
            scale(.84);

        opacity: 1;

    }

    100% {

        transform:
            translateY(25px)
            rotate(0deg)
            scale(.78);

        opacity: 1;

    }

}


/* ============================================================
   MUCCHIETTO DI OSSA
   ============================================================ */

.skeleton-character.is-bone-pile {

    /*
     * Il JS gestirà la visualizzazione della posa
     * disassemblata.
     */

}


/* ============================================================
   OSSA INDIVIDUALI
   ============================================================ */

/*
 * Compatibilità con eventuali elementi SVG
 * che dovessero utilizzare queste classi.
 *
 * MAI usare position:absolute qui.
 */

.skeleton-bone-piece {

    pointer-events: none !important;

    transform-box: fill-box;

    transform-origin: center;

    will-change: transform;

}


/* ============================================================
   MUCCHIETTO
   ============================================================ */

.skeleton-character.bone-pile-complete {

    transform:
        translateY(20px)
        scale(.78);

}


/* ============================================================
   TESTA SOPRA IL MUCCHIO
   ============================================================ */

.skeleton-character.pile-head {

    /*
     * Compatibilità.
     *
     * La posizione reale della testa sarà gestita
     * dal JS sul gruppo SVG.
     */

}


/* ============================================================
   TOMBA
   ============================================================ */

.skeleton-tomb-scene {

    position: absolute !important;

    left: 0;
    bottom: 0;

    /*
     * Dimensioni volutamente maggiori.
     */

    width: 260px;
    height: 330px;

    margin: 0;
    padding: 0;

    visibility: hidden;
    opacity: 0;

    pointer-events: none !important;

    transform-origin: 50% 100%;

    z-index: 999992;

}


/* ============================================================
   TOMBA VISIBILE
   ============================================================ */

.skeleton-tomb-scene.is-visible {

    visibility: visible;
    opacity: 1;

}


/* ============================================================
   LAPIDE
   ============================================================ */

.skeleton-tombstone {

    position: absolute !important;

    left: 50% !important;
    bottom: 48px !important;

    width: 205px !important;
    height: 270px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform:
        translateX(-50%) !important;

    transform-origin:
        50% 100%;

    pointer-events: none !important;

    z-index: 1;

}


.skeleton-tombstone svg {

    position: absolute !important;

    left: 0 !important;
    top: 0 !important;

    width: 100% !important;
    height: 100% !important;

    display: block !important;

    overflow: visible !important;

    pointer-events: none !important;

}


/* ============================================================
   TERRA
   ============================================================ */

.skeleton-dirt {

    position: absolute !important;

    left: 50% !important;
    bottom: 0 !important;

    width: 260px !important;
    height: 82px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform:
        translateX(-50%) !important;

    transform-origin:
        50% 100%;

    pointer-events: none !important;

    z-index: 3;

}


.skeleton-dirt svg {

    position: absolute !important;

    left: 0 !important;
    top: 0 !important;

    width: 100% !important;
    height: 100% !important;

    display: block !important;

    overflow: visible !important;

    pointer-events: none !important;

}


/* ============================================================
   BRACCIO EMERGENTE
   ============================================================ */

.skeleton-emerging-arm {

    position: absolute !important;

    left: 50% !important;

    /*
     * Il punto di uscita coincide con la terra.
     */

    bottom: 42px !important;

    width: 115px !important;
    height: 225px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform:
        translateX(-50%)
        translateY(205px);

    transform-origin:
        50% 100%;

    pointer-events: none !important;

    z-index: 4;

}


/* ============================================================
   SVG BRACCIO
   ============================================================ */

.skeleton-emerging-arm svg {

    position: absolute !important;

    left: 0 !important;
    top: 0 !important;

    width: 100% !important;
    height: 100% !important;

    display: block !important;

    overflow: visible !important;

    pointer-events: none !important;

}


/* ============================================================
   EMERSIONE BRACCIO
   ============================================================ */

.skeleton-tomb-scene.arm-emerging
.skeleton-emerging-arm {

    animation:
        skeleton-arm-emerge
        1.65s
        cubic-bezier(.25,.75,.3,1)
        forwards;

}


@keyframes skeleton-arm-emerge {

    0% {

        transform:
            translateX(-50%)
            translateY(205px);

    }

    60% {

        transform:
            translateX(-50%)
            translateY(-8px);

    }

    78% {

        transform:
            translateX(-50%)
            translateY(3px);

    }

    90% {

        transform:
            translateX(-50%)
            translateY(-1px);

    }

    100% {

        transform:
            translateX(-50%)
            translateY(0);

    }

}


/* ============================================================
   SALUTO BRACCIO
   ============================================================ */

.skeleton-tomb-scene.arm-waving
.skeleton-emerging-arm {

    animation:
        skeleton-arm-wave
        .72s
        ease-in-out
        infinite;

}


@keyframes skeleton-arm-wave {

    0% {

        transform:
            translateX(-50%)
            rotate(-5deg);

    }

    50% {

        transform:
            translateX(-50%)
            rotate(8deg);

    }

    100% {

        transform:
            translateX(-50%)
            rotate(-5deg);

    }

}


/* ============================================================
   MANO EMERGENTE
   ============================================================ */

.skeleton-emerging-hand {

    transform-box: fill-box;

    transform-origin:
        50% 100%;

}


.skeleton-tomb-scene.arm-waving
.skeleton-emerging-hand {

    animation:
        skeleton-hand-wave
        .38s
        ease-in-out
        infinite;

}


@keyframes skeleton-hand-wave {

    0% {

        transform:
            rotate(-12deg);

    }

    50% {

        transform:
            rotate(20deg);

    }

    100% {

        transform:
            rotate(-12deg);

    }

}


/* ============================================================
   RIENTRO BRACCIO
   ============================================================ */

.skeleton-tomb-scene.arm-returning
.skeleton-emerging-arm {

    animation:
        skeleton-arm-return
        1.0s
        cubic-bezier(.55,.05,.8,.2)
        forwards;

}


@keyframes skeleton-arm-return {

    0% {

        transform:
            translateX(-50%)
            translateY(0);

    }

    100% {

        transform:
            translateX(-50%)
            translateY(205px);

    }

}


/* ============================================================
   SPARIZIONE TOMBA
   ============================================================ */

.skeleton-tomb-scene.tomb-hiding {

    animation:
        skeleton-tomb-hide
        .55s
        ease-out
        forwards;

}


@keyframes skeleton-tomb-hide {

    0% {

        opacity: 1;
        transform:
            translateY(0);

    }

    100% {

        opacity: 0;
        transform:
            translateY(20px);

    }

}


/* ============================================================
   PIPISTRELLO
   ============================================================ */

.skeleton-bat {

    position: absolute !important;

    left: 0;
    top: 0;

    width: 70px;
    height: 42px;

    margin: 0;
    padding: 0;

    visibility: hidden;
    opacity: 0;

    pointer-events: none !important;

    transform-origin:
        50% 50%;

    will-change:
        left,
        top,
        transform,
        opacity;

}


/* ============================================================
   PIPISTRELLO VISIBILE
   ============================================================ */

.skeleton-bat.is-visible {

    visibility: visible;
    opacity: 1;

}


/* ============================================================
   SVG PIPISTRELLO
   ============================================================ */

.skeleton-bat svg {

    position: absolute !important;

    left: 0 !important;
    top: 0 !important;

    width: 100% !important;
    height: 100% !important;

    display: block !important;

    overflow: visible !important;

    pointer-events: none !important;

}


/* ============================================================
   ALI PIPISTRELLO
   ============================================================ */

.skeleton-bat .bat-wing-left,
.skeleton-bat .bat-wing-right {

    transform-box:
        fill-box;

    will-change:
        transform;

}


/* ============================================================
   ALA SINISTRA
   ============================================================ */

.skeleton-bat .bat-wing-left {

    transform-origin:
        100% 50%;

}


/* ============================================================
   ALA DESTRA
   ============================================================ */

.skeleton-bat .bat-wing-right {

    transform-origin:
        0% 50%;

}


/* ============================================================
   BATTITO ALI
   ============================================================ */

.skeleton-bat.is-flying
.bat-wing-left {

    animation:
        bat-wing-left
        .20s
        ease-in-out
        infinite
        alternate;

}


.skeleton-bat.is-flying
.bat-wing-right {

    animation:
        bat-wing-right
        .20s
        ease-in-out
        infinite
        alternate;

}


@keyframes bat-wing-left {

    from {

        transform:
            rotate(10deg);

    }

    to {

        transform:
            rotate(-38deg);

    }

}


@keyframes bat-wing-right {

    from {

        transform:
            rotate(-10deg);

    }

    to {

        transform:
            rotate(38deg);

    }

}


/* ============================================================
   VOLO PIPISTRELLO
   ============================================================ */

.skeleton-bat.is-flying {

    animation:
        bat-flight
        1.15s
        ease-in-out
        infinite;

}


@keyframes bat-flight {

    0% {

        transform:
            translateY(0)
            rotate(-2deg);

    }

    25% {

        transform:
            translateY(-5px)
            rotate(1deg);

    }

    50% {

        transform:
            translateY(0)
            rotate(3deg);

    }

    75% {

        transform:
            translateY(5px)
            rotate(0deg);

    }

    100% {

        transform:
            translateY(0)
            rotate(-2deg);

    }

}


/* ============================================================
   PIPISTRELLO IN HOVER
   ============================================================ */

.skeleton-bat.is-hovering {

    animation:
        bat-hover
        1.25s
        ease-in-out
        infinite;

}


@keyframes bat-hover {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(-2deg);

    }

    50% {

        transform:
            translateY(-7px)
            rotate(2deg);

    }

}


/* ============================================================
   PIPISTRELLO IN USCITA
   ============================================================ */

.skeleton-bat.is-leaving {

    animation:
        bat-leave
        1.1s
        ease-in
        forwards;

}


@keyframes bat-leave {

    0% {

        opacity: 1;

    }

    100% {

        opacity: 0;

        transform:
            translate(
                var(--leave-x, 300px),
                var(--leave-y, -120px)
            )
            rotate(15deg);

    }

}


/* ============================================================
   INTERAZIONE MOUSE
   ============================================================ */

#living-skeleton-scene,
#living-skeleton-scene *,
.skeleton-character,
.skeleton-character *,
.skeleton-tomb-scene,
.skeleton-tomb-scene *,
.skeleton-bat,
.skeleton-bat * {

    pointer-events:
        none !important;

}


/* ============================================================
   IMPORTANTE:
   NESSUNA PARTE DELLO SCHELETRO VIENE POSIZIONATA
   INDIPENDENTEMENTE DAL CONTENITORE.
   ============================================================ */

.skeleton-head,
.skeleton-arm,
.skeleton-leg,
.skeleton-foot {

    position: static !important;

    left: auto !important;
    top: auto !important;

    margin: 0;
    padding: 0;

}


/* ============================================================
   DISABILITIAMO LE VECCHIE ANIMAZIONI SULLE PARTI
   ============================================================ */

/*
 * Queste regole sono fondamentali per impedire che
 * vecchie classi eventualmente presenti negli SVG
 * facciano muovere separatamente le parti.
 */

.skeleton-character.is-walking
.skeleton-head,
.skeleton-character.is-walking
.skeleton-arm,
.skeleton-character.is-walking
.skeleton-leg,
.skeleton-character.is-walking
.skeleton-foot {

    animation: none !important;

}


/* ============================================================
   SICUREZZA
   ============================================================ */

html,
body {

    overflow-x: hidden;

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

    .skeleton-character {

        width: 150px;
        height: 305px;

    }


    .skeleton-tomb-scene {

        width: 220px;
        height: 285px;

    }


    .skeleton-tombstone {

        width: 175px !important;
        height: 230px !important;

        bottom: 42px !important;

    }


    .skeleton-dirt {

        width: 220px !important;
        height: 70px !important;

    }


    .skeleton-emerging-arm {

        width: 95px !important;
        height: 190px !important;

        bottom: 36px !important;

    }


    .skeleton-bat {

        width: 58px;
        height: 35px;

    }

}


/* ============================================================
   ACCESSIBILITÀ
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .skeleton-character,
    .skeleton-character *,
    .skeleton-tomb-scene,
    .skeleton-tomb-scene *,
    .skeleton-bat,
    .skeleton-bat * {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }

}