/* ============================================================================
 * DIXONS — companion CSS to /assets/dixons.js
 * ----------------------------------------------------------------------------
 * The JS engine adds/removes the `entered` class and sets the
 * `--reveal-delay` / `--reveal-i` custom properties. These rules turn that
 * into the actual visual entrance: fade + a small directional translate, on a
 * quiet-luxury easing, staggered by DOM order. Drop this in once per page
 * (or per component scope) alongside the engine.
 *
 * The default `[data-reveal]` rule covers "up" (the most common direction);
 * the variants below cover scale / left / right / down / fade. The
 * `.entered` state collapses them all back to identity transforms so nothing
 * is left hidden if JS fails or reduced motion takes over.
 * ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, calc(var(--reveal-i, 0) * 145ms));
}

/* Directional variants — each object enters from its nearest edge.  */
[data-reveal="scale"] { transform: scale(0.96) translateY(18px); }
[data-reveal="left"]  { transform: translateX(-48px); }
[data-reveal="right"] { transform: translateX(48px); }
[data-reveal="down"]  { transform: translateY(-30px); }
[data-reveal="fade"]  { transform: none; filter: blur(8px); }

[data-reveal].entered {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: none;
}

/* v2 replay guard — applied by Dixons.reveal() while resetting elements to
 * their hidden state, so a re-run cascade (game overlays, reopened modals)
 * never animates OUT before animating in. Lifted before .entered is added. */
[data-reveal].dixon-reset { transition: none !important; }

/* Reduced motion — collapse all transforms instantly. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}