/* SKYEFIRE — Phoenix energy-field layer
   Container for the Three.js canvas created by js/phoenix-field.js.
   MUST be absolutely positioned so it does NOT participate in the hero's
   flex layout (otherwise it pushes .hero__content off-center — esp. on
   mobile). Sits above the video/scrim (z1) and below the centered
   content (z3). Fully non-interactive. Pre-reserved to 100%/100% so the
   renderer can own sizing with zero layout shift (CLS). */
.phoenix-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  /* fade in when the JS marks it ready */
  opacity: 0;
  transition: opacity 1s ease;
}

.phoenix-field.is-ready {
  opacity: 1;
}

/* The canvas element the renderer appends — CSS owns its box (100%/100%),
   the WebGL renderer is told not to touch canvas CSS (setSize(..,false)). */
.phoenix-field canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  pointer-events: none;
}

/* Respect reduced motion: keep the layer static/hidden so nothing animates. */
@media (prefers-reduced-motion: reduce) {
  .phoenix-field {
    opacity: 0.35;
    transition: none;
  }
}