/* ========================================
   PAGE CONCERTS — VISUELS LIVE
======================================== */


/* ========================================
   GIF PRINCIPAL — EN-TÊTE
======================================== */

.shows-hero {
    width: 100%;

    margin: 0 0 10px;

    overflow: hidden;
}


.shows-hero img {
    display: block;

    width: 100%;
    height: auto;
}


/* ========================================
   GIF SECONDAIRE — RESPIRATION
======================================== */

.shows-interlude {
    width: 60%;

    align-self: center;

    margin: 6px auto 2px;

    overflow: hidden;
}


.shows-interlude img {
    display: block;

    width: 100%;
    height: auto;
}


/* ========================================
   CRÉDITS
   IDENTIQUES À LA PAGE À PROPOS
======================================== */

.shows-gif-credit {
    margin-top: 8px;

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

    font-size: 14px;
    line-height: 1;

    text-align: right;
}


/* ========================================
   PREMIÈRES PARTIES
======================================== */

/*
   Toute date identifiée comme première partie
   reçoit automatiquement .show-support
   via script.js.
*/

.show-item.show-support {
    box-sizing: border-box;

    padding-left: 12px;
    padding-right: 10px;

    background:
        rgba(255, 255, 255, 0.055);

    box-shadow:
        inset 3px 0 0 rgba(255, 255, 255, 0.95);

    transition:
        opacity 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


/*
   Les anciennes dates restent grisées,
   mais un peu moins que les autres archives
   afin que les premières parties restent
   identifiables.
*/

.show-item.show-support.past {
    opacity: 0.62;
}


/* ========================================
   LABEL + ARTISTE
======================================== */

.show-support-meta {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 6px;
}


.show-support-label {
    display: inline-flex;
    align-items: center;

    padding: 3px 5px 2px;

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

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

    font-size: 10px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    white-space: nowrap;
}


.show-support-artist {
    color: #fff;

    font-size: clamp(15px, 1vw, 17px);
    line-height: 1;

    font-weight: 700;
}


/* ========================================
   HOVER DESKTOP
======================================== */

@media (hover: hover) and (pointer: fine) {

    .show-item.show-support:not(.past):hover {
        background:
            rgba(255, 255, 255, 0.09);

        box-shadow:
            inset 3px 0 0 #fff;
    }

}


/* ========================================
   APPARITION DU GIF SECONDAIRE
======================================== */

body.internal-page .shows-interlude {
    opacity: 0;

    transform: translateY(8px);

    transition:
        opacity 0.9s ease 0.25s,
        transform 1.05s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}


body.internal-page.intro-ready .shows-interlude {
    opacity: 1;

    transform: translateY(0);
}


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

@media (max-width: 700px) {

    .shows-hero {
        margin-bottom: 4px;
    }


    .shows-interlude {
        width: 72%;

        margin-top: 2px;
    }


    /* PREMIÈRES PARTIES */

    .show-item.show-support {
        padding:
            11px 8px
            11px 11px;

        gap: 3px;
    }


    .show-support-meta {
        margin-top: 4px;

        gap: 5px;
    }


    .show-support-label {
        padding: 3px 5px 2px;

        font-size: 9px;
    }


    .show-support-artist {
        font-size: 15px;
    }

}


/* ========================================
   ACCESSIBILITÉ
======================================== */

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

    body.internal-page .shows-interlude {
        opacity: 1;

        transform: none;

        transition: none;
    }


    .show-item.show-support {
        transition: none;
    }

}