/* =====================================================================
   ELENEX — MOTION LANGUAGE
   Native-only (no JS framework). Three pillars:
   1) Cross-document View Transitions (works because this is an MPA)
   2) Scroll reveal (IntersectionObserver toggles .is-visible — see reveal.js)
   3) Kinetic marquee + micro-interactions
   All gated behind prefers-reduced-motion.
   ===================================================================== */

/* 1) PAGE TRANSITIONS — cross-document, same-origin Blade navigation.
   Progressive enhancement: unsupported browsers just navigate normally. */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: el-fade-out var(--dur-2) var(--ease-inout) both;
}
::view-transition-new(root) {
  animation: el-rise-in var(--dur-2) var(--ease-out) both;
}
@keyframes el-fade-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes el-rise-in  { from { opacity: 0; transform: translateY(14px); } }

/* 2) SCROLL REVEAL */
.el-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-3) var(--ease-out),
              transform var(--dur-3) var(--ease-out);
  will-change: opacity, transform;
}
.el-reveal.is-visible { opacity: 1; transform: none; }
/* Stagger children when parent carries .el-reveal-group */
.el-reveal-group.is-visible > * { animation: el-rise-in var(--dur-3) var(--ease-out) both; }
.el-reveal-group.is-visible > *:nth-child(2) { animation-delay: .06s; }
.el-reveal-group.is-visible > *:nth-child(3) { animation-delay: .12s; }
.el-reveal-group.is-visible > *:nth-child(4) { animation-delay: .18s; }
.el-reveal-group.is-visible > *:nth-child(5) { animation-delay: .24s; }
.el-reveal-group.is-visible > *:nth-child(6) { animation-delay: .30s; }

/* 3) KINETIC MARQUEE (ticker) */
@keyframes el-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Reduced motion: disable everything non-essential ---- */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  .el-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .el-reveal-group.is-visible > * { animation: none !important; }
  .el-ticker__track { animation: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}