/* ╔══════════════════════════════════════════════════════╗
   ║  GLOPSA · animations.css                             ║
   ║  Reveals on scroll + microinteracciones              ║
   ╚══════════════════════════════════════════════════════╝ */

/* --- SECCIÓN CURSOR --- */

@media (hover: hover) and (pointer: fine) {
  * { cursor: none !important; }

  .cursor-dot {
    pointer-events: none;
    position: fixed;
    top: -5px;
    left: -5px;
    width: 10px;
    height: 10px;
    background: #e41f23;
    border-radius: 50%;
    z-index: 9999;
    will-change: transform;
    transition: opacity .2s;
  }

  .cursor-ring {
    pointer-events: none;
    position: fixed;
    top: -25px;
    left: -25px;
    width: 50px;
    height: 50px;
    border: 2px solid #e41f23;
    border-radius: 50%;
    z-index: 9998;
    will-change: transform;
    transition: width .3s, height .3s, opacity .2s;
  }
}

@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none !important; }
}

/* ── Reveal on scroll ── */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .9s var(--ease),
    transform .9s var(--ease);
  transition-delay: var(--rd, 0ms);
}
.reveal.is-in{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .reveal{ transition: opacity .3s ease; transform: none !important; }
  .hero-spotlight, .hero-orb, .preloader-bar::after, .marquee-track,
  .eyebrow-dot{ animation: none !important; }
  html{ scroll-behavior: auto; }
}

.bento-cell img,
.marca-card-cover img,
.cf-slide img{ will-change: transform; }

[data-magnet]{ will-change: transform; }

/* Form focus glow */
.field input:focus,
.field textarea:focus{
  animation: focus-pulse .6s var(--ease);
}
@keyframes focus-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(228,31,35,.25); }
  100% { box-shadow: 0 0 0 4px rgba(228,31,35,.18); }
}