@font-face{font-family:SD-Bagua;src:url("assets/bagua-font.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
/* All rules are scoped. No reset, no page/body styles, no external font. */
.sd-animation {
  --sd-background: #282c2d;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  background: #090f19;
  pointer-events: none;
}
.sd-animation .sd-animation__video,
.sd-animation .sd-animation__canvas,
.sd-animation .sd-animation__fade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.sd-animation .sd-animation__video { object-fit: cover; object-position: 50% 50%; z-index: 0; }
.sd-animation .sd-animation__canvas { z-index: 1; }
.sd-animation .sd-animation__fade {
  z-index: 2;
  background: linear-gradient(to bottom, rgba(40,44,45,0) 35%, rgba(40,44,45,.08) 49%, rgba(40,44,45,.3) 66%, rgba(40,44,45,.72) 84%, var(--sd-background) 100%);
}
/* iframe fills its own viewport; not the parent website. */

@media (max-width:600px) {
 .sd-animation { min-height:320px; }
}