/* css/hero-animation.css */

.svg-container {
    max-width: 900px; /* Augmenté pour une illustration plus grande */
    width: 100%;
    margin: auto;
}

/* Styles de base pour les éléments de l'animation */
.node-border { 
    fill: #ffffff; 
    stroke: #e9e9e9; 
    stroke-width: 12px;
    transition: fill 0.25s ease, stroke 0.25s ease;
}
.icon-artwork path, .icon-artwork rect { 
    fill: #e9e9e9;
    transition: fill 0.25s ease;
}
.connector-path path { 
    fill: none; 
    stroke: #e9e9e9; 
    stroke-width: 12px; 
}

/* Styles pour le courant animé */
.animated-current {
    fill: none;
    stroke: #6AC497;
    stroke-width: 12px;
    stroke-linecap: round;
}
.animated-eraser {
    fill: none;
    stroke: #f9f9f9; /* Couleur du fond de la page pour un effacement parfait */
    stroke-width: 16px; 
    stroke-linecap: round;
}

/* Styles pour les noeuds et leur état actif */
.node-anim-group {
    transform-origin: center;
    transform-box: fill-box;
    transition: transform 0.4s ease-in-out;
}
.node-anim-group.active {
    transform: scale(1.15);
}
.node-anim-group.active .node-border {
    fill: #DAF1E5;
    stroke: url(#active-gradient);
}
.node-anim-group.active .icon-artwork path,
.node-anim-group.active .icon-artwork rect {
    fill: url(#active-gradient);
}

/* Styles pour le titre à l'intérieur du noeud */
.node-title {
    font-family: 'Poppins', sans-serif;
    font-size: 60px;
    font-weight: 400;
    fill: #000000;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.node-anim-group.active .node-title {
    opacity: 1;
}