html.nobi-cinematic-lock,
html.nobi-cinematic-lock body,
body.nobi-cinematic-lock {
  height: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
  background: #05070c;
}

body.nobi-cinematic-lock {
  margin: 0;
}

.nobi-cinematic,
.nobi-cinematic * {
  box-sizing: border-box;
}

.nobi-cinematic {
  --blue: 1;
  --violet: 0;
  --green: 0;
  --gold: 0;
  --progress: 0;
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #05070c;
}

.nobi-cinematic__bg,
.nobi-cinematic__grid,
.nobi-cinematic__glow,
.nobi-cinematic__grain,
.nobi-cinematic__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.nobi-cinematic__bg {
  z-index: 0;
  background:
    radial-gradient(circle at 50% 12%, rgba(76, 122, 255, .16), transparent 28%),
    radial-gradient(circle at 16% 68%, rgba(126, 56, 255, .11), transparent 26%),
    radial-gradient(circle at 84% 52%, rgba(37, 138, 101, .12), transparent 26%),
    linear-gradient(180deg, #090e18 0%, #05070c 46%, #040507 100%);
}

.nobi-cinematic__grid {
  z-index: 0;
  opacity: .16;
  background-image:
    linear-gradient(rgba(100, 173, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 173, 255, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px, 18px 18px, 18px 18px;
  mask-image: radial-gradient(circle at center, rgba(0,0,0,.96) 0 62%, rgba(0,0,0,.45) 84%, transparent 100%);
}

.nobi-cinematic__glow {
  z-index: 1;
  filter: blur(76px);
  opacity: .08;
  transition: opacity .16s linear;
}

.nobi-cinematic__glow--blue {
  background: radial-gradient(circle at 50% 38%, rgba(64, 149, 255, .95), transparent 32%);
  opacity: calc(.02 + (var(--blue) * .65));
}

.nobi-cinematic__glow--violet {
  background: radial-gradient(circle at 52% 48%, rgba(152, 83, 255, .95), transparent 32%);
  opacity: calc(.02 + (var(--violet) * .72));
}

.nobi-cinematic__glow--green {
  background: radial-gradient(circle at 52% 52%, rgba(76, 214, 149, .92), transparent 32%);
  opacity: calc(.02 + (var(--green) * .72));
}

.nobi-cinematic__glow--gold {
  background: radial-gradient(circle at 52% 58%, rgba(241, 185, 75, .92), transparent 34%);
  opacity: calc(.02 + (var(--gold) * .78));
}

.nobi-cinematic__viewport {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  perspective: 2200px;
  perspective-origin: 50% 42%;
}

.nobi-cinematic__scene {
  position: relative;
  width: min(92vw, 1280px);
  height: min(88vh, 960px);
  transform-style: preserve-3d;
}

.nobi-cinematic__shadow {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: min(70vw, 780px);
  height: min(15vw, 160px);
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(0,0,0,.48) 0, rgba(0,0,0,.28) 48%, rgba(0,0,0,0) 78%);
  filter: blur(22px);
  opacity: .28;
}

.nobi-layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform-style: preserve-3d;
  will-change: opacity, transform, filter;
  pointer-events: none;
}

.nobi-layer img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center center;
  user-select: none;
  pointer-events: none;
}

.nobi-layer--plan-base img,
.nobi-layer--plan-edges img {
  width: auto;
  height: min(92%, 900px);
}

.nobi-layer--bim-base img,
.nobi-layer--bim-edges img {
  width: min(100%, 960px);
  height: auto;
}

.nobi-layer--render-edges img,
.nobi-layer--render-base img {
  width: min(100%, 1120px);
  height: auto;
}

.nobi-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  pointer-events: none;
}

.nobi-layer--plan-base::after,
.nobi-layer--plan-edges::after {
  background: linear-gradient(180deg, rgba(45, 95, 230, .24), rgba(0, 12, 30, .42));
  mix-blend-mode: screen;
}

.nobi-layer--bim-base::after,
.nobi-layer--bim-edges::after {
  background: linear-gradient(180deg, rgba(129, 78, 232, .20), rgba(12, 6, 28, .32));
  mix-blend-mode: screen;
}

.nobi-layer--render-edges::after {
  background: linear-gradient(180deg, rgba(53, 186, 121, .18), rgba(8, 22, 16, .26));
  mix-blend-mode: screen;
}

.nobi-layer--render-base::after {
  background: linear-gradient(180deg, rgba(255, 197, 76, .09), rgba(20, 12, 4, .08));
  mix-blend-mode: soft-light;
}

.nobi-layer--plan-edges,
.nobi-layer--bim-edges,
.nobi-layer--render-edges {
  mix-blend-mode: screen;
}

.nobi-layer--plan-edges img,
.nobi-layer--bim-edges img,
.nobi-layer--render-edges img {
  filter: drop-shadow(0 0 24px rgba(128, 200, 255, .18));
}

.nobi-cinematic__grain {
  z-index: 3;
  opacity: .06;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.5) 0 0.6px, transparent 0.7px),
    radial-gradient(circle at 75% 35%, rgba(255,255,255,.4) 0 0.5px, transparent 0.6px),
    radial-gradient(circle at 44% 70%, rgba(255,255,255,.38) 0 0.5px, transparent 0.6px);
  background-size: 160px 160px, 220px 220px, 260px 260px;
  mix-blend-mode: screen;
}

.nobi-cinematic__vignette {
  z-index: 4;
  background:
    radial-gradient(circle at center, transparent 38%, rgba(0,0,0,.22) 68%, rgba(0,0,0,.70) 100%),
    linear-gradient(90deg, rgba(0,0,0,.24), transparent 18%, transparent 82%, rgba(0,0,0,.24));
}

@media (max-width: 767px) {
  .nobi-cinematic__scene {
    width: min(96vw, 900px);
    height: min(84vh, 720px);
  }

  .nobi-layer::after {
    border-radius: 18px;
  }

  .nobi-cinematic__grid {
    opacity: .12;
    background-size: 56px 56px, 56px 56px, 14px 14px, 14px 14px;
  }
}