/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Floating numbers background */
.number-field {
  position: fixed; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 0;
}

.floating-num {
  position: absolute;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  opacity: 0;
  animation: num-drift linear infinite;
  pointer-events: none;
  user-select: none;
}

.floating-num.alt {
  animation-name: num-drift-alt;
}

@keyframes num-drift {
  0%   { transform: translateY(10vh) translateX(0); opacity: 0; }
  8%   { opacity: 0.12; }
  50%  { transform: translateY(-40vh) translateX(20px); opacity: 0.08; }
  85%  { opacity: 0.04; }
  100% { transform: translateY(-90vh) translateX(-10px); opacity: 0; }
}

@keyframes num-drift-alt {
  0%   { transform: translateY(5vh) translateX(0); opacity: 0; }
  10%  { opacity: 0.15; }
  40%  { transform: translateY(-30vh) translateX(-15px); opacity: 0.1; }
  80%  { opacity: 0.03; }
  100% { transform: translateY(-85vh) translateX(8px); opacity: 0; }
}