/* Phase Field — static authored frame + optional canvas overlay (Task 6). */

.phase-field {
  position: fixed;
  inset: 0;
  z-index: var(--z-phase-field);
  overflow: hidden;
  pointer-events: none;
  background: var(--color-canvas);
}

.phase-field *,
.phase-field *::before,
.phase-field *::after {
  pointer-events: none;
}

.phase-field__static {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.76;
}

/* Canvas stacks above authored SVG. No motion CSS. */
.phase-field__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Route atmosphere only — opacity / focal bias; no keyframes. */
.phase-field--home .phase-field__static {
  opacity: 0.78;
  object-position: 50% 42%;
}

.phase-field--services .phase-field__static {
  opacity: 0.7;
  object-position: 48% 40%;
}

.phase-field--contacts .phase-field__static {
  opacity: 0.66;
  object-position: 50% 50%;
}

/*
 * Non-home visibility: layout .section paints opaque --color-canvas and would
 * fully occlude the fixed Phase Field. Scoped under body.has-phase-field with
 * higher specificity (and loaded after layout.css) so authored SVG remains
 * visible in gutters/negative space. Nav/footer stay opaque via their own rules.
 * Alpha keeps graphite dominant for WCAG AA text; panels/forms stay opaque.
 */
body.has-phase-field .section {
  background: rgba(11, 14, 20, 0.78);
}

body.has-phase-field .section--surface {
  background: rgba(11, 14, 20, 0.78);
}

body.has-phase-field .section--cta {
  background: rgba(11, 14, 20, 0.78);
}