/* =========================================================
   LE FATE PROFUMATE
   STYLE.CSS COMPLETO
========================================================= */


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    background: #090716;
    color: #ffffff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;
}

body {
    overflow-x: hidden;
}

button,
a,
input {
    font: inherit;
}

button {
    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   SCHERMATA PRINCIPALE
========================================================= */

.screen {
    position: relative;

    width: 100%;
    height: 100vh;
    height: 100svh;

    min-height: 620px;

    overflow: hidden;

    background: #100c27;

    isolation: isolate;
}


/* =========================================================
   SFONDO DEL NEGOZIO

   QUESTA È LA MODIFICA PRINCIPALE.

   L'immagine:
   - riempie tutto lo schermo
   - resta grande
   - non viene trasformata in una miniatura
   - resta centrata
   - privilegia leggermente la zona superiore
     dove si trova l'insegna
========================================================= */

.shop-bg {
    position: absolute;

    z-index: 0;

    inset: 0;

    width: 100%;
    height: 100%;

    background-image:
        url("images/negozio-notte.jpg");

    background-repeat:
        no-repeat;

    background-position:
        center top;

    /*
       COVER:
       lo sfondo riempie veramente
       tutta la videata.
    */

    background-size:
        cover;

    pointer-events:
        none;
}


/*
   Riempimento atmosferico.

   Rimane DIETRO l'immagine.
   Serve soltanto qualora lo schermo
   abbia proporzioni particolari.
*/

#bottega::before {
    content: "";

    position: absolute;

    z-index: -2;

    inset: 0;

    background:
        radial-gradient(
            ellipse at center,
            #3c275d 0%,
            #1b1034 52%,
            #090716 100%
        );
}


/* =========================================================
   VELATURA

   MOLTO LEGGERA.
   Non deve spegnere l'immagine
   e soprattutto NON deve nascondere
   l'insegna LE FATE PROFUMATE.
========================================================= */

.veil {
    position: absolute;

    z-index: 1;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(5, 3, 16, 0.02) 0%,
            rgba(5, 3, 16, 0.00) 35%,
            rgba(5, 3, 16, 0.04) 65%,
            rgba(5, 3, 16, 0.16) 100%
        );
}


/* =========================================================
   SCRITTA SUPERIORE

   ENTRA NELLA BOTTEGA
   OGNI SOGLIA CUSTODISCE UN PICCOLO INCANTO

   È un SVG con due archi veri.

   La posizione è alta in modo
   da NON appoggiarsi sull'insegna.
========================================================= */

.welcome {
    position: absolute;

    z-index: 15;

    top: 0.6%;

    left: 50%;

    transform:
        translateX(-50%);

    width:
        min(72vw, 760px);

    height:
        145px;

    pointer-events:
        none;
}


/* SVG */

.welcome-svg {
    display: block;

    width: 100%;
    height: 100%;

    overflow: visible;

    /*
       alone luminoso morbido,
       senza creare un rettangolo
       dietro alla scritta
    */

    filter:
        drop-shadow(
            0 2px 3px
            rgba(0, 0, 0, 0.95)
        )
        drop-shadow(
            0 0 5px
            rgba(255, 241, 183, 0.85)
        )
        drop-shadow(
            0 0 12px
            rgba(242, 202, 105, 0.72)
        )
        drop-shadow(
            0 0 22px
            rgba(188, 113, 255, 0.42)
        );
}


/* entrambe le righe */

.welcome-line {
    fill:
        #fff1bc;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    text-anchor:
        middle;

    paint-order:
        stroke fill;

    stroke:
        rgba(24, 10, 39, 0.95);

    stroke-linejoin:
        round;

    text-shadow:
        0 0 6px #ffffff,
        0 0 11px #f1cc70;
}


/* ENTRA NELLA BOTTEGA */

.welcome-main {
    font-size:
        31px;

    font-weight:
        700;

    letter-spacing:
        2.2px;

    stroke-width:
        3px;
}


/* seconda riga */

.welcome-sub {
    font-size:
        17px;

    font-weight:
        600;

    letter-spacing:
        1.2px;

    stroke-width:
        2.2px;
}


