html { /* body won't work ¯\_(ツ)_/¯ */
}

a {
    color: #f48a16;
}
a:hover {
    color: #f48a16;
    text-decoration: none;
}

.hidden {
    display: none !important;
}

.line {
    border-bottom: 1px solid lightgrey;
    margin-top: 5px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

.scrollsnap-container {
    max-height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: mandatory; /* for older browsers */
    scroll-snap-points-y: repeat(100vh); /* for older browsers */
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

@media (max-width: 768px) {
    .scroll-start-m {
        scroll-snap-align: start;
    }
    .scroll-end-m {
        scroll-snap-align: end;
    }
}

@font-face {
    font-family: "NightWind";
    src: url('font/NightWindSentSample.otf') format("opentype");
}
@font-face {
    font-family: "Frank Ruhl Hofshi";
    src: url('font/FrankRuhlHofshi-Regular.ttf') format("opentype");
}

/* ================= Initialisation des flèches de direction =============== */

a.arrow-left, a.arrow-right {
    position: absolute;
    font-size: 30px;
    color: white !important;
    opacity: 0.2;
    z-index: 1;

    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    transition: 0.3s;
}
a.arrow-down, a.arrow-up {
    position: absolute;
    font-size: 30px;
    color: white !important;
    opacity: 0.2;
    z-index: 1;

    left: 50%;
    transform: translateX(-50%);
    transition: 0.3s;
}
a.arrow-left { left: 0px; }
a.arrow-right { right: 0px; }
a.arrow-down { bottom: 15px; }
a.arrow-up { top: 15px; }
a.arrow-up:hover, a.arrow-down:hover, a.arrow-right:hover, a.arrow-left:hover {
    opacity: 1;
}

/* ========================== Images de fond ========================== */

#background {
    position: fixed;
    height: 110vh;
    width:  100%;

    filter: brightness(0.6);
}
#background div {
    height: 100%;
    width:  100%;

    position: absolute;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;  

    opacity: 0;
    transition: 1s;
}
#background div.visible {
    opacity: 1
}
#background div.copy {
    opacity: 1;
    z-index: -1;
}

/* ================================ CADRES =========================== */

.page-content {
    position: relative;
    display: flex;
    min-height: 100vh;
    align-items: center;
    scroll-snap-align: start;
    justify-content: center;
}
#making-of .grid-content {
    margin-top: 75px;
    margin-bottom: 75px;
    /*scroll-snap-type: y proximity;*/
}

.grid-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.collapsible {
    width: 100%;
    opacity: 1;
    overflow: hidden;
    transition: 1s ease-out;
}
.collapsible.collapsed {
    width: 0;
    opacity: 0;
}

.grid-content > div, .grid-content > a {
    text-align: center;
/*    padding: 0;*/
}

.text-content {
    font-size: 12px;
    font-family: "Frank Ruhl Hofshi";
    text-transform: none;
    letter-spacing: 0.2em;
    color: white;
    text-align: left;

    display: flex;
    flex-basis: auto;
    flex-direction: column;
    transition: 0.3s;
}

.track-description {
    display: flex;
    flex-direction: row;
    width: 660px;
    max-width: none;
}
.track-description .credit.masked {
    word-break: break-all;      
    text-align: justify;
    opacity: 0.5;
}

.album-description, .album-buy, .album-makingof {
    display: flex;
    flex-direction: row;
}
.album-description .description, .album-stream-buy .description, .album-makingof .description {
    text-align: justify;
    font-size: 14px;
}
.album-makingof .description {
    font-size: 12px;
}

