/* destination: /home/ale/p2a/static/css/local.css */

/* Full opacity with priority */
.opacity-100 { opacity: 1 !important; }

/* ===== SINGLE GLOBAL BACKGROUND SYSTEM (no extra HTML needed) =====
   - Works everywhere because local.css is loaded in base.html
   - Uses body::before (image) + body::after (overlay)
   - Avoids duplicate IDs (#fixed-bg / #overlay-bg)
*/

/* Page backdrop fallback */
html {
  min-height: 100%;
  background: #050711; /* fallback if image fails */
}

/* Ensure body can host fixed pseudo layers and doesn't paint a solid bg */
body {
  min-height: 100vh;
  position: relative;
  isolation: isolate;                 /* safe stacking context */
  background: transparent !important; /* overrides Tailwind bg-black */
}

/* Background image layer */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  will-change: transform;
  transform: translateZ(0); /* GPU hint */

  background-image: url("/static/img/about50.jpg"); /* GLOBAL default */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Overlay (darken for contrast) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background: rgba(0, 0, 0, 0.18); /* tweak opacity */
  transition: background 0.7s cubic-bezier(.4,0,.2,1);
}

/* Optional: neutralise common wrappers that might paint an opaque background */
main, #main, .page, .container {
  background: transparent;
}