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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

body {
  background-color: #ffffff;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg width='800' height='400' viewBox='0 0 800 400' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='400' y='200' font-family='IBM Plex Sans, sans-serif' font-size='80' font-weight='500' letter-spacing='0.5em' fill='rgba(0,0,0,0.015)' text-anchor='middle' dominant-baseline='middle' transform='rotate(-15, 400, 200)'%3EOSENTIUM%3C/text%3E%3C/svg%3E");
  background-attachment: fixed;
  background-repeat: repeat;
  opacity: 0;
  transition: opacity 2s ease-in-out;
  pointer-events: none;
}

body.bg-visible::before {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {

  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}