/* ==========================================================================
   Griefcase — Scroll reveal & shared motion utilities
   Applied via JS (IntersectionObserver) by adding .is-revealed to elements
   carrying [data-reveal]. Kept separate from components.css so motion can be
   audited/tuned in one place.
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-quiet),
              transform var(--dur-slow) var(--ease-quiet);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-group] > * { transition-delay: calc(var(--i, 0) * 90ms); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Gentle page-turn used when switching writer <-> voice mode, and between
   library filter states. Toggled via .is-turning briefly on the container. */
.page-turn-exit {
  animation: page-turn-out var(--dur-fast) var(--ease-standard) forwards;
}
.page-turn-enter {
  animation: page-turn-in var(--dur-fast) var(--ease-standard) forwards;
}

@keyframes page-turn-out {
  to { opacity: 0; transform: translateY(6px) scale(0.99); }
}
@keyframes page-turn-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Cursor "breath" used on primary CTAs — a very slight scale on hover,
   distinct from the click affordance. */
.btn-primary, .btn-ghost {
  will-change: transform;
}