/* universe-fx: cursor glyph trail, nav text-unscramble, mascot canvas.
   Themeable via CSS variables. */
:root {
  --fx-bg: #14111c;
  --fx-text: #ece8f5;
  --fx-muted: #9a93ad;
  --fx-accent: #ae85ff;
  --fx-grid: 20px;
  --fx-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.fx-trail-block {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--fx-grid);
  height: var(--fx-grid);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.25s ease-out;
  font: 600 14px/var(--fx-grid) var(--fx-mono);
  text-align: center;
  color: #111;
}
.fx-trail-block.fx-active { opacity: 1; transition: none; }

/* Invisible placeholder reserves width; scrambled text overlays it */
.fx-unscramble { position: relative; display: inline-block; }
.fx-unscramble .fx-ph { visibility: hidden; }
.fx-unscramble .fx-live {
  position: absolute; inset: 0; white-space: pre; font-family: var(--fx-mono);
}

.fx-mascot { display: block; width: 100%; height: 100%; }

.fx-reveal { opacity: 0; transform: translateY(56px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.fx-reveal.fx-in { opacity: 1; transform: none; }
.fx-reveal .fx-art { clip-path: inset(100% 0 0 0); transition: clip-path 1s cubic-bezier(.2,.8,.2,1) .15s; }
.fx-reveal.fx-in .fx-art { clip-path: inset(0); }
@media (prefers-reduced-motion: reduce) {
  .fx-reveal, .fx-reveal .fx-art { opacity: 1; transform: none; clip-path: none; transition: none; }
}

.fx-caret {
  display: inline-block; width: 0.55em; height: 0.55em; margin-left: 1ch;
  background: #5fed83; vertical-align: baseline; animation: fx-blink 1s steps(1) infinite;
}
@keyframes fx-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fx-caret { animation: none; } }

@media (prefers-reduced-motion: reduce) {
  .fx-trail-block { display: none; }
}