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

@font-face {
  font-family: 'League Mono';
  src: url("/assets/LeagueMono-VF-d0aa2e62.woff2") format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'League Mono', system-ui, sans-serif;
  background-color: #000000;
  position: relative;
}

.gradient-container {
  background-image: linear-gradient(to bottom, transparent 0%, #000000 95%);
  position: relative;
}

/* Background texture and animation */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='27' viewBox='0 0 36 36'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M3 3h12l-6 12zM21 15h12l-6-12zM3 33h12l-6-12zM21 21h12l-6 12z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: -1;
  opacity: 0.1;
  mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='27' viewBox='0 0 36 36'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M3 3h12l-6 12zM21 15h12l-6-12zM3 33h12l-6-12zM21 21h12l-6 12z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: -1;
  opacity: 0.15;
  mask-image: radial-gradient(
    600px circle at var(--mouse-x, -1000px) var(--mouse-y, -1000px),
    black 0%,
    transparent 100%
  );
  -webkit-mask-image: radial-gradient(
    600px circle at var(--mouse-x, -1000px) var(--mouse-y, -1000px),
    black 0%,
    transparent 100%
  );
}