/* AGROINGENIO LAB - EFECTOS VISUALES */

body {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
}

#agro-particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.78;
}


.agro-particle {
  position: absolute;
  top: 0;
  border-radius: 50%;
  background: rgba(85, 220, 125, 0.52);
  box-shadow: 0 0 10px rgba(85, 220, 125, 0.28);
  animation: agroFloat linear infinite;
}

@keyframes agroFloat {
  0% {
    transform: translateY(110vh) translateX(0);
    opacity: 0;
  }
  15% {
    opacity: 0.40;
  }
  50% {
    transform: translateY(50vh) translateX(12px);
    opacity: 0.28;
  }
  85% {
    opacity: 0.18;
  }
  100% {
    transform: translateY(-12vh) translateX(-8px);
    opacity: 0;
  }
}

.agro-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}

.agro-reveal.agro-visible {
  opacity: 1;
  transform: translateY(0);
}

.agro-glass {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 8px 28px rgba(0,0,0,.10);
}

.card,
.project-card,
.service-card,
.skill-card {
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

@media (hover:hover) {
  .card:hover,
  .project-card:hover,
  .service-card:hover,
  .skill-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,.16);
    border-color: rgba(84,190,110,.30);
  }
}

@media (prefers-reduced-motion: reduce) {
  .agro-particle {
    display: none;
  }
  .agro-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===================================================
   AGRO-VISUAL-V2
   Acabado visual seguro para movil
=================================================== */

.hero-content {
  animation: agroHeroIn .75s cubic-bezier(.2,.7,.2,1) both;
}

.hero-image-wrapper {
  animation: agroHeroIn .9s .12s cubic-bezier(.2,.7,.2,1) both;
}

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

.hero-image {
  animation: agroImageFloat 7s ease-in-out 1s infinite;
}

@keyframes agroImageFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

body:not(.light) .agro-glass {
  background-color: rgba(24, 39, 29, .82) !important;
}

body.light .agro-glass {
  background-color: rgba(255, 255, 255, .82) !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero-content,
  .hero-image-wrapper,
  .hero-image {
    animation: none !important;
  }
}

/* ==============================================
   AGRO-CAPAS-FINALES
   Particulas debajo del contenido
============================================== */

.hero,
section,
.footer {
  position: relative;
  z-index: 1;
}

/* ==================================================
   AGRO-LIGHT-PREMIUM-PARTICLES
   Mejora exclusiva para modo claro
================================================== */

body.light #agro-particles {
  opacity: 0.82;
}

body.light .agro-particle {
  background: rgba(21, 128, 61, 0.28);
  box-shadow: 0 0 9px rgba(21, 128, 61, 0.16);
}