.title {
    color: white;
    font-size: 20px;
    font-family: "Frank Ruhl Hofshi";
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/*.title.highlight {
    color: #f48a16;
}*/
.subtitle {
    color: white;
    font-size: 13px;
    font-family: "Frank Ruhl Hofshi";
    letter-spacing: 0.2em;
    text-transform: none;
}
/*.album-description .subtitle {
    color: #f48a16;
}*/

.title-disclaimer {
    color: black;
    opacity: 0.2;
    font-size: 18px;
    font-family: "Frank Ruhl Hofshi";
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* MOBILE GRID */
@media (max-width: 768px) {
    .track-description {
        display: flex;
        flex-direction: row;
        width: revert;
        max-width: revert;
    }
    .album-description {
        flex-direction: column;
        width: 85%;
    }
    .album-makingof {
        flex-direction: column;
    }
    #making-of {
        align-items: start;
    }
}

.darkglass {
    background-color: rgb(0, 0, 0, 0.15);
    backdrop-filter: blur(3px);
}

/* ============================ TRACK INFOS =============================== */

.disclaimer {
    color: black;
    opacity: 0.2;
    font-size: 12px;
    font-family: "Frank Ruhl Hofshi";
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: 0.5s;
}

.track-img {
    display: flex;
    flex-direction: column;
    position: relative;
    max-height: 232.5px;
/*    max-height: 258.5px;*/

    transition: opacity 0.3s, height 0.5s, filter 0.5s, transform 0.5s;
}
.track-img img {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    transition: 0.3s;
}
.track-img a {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 30px;

    opacity: 0;
    transition: 0.3s;
}
.track-img:hover {
    filter: grayscale(0%) drop-shadow(0px 3px 1px rgb(0, 0, 0, 0.15));
    transform: translate(0px, -5px);
}
.track-img:hover a {
    opacity: 1;
}
.track-img:hover img {
    filter: blur(2px);
}

/* lecture de la musique */
.track-img.reading {
    filter: grayscale(100%) drop-shadow(0px 3px 1px rgb(0, 0, 0, 0));
}
.track-img.reading:hover {
    transform: translate(0px, 0px);
}
.track-img.reading a {
    cursor: not-allowed;
    opacity: 0;
}
.track-img.reading:hover img {
    filter: blur(0px);
}
.track-img.reading .disclaimer {
    opacity: 0;
}

/* MOBILE GRID */
#mobileTrackInfos .track-img {
    height: 232.5px;
    width: 232.5px;
    opacity: 1;
}
#mobileTrackInfos .track-img.collapsed {
    height: 0;
    opacity: 0;
}

/* Cadre */
.track-infos {
    opacity: 1;
    transition: 0.3s;
}
.track-infos .text-content {
    position: relative;
    overflow: auto;
    scrollbar-color: #f48a1673 transparent;
    scrollbar-width: thin;

    height: 320px;
    transition: 0.3s;
}
#mobileTrackInfos .track-infos .text-content {
    height: 400px;
}
.track-infos.collapsed {
    opacity: 0;
}
.track-infos.collapsed .text-content, #mobileTrackInfos .track-infos.collapsed .text-content {
    height: 0;
    scrollbar-color: transparent transparent;
}

/* Text content span */
.track-infos .text-content span {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;

    text-align: justify;
    margin-right: 10px;
}
.track-infos .text-content span.active {
    opacity: 1;
}

.credit {
    flex-grow: 5;

    max-height: 165.5px;
    overflow: auto;
    scrollbar-color: #f48a1673 transparent;
    scrollbar-width: thin;
}
/* MOBILE GRID */
#mobileTrackInfos .credit {
    height: 108px;
}

/* masked */
.track-description.masked .track-img img {
    box-shadow: none;
    filter: blur(0px) drop-shadow(3px 3px 1px rgb(0, 0, 0, 0.25));
}
.track-description.masked .track-img:hover img {
    filter: blur(2px) drop-shadow(3px 3px 1px rgb(0, 0, 0, 0.25));
}
.track-description.masked .track-img a {
    top: -28px;
    left: 1px;
}
.track-description.masked .credit {
    filter: blur(2px);
}
.track-description.masked .title {
    filter: blur(3px);
}

/* ============================= BUTTON ============================== */

.btn-track {
    width: 100px;
    padding: 7px;

    color: white;
    font-size: 14px;
    font-family: "Frank Ruhl Hofshi";
    letter-spacing: 0.2em;
    text-transform: none;

    cursor: pointer;
    opacity: 0.3;
    transition: 0.2s;
}
.btn-track:hover{
    background: #000000;
    background: linear-gradient(90deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0) 100%);
    backdrop-filter: blur(4px);
}
.btn-track.active {
    opacity: 1;
    background: #000000;
    background: linear-gradient(90deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0) 100%);
    backdrop-filter: blur(4px);
}

.btn-link {
    text-align: center;
    width: fit-content;
    padding: 15px;
    padding-top: 7px;
    padding-bottom: 7px;
    background-color: #f58d15;

    color: white;
    font-size: 14px;
    font-family: "Frank Ruhl Hofshi";
    letter-spacing: 0.2em;

    opacity: 0.7;
    transition: 0.3s;
    cursor: pointer;
}
.btn-link:hover {
    color: white;
    text-decoration: none;
    opacity: 1;
    background-color: #f58d15;
}

