/* ULTSQL motion system — scroll reveals, counters, page transitions.
   Only transform/opacity are animated. Respects prefers-reduced-motion. */

[data-reveal] {
  opacity: 0;
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="up"]    { transform: translate3d(0, 28px, 0); }
[data-reveal="down"]  { transform: translate3d(0, -28px, 0); }
[data-reveal="left"]  { transform: translate3d(-36px, 0, 0); }
[data-reveal="right"] { transform: translate3d(36px, 0, 0); }
[data-reveal="zoom"]  { transform: scale(0.94); }
[data-reveal="fade"]  { transform: none; }
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Page enter / leave fade (Zero transform on body to preserve position: fixed viewport root) */
html.motion-ready body { animation: ult-page-in 0.35s ease-out both; }
html.motion-leaving body { opacity: 0; transition: opacity 0.2s ease; }
@keyframes ult-page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Scroll progress bar (Monochrome) */
.ult-scroll-progress {
  position: fixed;
  top: 24px;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 10002;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: var(--text-primary);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

[data-theme="light"] .ult-scroll-progress {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}

/* Spotlight glow that follows the cursor on [data-glow] cards (Strictly Monochrome) */
[data-glow] { position: relative; isolation: isolate; }
[data-glow]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.08), transparent 45%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: -1;
}
[data-theme="light"] [data-glow]::before {
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 0, 0, 0.05), transparent 45%);
}
[data-glow]:hover::before { opacity: 1; }

/* Count-up numbers keep width stable */
[data-count] { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.motion-ready body { animation: none; }
  .ult-scroll-progress { display: none; }
}