/*
===============================================================================
Fichier     : ava.css
Projet      : SkinZenitude Framework
Module      : Ava
Description : Styles communs du module Ava — navigation par panneaux de verre
===============================================================================
*/


/* ==========================================================================
   AVA — CONTENEUR
========================================================================== */

#ava {

    position: absolute;

    left: 70%;
    top: 34%;

    width: 3.75%;
    height: auto;

    z-index: 10;

    cursor: pointer;

    opacity: 0;

    transform: scale(0.82);

    transition:
        opacity 3s ease,
        transform 3.2s cubic-bezier(0.22, 1, 0.36, 1);

}


/* ==========================================================================
   AVA — APPARITION
========================================================================== */

#ava.ava-visible {

    opacity: 1;

    transform: scale(1);

}


/* ==========================================================================
   LOTUS PRINCIPAL
========================================================================== */

#ava .ava-lotus {

    display: block;

    width: 100%;
    height: auto;

    opacity: 0.72;

    transition:
        opacity 0.4s ease,
        transform 0.4s ease,
        filter 0.4s ease;

}


/* ==========================================================================
   NOM D'AVA
========================================================================== */

#ava .ava-name {

    position: absolute;

    left: 50%;
    top: 50%;

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

    z-index: 2;

    font-family:
        "Parisienne",
        "Allura",
        "Ballet",
        "Segoe Script",
        cursive;

    font-size: 0.55em;

    font-weight: 400;
    font-style: normal;

    letter-spacing: 0.02em;

    color:
        rgba(105, 70, 115, 0.34);

    text-shadow:
        1px 1px 1px rgba(255, 255, 255, 0.65),
        -1px -1px 1px rgba(105, 70, 115, 0.06);

    pointer-events: none;

    transition:
        opacity 0.3s ease,
        transform 0.35s ease;

}


/* ==========================================================================
   SURVOL — AVA
========================================================================== */

#ava:hover .ava-lotus {

    opacity: 1;

    transform:
        scale(1.08);

    filter:
        drop-shadow(
            0 8px 16px
            rgba(100, 65, 115, 0.14)
        );

}


/* ==========================================================================
   SURVOL — NOM
========================================================================== */

#ava:hover .ava-name {

    opacity: 0;

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

}


/* ==========================================================================
   PANNEAUX AVA — ÉTAT INITIAL
========================================================================== */

#ava .ava-child {

    position: absolute;

    display: block;

    width: max-content;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    text-decoration: none;

    /*
     * IMPORTANT
     *
     * Le JavaScript définit left et top comme
     * le CENTRE du panneau.
     *
     * Le translate permet donc de placer le centre
     * du panneau exactement sur le point calculé.
     */

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

    transform-origin:
        center center;

    transition:
        opacity 0.6s ease,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0.7s;

}


/* ==========================================================================
   PANNEAUX AVA — OUVERTURE
========================================================================== */

#ava.ava-open .ava-child {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

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

    transition:
        opacity 0.7s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0s;

}


/* ==========================================================================
   PANNEAU DE VERRE
========================================================================== */

#ava .ava-panel {

    display: block;

    width: max-content;

    padding:
        0.25em
        0.60em;

    box-sizing: border-box;

    white-space: nowrap;

    border-radius: 0.55em;

    background:
        rgba(112, 72, 150, 0.20);

    border:
        1px solid
        rgba(255, 255, 255, 0.42);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    color:
        rgba(255, 255, 255, 0.94);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 0.82rem;

    font-weight: 500;

    letter-spacing: 0.02em;

    line-height: 1.1;

    text-align: center;

    text-shadow:
        0 1px 3px
        rgba(70, 45, 80, 0.30);

    box-shadow:
        0 5px 18px
        rgba(70, 45, 90, 0.10);

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;

}


/* ==========================================================================
   SURVOL — PANNEAU
========================================================================== */

#ava .ava-child:hover .ava-panel {

    background:
        rgba(112, 72, 150, 0.34);

    border-color:
        rgba(255, 255, 255, 0.68);

    box-shadow:
        0 8px 22px
        rgba(70, 45, 90, 0.18);

    transform:
        translateY(-2px);

}


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

@media (max-width: 768px) {

    #ava {

        width: 15%;
        height: auto;

    }


    #ava .ava-name {

        font-size: 0.55em;

    }


    #ava .ava-child {

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

    }


    #ava.ava-open .ava-child {

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

    }


    #ava .ava-panel {

        font-size: 0.82rem;

        padding:
            0.25em
            0.60em;

    }

}