/* ============================================================================
   bg3d.css — 3D WEBGL BACKGROUND CANVAS POSITIONING (additive, isolated)
   Consuleria.org — Sistema Visivo & Motion v1
   Positions the rotating wireframe icosphere canvas (#cons-bg3d) as a full-bleed
   FIXED layer that sits BEHIND all page content and above the parallax blobs.
   The canvas itself is created at runtime by bg3d.js (never edits index.html).
   Rollback: remove this <link> + the bg3d.js <script>. Nothing here is required
   for the page to function. If WebGL/Three.js is unavailable, bg3d.js creates
   no canvas at all and this rule simply matches nothing (graceful no-op).
   ----------------------------------------------------------------------------
   Z-INDEX RATIONALE (per audit safe_canvas_strategy):
   - .parallax blobs ......... z-index: 0
   - #cons-bg3d (this) ....... z-index: 1   <-- icosphere sits here
   - #webglbg constellation .. z-index: 2
   - #glow ................... z-index: 4
   - #grain .................. z-index: 5
   - .header / UI / content .. z-index: 40+
   The icosphere coexists as a complementary depth layer behind the existing
   2D constellation, glow and grain, which blend on top of it.
   ============================================================================ */

#cons-bg3d{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  /* Sit ABOVE the .parallax blobs (z:0) and the #webglbg constellation (z:2),
     but below #glow (z:4) / UI. The icosphere is the hero centerpiece, so it
     reads in front of the sparse constellation. Never intercept clicks/scroll. */
  z-index:1;
  pointer-events:none;
  /* Visible background layer. The particle form is offset to the RIGHT in JS (like
     the reference), so the left-column hero text stays clear; opacity kept moderate
     so anything it overlaps stays readable. JS fades this to 0 past the hero. */
  opacity:.62;
  /* Smooth the scroll-driven fade handled in JS (opacity is set inline). */
  transition:opacity .4s ease;
  /* Hint the compositor; the canvas paints on its own layer. */
  will-change:opacity;
  /* Defensive: never create a scrollbar or capture overflow. */
  contain:strict;
  background:transparent;
}

/* Reduced motion: bg3d.js already renders a SINGLE static frame (no rAF loop).
   We keep the canvas visible but dim it a touch so the static frame is subtle. */
@media (prefers-reduced-motion: reduce){
  #cons-bg3d{opacity:.5;transition:none;will-change:auto}
}

/* Small screens: lower opacity further so hero/body text stays crisply readable
   (AA contrast over the icosphere edges). */
@media (max-width:600px){
  #cons-bg3d{opacity:.5}
}

/* Coarse pointers (touch): no mouse parallax anyway; keep it calm + light. */
@media (pointer:coarse){
  #cons-bg3d{opacity:.55}
}

/* The #cons-bg3d canvas is a body-level FIXED layer at z-index:1. The hero uses
   isolation:isolate, so its whole subtree would paint BELOW the canvas and the
   icosphere would cover the hero text. Promote the content layers to positioned
   stacking contexts ABOVE the canvas so text/cards stay fully readable while the
   sphere glows behind them. (Header z:40 / cmdk z:80 / arcade stay above.) */
.hero{position:relative;z-index:2}
main, .footer, .section{position:relative;z-index:2}