/* ============================================================
   FX LAYER — capa de motion compartida para las maquetas Deltapit
   Solo anima transform / opacity / filter. Respeta prefers-reduced-motion.
   Colores tematizables por variante con --fx-1 / --fx-2 / --fx-spot-color.
   ============================================================ */
:root{
  --fx-1:#E87618;      /* naranja Deltapit */
  --fx-2:#066AAB;      /* azul Deltapit */
  --fx-spot-color:rgba(232,118,24,.16);
  --fx-ease:cubic-bezier(.2,.7,.2,1);
}

/* --- contenedor de fondo animado (detrás del contenido) --- */
.fx-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fx-bg>*{position:absolute;pointer-events:none}

/* blobs de gradiente a la deriva */
.fx-blob{border-radius:50%;filter:blur(70px);opacity:.45;will-change:transform;
  background:radial-gradient(circle at 30% 30%,var(--c,var(--fx-1)),transparent 70%)}

/* aurora: barrido cónico suave */
.fx-aurora{inset:-35% -15%;filter:blur(80px);opacity:.30;will-change:transform;
  background:conic-gradient(from 120deg at 50% 50%,
    var(--fx-1) 0deg, transparent 90deg, var(--fx-2) 200deg, transparent 300deg, var(--fx-1) 360deg)}

/* grilla en perspectiva / técnica */
.fx-grid{inset:0;opacity:.5;
  background-image:linear-gradient(var(--fx-line,rgba(255,255,255,.06)) 1px,transparent 1px),
                   linear-gradient(90deg,var(--fx-line,rgba(255,255,255,.06)) 1px,transparent 1px);
  background-size:var(--fx-cell,46px) var(--fx-cell,46px);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 40%,transparent 78%);
          mask-image:radial-gradient(120% 80% at 50% 0%,#000 40%,transparent 78%)}

/* grano/ruido sutil (estático) */
.fx-noise{inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* spotlight que sigue el cursor (JS setea --mx/--my) */
.fx-spot{position:relative}
.fx-spot::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,15%),var(--fx-spot-color),transparent 60%)}
.fx-spot:hover::after{opacity:1}

/* barrido de brillo en hover (para tarjetas) */
.fx-shine{position:relative;overflow:hidden}
.fx-shine::before{content:"";position:absolute;top:0;left:-120%;width:80%;height:100%;pointer-events:none;
  transform:skewX(-18deg);transition:left .6s var(--fx-ease);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)}
.fx-shine:hover::before{left:130%}

@media (prefers-reduced-motion: no-preference){

  /* flotación vertical suave */
  @keyframes fx-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,var(--fx-amp,-16px),0)}}
  [data-fx-float]{animation:fx-float var(--fx-dur,7s) cubic-bezier(.45,0,.55,1) infinite;
    animation-delay:calc(var(--fx-i,0) * -1.9s);will-change:transform}

  /* rotación lenta (anillos/acentos) */
  @keyframes fx-spin{to{transform:rotate(360deg)}}
  [data-fx-spin]{animation:fx-spin var(--fx-dur,48s) linear infinite}

  /* deriva de blobs */
  @keyframes fx-drift{to{transform:translate3d(var(--fx-dx,90px),var(--fx-dy,-70px),0) scale(var(--fx-sc,1.18))}}
  .fx-blob{animation:fx-drift var(--fx-dur,24s) ease-in-out infinite alternate;
    animation-delay:calc(var(--fx-i,0) * -3s)}

  /* aurora en movimiento */
  @keyframes fx-aur{0%{transform:translate3d(-8%,0,0) rotate(0deg)}100%{transform:translate3d(8%,0,0) rotate(10deg)}}
  .fx-aurora{animation:fx-aur 20s ease-in-out infinite alternate}

  /* grilla que avanza */
  @keyframes fx-grid{to{background-position:0 var(--fx-cell,46px),var(--fx-cell,46px) 0}}
  .fx-grid{animation:fx-grid 4s linear infinite}

  /* entrada al hacer scroll (stagger con --fx-i) — opt-in, no pisa reveals existentes */
  [data-fx-in]{opacity:0;transform:translateY(16px);filter:blur(6px);
    transition:opacity .7s var(--fx-ease),transform .7s var(--fx-ease),filter .7s var(--fx-ease);
    transition-delay:calc(var(--fx-i,0) * 70ms)}
  [data-fx-in].fx-shown{opacity:1;transform:none;filter:none}
}

/* respeto total a reduced-motion */
@media (prefers-reduced-motion: reduce){
  [data-fx-float],[data-fx-spin],.fx-blob,.fx-aurora,.fx-grid{animation:none !important}
  [data-fx-in]{opacity:1 !important;transform:none !important;filter:none !important}
  .fx-spot::after{display:none}
}