/* 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 BOTANIQUE PRO === */

/* État fané qui disparaît */
@keyframes wiltedFadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* Croissance des pousses */
@keyframes sproutUp {
  0% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
  100% { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
}

/* Feuilles qui s'ouvrent */
@keyframes leafUnfold {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.15); opacity: 0.85; }
  100% { transform: scale(1); opacity: 1; }
}

/* Pulsation douce de la fleur épanouie */
@keyframes gentlePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

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

/* Animation de croissance de tige */
@keyframes stemGrow {
  0% { stroke-dashoffset: 200; }
  100% { stroke-dashoffset: 0; }
}

/* Brillance subtile */
@keyframes shimmer {
  0%, 100% { opacity: 0; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Racines qui poussent */
@keyframes rootExtend {
  0% { stroke-dashoffset: 50; opacity: 0; }
  100% { stroke-dashoffset: 0; opacity: 0.5; }
}

/* === ANIMATIONS MESH DIGITAL === */

/* Pulsation des nœuds mesh */
@keyframes nodePulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; }
}

/* Flux de données le long des lignes mesh */
@keyframes dataFlow {
  0% { stroke-dashoffset: 20; opacity: 0; }
  50% { opacity: 1; }
  100% { stroke-dashoffset: -20; opacity: 0; }
}

/* Apparition progressive du mesh */
@keyframes meshAppear {
  0% { stroke-dasharray: 0, 1000; opacity: 0; }
  100% { stroke-dasharray: 1, 0; opacity: 0.7; }
}

/* Scan digital (lignes de balayage) */
@keyframes digitalScan {
  0% { transform: translateY(-100%); opacity: 0.3; }
  100% { transform: translateY(400px); opacity: 0; }
}

/* Glow digital sur les nœuds */
@keyframes digitalGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.5); }
}

/* 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; 
}

/* === RESTORED DIGITAL ECOSYSTEM - GSAP Enhanced === */
:root {
  --eco-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --bloom-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --glow-cyan: #3ECFD9;
  --glow-gold: #FFCC49;
  --glow-purple: #B077DD;
}

/* Hexagonal nodes */
.hex-node {
  transform-origin: center;
  will-change: transform, filter;
}

/* Glow filter for nodes */
.hex-node--glow {
  filter: drop-shadow(0 0 8px var(--node-glow-color, #3ECFD9));
}

/* Floating particles base */
.eco-particle {
  will-change: transform, opacity;
  pointer-events: none;
}

/* Parallax layers */
.parallax-layer {
  will-change: transform;
}

/* SVG container for 3D parallax */
#botanical-svg {
  transform-style: preserve-3d;
  perspective: 1000px;
}

/* Breathing animation fallback */
@keyframes ecosystemBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.006); }
}

/* Smooth path drawing */
.draw-path {
  will-change: stroke-dashoffset;
}

/* Styles pour les lignes mesh */
.mesh-line {
  stroke: #FFFFFF;
  stroke-width: 0.5;
  opacity: 0.2;
}

.mesh-node {
  fill: #FFFFFF;
  opacity: 0.8;
}

.branch {
  stroke: #FFFFFF;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.tree-leaf {
  fill: #4ADE80;
}

.mesh-connection {
  stroke: #FFFFFF;
  stroke-width: 0.5;
  opacity: 0.2;
}