/* ═══ Site-wide interactions — scroll reveals, image fade, magnetic buttons ═══ */

/* Scroll-reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.75s cubic-bezier(.22,.61,.36,1),
              transform 0.75s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children inside reveal-group */
.reveal-group > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s cubic-bezier(.22,.61,.36,1),
              transform 0.65s cubic-bezier(.22,.61,.36,1);
}
.reveal-group.visible > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0ms; }
.reveal-group.visible > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 70ms; }
.reveal-group.visible > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 140ms; }
.reveal-group.visible > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 210ms; }
.reveal-group.visible > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 280ms; }
.reveal-group.visible > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 350ms; }
.reveal-group.visible > *:nth-child(n+7) { opacity: 1; transform: translateY(0); transition-delay: 420ms; }

/* Image fade-in on lazy load */
img.fade-img {
  opacity: 0;
  transition: opacity 0.55s ease-out;
}
img.fade-img.loaded {
  opacity: 1;
}

/* Magnetic-button transition (transform applied via JS on mousemove) */
.magnetic {
  transition: transform 0.25s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-group > *, img.fade-img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .magnetic { transition: none; transform: none !important; }
}