/* ============================================
   COBIJO — SISTEMA DE EFECTOS COMPARTIDOS
   Reveal on scroll · Spotlight glow · Parallax · Counter base
   ============================================ */

/* ---- REVEAL ON SCROLL ---- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    transform: none;
    transition: opacity 0.3s ease-out;
  }
}

/* ---- SPOTLIGHT GLOW CARD ----
   Aplica .glow-card a cualquier contenedor que deba tener el efecto de luz amarilla
   siguiendo el puntero. La card debe tener position relativa y radius ya definidos.
*/
.glow-card {
  position: relative;
  isolation: isolate;
  --glow-x: 50%;
  --glow-y: 50%;
  --glow-size: 340px;
}
.glow-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  border-radius: inherit;
  background-image: radial-gradient(
    var(--glow-size) var(--glow-size) at var(--glow-x) var(--glow-y),
    rgba(248, 240, 49, 0.22) 0%,
    rgba(248, 240, 49, 0) 65%
  );
}
.glow-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  padding: 1.5px;
  border-radius: inherit;
  background-image: radial-gradient(
    calc(var(--glow-size) * 0.65) calc(var(--glow-size) * 0.65) at var(--glow-x) var(--glow-y),
    var(--amarillo-sol) 0%,
    rgba(248, 240, 49, 0) 70%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
@media (prefers-reduced-motion: reduce) {
  .glow-card::before,
  .glow-card::after { display: none; }
}

/* ---- PARALLAX BG ----
   Aplica data-parallax al elemento (imagen o div con bg) y la clase .parallax-bg
   para activar transform automático.
*/
.parallax-bg {
  transform: translate3d(0, var(--parallax, 0px), 0) scale(1.12);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .parallax-bg { transform: scale(1.05); }
}

/* ---- STAGGER UTILITY ----
   Para elementos hermanos con .reveal: stagger automático cuando padre tiene .reveal-stagger
*/
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 400ms; }
.reveal-stagger > .reveal:nth-child(7) { transition-delay: 480ms; }
.reveal-stagger > .reveal:nth-child(8) { transition-delay: 560ms; }