:root {
    --nero       : #151111;
    --nero2      : #1D1616;
    --rosso      : #E01010;
    --rosso-cupo : #7A0A0A;
    --rosso-dark : #370101;
    --brace      : #F55;
    --cenere     : #B9A9A9;
    --fumo       : #7D6F6F;

    --headColor  : #FFF9;
    --headBlur   : 3px;
    --headX      : 2px;
    --headY      : 2px;
}

html {
    margin          : 0;
    padding         : 0;
    scroll-behavior : smooth;
}

body {
    background : #000;
    color      : #FFF;
    text-align : center;
    margin     : 2rem;
}


a {
    color : var(--rosso);
}

.hero {
    position        : relative;
    min-height      : 100vh;
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    overflow        : hidden;
    margin          : -2rem -2rem 1rem;

    h1 {
        font-family : "Metal Mania", sans-serif;
        color       : var(--rosso-dark);
        font-size   : 4rem;
        animation   : 15s head infinite alternate linear;
        margin      : 0 0 3rem;
    }

    svg.logo {
        width           : 150px;
        height          : 150px;
        animation       : 15s head infinite alternate linear;
        transform-style : preserve-3d;
        .krampus {
            fill             : var(--rosso-dark);
            transform-origin : center center;
        }
    }


    .hero-video {
        position   : absolute;
        inset      : 0;
        width      : 100%;
        height     : 100%;
        object-fit : cover;
        z-index    : 0;
        filter     : brightness(.5) saturate(1.1);
    }

    .hero-contenuto {
        position : relative;
        z-index  : 2;
        padding  : 1rem;
    }


    &::after {
        content    : "";
        position   : absolute;
        inset      : 0;
        z-index    : 1;
        background : radial-gradient(ellipse 70% 60% at 50% 45%, transparent, rgba(0, 0, 0, .55)),
        linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .15) 70%, #000 98%);
    }

}


@media (min-width : 1000px) {
    .hero-video {
        object-fit    : cover;
        max-width     : 1500px;
        left          : 0;
        right         : 0;
        margin-inline : auto;
    }
    .hero::after {
        background : radial-gradient(ellipse min(48vw, 730px) 64vh at 50% 50%, transparent 45%, rgba(0, 0, 0, .8) 85%, #000 100%);
    }
}

@media (prefers-reduced-motion : reduce) {
    .hero-video {
        display : none
    }
}

.pagina {
    padding    : 0 .2rem;
    margin-top : 1rem;
}

.contatti {
    display         : flex;
    justify-content : center;
    align-items     : center;
    flex-wrap       : wrap;
    gap             : .8rem 2.2rem;
    margin-top      : 1.5rem;
    font-family     : "IM Fell English", Georgia, serif;
    font-style      : italic;
    font-size       : 1.05rem;
    a {
        display         : inline-flex;
        align-items     : center;
        gap             : .45em;
        color           : #B9A9A9;
        text-decoration : none;
        border-bottom   : 1px dotted var(--rosso-cupo);
        padding-bottom  : .15em;
        transition      : color .25s ease, border-color .25s ease, text-shadow .25s ease;
        &:hover {
            color        : var(--brace);
            border-color : var(--rosso);
            text-shadow  : 0 0 12px rgba(224, 16, 16, .6);
        }
    }
    svg {
        width  : 1.1em;
        height : 1.1em;
        fill   : currentColor;
    }
}


.descr i {
    color     : var(--brace);
    animation : blink .5s infinite alternate;

}

#chisiamo {
    padding    : 70px 0;
    text-align : justify;
    h3 {
        mark {
            font-size : 30px;
        }
        text-align : center;
    }
    b {
        color : #CF4501;
    }
    mark {
        background  : none;
        font-family : "Metal Mania", sans-serif;
        font-size   : 20px;
        --d         : 0;
        --bx        : 0;
        --by        : 3px;
        --bb        : 1px;
        span {
            transition      : .2s all;
            animation       : fire 3s infinite ease-in alternate;
            animation-delay : calc((1s * var(--d)) * -.05);
            text-shadow     : 0px -8px 5px #000;
        }
    }
    hr {
        margin     : 60px 20px;
        border     : none;
        border-top : 1px dashed #500;
    }
}

