/* css/packs/d.css | Source: MonarqueXD_v95L_GUILDORIGINS.html lignes 55298-55509 (id="mx-fx-pack-d-styles") */
/* ============================================================ */
/*  PACK D — LOGIN HORROR (sang permanent + silhouettes + glitch) */
/*  Tout GPU, scope #login-screen, désactivable reduced-motion   */
/* ============================================================ */

/* === GLITCH global périodique sur tout le formulaire login === */
@keyframes mx-login-glitch {
  0%, 91%, 100% { transform: translate(0, 0); filter: none; }
  92% { transform: translate(-2px, 1px); filter: hue-rotate(20deg) saturate(1.3); }
  93% { transform: translate(3px, -1px); filter: hue-rotate(-15deg) brightness(1.25); }
  94% { transform: translate(-1px, -2px); filter: hue-rotate(40deg); }
  95% { transform: translate(2px, 1px); filter: invert(.04) brightness(1.1); }
  96% { transform: translate(0, 0); filter: none; }
}
body.mx-on-login #login-screen .lx-wrap {
  animation: mx-login-glitch 5.5s steps(1) infinite;
  will-change: transform, filter;
}
@keyframes mx-login-rgb-shift {
  0%, 96%, 100% { text-shadow: inherit; }
  97% { text-shadow: 2px 0 #ff003c, -2px 0 #00f0ff; }
  98% { text-shadow: -2px 1px #ff003c, 2px -1px #00f0ff; }
  99% { text-shadow: 1px 0 #ff003c, -1px 0 #00f0ff; }
}
body.mx-on-login #login-screen .lx-tab,
body.mx-on-login #login-screen label,
body.mx-on-login #login-screen .lx-sub {
  animation: mx-login-rgb-shift 4.2s steps(1) infinite;
}

/* === SCANLINES horror plus marquées === */
body.mx-on-login #login-screen .mx-horror-scanlines {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.18) 2px 3px),
    repeating-linear-gradient(0deg, rgba(255,0,30,0) 0 100px, rgba(255,0,30,.03) 100px 102px);
  mix-blend-mode: multiply;
  animation: mx-scan-roll 7s linear infinite;
}
@keyframes mx-scan-roll {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 0 100vh, 0 100vh; }
}