/* =========================================================
   AREA DELLE TRE VETRINE

   NON allarghiamo le bottiglie.
   NON cambiamo il concetto Silver.

   Sinistra / Centro / Destra
========================================================= */

.windows-layout {
    position: absolute;

    z-index: 5;

    left: 50%;

    bottom: 7%;

    transform:
        translateX(-50%);

    width:
        min(91vw, 1250px);

    height:
        68%;

    display: grid;

    grid-template-columns:
        27% 46% 27%;

    align-items:
        end;

    justify-items:
        center;

    pointer-events:
        none;
}


/* =========================================================
   BOTTIGLIE / OGGETTI LATERALI
========================================================= */

.magic-object {
    position: relative;

    width: 100%;
    height: 100%;

    padding: 0;

    border: 0;

    background:
        transparent;

    display: flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        flex-end;

    overflow:
        visible;

    cursor:
        pointer;

    pointer-events:
        auto;
}


/* =========================================================
   IMMAGINI DELLE BOTTIGLIE
========================================================= */

.bottle-img,
.ritual-img {
    position: relative;

    z-index: 6;

    display: block;

    width:
        auto;

    height:
        auto;

    object-fit:
        contain;

    filter:
        drop-shadow(
            0 7px 8px
            rgba(0, 0, 0, 0.85)
        )
        drop-shadow(
            0 0 8px
            rgba(255, 230, 151, 0.25)
        );

    transition:
        transform 0.35s ease,
        filter 0.35s ease;
}


/* BOTTIGLIA MUSICA */

.bottle-img {
    max-width:
        68%;

    max-height:
        48%;
}


/* VASO RITUALI */

.ritual-img {
    max-width:
        72%;

    max-height:
        48%;
}


/* =========================================================
   SCRITTE ARCUATE SOTTO LE BOTTIGLIE
========================================================= */

.object-label-svg {
    position: relative;

    z-index: 12;

    display: block;

    width:
        96%;

    height:
        76px;

    margin-top:
        0;

    overflow:
        visible;

    pointer-events:
        none;

    filter:
        drop-shadow(
            0 2px 3px
            rgba(0, 0, 0, 1)
        )
        drop-shadow(
            0 0 5px
            rgba(0, 0, 0, 0.9)
        )
        drop-shadow(
            0 0 8px
            rgba(255, 228, 147, 0.78)
        );
}


.object-label-text {
    fill:
        #fff0b8;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        0.15px;

    paint-order:
        stroke fill;

    stroke:
        rgba(18, 8, 33, 0.98);

    stroke-width:
        3px;

    stroke-linejoin:
        round;
}


/* =========================================================
   ALONE BOTTIGLIE
========================================================= */

.object-aura {
    position: absolute;

    z-index: 2;

    left: 50%;

    bottom: 12%;

    transform:
        translateX(-50%);

    width:
        68%;

    aspect-ratio:
        1 / 1;

    border-radius:
        50%;

    opacity:
        0.18;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle,
            rgba(255, 244, 179, 0.65) 0%,
            rgba(202, 124, 255, 0.22) 37%,
            rgba(96, 166, 255, 0.12) 55%,
            transparent 72%
        );

    filter:
        blur(5px);

    transition:
        opacity 0.3s ease,
        transform 0.4s ease;
}


/* =========================================================
   HOVER / TOCCO BOTTIGLIE
========================================================= */

.magic-object:hover .object-aura,
.magic-object:focus-visible .object-aura,
.magic-object.magic-active .object-aura {
    opacity:
        0.95;

    transform:
        translateX(-50%)
        scale(1.13);
}


.magic-object:hover .bottle-img,
.magic-object:hover .ritual-img,
.magic-object.magic-active .bottle-img,
.magic-object.magic-active .ritual-img {
    transform:
        translateY(-4px)
        scale(1.035);

    filter:
        drop-shadow(
            0 6px 8px
            rgba(0, 0, 0, 0.9)
        )
        drop-shadow(
            0 0 10px
            rgba(255, 240, 167, 0.85)
        )
        drop-shadow(
            0 0 19px
            rgba(204, 130, 255, 0.62)
        );
}