#gallery {
    display         : flex;
    flex-wrap       : wrap;
    justify-content : center;
    gap             : 15px;
    max-width       : 800px;
    margin          : auto;
    div {
        max-width : 140px;
        a {
            img {
                width        : 100%;
                aspect-ratio : 1;
                object-fit   : cover;
                transition   : .5s all;
                &:hover {
                    transform : translateY(-3px) scale(1.1);
                }
            }
            &.clone {
                position        : fixed;
                display         : flex;
                align-content   : center;
                justify-content : center;
                top             : 20px !important;
                left            : 20px !important;
                right           : 20px !important;
                bottom          : 20px !important;
                background      : #0000;
                backdrop-filter : blur(0);
                transition      : .5s all;
                img {
                    display   : block;
                    transform : scale(0);
                }
            }
            &.active {
                background      : #0005;
                backdrop-filter : blur(3px);
                img {
                    object-fit : contain;
                    width      : 100%;
                    transform  : scale(1);
                }
            }
        }
    }
}

/* footer */
footer {
    margin-top  : 3rem;
    font-family : "IM Fell English", Georgia, serif;
    font-style  : italic;
    font-size   : .9rem;
    color       : #7D6F6F;
    &::before {
        content    : "";
        display    : block;
        width      : 9rem;
        height     : 1px;
        margin     : 0 auto 1rem;
        background : linear-gradient(90deg, transparent, var(--rosso-cupo), transparent);
    }
}

