/* Logo watermark system — brand atmosphere layer.
   The mark is a transparent PNG (gold + navy). On the dark theme `screen`
   blend lets the navy drop into the background and keeps the gold as a faint
   glow; the light theme uses `multiply` instead. Opacity stays low so body
   text is never affected. */

.logo-watermark {
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
  opacity: 0.055;
  mix-blend-mode: screen;
}

/* Hero area — large central mark behind the headline */
.logo-watermark.hero-bg {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 860px);
  height: min(92vw, 860px);
  background-image: url('../msg_logo.png');
  animation: pulse-logo 14s infinite alternate ease-in-out;
}

/* Footer — corner mark, rotated and kept inside the clipped area */
.logo-watermark.footer-bg {
  bottom: -70px;
  right: -70px;
  width: 340px;
  height: 340px;
  transform: rotate(-18deg);
  background-image: url('../msg_logo.png');
  opacity: 0.035;
}

/* Side decoration for wide feature sections */
.logo-watermark.side-bg {
  top: 15%;
  left: -12%;
  width: 460px;
  height: 460px;
  transform: rotate(14deg);
  background-image: url('../msg_logo.png');
  opacity: 0.03;
}

@keyframes pulse-logo {
  0%   { transform: translate(-50%, -50%) scale(1);    opacity: 0.045; }
  100% { transform: translate(-50%, -50%) scale(1.04); opacity: 0.065; }
}

/* Containers that host a watermark must clip the overflow */
.hero, .site-footer, .features, .history-page {
  position: relative;
  overflow: hidden;
}

/* Light theme: darken the mark instead of screening it */
[data-theme="light"] .logo-watermark {
  mix-blend-mode: multiply;
  opacity: 0.05;
}

[data-theme="light"] .logo-watermark.footer-bg { opacity: 0.04; }

/* Respect reduced-motion: the mark must not pulse */
@media (prefers-reduced-motion: reduce) {
  .logo-watermark.hero-bg { animation: none; }
}