/* =========================================================
   POLVERE DI STELLE ROTANTE
========================================================= */

.fairy-orbit {
    position: absolute;

    z-index: 8;

    left: 50%;

    bottom: 20%;

    transform:
        translateX(-50%);

    width:
        68%;

    height:
        38%;

    border-radius:
        50%;

    opacity:
        0;

    pointer-events:
        none;

    transition:
        opacity 0.3s ease;
}


.magic-object:hover .fairy-orbit,
.magic-object:focus-visible .fairy-orbit,
.magic-object.magic-active .fairy-orbit {
    opacity:
        0.85;
}


.fairy-orbit::before,
.fairy-orbit::after {
    content: "";

    position:
        absolute;

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        #fff9d7;

    box-shadow:
        0 0 5px white,
        0 0 11px #ffe38d,

        22px 3px 0 -1px #ffffff,
        44px -5px 0 -1px #e5a2ff,
        66px 4px 0 -1px #fff1a0,
        88px -4px 0 -1px #79c5ff,

        -22px 3px 0 -1px #ffffff,
        -44px -5px 0 -1px #e5a2ff,
        -66px 4px 0 -1px #fff1a0,
        -88px -4px 0 -1px #79c5ff;
}


.fairy-orbit::before {
    left:
        50%;

    top:
        0;
}


.fairy-orbit::after {
    left:
        50%;

    bottom:
        0;
}


.orbit-a {
    border-top:
        1px solid
        rgba(255, 234, 151, 0.4);

    border-bottom:
        1px solid
        rgba(213, 139, 255, 0.3);

    animation:
        fairySpin 4s linear infinite;
}


.orbit-b {
    width:
        55%;

    height:
        45%;

    border-left:
        1px solid
        rgba(126, 194, 255, 0.5);

    border-right:
        1px solid
        rgba(255, 184, 237, 0.5);

    animation:
        fairySpinBack 3.2s linear infinite;
}


@keyframes fairySpin {

    from {
        transform:
            translateX(-50%)
            rotate(0deg);
    }

    to {
        transform:
            translateX(-50%)
            rotate(360deg);
    }

}


@keyframes fairySpinBack {

    from {
        transform:
            translateX(-50%)
            rotate(360deg);
    }

    to {
        transform:
            translateX(-50%)
            rotate(0deg);
    }

}


/* =========================================================
   PORTALE CENTRALE
========================================================= */

.book-object {
    position:
        relative;

    width:
        min(94%, 540px);

    height:
        100%;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        flex-end;

    overflow:
        visible;

    cursor:
        pointer;

    pointer-events:
        auto;
}


/* =========================================================
   ALONE DEL PORTALE
========================================================= */

.book-aura {
    position:
        absolute;

    z-index:
        1;

    left:
        50%;

    bottom:
        5%;

    transform:
        translateX(-50%);

    width:
        108%;

    height:
        67%;

    border-radius:
        50%;

    pointer-events:
        none;

    background:
        radial-gradient(
            ellipse,
            rgba(255, 237, 163, 0.40) 0%,
            rgba(194, 110, 255, 0.17) 48%,
            transparent 72%
        );

    filter:
        blur(11px);

    animation:
        bookGlow 3s ease-in-out infinite;
}


@keyframes bookGlow {

    0%,
    100% {

        opacity:
            0.45;

        transform:
            translateX(-50%)
            scale(0.96);

    }

    50% {

        opacity:
            0.9;

        transform:
            translateX(-50%)
            scale(1.035);

    }

}


/* =========================================================
   CORNICE DELLE DUE FATE
========================================================= */

.ornate-frame {
    position:
        relative;

    z-index:
        5;

    display:
        block;

    width:
        100%;

    aspect-ratio:
        1.55 / 1;

    padding:
        7px;

    border:
        3px solid
        #d6ae58;

    border-radius:
        18px;

    background:
        linear-gradient(
            135deg,
            #4b2a65,
            #d1aa55,
            #43235d,
            #edcb78,
            #45265f
        );

    box-shadow:
        0 0 0 3px #2b1539,
        0 0 15px rgba(247, 214, 125, 0.72),
        0 0 32px rgba(197, 117, 255, 0.42);

    perspective:
        1400px;

    overflow:
        visible;
}


