/* ═══════════════════════════════════════════════════════
   MALÖRT MODE — Black Metal CSS Override Layer
   Applied via body.malort-mode class
   ═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');

@keyframes malort-flicker {
  0%   { opacity: 1; }
  4%   { opacity: 0.03; }
  5%   { opacity: 1; }
  14%  { opacity: 1; }
  15%  { opacity: 0.22; }
  16%  { opacity: 1; }
  44%  { opacity: 1; }
  45%  { opacity: 0; }
  46%  { opacity: 1; }
  64%  { opacity: 1; }
  65%  { opacity: 0.1; }
  67%  { opacity: 1; }
  89%  { opacity: 1; }
  90%  { opacity: 0.03; }
  92%  { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes malort-btn-glow {
  0%, 100% { box-shadow: 0 0 6px #fff, 0 0 14px #fff; opacity: 1; }
  18%       { box-shadow: 0 0 2px #fff; opacity: 0.4; }
  19%       { box-shadow: 0 0 18px #fff, 0 0 36px #fff; opacity: 1; }
  54%       { box-shadow: 0 0 6px #fff; opacity: 1; }
  55%       { opacity: 0.15; box-shadow: none; }
  56%       { box-shadow: 0 0 22px #fff, 0 0 44px #fff; opacity: 1; }
}

body.malort-mode {
  cursor: crosshair !important;
}

body.malort-mode * {
  font-family: 'UnifrakturMaguntia', cursive !important;
  color: #ffffff !important;
  background-color: #000000 !important;
  border-color: #333333 !important;
  text-transform: uppercase !important;
}

body.malort-mode h1 {
  font-size: clamp(64px, 9vw, 110px) !important;
  line-height: 0.4 !important;
  letter-spacing: -0.07em !important;
  animation: malort-flicker 3.2s infinite !important;
}

body.malort-mode h2 {
  font-size: 72px !important;
  line-height: 0.4 !important;
  letter-spacing: -0.06em !important;
  animation: malort-flicker 2.8s infinite !important;
}

body.malort-mode h3 {
  font-size: 60px !important;
  line-height: 0.4 !important;
  letter-spacing: -0.06em !important;
  animation: malort-flicker 3.8s 0.4s infinite !important;
}

body.malort-mode p,
body.malort-mode div {
  line-height: 0.6 !important;
  letter-spacing: -0.04em !important;
  word-break: break-all !important;
}

body.malort-mode span {
  letter-spacing: -0.03em !important;
}

body.malort-mode a {
  border: 1.5px solid #ffffff !important;
  padding: 4px 14px !important;
  letter-spacing: 0.26em !important;
  text-decoration: none !important;
  word-break: normal !important;
  display: inline-block !important;
  transition: transform 0.07s ease, background-color 0.07s ease !important;
}

body.malort-mode a:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
  transform: rotate(-3deg) scale(1.06) !important;
}

body.malort-mode img {
  filter: grayscale(1) contrast(2) brightness(0.3) !important;
  opacity: 0.65 !important;
}

body.malort-mode svg {
  filter: brightness(0) invert(1) !important;
}

/* The toggle button stays readable in normal font */
body.malort-mode .bto-nav__malort-btn {
  border: 1.5px solid #ffffff !important;
  background-color: #000000 !important;
  color: #ffffff !important;
  animation: malort-btn-glow 1.8s infinite !important;
  letter-spacing: 0.18em !important;
  word-break: normal !important;
  font-family: 'Montserrat', sans-serif !important;
  text-transform: none !important;
}

/* Noise overlay */
.bto-malort-noise {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.15;
}
body.malort-mode .bto-malort-noise {
  display: block;
}