/* Page transition overlay */
#page-overlay {
  position: fixed;
  inset: 0;
  background: var(--ink, #141412);
  z-index: 9999;
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--dur-slow, 0.55s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
#page-overlay.loaded { opacity: 0; }

/* Scroll reveals — fade up */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-reveal, 0.85s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
              transform var(--dur-reveal, 0.85s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.reveal.visible { opacity: 1; transform: none; }

/* Stagger helpers */
.reveal-d1 { transition-delay: var(--stagger-1, 0.08s); }
.reveal-d2 { transition-delay: var(--stagger-2, 0.16s); }
.reveal-d3 { transition-delay: var(--stagger-3, 0.24s); }
.reveal-d4 { transition-delay: var(--stagger-4, 0.32s); }
.reveal-d5 { transition-delay: 0.40s; }

/* Fade only (images, full-width elements) */
.reveal-fade {
  opacity: 0;
  transition: opacity 1.1s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.reveal-fade.visible { opacity: 1; }

/* Live pulse */
@keyframes cg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }

/* Accessibility — respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-fade { opacity: 1 !important; transform: none !important; transition: none !important; }
  #page-overlay { transition: none !important; opacity: 0 !important; }
}