/* =========================================================
   CONTENUTO CHE APPARE DIETRO LE FATE
========================================================= */

.book-reveal {
    position:
        absolute;

    z-index:
        1;

    inset:
        7px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    border-radius:
        11px;

    background:
        radial-gradient(
            ellipse at center,
            #765895 0%,
            #38214e 35%,
            #170d2c 67%,
            #090613 100%
        );

    box-shadow:
        inset 0 0 45px
        rgba(255, 222, 140, 0.25);
}


/* luce dietro */

.book-reveal-glow {
    position:
        absolute;

    left:
        50%;

    top:
        50%;

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

    width:
        60%;

    aspect-ratio:
        1 / 1;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 250, 210, 0.85) 0%,
            rgba(255, 215, 116, 0.48) 20%,
            rgba(202, 127, 255, 0.25) 47%,
            transparent 70%
        );

    filter:
        blur(10px);

    animation:
        revealGlow 2.2s ease-in-out infinite;
}


@keyframes revealGlow {

    0%,
    100% {

        opacity:
            0.55;

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

    }

    50% {

        opacity:
            1;

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

    }

}


.book-reveal-symbol {
    position:
        relative;

    z-index:
        2;

    color:
        #fff1a8;

    font-size:
        clamp(2rem, 4vw, 3.5rem);

    text-shadow:
        0 0 8px white,
        0 0 18px #e3bc68,
        0 0 30px #c781ff;
}


.book-reveal-title {
    position:
        relative;

    z-index:
        2;

    margin-top:
        5px;

    color:
        #fff0b7;

    font-size:
        clamp(
            0.9rem,
            1.7vw,
            1.45rem
        );

    font-weight:
        700;

    line-height:
        1.2;

    letter-spacing:
        0.09em;

    text-align:
        center;

    text-shadow:
        0 2px 4px #000,
        0 0 9px #e3bd6b;
}


.book-reveal-subtitle {
    position:
        relative;

    z-index:
        2;

    margin-top:
        12px;

    color:
        #e5d5ee;

    font-size:
        clamp(
            0.55rem,
            0.8vw,
            0.75rem
        );

    letter-spacing:
        0.12em;
}


/* =========================================================
   IMMAGINE DELLE DUE FATE

   anna-antonia.jpg viene tagliata
   esattamente in due metà.
========================================================= */

.book-door {
    position:
        absolute;

    z-index:
        5;

    inset:
        7px;

    overflow:
        visible;

    border-radius:
        11px;

    perspective:
        1400px;
}


.book-half {
    position:
        absolute;

    top:
        0;

    width:
        50%;

    height:
        100%;

    background-image:
        url("images/anna-antonia.jpg");

    background-repeat:
        no-repeat;

    background-size:
        200% 100%;

    backface-visibility:
        hidden;

    will-change:
        transform;

    transition:
        transform
        1.15s
        cubic-bezier(
            0.65,
            0,
            0.20,
            1
        ),
        filter
        0.6s ease;
}


/* metà sinistra */

.book-left {
    left:
        0;

    background-position:
        left center;
}


/* metà destra */

.book-right {
    right:
        0;

    background-position:
        right center;
}


/* =========================================================
   APERTURA DELLE FATE

   NIENTE EFFETTO PORTA.

   SINISTRA:
   scorre semplicemente a sinistra.

   DESTRA:
   scorre semplicemente a destra.
========================================================= */

.book-object.opening
.book-left {

    transform:
        translateX(-104%);

    filter:
        drop-shadow(
            10px 0 10px
            rgba(0, 0, 0, 0.72)
        );
}


.book-object.opening
.book-right {

    transform:
        translateX(104%);

    filter:
        drop-shadow(
            -10px 0 10px
            rgba(0, 0, 0, 0.72)
        );
}


