/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css

 */



/* questo modifica la posizione del bottone banner in basso alla foto nelle 2 affiancate che rimandano al sito fcf.it vendita */

.banner.banner-clgt-five.banner-foto-link .image_description {
    top: 90% !important;
}


/* questo modifica la posizione dei bottoni banner sull'immagine grande nella home page */

.banner.banner-clgt-five.banner-foto-home .image_description {
    top: 40% !important;
}


/* Contenitore video + testo */
.block_content {
    position: relative;     /* attiva l'overlay */
    display: inline-block;
    width: 100%;
}

/* Testo/bottone sopra il video ruotato di -30 gradi  */
.block_content .description {
    position: absolute;
    bottom: 40%;            /* distanza dal fondo video - REGOLABILE */
    left: 20%;
    transform: translateX(-50%);
    transform: rotate(-30deg);
    text-align: center;
    z-index: 5;
}

/*Il  Testo/bottone sopra il video così ruota di +35 gradi */
.block_content.block_130_gradi .description {
   
    bottom: 35%;           
    transform: rotate(35deg);
}


/* Stile del bottone (opzionale ma consigliato per visibilità) */
.block_content .description .btn {
    padding: 12px 28px;
    font-size: 45px;
    text-transform: none;
    font-family: "Lucida Handwriting";
    color: #fff;
    background: none;
    border: none;
}

/* Creo effetto glitch  */


.glitch {
    position: relative;
    display: inline-block;
    font-weight: bold;
    color: #fff;
    z-index: 10;
    text-shadow: 0 0 2px rgba(255,255,255,0.8);
}

/* copie del testo */
.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 12px;
    left: 28px;
    opacity: 0.9;
    mix-blend-mode: screen;
    z-index: -1;
}

/* copia magenta */
.glitch::before {
    color: magenta;
    transform: translate(-3px, -2px);  /* posizione iniziale evidente */
    animation: glitch-strong-1 0.6s infinite linear alternate-reverse;
}

/* copia cyan */
.glitch::after {
    color: cyan;
    transform: translate(3px, 2px);   /* posizione iniziale evidente */
    animation: glitch-strong-2 0.75s infinite linear alternate-reverse;
}

/* Animazioni forti a scatti */
@keyframes glitch-strong-1 {
    0%   { transform: translate(-4px, -3px); }
    20%  { transform: translate(-1px, 1px); }
    40%  { transform: translate(-5px, 2px); }
    60%  { transform: translate(2px, -4px); }
    80%  { transform: translate(-3px, 4px); }
    100% { transform: translate(-4px, -3px); }
}

@keyframes glitch-strong-2 {
    0%   { transform: translate(4px, 3px); }
    20%  { transform: translate(1px, -1px); }
    40%  { transform: translate(5px, -2px); }
    60%  { transform: translate(-3px, 4px); }
    80%  { transform: translate(3px, -4px); }
    100% { transform: translate(4px, 3px); }
}