/* === COULURES DE SANG permanentes en haut d'écran === */
.mx-blood-drip-top {
  position: fixed;
  top: 0;
  width: var(--w, 8px);
  background: linear-gradient(180deg, #4a0007 0%, #8a000c 30%, #c00018 60%, #ff1828 100%);
  border-radius: 0 0 50% 50% / 0 0 30% 30%;
  filter: drop-shadow(0 0 6px rgba(255, 0, 30, .55));
  pointer-events: none;
  z-index: 3;
  transform-origin: top center;
  height: 0;
  animation: mx-drip-grow var(--dur, 8s) ease-in-out var(--delay, 0s) infinite;
  will-change: height, opacity;
}
.mx-blood-drip-top::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--w, 8px) * 1.4);
  height: calc(var(--w, 8px) * 1.4);
  background: radial-gradient(circle, #ff1828 0%, #8a000c 60%, transparent 80%);
  border-radius: 50%;
  filter: drop-shadow(0 0 4px #ff0020);
}
@keyframes mx-drip-grow {
  0%   { height: 0;   opacity: 0; }
  10%  { opacity: 1; }
  60%  { height: var(--maxh, 80px); opacity: 1; }
  85%  { height: var(--maxh, 80px); opacity: 1; }
  92%  { height: calc(var(--maxh, 80px) + 20px); opacity: .8; }
  100% { height: calc(var(--maxh, 80px) + 30px); opacity: 0; }
}

/* === Filet de sang qui coule du titre MONARQUE === */
#lx-login-title::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, #ff1424 0%, #b00010 60%, #4a0007 100%);
  filter: drop-shadow(0 0 6px rgba(255, 0, 30, .8));
  border-radius: 0 0 50% 50%;
  animation: mx-blood-trickle 6.5s ease-in-out infinite;
  z-index: 4;
  pointer-events: none;
}
#lx-login-title::after {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(100% + 60px);
  transform: translateX(-50%) scale(0);
  width: 14px;
  height: 14px;
  background: radial-gradient(circle, #ff1828 0%, #8a000c 60%, transparent 80%);
  border-radius: 50%;
  filter: drop-shadow(0 0 6px #ff0020);
  animation: mx-blood-drop-pulse 6.5s ease-in-out infinite;
  z-index: 4;
  pointer-events: none;
}
@keyframes mx-blood-trickle {
  0%, 25% { height: 0; opacity: 0; }
  35%     { height: 18px; opacity: 1; }
  60%     { height: 70px; opacity: 1; }
  85%     { height: 110px; opacity: .9; }
  95%     { height: 130px; opacity: .5; }
  100%    { height: 130px; opacity: 0; }
}
@keyframes mx-blood-drop-pulse {
  0%, 60% { transform: translateX(-50%) scale(0); opacity: 0; }
  75%     { transform: translateX(-50%) scale(1.2); opacity: 1; }
  90%     { transform: translateX(-50%) scale(1) translateY(20px); opacity: .8; }
  100%    { transform: translateX(-50%) scale(.8) translateY(40px); opacity: 0; }
}

/* === SHADOW FIGURES — silhouettes en fond === */
.mx-shadow-fig {
  position: fixed;
  bottom: 0;
  width: var(--w, 80px);
  height: var(--h, 200px);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 24px rgba(180, 0, 0, .25)) blur(.4px);
  animation: mx-fig-haunt var(--dur, 14s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  will-change: opacity, transform;
}
.mx-shadow-fig svg {
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes mx-fig-haunt {
  0%, 100% { opacity: 0; transform: translateX(0) scale(1); }
  10%      { opacity: .25; }
  30%      { opacity: .45; transform: translateX(-3px) scale(1.01); }
  55%      { opacity: .55; transform: translateX(2px) scale(1.02); }
  80%      { opacity: .35; transform: translateX(-2px) scale(1); }
  92%      { opacity: .15; }
}
.mx-fig-eye {
  fill: #ff0020;
  filter: drop-shadow(0 0 5px #ff0020) drop-shadow(0 0 2px #fff);
  animation: mx-eye-blink 4.2s steps(1) infinite;
  animation-delay: var(--blink-delay, 0s);
  transform-origin: center;
}
@keyframes mx-eye-blink {
  0%, 92%, 100% { opacity: 1; }
  93%, 95%      { opacity: .05; }
  94%           { opacity: 1; }
  96%           { opacity: 1; }
}
@keyframes mx-eye-pulse {
  0%, 100% { filter: drop-shadow(0 0 5px #ff0020) drop-shadow(0 0 2px #fff); }
  50%      { filter: drop-shadow(0 0 12px #ff0020) drop-shadow(0 0 6px #ff5050); }
}
.mx-shadow-fig.intense .mx-fig-eye {
  animation: mx-eye-blink 3.5s steps(1) infinite, mx-eye-pulse 2.4s ease-in-out infinite;
}

/* === Vignette sang permanente sur login === */
body.mx-on-login #login-screen .mx-horror-vignette {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  box-shadow:
    inset 0 0 180px 60px rgba(80, 0, 0, .55),
    inset 0 0 320px 120px rgba(140, 0, 0, .35);
  animation: mx-vignette-pulse 4s ease-in-out infinite;
  mix-blend-mode: multiply;
}
@keyframes mx-vignette-pulse {
  0%, 100% { opacity: .85; }
  50%      { opacity: 1; }
}

/* === Reduced motion override === */
@media (prefers-reduced-motion: reduce) {
  body.mx-on-login #login-screen .lx-wrap,
  body.mx-on-login #login-screen .lx-tab,
  body.mx-on-login #login-screen label,
  body.mx-on-login #login-screen .lx-sub,
  body.mx-on-login #login-screen .mx-horror-scanlines,
  .mx-blood-drip-top, #lx-login-title::before, #lx-login-title::after,
  .mx-shadow-fig, .mx-fig-eye,
  body.mx-on-login #login-screen .mx-horror-vignette {
    animation: none !important;
  }
  .mx-blood-drip-top, .mx-shadow-fig { display: none; }
  body.mx-on-login #login-screen .mx-horror-vignette { opacity: .5; }
}