/* Ironwhistle Blog — Schieferblau, Nebelschlieren, goldene Teilchenspuren.
   Isoliert auf dem Blog-Theme installieren, NICHT auf der Hauptseite.
   Der Effekt liegt hinter den vorhandenen Theme-Inhalten. */
html { background: #515e69; }
body {
  min-height: 100vh;
  background: transparent !important;
  isolation: isolate;
}
#iw-atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  background:
    radial-gradient(ellipse 88% 55% at 54% 22%, rgba(159,180,195,.24), transparent 70%),
    radial-gradient(ellipse 70% 66% at 8% 86%, rgba(92,120,144,.22), transparent 71%),
    linear-gradient(125deg, #525d67 0%, #657481 48%, #4f5b66 100%);
}
#iw-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(35,46,56,.12), transparent 38%, transparent 65%,rgba(38,48,59,.15));
}
#iw-atmosphere .iw-mist {
  position: absolute;
  width: 150vw;
  height: 105vh;
  left: -25vw;
  top: -8vh;
  transform: translate3d(0,0,0) rotate(-9deg);
  will-change: transform;
  mix-blend-mode: screen;
}
#iw-atmosphere .iw-mist-a {
  opacity: .62;
  background:
    radial-gradient(ellipse 46% 15% at 17% 29%, rgba(138,165,186,.29), transparent 81%),
    radial-gradient(ellipse 48% 19% at 63% 60%, rgba(115,153,181,.24), transparent 79%),
    radial-gradient(ellipse 57% 12% at 59% 41%, rgba(141,165,188,.23), transparent 78%);
  filter: blur(29px);
  animation: iw-drift-one 54s ease-in-out infinite alternate;
}
#iw-atmosphere .iw-mist-b {
  opacity: .45;
  background:
    radial-gradient(ellipse 53% 13% at 63% 19%, rgba(122,161,191,.26), transparent 80%),
    radial-gradient(ellipse 42% 14% at 33% 68%, rgba(122,147,173,.28), transparent 82%),
    radial-gradient(ellipse 63% 11% at 79% 80%, rgba(108,139,169,.25), transparent 81%);
  filter: blur(36px);
  animation: iw-drift-two 66s ease-in-out infinite alternate;
}
#iw-atmosphere .iw-mist-c {
  opacity: .33;
  background:
    radial-gradient(ellipse 52% 14% at 36% 50%, rgba(160,184,197,.33), transparent 86%),
    radial-gradient(ellipse 40% 9% at 83% 38%, rgba(149,182,200,.32), transparent 84%);
  filter: blur(49px);
  animation: iw-drift-three 42s ease-in-out infinite alternate;
}
@keyframes iw-drift-one {
  from { transform: translate3d(-7vw,2vh,0) rotate(-11deg) scale(1.08); }
  to   { transform: translate3d(9vw,-5vh,0) rotate(-3deg) scale(1.19); }
}
@keyframes iw-drift-two {
  from { transform: translate3d(11vw,-7vh,0) rotate(14deg) scale(1.14); }
  to   { transform: translate3d(-12vw,6vh,0) rotate(6deg) scale(1.01); }
}
@keyframes iw-drift-three {
  from { transform: translate3d(-4vw,10vh,0) rotate(-5deg) scale(1); }
  to   { transform: translate3d(12vw,-10vh,0) rotate(-13deg) scale(1.15); }
}
#iw-golden-stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  #iw-atmosphere .iw-mist { animation: none !important; will-change: auto; }
}

/* OPTIONAL: Gib einem Text-Container die Klasse "iw-reading-panel", um
   den dunklen Lesekasten aus der Vorschau zu übernehmen. */
.iw-reading-panel {
  background: rgba(78,84,92,.87);
  border: 1px solid rgba(227,231,237,.20);
  box-shadow: 0 15px 70px rgba(18,27,36,.15);
  backdrop-filter: blur(7px);
  color: #f0f1f3;
}

/* =============================================================
   IRONWHISTLE – festes Motiv unten links HINTER dem Nebel
   Bilddatei bitte nach bl-themes/DEIN-THEME/img/nebelmotiv.webp legen.
   Keine HTML- oder JS-Aenderung notwendig.
   ============================================================= */
#iw-atmosphere::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: min(40vw, 540px);
    height: min(73vh, 740px);
    background-image: url("../img/nebelmotiv.webp");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: contain;
    opacity: 0.78;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 100%);
    z-index: 0;
}

/* Erst das Bild, danach der wandernde Nebel, zuletzt die Goldspuren. */
#iw-atmosphere::after { z-index: 0; }
#iw-atmosphere .iw-mist { z-index: 1; }
#iw-golden-stars { z-index: 2; }

@media (max-width: 700px) {
    #iw-atmosphere::before {
        width: 66vw;
        height: 48vh;
        opacity: 0.55;
    }
}
/* IRONWHISTLE: Kontrastreichere Nebelschlieren.
   Am ENDE der vorhandenen iw-atmosphere.css ergaenzen.
   Die Portrait-Ebene (::before) bleibt unangetastet. */
#iw-atmosphere .iw-mist-a {
  opacity: .82;
  mix-blend-mode: normal;
  background:
    radial-gradient(ellipse 40% 13% at 24% 30%, rgba(191,211,222,.40), transparent 77%),
    radial-gradient(ellipse 44% 18% at 62% 57%, rgba(36,53,72,.31), transparent 81%),
    radial-gradient(ellipse 50% 11% at 68% 39%, rgba(169,195,211,.34), transparent 78%);
  filter: blur(25px);
}
#iw-atmosphere .iw-mist-b {
  opacity: .70;
  mix-blend-mode: normal;
  background:
    radial-gradient(ellipse 48% 12% at 67% 19%, rgba(37,56,74,.34), transparent 81%),
    radial-gradient(ellipse 40% 14% at 34% 69%, rgba(183,204,215,.30), transparent 78%),
    radial-gradient(ellipse 59% 10% at 77% 79%, rgba(43,61,77,.29), transparent 80%);
  filter: blur(29px);
}
#iw-atmosphere .iw-mist-c {
  opacity: .57;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 46% 13% at 37% 49%, rgba(195,217,230,.37), transparent 80%),
    radial-gradient(ellipse 39% 9% at 83% 38%, rgba(174,198,215,.32), transparent 78%);
  filter: blur(35px);
}