/* ==========================================================================
   G&G Jewels — gg-anim.css  (v4.2)
   Percorso: wp-content/mu-plugins/gg-jewels/assets/gg-anim.css

   v4.2: marcatore --gg-css. Il motore lo legge e scrive nel pannello se
         questo foglio di stile è davvero in pagina. Serve a distinguere
         un guasto del JavaScript da un CSS rimosso dalle ottimizzazioni.

   v4:   gli effetti "linea" (draw) usano il ritaglio e non il ridimensionamento.
         Prima partivano schiacciati a zero e restavano invisibili al motore.
         Ora l'elemento mantiene la sua misura e si scopre progressivamente,
         quindi funziona anche sugli elementi ruotati dalla scheda Trasformazione.
   ========================================================================== */

html.gg-anim-on {
	--gg-css: 42;
}

.gg-anim {
	--gg-dur: 1000ms;
	--gg-delay: 0ms;
	--gg-dist: 40px;
	--gg-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--gg-min: 0;
}

/* ---------- Stato finale (default): tutto visibile ---------- */

html.gg-anim-on .gg-anim {
	transition-property: opacity, transform, clip-path;
	transition-duration: var(--gg-dur);
	transition-timing-function: var(--gg-ease);
	transition-delay: var(--gg-delay);
	will-change: opacity, transform;
}

/* ==========================================================================
   Modalità comparsa: stato iniziale finché manca la classe gg-in
   ========================================================================== */

/* ---------- Dissolvenze e ingrandimento (usano transform) ---------- */

html.gg-anim-on .gg-anim[data-gg-anim^="fade"]:not(.gg-in),
html.gg-anim-on .gg-anim[data-gg-anim^="zoom"]:not(.gg-in) {
	opacity: 0;
}

html.gg-anim-on .gg-anim[data-gg-anim="fade-up"]:not(.gg-in) {
	transform: translate3d(0, var(--gg-dist), 0);
}

html.gg-anim-on .gg-anim[data-gg-anim="fade-down"]:not(.gg-in) {
	transform: translate3d(0, calc(var(--gg-dist) * -1), 0);
}

html.gg-anim-on .gg-anim[data-gg-anim="fade-left"]:not(.gg-in) {
	transform: translate3d(var(--gg-dist), 0, 0);
}

html.gg-anim-on .gg-anim[data-gg-anim="fade-right"]:not(.gg-in) {
	transform: translate3d(calc(var(--gg-dist) * -1), 0, 0);
}

html.gg-anim-on .gg-anim[data-gg-anim="zoom"]:not(.gg-in) {
	transform: scale(0.94);
}

/* ---------- Tendine e linee (usano il ritaglio, mai transform) ----------
   --gg-min lascia un segmento già visibile alla partenza: vale 0 di default,
   quindi la stessa formula serve sia le tendine sia le linee.             */

html.gg-anim-on .gg-anim[data-gg-anim^="wipe"],
html.gg-anim-on .gg-anim[data-gg-anim^="draw"] {
	clip-path: inset(0 0 0 0);
}

html.gg-anim-on .gg-anim[data-gg-anim="wipe"]:not(.gg-in),
html.gg-anim-on .gg-anim[data-gg-anim="wipe-up"]:not(.gg-in),
html.gg-anim-on .gg-anim[data-gg-anim="draw-up"]:not(.gg-in) {
	clip-path: inset(calc((1 - var(--gg-min)) * 100%) 0 0 0);
}

html.gg-anim-on .gg-anim[data-gg-anim="wipe-down"]:not(.gg-in),
html.gg-anim-on .gg-anim[data-gg-anim="draw-down"]:not(.gg-in) {
	clip-path: inset(0 0 calc((1 - var(--gg-min)) * 100%) 0);
}

html.gg-anim-on .gg-anim[data-gg-anim="wipe-left"]:not(.gg-in),
html.gg-anim-on .gg-anim[data-gg-anim="draw-left"]:not(.gg-in) {
	clip-path: inset(0 0 0 calc((1 - var(--gg-min)) * 100%));
}

html.gg-anim-on .gg-anim[data-gg-anim="wipe-right"]:not(.gg-in),
html.gg-anim-on .gg-anim[data-gg-anim="draw-right"]:not(.gg-in) {
	clip-path: inset(0 calc((1 - var(--gg-min)) * 100%) 0 0);
}