.btn-title {
    text-align: center;
    width: 240px;
    padding: 15px;
    padding-top: 7px;
    padding-bottom: 7px;
    background-color: #f58d15;

    color: white;
    font-size: 16px;
    font-family: "Frank Ruhl Hofshi";
    letter-spacing: 0.2em;

    transition: 0.3s;
    cursor: pointer;
}
.btn-title:hover {
    color: white;
    text-decoration: none;
}

/* =========================== TRACKLIST ============================= */

.track-title {
    width: 450px;
    padding: 7px;

    color: white;
    font-size: 20px;
    font-family: "Frank Ruhl Hofshi";
    letter-spacing: 0.2em;
    text-transform: uppercase;

    cursor: pointer;
/*    transition: 0.2s;*/
}
.track-title:hover {
    background: #000000;
    background: linear-gradient(90deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0) 100%);
    backdrop-filter: blur(4px);

    text-decoration: none;
    color: white;
    opacity: 1;
}
.track-title.active {
    background: #000000;
    background: linear-gradient(90deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0) 100%);
/*    background: radial-gradient(circle,rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0) 100%);*/
/*    background: rgba(0, 0, 0, 0.20);*/
    backdrop-filter: blur(4px);
    color: #f48a16;
    opacity: 1;
}
.track-title.masked {
    text-transform: revert;
    opacity: 0.7;
    filter: blur(3px);
}
.track-title.masked.active {
    color: white;
    opacity: 1;
}

/* ============================== AFFICHAGE CAROUSEL ==================== */

.carousel-container {
    flex-direction: column-reverse;
}
.carousel-indicators {
    /*position: relative;*/
    flex-direction: row;
    /*justify-content: flex-start;*/

    touch-action: pan-x;
    overflow-x: scroll;
}
.carousel-indicators img {
    cursor: pointer;
    width: 60px;
}

/* ---- Affichage PC ---- */
@media (min-width: 768px) { 
    .carousel-container {
        flex-direction: row;
    }
    .carousel-indicators {
        /*flex-direction: column;*/
        overflow-x: visible;
        touch-action: none;
    }
}

.carousel-indicators div {
    opacity: 0.4;
    transition: 0.3s;
}
.carousel-indicators div.active {
    opacity: 1;
}

/* =============================== BACKDROP ============================ */

.backdrop {
    position: relative;
    transition: 0.5s;
}
.backdrop:hover {
    filter: drop-shadow(0px 3px 1px rgb(0, 0, 0, 0.15));
    transform: translate(0px, -5px);

}

.backdrop img {
    transition: 0.5s;
}
.backdrop:hover img {
    filter: blur(2px);
}

.backdrop-content {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;

/*    background: radial-gradient(circle,rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.25) 40%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%);*/

    opacity: 0;
    cursor: pointer;
    transition: 0.5s;
}
.backdrop-content:hover {
    opacity: 1;
}

.backdrop-icon {
    font-size: 30px;
}

.backdrop-button {
    background-color: transparent;
    border-radius: 3px;
    width: 300px;
    padding: 7px;

    color: white;
    font-size: 18px;
    font-family: "Frank Ruhl Hofshi";
    letter-spacing: 0.2em;

    transition: 0.3s;
    cursor: pointer;
}
.backdrop-button:hover {
    color: #484848;
    background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 25%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.6) 75%, rgba(255, 255, 255, 0) 100%);
}

/* ===================== IMG MAP ===================== */

/*#imagemapPannel {
    display: flex;
    justify-content: center;
    align-items: center;
}*/
#imagemapPannel .maparea {
    max-height: 60vh;
    opacity: 0;
}
#imagemapPannel .highlight {
    position: absolute;
    max-height: 60vh;
    transition: 1s;
}
#imagemapPannel .highlight.hover {
/*    filter: grayscale(100%);*/
/*    transform: scale(1.03);*/
    filter: grayscale(0%) drop-shadow(3px 3px 1px rgb(0, 0, 0, 0.25));
    transform: translate(-4px, -4px);
/*    filter: saturate(150%);*/
}

#imagemapPannel .highlight.reading {
/*    filter: grayscale(100%);*/
    filter: grayscale(100%) drop-shadow(3px 3px 1px rgb(0, 0, 0, 0.25));
    transform: translate(-4px, -4px);
/*    cursor: not-allowed;*/
/*    filter: saturate(150%);*/
}
#imagemapPannel area.reading {
    cursor: not-allowed;
}