/* Molten Media: site-wide ambient Record Red, 21 October 2026.
   Four local background layers, not a foreground overlay. Local isolation keeps
   them above each section's opaque base and below all text, photos and controls.
   Header/skip-link positioning, the original flame and all content are untouched. */
.has-ambient-red { position: relative; isolation: isolate; }
.has-ambient-red > .site-embers {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  pointer-events: none; user-select: none; opacity: .62;
}
.hero > .site-embers { opacity: .88; }
.site-footer > .site-embers { opacity: .48; }
.site-embers::before, .site-embers::after, .site-embers .ember {
  content: ""; position: absolute; display: block; pointer-events: none;
  border-radius: 50%; animation-play-state: paused;
}
/* Smooth radial falloffs provide softness without large animated blur filters. */
.site-embers::before {
  width: min(58vw, 740px); height: min(58vw, 740px); min-width: 260px; min-height: 260px;
  left: -16%; top: 9%; opacity: .38;
  background: radial-gradient(ellipse, rgba(212,22,45,.63) 0%, rgba(153,14,34,.26) 32%, rgba(108,9,27,.08) 56%, transparent 74%);
  animation: mm-red-drift-left 31s ease-in-out infinite alternate;
}
.site-embers::after {
  width: min(50vw, 670px); height: min(50vw, 670px); min-width: 240px; min-height: 240px;
  right: -15%; top: 62%; opacity: .32;
  background: radial-gradient(ellipse, rgba(205,20,45,.58), rgba(139,12,32,.19) 39%, transparent 74%);
  animation: mm-red-drift-right 37s ease-in-out infinite alternate;
}
.site-embers .ember-one {
  width: min(32vw, 440px); height: min(32vw, 440px); min-width: 140px; min-height: 140px;
  left: 27%; top: 48%; opacity: .27;
  background: radial-gradient(ellipse, rgba(194,21,48,.42), rgba(126,10,30,.12) 40%, transparent 72%);
  animation: mm-red-drift-centre 27s ease-in-out infinite alternate;
}
.site-embers .ember-two {
  width: min(32vw, 440px); height: min(32vw, 440px); min-width: 140px; min-height: 140px;
  right: 8%; top: 17%; opacity: .27;
  background: radial-gradient(ellipse, rgba(204,25,47,.45), rgba(132,12,29,.12) 40%, transparent 74%);
  animation: mm-red-drift-upper 34s ease-in-out infinite alternate;
}
.site-embers .ember-three, .site-embers .ember-four {
  width: 3px; height: 3px; background: rgba(236,39,61,.55); opacity: .3;
  box-shadow: 0 0 9px 2px rgba(225,28,51,.26), 0 0 24px 5px rgba(160,16,35,.14);
}
.site-embers .ember-three { left: 12%; top: 37%; animation: mm-red-fleck 17s ease-in-out infinite alternate; }
.site-embers .ember-four { right: 10%; top: 76%; animation: mm-red-fleck 23s ease-in-out -8s infinite alternate-reverse; }
.site-embers[data-ambient-active="false"]::before,
.site-embers[data-ambient-active="false"]::after,
.site-embers[data-ambient-active="false"] .ember { animation-play-state: paused; }
.site-embers[data-ambient-active="true"]::before,
.site-embers[data-ambient-active="true"]::after,
.site-embers[data-ambient-active="true"] .ember { animation-play-state: running; }
.work .site-embers::before { animation-delay: -11s; }
.work .site-embers::after { animation-delay: -19s; }
.approach .site-embers::before { animation-delay: -21s; }
.approach .site-embers::after { animation-delay: -9s; }
.site-footer .site-embers::before { animation-delay: -15s; }
@keyframes mm-red-drift-left {
  0% { transform: translate3d(0,0,0) scale(.96); opacity:.31; }
  50% { opacity:.48; }
  100% { transform: translate3d(9vw,5vh,0) scale(1.12); opacity:.29; }
}
@keyframes mm-red-drift-right {
  0% { transform: translate3d(0,0,0) scale(1); opacity:.26; }
  55% { opacity:.40; }
  100% { transform: translate3d(-8vw,-7vh,0) scale(1.08); opacity:.23; }
}
@keyframes mm-red-drift-centre {
  from { transform: translate3d(0,0,0) scale(.95); opacity:.18; }
  to { transform: translate3d(-5vw,7vh,0) scale(1.12); opacity:.31; }
}
@keyframes mm-red-drift-upper {
  from { transform: translate3d(0,0,0); opacity:.2; }
  to { transform: translate3d(4vw,-4vh,0) scale(.94); opacity:.33; }
}
@keyframes mm-red-fleck {
  0% { transform: translate3d(0,0,0); opacity:.12; }
  45% { opacity:.34; }
  100% { transform: translate3d(1.6vw,-3vh,0); opacity:.16; }
}
/* Keep the existing Pause motion control authoritative. */
body.motion-paused .site-embers::before,
body.motion-paused .site-embers::after,
body.motion-paused .site-embers .ember { animation-play-state: paused !important; }
@media (max-width:760px) {
  .has-ambient-red > .site-embers { opacity:.4; }
  .hero > .site-embers { opacity:.58; }
  .site-embers::before { width:80vw; height:80vw; left:-33%; }
  .site-embers::after { width:74vw; height:74vw; right:-33%; }
  .site-embers .ember-one, .site-embers .ember-two { display:none; }
  .site-embers .ember-three, .site-embers .ember-four { width:2px; height:2px; }
}
@media (prefers-reduced-motion:reduce) {
  .has-ambient-red > .site-embers { opacity:.25; }
  .site-embers::before, .site-embers::after, .site-embers .ember { animation:none !important; }
}
@media (prefers-reduced-transparency:reduce), (forced-colors:active), print {
  .has-ambient-red > .site-embers { display:none; }
}

/* Protect the approved flame from the ambient-background treatment.
   The ambient layers remain BELOW the hero art, never in its opacity/filter chain.
   WebGL renderer, texture, colour, emission and exposure are unchanged. */
.hero.has-ambient-red > .hero-scene {
  z-index: 1; opacity: 1; filter: none; mix-blend-mode: normal;
}
.hero.has-ambient-red::after { z-index: 0; }
.hero.has-ambient-red #molten-canvas { filter: none; mix-blend-mode: normal; }
.hero.has-ambient-red .scene-ready #molten-canvas { opacity: 1; }
/* The previous backup image was intentionally only 35% opaque.
   Show the ORIGINAL backup at full brightness on non-WebGL devices, instead
   of making the art look dim or as if it sits underneath the red ambience. */
.hero.has-ambient-red .hero-scene:not(.scene-ready) .scene-fallback { opacity: 1; }
.hero.has-ambient-red .scene-ready .scene-fallback { opacity: 0; }