/* =========================================================
   LUCE TRA LE DUE FATE
========================================================= */

.portal-light {
    position:
        absolute;

    z-index:
        4;

    left:
        50%;

    top:
        7px;

    bottom:
        7px;

    width:
        6px;

    transform:
        translateX(-50%)
        scaleX(0.15);

    opacity:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            to right,
            transparent,
            #e4c9ff,
            #fff8c5,
            #ffffff,
            #fff8c5,
            #e4c9ff,
            transparent
        );

    filter:
        blur(4px)
        drop-shadow(
            0 0 16px white
        );

    transition:
        opacity 0.35s ease,
        transform 1.05s ease;
}


.book-object.opening
.portal-light {

    opacity:
        1;

    transform:
        translateX(-50%)
        scaleX(16);
}


/* =========================================================
   DECORI DELLA CORNICE
========================================================= */

.corner {
    position:
        absolute;

    z-index:
        20;

    color:
        #ffe49c;

    font-size:
        24px;

    pointer-events:
        none;

    text-shadow:
        0 0 7px white,
        0 0 13px #d8ae56;
}


.corner-tl {
    left:
        -8px;

    top:
        -10px;
}


.corner-tr {
    right:
        -8px;

    top:
        -10px;
}


.corner-bl {
    left:
        -8px;

    bottom:
        -10px;
}


.corner-br {
    right:
        -8px;

    bottom:
        -10px;
}


/* =========================================================
   VARCA LA SOGLIA DEL LIBRO
========================================================= */

.book-label {
    position:
        relative;

    z-index:
        12;

    margin-top:
        10px;

    padding:
        7px 20px 9px;

    border-radius:
        50%;

    color:
        #fff0ba;

    font-size:
        clamp(
            0.68rem,
            1.05vw,
            0.96rem
        );

    font-weight:
        700;

    letter-spacing:
        0.04em;

    background:
        radial-gradient(
            ellipse,
            rgba(10, 5, 26, 0.92),
            rgba(17, 8, 36, 0.58) 58%,
            transparent 78%
        );

    text-shadow:
        0 2px 3px #000,
        0 0 7px #000,
        0 0 12px #f1d275;
}


/* =========================================================
   CREDITI
========================================================= */

.credits-link {
    position:
        absolute;

    z-index:
        15;

    right:
        14px;

    bottom:
        9px;

    padding:
        7px 13px;

    border:
        1px solid
        rgba(238, 214, 147, 0.4);

    border-radius:
        999px;

    background:
        rgba(10, 6, 25, 0.72);

    color:
        #f4e7bd;

    cursor:
        pointer;
}


/* =========================================================
   PANNELLI
========================================================= */

.panel {
    position:
        fixed;

    z-index:
        30;

    inset:
        0;

    display:
        none;

    overflow:
        auto;

    padding:
        70px
        max(18px, 4vw)
        35px;

    color:
        white;

    background:
        radial-gradient(
            circle at top,
            #302452,
            #15102c 42%,
            #090716
        );
}


.panel.open {
    display:
        block;
}


.panel h2 {
    margin:
        0;

    text-align:
        center;

    color:
        #f6e8b8;

    font-size:
        clamp(
            1.8rem,
            4vw,
            3.2rem
        );

    font-weight:
        500;
}


.intro {
    max-width:
        700px;

    margin:
        0.6rem auto
        1.5rem;

    text-align:
        center;

    color:
        #d8cfea;
}


/* =========================================================
   X CHIUSURA
========================================================= */

.close {
    position:
        fixed;

    z-index:
        40;

    right:
        18px;

    top:
        14px;

    width:
        44px;

    height:
        44px;

    border:
        1px solid
        #d9c68b;

    border-radius:
        50%;

    background:
        #17102e;

    color:
        white;

    font-size:
        1.8rem;

    cursor:
        pointer;
}


/* =========================================================
   LISTA BRANI
========================================================= */

.track-list {
    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(250px, 1fr)
        );

    gap:
        9px;

    max-width:
        1100px;

    margin:
        0 auto
        190px;
}


