/* ─────────────────────────────────────────
   ANIMATIONS.CSS — Keyframes · Reveal · Cursor
   MNSM · Playground Agency
───────────────────────────────────────── */

/* ─── CUSTOM CURSOR ─── */
#cursor {
  position: fixed;
  width: 10px;
  height: 10px;
  background: var(--coral);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition:
    width   0.2s ease,
    height  0.2s ease,
    opacity 0.2s ease;
}
#cursor.hover {
  width: 22px;
  height: 22px;
  opacity: 0.5;
}

/* ─── SCROLL REVEAL ─── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ─── KEYFRAMES ─── */
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes lineReveal {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; }
  50%       { opacity: 1; }
}