/* ============================================
   BRAND BOOK — Utilities
   Animations, scroll effects, visibility helpers
   ============================================ */

/* ========== SCROLL REVEAL ANIMATIONS ========== */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slower) var(--ease-out),
              transform var(--duration-slower) var(--ease-out);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for child items */
.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; }
.reveal-stagger > .reveal:nth-child(9) { transition-delay: 640ms; }
.reveal-stagger > .reveal:nth-child(10) { transition-delay: 720ms; }

/* Slide direction variants */
.reveal--left {
  transform: translateX(-24px);
}
.reveal--left.is-visible {
  transform: translateX(0);
}

.reveal--right {
  transform: translateX(24px);
}
.reveal--right.is-visible {
  transform: translateX(0);
}

.reveal--scale {
  transform: scale(0.95);
}
.reveal--scale.is-visible {
  transform: scale(1);
}

.reveal--fade {
  transform: none;
}
.reveal--fade.is-visible {
  transform: none;
}


/* ========== PAGE ENTRANCE ========== */

@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-enter {
  animation: pageEnter var(--duration-slower) var(--ease-out) both;
}

.page-enter--delay-1 { animation-delay: 100ms; }
.page-enter--delay-2 { animation-delay: 200ms; }
.page-enter--delay-3 { animation-delay: 300ms; }
.page-enter--delay-4 { animation-delay: 400ms; }


/* ========== MICRO-INTERACTIONS ========== */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ---- Copy success toast ---- */
@keyframes toastIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes toastOut {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
}


/* ========== REDUCED MOTION ========== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .page-enter {
    animation: none;
    opacity: 1;
  }
}


/* ========== SPACING UTILITIES ========== */

.mt-0    { margin-top: 0; }
.mt-4    { margin-top: var(--space-4); }
.mt-6    { margin-top: var(--space-6); }
.mt-8    { margin-top: var(--space-8); }
.mt-10   { margin-top: var(--space-10); }
.mt-12   { margin-top: var(--space-12); }
.mt-16   { margin-top: var(--space-16); }

.mb-0    { margin-bottom: 0; }
.mb-4    { margin-bottom: var(--space-4); }
.mb-6    { margin-bottom: var(--space-6); }
.mb-8    { margin-bottom: var(--space-8); }
.mb-10   { margin-bottom: var(--space-10); }
.mb-12   { margin-bottom: var(--space-12); }
.mb-16   { margin-bottom: var(--space-16); }


/* ========== VISIBILITY ========== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hidden { display: none !important; }


/* ========== TEXT UTILITIES ========== */

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--brand-accent); }
.text-inverse { color: var(--text-inverse); }