/* Final stator field (Struon, 04-10-2026). Pairs with stator-field.js.
   The host section gets .has-stator-field (or its own position + isolation);
   the field is its first child and paints behind the content at z-index -1. */
.has-stator-field{position:relative;isolation:isolate;overflow:hidden;background:var(--fnl-delft,#131E29)}
.stator-field{
 --sf-glow:232 161 90;
 --sf-hole:246 211 160;
 --sf-x:76%;
 position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict;
 /* Without scripts or before the first frame: a calm ground with the light already in place. */
 background:
  radial-gradient(48% 62% at var(--sf-x) 56%,rgb(var(--sf-glow) / .10),transparent 70%),
  radial-gradient(70% 90% at var(--sf-x) 60%,rgb(5 9 14 / .55),transparent 72%),
  var(--fnl-delft,#131E29);
}
.stator-field[data-tone="cool"]{--sf-glow:191 214 242;--sf-hole:226 236 250}
.stator-field[data-side="left"]{--sf-x:24%}
.stator-field canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.4s var(--ease-out,cubic-bezier(.22,1,.36,1))}
.stator-field.is-live canvas{opacity:1}
.stator-field.is-still canvas,.motion-reduced .stator-field canvas{transition:none}

/* No WebGL or a lost context: the same drilled wall as a static CSS study, receding to the centre. */
.stator-field.is-static{perspective:620px;perspective-origin:50% 50%}
.stator-field-static{
 --sf-m:linear-gradient(270deg,#000 2%,rgb(0 0 0 / .45) 22%,transparent 52%),linear-gradient(180deg,transparent 30%,#000 44%,#000 56%,transparent 70%);
 position:absolute;right:0;top:-100%;width:240%;height:300%;transform-origin:100% 50%;transform:rotateY(-76deg);
 background-image:
  radial-gradient(circle 13.6px at 20px 18.28px,rgb(var(--sf-hole)) 58%,transparent 100%),
  radial-gradient(circle 13.6px at 20px 18.28px,rgb(var(--sf-hole)) 58%,transparent 100%);
 background-size:40px 73.12px;background-position:0 0,20px 36.56px;
 -webkit-mask-image:var(--sf-m);-webkit-mask-composite:source-in;mask-image:var(--sf-m);mask-composite:intersect;
 opacity:.5;
}
.stator-field[data-side="left"] .stator-field-static{right:auto;left:0;transform-origin:0 50%;transform:rotateY(76deg);--sf-m:linear-gradient(90deg,#000 2%,rgb(0 0 0 / .45) 22%,transparent 52%),linear-gradient(180deg,transparent 30%,#000 44%,#000 56%,transparent 70%)}
@media (max-width:760px){.stator-field{--sf-x:70%}.stator-field-static{opacity:.3}}
@media (prefers-reduced-motion:reduce){.stator-field canvas{transition:none}}