/* ==========================================================================
   ANIMATION SYSTEM
   IntersectionObserver-driven reveals, kept restrained.
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  will-change: opacity, transform;
}
[data-reveal="up"] { transform: translateY(28px); }
[data-reveal="left"] { transform: translateX(-28px); }
[data-reveal="right"] { transform: translateX(28px); }
[data-reveal="scale"] { transform: scale(0.96); }

[data-reveal].is-visible {
  opacity: 1;
  transform: translate(0) scale(1);
}

[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal-group].is-visible > * { opacity: 1; transform: translateY(0); }
[data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0.02s; }
[data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 0.09s; }
[data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 0.16s; }
[data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 0.23s; }
[data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 0.30s; }
[data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 0.37s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Line-draw for underlines / dividers */
.draw-line { position: relative; overflow: hidden; }
.draw-line::after {
  content: '';
  position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--ease);
}
.draw-line.is-visible::after { transform: scaleX(1); }

/* Page transition wipe */
.page-wipe {
  position: fixed; inset: 0; z-index: 9990;
  background: var(--navy);
  transform: scaleY(0);
  transform-origin: top;
  pointer-events: none;
}
.page-wipe.is-active {
  animation: wipeIn 0.5s var(--ease) forwards;
}
@keyframes wipeIn {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  50.01% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}