/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/

/* --- INIZIO STILI COMPLETI PER TUTTI I GRAFICI (Versione Definitiva con Frecce Curvate) --- */

/* --- GRAFICO 1: SPICCHI PERSONALIZZATI --- */
.chart1-container-scroll { position: relative; width: 100%; max-width: 400px; height: auto; aspect-ratio: 1 / 1; margin: 2em auto; font-family: sans-serif; opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.chart1-container-scroll.is-visible { opacity: 1; transform: translateY(0); }
.chart1-pie-chart-scroll { width: 100%; height: 100%; border-radius: 50%; background-color: #a9a9a9; border: 2px solid #a9a9a9; box-sizing: border-box; background-image: conic-gradient(from 0deg, white 0deg 45deg, #cccccc 45deg 105deg, #cccccc 105deg 195deg, #cccccc 195deg 285deg, #cccccc 285deg 330deg, white 330deg 360deg); position: relative; mask: conic-gradient(black var(--reveal-angle1), transparent var(--reveal-angle1)); animation: none; }
.chart1-container-scroll.is-visible .chart1-pie-chart-scroll { animation: unfurl-animation1 2s linear forwards; }
.chart1-pie-chart-scroll::before { content: ''; position: absolute; width: 2px; height: 100%; background-color: #a9a9a9; left: 50%; transform: translateX(-50%); z-index: 1; }
.chart1-pie-chart-scroll::after { content: ''; position: absolute; width: 100%; height: 2px; background-color: #a9a9a9; top: 50%; transform: translateY(-50%); z-index: 1; }
.chart1-labels-scroll { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #002366; font-weight: bold; font-size: 1.2em; opacity: 0; }
.chart1-container-scroll.is-visible .chart1-labels-scroll { animation: fade-in-labels1 0.5s linear 2s forwards; }
.chart1-label-scroll { position: absolute; transform: translate(-50%, -50%); }
.chart1-label-scroll.slump { top: 25%; left: 60%; }
.chart1-label-scroll.entry { top: 10%; left: 96%; font-size: 1.1em; }
.chart1-label-scroll.recovery { top: 70%; left: 70%; }
.chart1-label-scroll.growth { top: 70%; left: 30%; }
.chart1-label-scroll.oversupply { top: 25%; left: 30%; }
.chart1-label-scroll.exit { top: 2%; left: 18%; }
@property --reveal-angle1 { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes unfurl-animation1 { to { --reveal-angle1: 360deg; } }
@keyframes fade-in-labels1 { to { opacity: 1; } }

/* --- GRAFICO 2: LINEA DIAGONALE --- */
.chart2-container-scroll { position: relative; width: 100%; max-width: 400px; height: auto; aspect-ratio: 1 / 1; margin: 2em auto; font-family: sans-serif; opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.chart2-container-scroll.is-visible { opacity: 1; transform: translateY(0); }
.chart2-pie-chart-scroll { width: 100%; height: 100%; border-radius: 50%; background-color: #a9a9a9; border: 2px solid #a9a9a9; box-sizing: border-box; background-image: conic-gradient( from 45deg, white 0deg 90deg, #cccccc 90deg 270deg, white 270deg 360deg ); position: relative; mask: conic-gradient(black var(--reveal-angle2), transparent var(--reveal-angle2)); animation: none; }
.chart2-container-scroll.is-visible .chart2-pie-chart-scroll { animation: unfurl-animation2 2s linear forwards; }
.chart2-pie-chart-scroll::before { content: ''; position: absolute; width: 2px; height: 100%; background-color: #a9a9a9; left: 50%; transform: translateX(-50%); z-index: 1; }
.chart2-pie-chart-scroll::after { content: ''; position: absolute; width: 100%; height: 2px; background-color: #a9a9a9; top: 50%; transform: translateY(-50%); z-index: 1; }
.chart2-labels-scroll { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #002366; font-weight: bold; font-size: 1.2em; opacity: 0; }
.chart2-container-scroll.is-visible .chart2-labels-scroll { animation: fade-in-labels2 0.5s linear 2s forwards; }
.chart2-label-scroll { position: absolute; transform: translate(-50%, -50%); }
.chart2-label-scroll.exit { top: 10%; left: 5%; }
.chart2-label-scroll.oversupply { top: 30%; left: 30%; }
.chart2-label-scroll.growth { top: 70%; left: 30%; }
.chart2-label-scroll.recovery { top: 70%; left: 70%; }
.chart2-label-scroll.entry { top: 90%; left: 95%; }
.chart2-label-scroll.slump { top: 30%; left: 68%; }
@property --reveal-angle2 { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes unfurl-animation2 { to { --reveal-angle2: 360deg; } }
@keyframes fade-in-labels2 { to { opacity: 1; } }

/* --- GRAFICO 3: FRECCE ROTANTI --- */
.chart3-container-scroll { position: relative; width: 100%; max-width: 400px; height: auto; aspect-ratio: 1 / 1; margin: 2em auto; font-family: sans-serif; opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.chart3-container-scroll.is-visible { opacity: 1; transform: translateY(0); }
.chart3-pie-chart-scroll { width: 100%; height: 100%; border-radius: 50%; background-color: #cccccc; border: 2px solid #a9a9a9; box-sizing: border-box; position: relative; mask: conic-gradient(black var(--reveal-angle3), transparent var(--reveal-angle3)); animation: none; }
.chart3-container-scroll.is-visible .chart3-pie-chart-scroll { animation: unfurl-animation3 2s linear forwards; }
.chart3-pie-chart-scroll::before { content: ''; position: absolute; width: 2px; height: 100%; background-color: #a9a9a9; left: 50%; transform: translateX(-50%); z-index: 1; }
.chart3-pie-chart-scroll::after { content: ''; position: absolute; width: 100%; height: 2px; background-color: #a9a9a9; top: 50%; transform: translateY(-50%); z-index: 1; }
.chart3-labels-scroll { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #002366; font-weight: bold; font-size: 1.2em; opacity: 0; animation: none; }
.chart3-container-scroll.is-visible .chart3-labels-scroll { animation: fade-in-labels3 0.5s linear 2s forwards; }
.chart3-label-scroll { position: absolute; transform: translate(-50%, -50%); }
.chart3-label-scroll.oversupply { top: 30%; left: 30%; }
.chart3-label-scroll.slump { top: 30%; left: 68%; }
.chart3-label-scroll.growth { top: 70%; left: 30%; }
.chart3-label-scroll.recovery { top: 70%; left: 70% }

.chart3-arrow {
    position: absolute;
    width: 40px; /* Allungato */
    height: 40px; /* Allungato */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5V19M5 12L12 5L19 12"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 2;
    border-radius: 50%; /* Per curvare l'immagine */
    box-sizing: border-box; /* Assicura che padding/border non cambino dimensioni */
}

/* Posizionamento frecce (più distanti e ruotate per metà spicchio) */
.chart3-arrow.top { top: -20px; left: 85%; transform: translateX(-50%) rotate(45deg); }
.chart3-arrow.right { top: 90%; right: -5px; transform: translateY(-50%) rotate(135deg); }
.chart3-arrow.bottom { bottom: 1px; left: 10%; transform: translateX(-50%) rotate(225deg); }
.chart3-arrow.left { top: 5%; left: 6%; transform: translateY(-50%) rotate(315deg); }

/* Animazioni per far ruotare ogni freccia su se stessa */
/* Le animazioni ruotano l'elemento freccia, mantenendo la sua posizione e rotazione iniziale */
@keyframes rotate-top-arrow { from { transform: translateX(-50%) rotate(45deg); } to { transform: translateX(-50%) rotate(405deg); } }
@keyframes rotate-right-arrow { from { transform: translateY(-50%) rotate(135deg); } to { transform: translateY(-50%) rotate(495deg); } }
@keyframes rotate-bottom-arrow { from { transform: translateX(-50%) rotate(225deg); } to { transform: translateX(-50%) rotate(585deg); } }
@keyframes rotate-left-arrow { from { transform: translateY(-50%) rotate(315deg); } to { transform: translateY(-50%) rotate(675deg); } }

/* Applica le animazioni alle frecce DOPO lo srotolamento */
.chart3-container-scroll.is-visible .chart3-arrow.top { animation: rotate-top-arrow 4s linear infinite 2s; }
.chart3-container-scroll.is-visible .chart3-arrow.right { animation: rotate-right-arrow 4s linear infinite 2s; }
.chart3-container-scroll.is-visible .chart3-arrow.bottom { animation: rotate-bottom-arrow 4s linear infinite 2s; }
.chart3-container-scroll.is-visible .chart3-arrow.left { animation: rotate-left-arrow 4s linear infinite 2s; }

@property --reveal-angle3 { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes unfurl-animation3 { to { --reveal-angle3: 360deg; } }
@keyframes fade-in-labels3 { to { opacity: 1; } }

/* --- FINE STILI COMPLETI --- */