/* ==========================================================================
   Modalità legata allo scroll: il JS scrive --gg-p da 0 a 1, niente transizione
   ========================================================================== */

html.gg-anim-on .gg-anim[data-gg-scroll] {
	transition: none;
	opacity: var(--gg-p, 0);
}

html.gg-anim-on .gg-anim[data-gg-scroll][data-gg-anim="fade-up"] {
	transform: translate3d(0, calc(var(--gg-dist) * (1 - var(--gg-p, 0))), 0);
}

html.gg-anim-on .gg-anim[data-gg-scroll][data-gg-anim="fade-down"] {
	transform: translate3d(0, calc(var(--gg-dist) * (var(--gg-p, 0) - 1)), 0);
}

html.gg-anim-on .gg-anim[data-gg-scroll][data-gg-anim="fade-left"] {
	transform: translate3d(calc(var(--gg-dist) * (1 - var(--gg-p, 0))), 0, 0);
}

html.gg-anim-on .gg-anim[data-gg-scroll][data-gg-anim="fade-right"] {
	transform: translate3d(calc(var(--gg-dist) * (var(--gg-p, 0) - 1)), 0, 0);
}

html.gg-anim-on .gg-anim[data-gg-scroll][data-gg-anim="zoom"] {
	transform: scale(calc(0.94 + 0.06 * var(--gg-p, 0)));
}

html.gg-anim-on .gg-anim[data-gg-scroll][data-gg-anim^="wipe"],
html.gg-anim-on .gg-anim[data-gg-scroll][data-gg-anim^="draw"] {
	opacity: 1;
}

html.gg-anim-on .gg-anim[data-gg-scroll][data-gg-anim="wipe"],
html.gg-anim-on .gg-anim[data-gg-scroll][data-gg-anim="wipe-up"],
html.gg-anim-on .gg-anim[data-gg-scroll][data-gg-anim="draw-up"] {
	clip-path: inset(calc((1 - var(--gg-min)) * (1 - var(--gg-p, 0)) * 100%) 0 0 0);
}

html.gg-anim-on .gg-anim[data-gg-scroll][data-gg-anim="wipe-down"],
html.gg-anim-on .gg-anim[data-gg-scroll][data-gg-anim="draw-down"] {
	clip-path: inset(0 0 calc((1 - var(--gg-min)) * (1 - var(--gg-p, 0)) * 100%) 0);
}

html.gg-anim-on .gg-anim[data-gg-scroll][data-gg-anim="wipe-left"],
html.gg-anim-on .gg-anim[data-gg-scroll][data-gg-anim="draw-left"] {
	clip-path: inset(0 0 0 calc((1 - var(--gg-min)) * (1 - var(--gg-p, 0)) * 100%));
}

html.gg-anim-on .gg-anim[data-gg-scroll][data-gg-anim="wipe-right"],
html.gg-anim-on .gg-anim[data-gg-scroll][data-gg-anim="draw-right"] {
	clip-path: inset(0 calc((1 - var(--gg-min)) * (1 - var(--gg-p, 0)) * 100%) 0 0);
}

/* ---------- Sicurezza ---------- */

@media (prefers-reduced-motion: reduce) {
	html.gg-anim-on .gg-anim {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   Pannello diagnostico: compare solo con ?gg-anim-debug nell'indirizzo
   ========================================================================== */

#gg-anim-debug {
	position: fixed;
	right: 8px;
	bottom: 8px;
	z-index: 999999;
	max-width: 92vw;
	max-height: 60vh;
	overflow: auto;
	padding: 10px 12px;
	background: rgba(30, 21, 16, 0.94);
	color: #FAF6EF;
	font: 300 11px/1.5 ui-monospace, monospace;
	border-radius: 4px;
}

#gg-anim-debug.gg-anim-dead {
	background: #C4724A;
	color: #FFF;
	font-size: 13px;
}

#gg-anim-debug u {
	color: #C4724A;
	text-decoration: none;
	font-weight: 700;
}

#gg-anim-debug table {
	margin-top: 6px;
	border-collapse: collapse;
}

#gg-anim-debug th,
#gg-anim-debug td {
	padding: 1px 8px 1px 0;
	text-align: left;
	white-space: nowrap;
}

#gg-anim-debug th {
	color: #B8935A;
	font-weight: 400;
}