/* CW-ARCADE — MAN-ON-FIRE LAYERED COMPOSITE
   "The Problem" section's centerpiece: three real artwork layers
   (IMAGES/ManOnFire → site/assets/images/man-on-fire/layer0{1,2,3}),
   pixel-aligned in one position:relative stage, with two independent
   "Doom fire" canvases (js/flame-wall.js, ported from
   Codepen_Repos/EachNewFlame — the same 8-bit cellular-automaton fire
   used to sit behind/in front of the old flattened photo) sandwiched
   between them:

     layer01 (background card, back)
       -> rear fire canvas   — the room itself burning behind him
     layer02 (man + desk cutout, transparent everywhere else)
       -> front fire canvas  — flame licking up in front of the desk
     layer03 (frame highlight, mostly transparent — just the glowing
              stroke that keeps the bezel crisp on top of both fires)

   layer02's real alpha cutout does the "fire behind him / fire in
   front of him" work for free: wherever the man/desk photo has no
   pixels, whatever is stacked below shows straight through. Both
   canvases render at a deliberately low internal resolution and are
   scaled back up via image-rendering:pixelated — the retro/8-bit look
   is a property of the simulation's own resolution, not a filter. */

.problem-section {
  position: relative;
  overflow: hidden;
}

.problem-photo {
  position: relative;
}

.man-on-fire {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 3400 / 2200;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}

.mof-layer {
  position: absolute;
  inset: 0;
  display: block;
  line-height: 0;
}

.mof-layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mof-fire {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  mix-blend-mode: screen;
  image-rendering: optimizeSpeed;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
}

/* Behind the man/desk cutout — a broad, atmospheric burn suggesting
   the whole room is alight. Masked so it fades before reaching the
   very top of the frame (calm dark headroom above the blaze) rather
   than filling the panel edge-to-edge. */
.mof-fire--rear {
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(to top, black 42%, transparent 76%);
  mask-image: linear-gradient(to top, black 42%, transparent 76%);
}

/* In front of the desk — denser near the bottom/foreground, thinning
   to scattered licks higher up so it reads as flame IN FRONT of him
   without ever fully obscuring his face (screen-blend can only add
   light, never darken, so it never can obscure him outright either). */
.mof-fire--front {
  opacity: 0.52;
  -webkit-mask-image: linear-gradient(to top, black 26%, transparent 56%);
  mask-image: linear-gradient(to top, black 26%, transparent 56%);
}

@media (prefers-reduced-motion: reduce) {
  .mof-fire {
    display: none;
  }
}