.loader {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #f4ecd6;
  background: linear-gradient(rgba(14, 28, 19, .4), rgba(5, 12, 8, .8)), url("public/posters/01.jpg") center / cover;
  transition: opacity .72s, filter .72s;
}
.loader::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, transparent 14%, rgba(4, 11, 7, .52) 82%); }
.loader > * { position: relative; }
.loader.ready { opacity: 0; filter: blur(8px); pointer-events: none; }
.loader strong { font-family: "MaShanZheng", cursive; font-size: 52px; font-weight: 400; letter-spacing: .08em; text-shadow: 0 3px 20px rgba(0, 0, 0, .5); }
.loader p { margin: 14px 0 18px; font-size: 11px; letter-spacing: .24em; color: rgba(244, 236, 214, .78); }
.loader-track { width: 52%; height: 1px; overflow: hidden; background: rgba(244, 236, 214, .22); }
.loader-track i { display: block; width: 0; height: 100%; background: #f4ecd6; box-shadow: 0 0 14px rgba(245, 235, 204, .65); transition: width .22s ease; }
.loader small { margin-top: 10px; font: 11px Georgia, serif; color: rgba(244, 236, 214, .68); }
.loader-brush { position: relative; width: 112px; height: 58px; margin-bottom: 18px; }
.loader-brush i { position: absolute; left: 50%; top: 50%; width: 48px; height: 1px; transform-origin: right center; background: linear-gradient(90deg, transparent, #f1ead7); animation: loader-wing 1.25s ease-in-out infinite; }
.loader-brush i:first-child { transform: translate(-100%, -50%) rotate(18deg); }
.loader-brush i:nth-child(2) { transform-origin: left center; background: linear-gradient(90deg, #f1ead7, transparent); animation-name: loader-wing-right; }
.loader-brush i:last-child { width: 62px; opacity: .25; transform: translate(-50%, 18px); animation: loader-ripple 1.7s ease-out infinite; }
@keyframes loader-wing { 50% { transform: translate(-100%, -50%) rotate(-14deg); } }
@keyframes loader-wing-right { 0%, 100% { transform: translate(0, -50%) rotate(-18deg); } 50% { transform: translate(0, -50%) rotate(14deg); } }
@keyframes loader-ripple { 0% { transform: translate(-50%, 18px) scaleX(.1); opacity: .45; } 100% { transform: translate(-50%, 18px) scaleX(1.8); opacity: 0; } }