@keyframes fire {
    0% {
        color  : red;
        filter : drop-shadow(var(--bx) var(--by) var(--bb) darkred);
    }
    50% {
        color  : orange;
        filter : drop-shadow(var(--bx) var(--by) var(--bb) #000);
    }
    100% {
        color  : darkred;
        filter : drop-shadow(var(--bx) var(--by) var(--bb) orange);

    }

}

@keyframes kr {
    0% {
        transform : rotateX(0deg) rotateY(0) rotateZ(0) scale(1.1);
        filter    : drop-shadow(0 0 40px #F009)
    }
    50% {
        transform : rotateX(180deg) rotateY(180deg) rotateZ(180deg);
        filter    : drop-shadow(0 0 0px #F009)
    }
    100% {
        transform : rotateX(360deg) rotateY(360deg) rotateZ(360deg) scale(1.1);
        filter    : drop-shadow(0 0 40px #F009)
    }
}

@keyframes kr2 {
    0% {
        fill       : red;
        box-shadow : 0 0 3px inset #000;
        stroke     : #000
    }
    100% {
        fill         : #900;
        stroke       : #000;
        stroke-width : 0.2px;
    }
}


@keyframes head {
    0% {
        filter : brightness(0) drop-shadow(calc(var(--headX) * -1) calc(var(--headY) * 1) var(--headBlur) var(--headColor))
    }
    25% {
        filter : brightness(.5) drop-shadow(calc(var(--headX) * 1) calc(var(--headY) * 1) var(--headBlur) var(--headColor));
    }
    50% {
        filter : brightness(1) drop-shadow(calc(var(--headX) * 1) calc(var(--headY) * -1) var(--headBlur) var(--headColor));
    }
    75% {
        filter : brightness(.5) drop-shadow(calc(var(--headX) * -1) calc(var(--headY) * -1) var(--headBlur) var(--headColor));
    }
    100% {
        filter : brightness(0) drop-shadow(calc(var(--headX) * -1) calc(var(--headY) * 1) var(--headBlur) var(--headColor))
    }
}

@keyframes blink {
    0% {
        opacity : .5
    }
    100% {
        opacity : 1;
    }
}

@keyframes corna {
    0% {
        transform : rotateX(70deg)
    }
    100% {
        transform : rotateX(60deg)
    }
}

.pagina {
    max-width  : 30rem;
    margin     : 0 auto;
    text-align : left;
}

/* separatore a corna */
.corna {
    display         : flex;
    align-items     : center;
    gap             : .8rem;
    margin          : 3rem 0 1.1rem;
    justify-content : center;

    &::before, &::after {
        content          : "";
        flex             : 1;
        max-width        : 100px;
        border-radius    : 20px 20px 20px 280px;
        transform-origin : bottom left;
        height           : 80px;
        border-bottom    : 22px solid var(--rosso-cupo);
        margin-top       : -90px;
        transform        : rotateX(60deg);
        animation        : corna 5s infinite alternate;
    }

    &::after {
        border-radius    : 20px 20px 280px 20px;
        transform-origin : bottom left;
    }

    h2 {
        font-family    : "Metal Mania", sans-serif;
        font-weight    : 400;
        font-size      : 1.7rem;
        color          : var(--rosso);
        margin         : 0;
        letter-spacing : .05em;
        text-shadow    : 0 0 18px rgba(224, 16, 16, .55);
        white-space    : nowrap;
    }
}

ol.eventi {
    list-style : none;
    margin     : 0;
    padding    : 0;
    display    : grid;
    gap        : 1rem;

    .evento {
        display               : grid;
        grid-template-columns : 5.2rem 1fr;
        position              : relative;
        overflow              : hidden;
        background            : linear-gradient(160deg, var(--nero2), #171010 70%);
        border                : 1px solid #2A1C1C;
        @supports (corner-shape: bevel) {
            border-radius : 10px;
            corner-shape  : scoop;
        }
        box-shadow            : 0 4px 18px rgba(0, 0, 0, .5);
        transition            : transform .25s ease, box-shadow .25s ease, border-color .25s ease;


        &:hover {
            transform  : translateY(-2px);
            box-shadow : 0 8px 26px rgba(0, 0, 0, .6), 0 0 22px rgba(224, 16, 16, .22);
            .data {
                background : rgba(122, 10, 10, .52);
            }
        }
        .data {
            display         : flex;
            flex-direction  : column;
            align-items     : center;
            justify-content : center;
            text-align      : center;
            padding         : .9rem .4rem;
            background      : rgba(122, 10, 10, .12);
            border-right    : 1px solid #2A1C1C;
            font-family     : "Metal Mania", sans-serif;
            line-height     : 1;

            .giorno {
                font-size   : 2.3rem;
                color       : var(--brace);
                text-shadow : 0 0 14px rgba(224, 16, 16, .7);
            }
            .mese {
                font-size      : 1rem;
                color          : var(--cenere);
                letter-spacing : .15em;
                text-indent    : .15em; /* compensa lo spazio del letter-spacing dopo l'ultimo carattere */
                text-transform : uppercase;
                margin-top     : .35rem;
            }
        }

        .corpo {
            padding     : .85rem 1.1rem 1rem;
            font-family : "IM Fell English", Georgia, serif;


            .titolo {
                font-family    : "Metal Mania", sans-serif;
                font-weight    : 400;
                font-size      : 1.45rem;
                color          : #FFF;
                margin         : 0 0 .15rem;
                letter-spacing : .03em;
            }

            .quando {
                color      : var(--brace);
                font-style : italic;
                margin     : 0 0 .3rem;
            }

            .dove {
                color  : var(--cenere);
                margin : 0;
                a {
                    color           : var(--cenere);
                    text-decoration : underline dotted;
                    &:hover {
                        color : var(--brace);
                    }
                }

            }
        }

        .ribbon {
            position       : absolute;
            top            : 18px;
            left           : -52px;
            width          : 160px;
            transform      : rotate(-45deg);
            text-align     : center;
            font-family    : "IM Fell English", Georgia, serif;
            font-size      : .72rem;
            line-height    : 1;
            padding        : .35em 0;
            box-shadow     : 0 2px 8px rgba(0, 0, 0, .6);
            pointer-events : none;
            z-index        : 2;

            &.confermare {
                background : linear-gradient(#E8B23A, #B5851F);
                color      : #241A05;
            }
            &.annullato {
                background : linear-gradient(#B00D0D, var(--rosso-cupo));
                color      : #FFD9D9;
            }

            ~ .corpo .titolo {
                padding-right : 3.2rem;
            }
        }

        &.confermare {
            border-color : #5C4614;

            &:hover {
                box-shadow : 0 8px 26px rgba(0, 0, 0, .6), 0 0 22px rgba(232, 178, 58, .22);
                .data {
                    background : rgba(232, 178, 58, .20);
                }
            }
            .data {
                background         : rgba(232, 178, 58, .10);
                border-right-color : #5C4614;

                .giorno {
                    color       : #E8B23A;
                    text-shadow : 0 0 14px rgba(232, 178, 58, .7);
                }
            }
        }
        &.annullato {
            opacity : .6;
            .titolo {
                text-decoration           : line-through;
                text-decoration-color     : var(--rosso);
                color                     : var(--cenere);
                text-decoration-thickness : 5px;
            }
            .data {
                position   : relative;
                background : #000;

                .giorno {
                    color       : var(--cenere);
                    text-shadow : none;
                    opacity     : .55;
                }
                .mese {
                    opacity : .55;
                }
                .quando {
                    text-decoration       : line-through;
                    text-decoration-color : var(--rosso);
                    color                 : var(--fumo);
                }
            }
        }
    }
}


@media (max-width : 480px) {
    .evento.annullato .data::after {
        font-size : 3rem
    }
}

a.data {
    text-decoration : none;
    transition      : background .25s ease;

    &:hover {
        background : rgba(224, 16, 16, .25);

        .giorno {
            text-shadow : 0 0 20px rgba(224, 16, 16, 1);
        }
    }
}


.evento.confermare a.data:hover {
    background : rgba(232, 178, 58, .22);
}

.evento.confermare a.data:hover .giorno {
    text-shadow : 0 0 20px rgba(232, 178, 58, 1);
}

.descr {
    color       : var(--fumo);
    margin      : .45rem 0 0;
    white-space : pre-line;
    a {
        color : var(--brace);
        &:hover {
            color       : #FFF;
            text-shadow : 0 0 10px var(--rosso);
        }
    }
}

details.passati {
    margin-top : 3rem;
    summary {
        cursor      : pointer;
        color       : var(--fumo);
        font-style  : italic;
        font-family : "IM Fell English", Georgia, serif;
        text-align  : center;
        list-style  : none;
        &::-webkit-details-marker {
            display : none
        }
        &:hover {
            color : var(--brace);
        }
        ol.eventi {
            margin-top : 1.2rem;
            .evento {
                opacity : .55;
                filter  : grayscale(.4);
            }
        }
    }
}


details.anno {
    margin-top : 1.6rem;

    summary {
        cursor         : pointer;
        font-family    : "Metal Mania", sans-serif;
        font-size      : 1.25rem;
        letter-spacing : .1em;
        color          : var(--fumo);
        text-align     : center;
        list-style     : none;
        &::-webkit-details-marker {
            display : none
        }
        &::before {
            content : "† ";
            color   : var(--rosso-cupo);
        }
        &:hover {
            color : var(--brace);
        }
    }
    &[open] summary {
        color : var(--cenere);
    }
    ol.eventi {
        margin-top : 1rem;
    }
}


.vuoto, .errore {
    text-align  : center;
    color       : var(--cenere);
    font-style  : italic;
    font-family : "IM Fell English", Georgia, serif;
    padding     : 3rem 1rem;
    border      : 1px dashed #2A1C1C;
}

.errore {
    color : var(--brace);
}

#map {height : 300px; width : 100%; margin-top : 60px}

.leaflet-tile-container img {filter : invert(1) sepia(1) brightness(.6) hue-rotate(-20deg);}

.leaflet-popup-content {margin : 12px 14px;font : 14px/1.45 system-ui, sans-serif}

.leaflet-popup-content h3 {margin : 0 0 6px;font-size : 15px}

.leaflet-popup-content .meta {color : #5C6B79;font-size : 13px}

.leaflet-popup-content a {color : #0F8A5F}

.pin {
    &:after {
        content   : '👹';
        font-size : 20px;
    }
    width : 26px;height : 26px;
}

@media (max-width : 480px) {
    .evento {
        grid-template-columns :4.2rem 1fr
    }
    .data .giorno {
        font-size : 1.9rem
    }
}