/* ============================================================================
 * 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.
 * ========================================================================== */

.initial-crawl-card {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
  gap: 18px;
  padding: clamp(28px, 7vw, 96px);
  background: #070b08;
  color: #edf5d8;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
}

.initial-crawl-card > * { max-width: 760px; margin: 0; }
.initial-crawl-card > p:first-child { color: #cc741c; font-size: 0.72rem; letter-spacing: 0.16em; }
.initial-crawl-card h1 { font: 900 clamp(2.2rem, 8vw, 6.6rem)/0.94 Impact, sans-serif; letter-spacing: -0.035em; text-transform: uppercase; }
.initial-crawl-card p { color: #d8c9a4; font-size: clamp(0.92rem, 2vw, 1.12rem); line-height: 1.65; }
.initial-crawl-card a { width: fit-content; color: #edf5d8; text-underline-offset: 5px; }

[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;
  }
}