/* v2 studio, live bestiary (/services): the 3D animal behind the hero.
   Engine: agence-bestiary.js. The painted bestiary (agence-work.css .biz-art) stays underneath as the fallback. */

/* the painted art steps back once the live animal is up */
/* the painted art leaves quickly and the live animal arrives a beat later, so the two never show as a ghost double */
.biz-art.bz-live { opacity: 0; transition: opacity .45s ease; }

.bz-stage {
  position: absolute; z-index: 0; top: 0; right: 0; left: 40%; height: var(--art-h);
  -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 100%); mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
  opacity: 0; transition: opacity .7s ease .2s;
}
.bz-stage[data-state='ready'] { opacity: 1; }
.bz-stage[data-state='off'], .bz-stage[data-state='loading'] { pointer-events: none; }
.bz-stage::before {
  content: ''; position: absolute; z-index: -1; inset: 2% 0 8% 4%; pointer-events: none;
  background: radial-gradient(46% 52% at 56% 46%, color-mix(in srgb, var(--bc2, #b7a6f2) 30%, transparent), transparent 72%);
}
.bz-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; outline: none; }
.bz-stage.is-drag canvas { cursor: grabbing; }
/* changing animal: the stage dims, the animal is swapped behind it, the stage comes back */
.bz-stage canvas { transition: opacity .32s ease; }
.bz-stage.is-swap canvas { opacity: 0; transition-duration: .2s; }

/* hero copy and caption stay clickable; the empty part of the hero lets the drag through to the canvas */
.biz-hero { pointer-events: none; }
.biz-hero-copy, .biz-caption { pointer-events: auto; }

@media (max-width: 1180px) {
  .bz-stage { left: 46%; }
}
@media (max-width: 900px) {
  .bz-stage { left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bz-stage, .biz-art.bz-live, .bz-stage canvas { transition: none; }
}