/* =========================================================
   background.css
   Fondo decorativo con SVGs + sparks
   - .blob  = SVGs decorativos
   - .spark = destellos/partículas
   - Compatible con tu script.js actual
   ========================================================= */

:root{
  --rct-primary:  #182D64;
  --rct-secondary:#8FAADC;
  --rct-terciary: #ffffff;
  --rct-special:  #2a9d8f;

  --rct-ink:      var(--rct-primary);
  --rct-bg:       var(--rct-terciary);

  --rct-radius-xl: 24px;
  --rct-radius-lg: 18px;
  --rct-radius-md: 14px;

  --rct-shadow: 0 16px 40px rgba(24,45,100,.20);
  --rct-shadow-soft: 0 10px 24px rgba(24,45,100,.15);
}

.appRoot{
  position: relative;
  overflow-x: hidden;
}

.appRoot > :not(.decorLayer){
  position: relative;
  z-index: 1;
}

.decorLayer{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  isolation: isolate;
}

/* =========================================
   BLOBS = SVGs
   ========================================= */
.blob{
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  transform-origin: center;
  backface-visibility: hidden;

  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  opacity: .22;
  filter: drop-shadow(0 10px 22px rgba(42,157,143,.14));
  animation-name: bgFloat;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.blob--tractor{
  background-image: url("../img/svgs/Agropecuario.svg");
}

.blob--cow{
  background-image: url("../img/svgs/pecuario.svg");
}

.blob--seedling{
  background-image: url("../img/svgs/cultivo.svg");
}

.blob--wheat{
  background-image: url("../img/svgs/granja.svg");
}

.blob--microscope{
  background-image: url("../img/svgs/ciencia.svg");
}

.decorLayer > .blob:nth-child(6n + 1){
  background-image: url("../img/svgs/forestal.svg");
}
.decorLayer > .blob:nth-child(6n + 1){ opacity: .22; }
.decorLayer > .blob:nth-child(6n + 2){ opacity: .18; }
.decorLayer > .blob:nth-child(6n + 3){ opacity: .20; }
.decorLayer > .blob:nth-child(6n + 4){ opacity: .16; }
.decorLayer > .blob:nth-child(6n + 5){ opacity: .19; }
.decorLayer > .blob:nth-child(6n + 6){ opacity: .17; }

/* rotaciones suaves */
.decorLayer > .blob:nth-child(7n + 1){ --icon-rotate: -18deg; }
.decorLayer > .blob:nth-child(7n + 2){ --icon-rotate: 12deg; }
.decorLayer > .blob:nth-child(7n + 3){ --icon-rotate: -10deg; }
.decorLayer > .blob:nth-child(7n + 4){ --icon-rotate: 20deg; }
.decorLayer > .blob:nth-child(7n + 5){ --icon-rotate: -24deg; }
.decorLayer > .blob:nth-child(7n + 6){ --icon-rotate: 8deg; }
.decorLayer > .blob:nth-child(7n + 7){ --icon-rotate: -6deg; }

.decorLayer > .blob{
  transform: rotate(var(--icon-rotate, 0deg));
}

/* =========================================
   SPARKS = BOLITAS CON AURA
   ========================================= */
.spark{
  position: absolute;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rct-special) 35%, transparent);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--rct-special) 10%, transparent);
  animation: sparkle 7.5s ease-in-out infinite;
  will-change: transform;
}

/* =========================================
   ANIMACIONES
   ========================================= */
@keyframes sparkle{
  0%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-12px) scale(1.06); }
  100%{ transform: translateY(0) scale(1); }
}

@keyframes bgFloat{
  0%{
    transform: translate3d(0, 0, 0) rotate(calc(var(--icon-rotate) - 2deg)) scale(1);
  }
  50%{
    transform: translate3d(0, -22px, 0) rotate(calc(var(--icon-rotate) + 2deg)) scale(1.03);
  }
  100%{
    transform: translate3d(0, 0, 0) rotate(calc(var(--icon-rotate) - 2deg)) scale(1);
  }
}

@keyframes bgFloatSoft{
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(0, -14px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes sparkPulse{
  0%{
    opacity: .28;
    transform: scale(.92);
  }
  50%{
    opacity: .72;
    transform: scale(1.08);
  }
  100%{
    opacity: .28;
    transform: scale(.92);
  }
}

/* =========================================
   AJUSTES
   ========================================= */
body{
  overflow-x: hidden;
}

@media (max-width: 900px){
  .blob{
    opacity: .18;
    filter: drop-shadow(0 8px 18px rgba(42,157,143,.12));
  }

  .spark{
    opacity: .42;
  }
}

@media (prefers-reduced-motion: reduce){
  .blob,
  .spark,
  .blob::before{
    animation: none !important;
    transition: none !important;
  }
}