/* B3 FIELD // purple-black flash, vertical fracture, opposing exit. */
.b3-alert-layer {
  position:fixed;
  inset:0;
  z-index:2147483180;
  display:grid;
  place-items:center;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  isolation:isolate;
  background:#030104;
}
.b3-alert-layer.is-live { animation:b3-layer-sequence 3s steps(1,end) both; }
.b3-void {
  position:absolute;
  inset:-5%;
  z-index:-1;
  background:
    radial-gradient(ellipse at 50% 50%,rgba(164,76,255,.48),transparent 44%),
    repeating-linear-gradient(90deg,rgba(202,153,255,.04) 0 2px,transparent 2px 9px),
    linear-gradient(135deg,#050107,#260838 48%,#020103);
  animation:b3-void-flash .16s steps(2,end) infinite;
}
.b3-photo {
  position:relative;
  width:min(78vw,920px);
  aspect-ratio:242 / 134;
  filter:drop-shadow(0 0 26px rgba(191,105,255,.88)) drop-shadow(0 18px 28px #000);
  animation:b3-photo-impact 1.62s cubic-bezier(.12,.8,.2,1) both;
}
.b3-half {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:fill;
  border:clamp(2px,.35vw,5px) solid #b978eb;
  box-shadow:inset 0 0 0 2px #13001d;
}
.b3-half-left {
  clip-path:inset(0 50% 0 0);
  animation:b3-kick-left 3s cubic-bezier(.5,0,.86,.42) both;
}
.b3-half-right {
  clip-path:inset(0 0 0 50%);
  animation:b3-kick-right 3s cubic-bezier(.5,0,.86,.42) both;
}
.b3-photo::after {
  content:"";
  position:absolute;
  z-index:2;
  left:50%;
  top:-4%;
  bottom:-4%;
  width:clamp(2px,.35vw,6px);
  opacity:0;
  transform:translateX(-50%) skew(-4deg);
  background:#f3ceff;
  box-shadow:0 0 14px #d878ff,0 0 38px #8d19d1;
  animation:b3-fracture-line 3s steps(1,end) both;
}
@keyframes b3-layer-sequence {
  0%{opacity:0} 3%{opacity:1} 8%{opacity:.25} 12%{opacity:1}
  20%{opacity:.62} 25%,84%{opacity:1} 90%{opacity:.45} 100%{opacity:0}
}
@keyframes b3-photo-impact {
  0%{opacity:0;transform:scale(.55) rotate(-2deg);filter:contrast(1.5)}
  18%{opacity:1;transform:scale(1.08) rotate(.6deg)}
  34%{transform:scale(.98) rotate(-.25deg)}
  48%,100%{opacity:1;transform:scale(1) rotate(0);filter:contrast(1.08)}
}
@keyframes b3-fracture-line {
  0%,53%{opacity:0} 54%,66%{opacity:1} 67%,100%{opacity:0}
}
@keyframes b3-kick-left {
  0%,56%{transform:translate3d(0,0,0) rotate(0);opacity:1}
  62%{transform:translate3d(-2vw,-1vh,0) rotate(-1.5deg);opacity:1}
  100%{transform:translate3d(-120vw,18vh,0) rotate(-19deg);opacity:0}
}
@keyframes b3-kick-right {
  0%,56%{transform:translate3d(0,0,0) rotate(0);opacity:1}
  62%{transform:translate3d(2vw,1vh,0) rotate(1.5deg);opacity:1}
  100%{transform:translate3d(120vw,-18vh,0) rotate(19deg);opacity:0}
}
@keyframes b3-void-flash {
  0%{opacity:.58;transform:translate(0,0)}
  50%{opacity:1;transform:translate(-2px,1px)}
  100%{opacity:.7;transform:translate(2px,-1px)}
}
@media (prefers-reduced-motion:reduce) {
  .b3-alert-layer.is-live{animation:b3-layer-sequence 3s linear both}
  .b3-void{animation:none}
  .b3-photo{animation:none}
  .b3-half-left{animation:b3-kick-left 3s ease-in both}
  .b3-half-right{animation:b3-kick-right 3s ease-in both}
}