/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* SELEZIONE TESTI */
::selection {
  color: #000;
  background: #00FD23;
}


/* EFFETTO MARQUEE */

.marquee {
  position: relative;
  width: 100vw;
  max-width: 100%;
  height: 15px;
  overflow: hidden;
  color:black;
  font-family: var(--e-global-typography-accent-font-family), Sans-serif;
  font-size:13px;
 text-transform: uppercase;
}

.track {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 52s linear infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* EFFETTO BIGTEXT  */
.bigtext {
  position: relative;
  display: flex;
  width: 300vw;
  max-width: 300%;
margin:0;
padding:0;
  height: 140px;
	line-height:1;
  margin: 0px;
/*   margin-top: -20px; */
  padding: 0px;
  overflow: hidden;
  color: var( --e-global-color-803f24f );
  font-family: var(--e-global-typography-accent-font-family), Sans-serif;
  font-size:210px;
  text-transform: uppercase;
}
@media(max-width:767px) {
	.bigtext {	
		height: 80px!important;
		font-size:140px!important;	
	}
}

.trackbigtext {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
}
.trackbigtext p {
margin:0px;
padding;0px;
margin-top: -40px;}

/* COLORE D'ACCENTO GENERALE */
.accentcolor {
color: var(--e-global-color-primary);
}


/* TESTO IN VERTICALE */
@media(min-width:1025px) {
	.testoverticale {
		writing-mode: vertical-rl; 
		white-space: nowrap;
		transform: rotate(180deg);
		transform-origin: center center;
		margin: 0;
		padding: 0;
	}
}
/* Assicurati di rimuovere eventuali altre rotazioni (es. 90 o 270 gradi) */
/* Potrebbe essere necessario aggiustare margini/padding/allineamento per la nuova posizione */}


/* EFFETTO SCRAMBLING SUI TITOLI */
/* Stili per l'H1 (o l'elemento testo) DENTRO il wrapper .scramble-title */
.scramble-title h1 { /* Selettore aggiornato per la nuova classe e H1 */
    display: inline-block; /* Cruciale per ::before/::after sulla stessa linea */
    position: relative;
    margin: 0; /* Resetta margini default H1 */
    vertical-align: baseline; /* Allineamento verticale */
    /* Il font, colore, etc., vengono ereditati dall'H1 stesso o da stili Elementor */
}

.scramble-title h1::before {
    content: '{';
    display: inline-block;
    margin-right: 0.2em;
    color: var(--e-global-color-primary); /* Mantiene il colore primario di Elementor */
    /* Eredita gli stili di font dall'H1 per coerenza */
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    vertical-align: inherit;
}

.scramble-title h1::after {
    content: '}';
    display: inline-block;
    margin-left: 0.2em;
    color: var(--e-global-color-primary); /* Mantiene il colore primario di Elementor */
    /* Eredita gli stili di font dall'H1 per coerenza */
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    vertical-align: inherit;
}

/* Stili per gli elementi DENTRO il wrapper .scramble-text */
/* Non sono necessari stili specifici per font, colore o ::before/::after */
/* L'effetto si applica solo via JS, e l'aspetto resta quello definito da Elementor/tema */
/* Potrebbe essere utile assicurare che l'elemento sia almeno inline-block o block
   per evitare problemi di layout durante lo scrambling, ma dipende dal contesto.
   Aggiungere se necessario: */
/*
.scramble-text > p,
.scramble-text > h2,
.scramble-text > h3,
.scramble-text > h4,
.scramble-text > h5,
.scramble-text > h6,
.scramble-text > span,
.scramble-text > div {
    display: inline-block; /* O block, a seconda dell'elemento e del layout desiderato */
/* vertical-align: baseline; /* Potrebbe servire per allineamento */
/* } */

/* PIXEL EFFECT  */
/* CSS ESSENZIALE per Effetto Pixelate (v2.5) */

/* Il wrapper creato dinamicamente attorno all'immagine */
.pixelate-wrapper {
  position: relative; /* Necessario per alcuni layout */
  display: inline-block; /* Mantiene flusso simile a img */
  /* vertical-align: bottom; */ /* Potrebbe non essere necessario, prova a toglierlo/metterlo se ci sono problemi di allineamento verticale */
  width: 100%; /* Occupa larghezza contenitore */
  line-height: 0; /* Aiuta a prevenire spazi extra sotto la canvas */
  /* Aggiungi 'overflow: hidden;' se la canvas dovesse sbordare leggermente */
  /* overflow: hidden; */
}

/* Nascondi l'immagine originale DENTRO il wrapper */
/* Usa la regola più specifica per Elementor */
.elementor-widget-image.pixelate .pixelate-wrapper img {
  display: none !important; /* Nasconde l'originale, !important per priorità */
  visibility: hidden !important; /* Aggiunta per maggiore sicurezza */
}
/* Fallback meno specifico (mantienilo commentato se la regola sopra funziona) */
/* .pixelate-wrapper img { display: none !important; visibility: hidden !important; } */


/* La canvas che viene visualizzata al posto dell'immagine */
.pixelate-wrapper canvas {
  display: block;  /* Evita spazi extra sotto */
  width: 100%;     /* Prende larghezza wrapper */
  height: auto;    /* Altezza automatica per mantenere proporzioni (JS gestisce ratio) */
  margin-bottom: -7px;
  /* Opzionale: Aggiungi un colore di sfondo temporaneo per debug se la canvas non si vede */
  /* background-color: rgba(0, 255, 0, 0.1); */
}

/* Assicurati che il contenitore del widget abbia layout corretto */
/* Potrebbe non essere necessario, ma aiuta in alcuni temi */
.elementor-widget-image.pixelate .elementor-widget-container {
    line-height: 0;
}

.linea-vertical {
    position: relative;
}

/* LINEA VERTICAL */

.linea-vertical::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background-color: var(--e-global-color-accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.4s ease-in-out;
}
.linea-vertical:hover::before {
    transform: scaleY(1);
}