/* Styles de base */
* {
  font-family: 'Varela Rounded', sans-serif;
}

::selection {
  background-color: #3ECFD9;
  color: #203D52;
}

/* Animations de base */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInFromBottom {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInFromRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInFromLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* === ANIMATION ARBRE NUMÉRIQUE === */

/* Apparition progressive */
@keyframes fadeInUp {
  from { transform: translateY(15px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Classes utilitaires */
.animate-in {
  animation: fadeIn 0.5s ease-out;
}

.fade-in { 
  animation: fadeIn 0.5s ease-out; 
}

.slide-in-from-bottom-4 { 
  animation: slideInFromBottom 0.7s ease-out; 
}

.slide-in-from-right-4 { 
  animation: slideInFromRight 0.5s ease-out; 
}

.slide-in-from-left-4 { 
  animation: slideInFromLeft 0.5s ease-out; 
}

.zoom-in { 
  animation: zoomIn 0.5s ease-out; 
}

/* === ARBRE NUMÉRIQUE CIRCUIT - Styles === */
:root {
  --tree-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --appear-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --color-cyan: #00D4E8;
  --color-gold: #FFCC49;
  --color-purple: #B077DD;
  --color-leaf-gold: #D4A574;
  --color-leaf-green: #8B9A6D;
}

/* Gradient radial utilitaire */
.bg-gradient-radial {
  background: radial-gradient(ellipse at center, var(--tw-gradient-stops));
}

/* SVG container */
#botanical-svg {
  transform-style: preserve-3d;
  overflow: visible;
}

/* Animation de base pour les éléments circuit */
#circuit-group line {
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Nœuds avec effet de pulse */
#nodes-group circle {
  transform-origin: center center;
}

/* Icônes tech */
#icons-group g {
  transform-origin: center center;
}

/* Feuilles */
#leaves-back-group path,
#leaves-front-group path {
  transform-origin: center bottom;
}

/* Particules */
#particles-group circle {
  mix-blend-mode: screen;
}