.track {
    padding:
        10px 12px;

    border:
        1px solid
        rgba(232, 211, 151, 0.28);

    border-radius:
        14px;

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

    color:
        white;

    text-align:
        left;

    cursor:
        pointer;
}


.track.active {
    border-color:
        #f0d77d;

    background:
        rgba(240, 215, 125, 0.12);
}


.track b {
    display:
        block;

    color:
        #f7edcc;
}


.track small {
    display:
        block;

    margin-top:
        3px;

    color:
        #bfb5d4;
}


/* =========================================================
   PLAYER MUSICA
========================================================= */

.player {
    position:
        fixed;

    z-index:
        35;

    left:
        50%;

    bottom:
        10px;

    transform:
        translateX(-50%);

    width:
        min(94%, 850px);

    padding:
        12px 16px;

    border:
        1px solid
        rgba(239, 215, 144, 0.45);

    border-radius:
        20px;

    background:
        rgba(10, 7, 25, 0.94);

    box-shadow:
        0 8px 40px
        rgba(0, 0, 0, 0.9);
}


.now {
    display:
        flex;

    flex-direction:
        column;

    text-align:
        center;
}


.now span {
    color:
        #c9bb8d;

    font-size:
        0.7rem;
}


.now strong {
    color:
        #fff3c9;
}


.now em {
    color:
        #cfc4dc;

    font-size:
        0.78rem;
}


.player input[type="range"] {
    accent-color:
        #e8cf79;
}


.player > #seek {
    width:
        100%;

    margin-top:
        8px;
}


.times {
    display:
        flex;

    justify-content:
        space-between;

    color:
        #aaa;

    font-size:
        0.7rem;
}


.controls,
.secondary {
    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        9px;
}


.controls button {
    width:
        40px;

    height:
        40px;

    border:
        1px solid
        #cdbb82;

    border-radius:
        50%;

    background:
        #241a40;

    color:
        white;

    cursor:
        pointer;
}


.controls
.main-control {
    width:
        48px;

    height:
        48px;

    background:
        #e8d28d;

    color:
        #171020;
}


.secondary {
    margin-top:
        7px;
}


.secondary label {
    display:
        flex;

    align-items:
        center;

    gap:
        5px;
}


.download {
    padding:
        5px 11px;

    border:
        1px solid
        #806f47;

    border-radius:
        999px;

    color:
        #f4e2a5;

    font-size:
        0.78rem;

    text-decoration:
        none;
}


/* =========================================================
   RITUALI
========================================================= */

.ritual-view {
    display:
        grid;

    grid-template-columns:
        auto
        minmax(0, 780px)
        auto;

    align-items:
        center;

    justify-content:
        center;

    gap:
        15px;
}


.ritual-image-button {
    padding:
        0;

    border:
        0;

    background:
        transparent;

    cursor:
        zoom-in;
}


.ritual-image-button img {
    display:
        block;

    width:
        100%;

    max-height:
        74vh;

    object-fit:
        contain;

    border-radius:
        16px;

    box-shadow:
        0 10px 45px
        rgba(0, 0, 0, 0.9);
}


.page-arrow {
    width:
        48px;

    height:
        58px;

    border:
        1px solid
        #d7c17c;

    border-radius:
        18px;

    background:
        #21173a;

    color:
        white;

    font-size:
        1.8rem;

    cursor:
        pointer;
}


.counter {
    margin:
        12px;

    text-align:
        center;

    color:
        #f1dda0;

    font-size:
        1.1rem;
}


.dots {
    text-align:
        center;
}


.dot {
    display:
        inline-block;

    width:
        9px;

    height:
        9px;

    margin:
        4px;

    padding:
        0;

    border:
        0;

    border-radius:
        50%;

    background:
        #5e5570;

    cursor:
        pointer;
}


.dot.on {
    background:
        #efd67e;

    box-shadow:
        0 0 8px
        #efd67e;
}


/* =========================================================
   CREDITI
========================================================= */

.credits {
    text-align:
        center;
}


.credits p {
    max-width:
        650px;

    margin:
        2rem auto;

    line-height:
        1.65;
}


.credits .small {
    color:
        #c8bed6;
}


