.site-loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 32px;
  background: #060708;
  color: #f3f1eb;
  text-align: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 600ms ease, visibility 0s linear 600ms;
  animation: loader-failsafe 600ms ease 3s forwards;
}

.site-loader.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.site-loader__brand { position: relative; z-index: 1; display: grid; grid-template-columns: max-content auto; column-gap: .1em; align-items: end; justify-content: center; color: #f5f2ec; font: 400 clamp(30px, 5vw, 58px)/.78 'Playfair Display', Georgia, serif; letter-spacing: .12em; text-align: center; animation: loader-rise 1.3s ease both; }
.site-loader__word { display: block; line-height: .78em; }
.site-loader__h-mark { display: block; width: auto; height: .68em; margin: 0; object-fit: contain; }
.site-loader__brand small { grid-column: 1 / 3; display: block; margin-top: 18px; font: 500 9px/1 'Roboto Mono', Arial, sans-serif; letter-spacing: .44em; color: rgba(255, 255, 255, .65); }
.site-loader__horizon { position: absolute; top: 58%; right: -20%; left: -20%; height: 3px; transform-origin: center; background: linear-gradient(90deg, transparent 0%, #7d0b16 30%, #f32a3c 50%, #7d0b16 70%, transparent 100%); box-shadow: 0 0 32px rgba(212, 20, 39, .53); animation: loader-horizon 2.4s ease-out infinite; }
.site-loader p { position: absolute; z-index: 1; top: calc(50% + 76px); margin: 0; color: rgba(255, 255, 255, .63); font-size: 9px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; animation: loader-copy 1.1s .25s ease both; }
.site-loader__progress { display: none !important; }

@keyframes loader-rise { from { opacity: 0; transform: translateY(15px); letter-spacing: .22em; } to { opacity: 1; transform: translateY(0); letter-spacing: .12em; } }
@keyframes loader-horizon { 0% { transform: scaleX(0); opacity: .25; } 72%, 100% { transform: scaleX(1); opacity: 1; } }
@keyframes loader-copy { from { opacity: 0; } to { opacity: 1; } }
@keyframes loader-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

@media (prefers-reduced-motion: reduce) {
  .site-loader, .site-loader * { animation: none !important; transition: none !important; }
}