/* ===========================
   CaribeXCOM — Effects
   Archivo: cx-effects.css
   =========================== */

/* Scanlines (sutil) */
.cx-scanlines{
  position: relative;
}
.cx-scanlines::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.05) 0px,
    rgba(255,255,255,.05) 1px,
    transparent 2px,
    transparent 6px
  );
  opacity: .06;
  mix-blend-mode: overlay;
}

/* “Noise” suave sin imágenes: grano via gradients */
.cx-noise{
  position: relative;
}
.cx-noise::before{
  content:"";
  position:absolute;
  inset:-40px;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.05), transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.04), transparent 45%),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,.03), transparent 45%);
  opacity: .18;
  filter: blur(10px);
  transform: rotate(2deg);
}

/* Glows */
.cx-glow-yellow{ box-shadow: var(--glow-yellow); }
.cx-glow-red{ box-shadow: var(--glow-red); }
.cx-glow-green{ box-shadow: var(--glow-green); }

/* Reveal animations */
.cx-reveal{
  opacity: 0;
  transform: translateY(14px);
  filter: blur(2px);
  transition: opacity var(--t-3) var(--ease), transform var(--t-3) var(--ease), filter var(--t-3) var(--ease);
  will-change: transform, opacity, filter;
}
.cx-reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce){
  .cx-reveal{ opacity: 1; transform: none; filter: none; }
}