/* ═══════════════════════════════════════════════════════════════════════════
   ENW.GG wall: the ENW mark in the header, and three drifting smoke plates
   screen-blended over the graded jailbreak map behind the header band.
   Loaded on every page after the page's own <style>. Paths are absolute
   because the site sits at the docroot on dev and live.
   The map shot itself is picked hourly by /assets/wall.js, which sets --wall
   and --smoke-gain on <html>. Design notes: enw-local/README.md (not deployed).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── ENW mark (replaces the ENW.GG text logo) ── */
.nav-logo .nm-mark {
    display: block; height: 40px; width: auto; fill: #fff;
    filter: drop-shadow(0 0 10px rgba(255,255,255,.55)) drop-shadow(0 1px 2px rgba(0,0,0,.6));
}

/* ── smoke drift ──
   s1 wisps   : long ridged filaments
   s2 billows : big soft rolling volumes
   s3 haze    : fine grain that gives the other two texture
   The outer element carries the opacity (site default x per-shot gain from
   maps.json); the inner .plate drifts by whole tiles so the loop is seamless,
   and "breathes" in opacity. Bottom mask thins the smoke into the page ground. */
.wall-smoke {
    position: absolute; inset: 0; overflow: hidden; pointer-events: none;
    mix-blend-mode: screen;
    opacity: calc(var(--smoke, .22) * var(--smoke-gain, 1));
    -webkit-mask-image: linear-gradient(to bottom, #000 25%, rgba(0,0,0,.6) 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 25%, rgba(0,0,0,.6) 60%, transparent 100%);
}
.wall-smoke .plate { position: absolute; inset: -30%; will-change: transform, opacity; }
.wall-smoke.s1 .plate {
    background: url("/assets/fx/smoke1.png") repeat 0 0 / 1800px 1800px;
    animation: wall-drift-1 260s linear infinite, wall-breathe 41s ease-in-out infinite alternate;
}
.wall-smoke.s2 .plate {
    background: url("/assets/fx/smoke2.png") repeat 0 0 / 2600px 2600px;
    opacity: .85;
    animation: wall-drift-2 480s linear infinite, wall-breathe 67s ease-in-out infinite alternate-reverse;
}
.wall-smoke.s3 .plate {
    background: url("/assets/fx/smoke3.png") repeat 0 0 / 1200px 1200px;
    opacity: .7;
    animation: wall-drift-3 150s linear infinite, wall-breathe 29s ease-in-out infinite alternate;
}
/* drift distances are exact multiples of each plate's background-size: that is the seamless loop */
@keyframes wall-drift-1 { from { transform: translate3d(0,0,0); } to { transform: translate3d(1800px, 0, 0); } }
@keyframes wall-drift-2 { from { transform: translate3d(0,0,0); } to { transform: translate3d(-2600px, -2600px, 0); } }
@keyframes wall-drift-3 { from { transform: translate3d(0,0,0); } to { transform: translate3d(1200px, -1200px, 0); } }
@keyframes wall-breathe { from { opacity: .55; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .wall-smoke .plate { animation: none; }
}
