/* ===========================
   PAGES BACKGROUND (v5.3 — 5s Cinematic Fade)
   =========================== */

/* 1. Basis-Layout */
.wp-site-blocks,
.wp-site-blocks .wp-block-group {
  position: relative;
  z-index: 1;
}

/* 2. Transparenz für eingeloggte User */
body.logged-in .wp-site-blocks,
body.logged-in .wp-site-blocks .wp-block-group {
  background: transparent !important;
}

/* Body isolieren */
body { background: transparent !important; isolation: isolate; }

/* Fixer Vollflächen-Layer */
#luca-page-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  will-change: opacity;
  
  /* Startzustand: Unsichtbar */
  opacity: 0;
  
  /* 5 Sekunden Fade */
  transition: opacity 1s ease-in-out;
}

/* 
   ZÜNDUNG: Erst wenn JS die Klasse .bg-active hinzufügt,
   wird eingeblendet. Das erzwingt den Fade.
*/
body[data-bg="app"] #luca-page-bg.bg-active {
  opacity: 1;
}


/* 3. STANDARD HINTERGRUND (Concrete) */
body {
  background-color: #e0e0e0 !important; 
  background-image: url("https://app.luca1998s.com/wp-content/uploads/2025/10/concrete-bg.jpg") !important;
  background-position: center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* 4. APP MODUS (Transparenz für Content) */
body[data-bg="app"] .wp-site-blocks,
body[data-bg="app"] .wp-site-blocks .wp-block-group {
  background: transparent !important;
}

/* === HINTERGRUND-BILDER FÜR APP-MODUS === */

/* MOBILE */
body[data-bg="app"] #luca-page-bg {
  background: url("https://app.luca1998s.com/wp-content/uploads/2025/10/bg2.jpg")
              center/cover no-repeat;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  transform: scale(1.06);
}

/* DESKTOP */
@media (min-width: 769px) {
  body[data-bg="app"] #luca-page-bg {
    background-image: url("https://app.luca1998s.com/wp-content/uploads/2025/10/bg6-4.jpg");
    filter: none;
    -webkit-filter: none;
    transform: none;
    background-attachment: fixed;
  }
}