/* BCE 3D scene layers (scenes built in app/scenes3d.js on app/three-kit.js).
   Every canvas starts transparent and fades in once its scene is live
   (.is-live), so a browser without WebGL simply never shows the layer. */

/* --- Home hero: the seal's globe in 3D -------------------------------------
   Lives inside .hero-emblem .emblem-float, so it shares the logo's centre,
   float and parallax exactly. 1.9x the emblem box leaves room for the rim
   to grow as the hero scrolls away. The emblem is hidden on phones
   (enhance.css), which takes the globe with it. */
.bce-home-hero .bce-hero3d-canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190%;
  height: 190%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}
.bce-home-hero .bce-hero3d-canvas.is-live { opacity: 1; }

/* Arabic: the headline runs from the right, so the emblem moves to the left
   instead of sitting behind the text. */
html[dir="rtl"] .bce-home-hero .hero-emblem { right: auto; left: 5%; }

/* --- Page headers with a 3D object (Services valve, Projects map) ---------
   The object takes the inline-end 40% of the header; the text keeps the rest. */
.bce-page-header.has-3d { overflow: hidden; }
.bce-page-header.has-3d h1,
.bce-page-header.has-3d .lede { max-width: 58%; }
.bce-header-3d {
  position: absolute;
  inset-inline-end: -2%;
  top: -60px;
  bottom: -50px;
  width: 42%;
}
.bce-header-3d canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .9s ease;
}
.bce-header-3d canvas.is-live { opacity: 1; }

/* Project-map hover label */
.bce-map3d-tip {
  position: absolute;
  z-index: 2;
  padding: 6px 10px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  border-radius: 2px;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 14px));
  opacity: 0;
  transition: opacity .15s ease;
}
.bce-map3d-tip.is-on { opacity: 1; }

.mobile-doc .bce-header-3d { display: none; }
.mobile-doc .bce-page-header.has-3d h1,
.mobile-doc .bce-page-header.has-3d .lede { max-width: none; }