/* =========================================================
   LIGHTBOX RITUALI
========================================================= */

.lightbox {
    position:
        fixed;

    z-index:
        50;

    inset:
        0;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    background:
        rgba(0, 0, 0, 0.94);
}


.lightbox.open {
    display:
        flex;
}


.lightbox img {
    max-width:
        96vw;

    max-height:
        94vh;

    object-fit:
        contain;
}


/* =========================================================
   SCINTILLE CLICK
========================================================= */

#sparkles {
    position:
        fixed;

    z-index:
        100;

    inset:
        0;

    overflow:
        hidden;

    pointer-events:
        none;
}


.spark {
    position:
        absolute;

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #fff6bd;

    box-shadow:
        0 0 6px white,
        0 0 12px #ffe695,
        0 0 22px #d28aff;

    animation:
        sparkFly
        0.9s ease-out
        forwards;
}


@keyframes sparkFly {

    to {

        transform:
            translate(
                var(--x),
                var(--y)
            )
            scale(0);

        opacity:
            0;

    }

}


/* =========================================================
   SCHERMI PIÙ STRETTI
========================================================= */

@media
(max-width: 900px) {

    .windows-layout {

        width:
            96vw;

        grid-template-columns:
            27% 46% 27%;

    }


    .welcome {

        width:
            min(84vw, 720px);

    }

}


/* =========================================================
   TELEFONO
========================================================= */

@media
(max-width: 650px) {


    /*
       Lo sfondo continua a essere
       GRANDE e a riempire la pagina.
    */

    .shop-bg {

        background-size:
            cover;

        background-position:
            center top;

    }


    /*
       Scritta alta,
       senza sovrapporsi all'insegna.
    */

    .welcome {

        top:
            0.4%;

        width:
            94vw;

        height:
            115px;

    }


    .welcome-main {

        font-size:
            25px;

        letter-spacing:
            1.5px;

    }


    .welcome-sub {

        font-size:
            13px;

        letter-spacing:
            0.6px;

    }


    /*
       Tre elementi
    */

    .windows-layout {

        bottom:
            11%;

        width:
            98vw;

        height:
            60%;

        grid-template-columns:
            26% 48% 26%;

    }


    /*
       Bottiglie
    */

    .bottle-img {

        max-width:
            76%;

        max-height:
            45%;

    }


    .ritual-img {

        max-width:
            80%;

        max-height:
            45%;

    }


    /*
       Scritte arcuate
    */

    .object-label-svg {

        width:
            128%;

        height:
            58px;

    }


    .object-label-text {

        font-size:
            10px;

        stroke-width:
            2.4px;

    }


    /*
       Portale
    */

    .book-object {

        width:
            100%;

    }


    .ornate-frame {

        padding:
            4px;

        border-width:
            2px;

    }


    .book-door,
    .book-reveal {

        inset:
            4px;

    }


    .book-label {

        margin-top:
            7px;

        padding:
            5px 7px;

        font-size:
            0.52rem;

    }


    .book-reveal-title {

        font-size:
            0.68rem;

    }


    .book-reveal-subtitle {

        margin-top:
            6px;

        font-size:
            0.42rem;

    }


    /*
       Crediti
    */

    .credits-link {

        right:
            6px;

        bottom:
            4px;

        padding:
            5px 9px;

        font-size:
            0.6rem;

    }


    /*
       Rituali
    */

    .ritual-view {

        grid-template-columns:
            38px
            minmax(0, 1fr)
            38px;

        gap:
            5px;

    }


    .page-arrow {

        width:
            38px;

        height:
            50px;

    }


    /*
       Lascia spazio al player
       nella lista dei brani.
    */

    .track-list {

        margin-bottom:
            215px;

    }

}


/* =========================================================
   SCHERMI MOLTO BASSI
========================================================= */

@media
(max-height: 700px)
and
(min-width: 651px) {

    .welcome {

        height:
            120px;

    }


    .windows-layout {

        bottom:
            5%;

        height:
            65%;

    }


    .bottle-img,
    .ritual-img {

        max-height:
            43%;

    }

}