.dc-neural-transition {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: grid;
  place-items: center;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  isolation: isolate;
}

.dc-neural-transition.is-active,
.dc-neural-transition.is-arrival {
  visibility: visible;
  opacity: 1;
}

.dc-neural-transition__panel {
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(50% + 1px);
  background: #050608;
  transition: transform .46s cubic-bezier(.76, 0, .24, 1);
}

.dc-neural-transition__panel--top { top: 0; }
.dc-neural-transition__panel--bottom { bottom: 0; }

.dc-neural-transition__grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .17;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(179, 192, 213, .14), transparent 34%),
    linear-gradient(rgba(181, 191, 207, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(181, 191, 207, .16) 1px, transparent 1px);
  background-size: 100% 100%, clamp(70px, 8vw, 132px) clamp(70px, 8vw, 132px), clamp(70px, 8vw, 132px) clamp(70px, 8vw, 132px);
  transition: opacity .28s ease;
}

.dc-neural-transition__stage {
  position: relative;
  z-index: 2;
  width: min(74vw, 620px);
  opacity: 0;
  transform: scale(.9);
  transition: opacity .16s ease, transform .58s cubic-bezier(.16, 1, .3, 1);
}

.dc-neural-transition.is-active .dc-neural-transition__stage,
.dc-neural-transition.is-arrival .dc-neural-transition__stage {
  opacity: 1;
  transform: scale(1);
}

.dc-neural-transition__stage svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 15px rgba(208, 220, 240, .14));
}

.dc-neural-transition__stage--circle { display: none; }
.dc-neural-transition__stage--portal { display: none; text-align: center; }
.dc-neural-transition.is-circle-mode .dc-neural-transition__stage--neural { display: none; }
.dc-neural-transition.is-circle-mode .dc-neural-transition__stage--circle { display: block; }
.dc-neural-transition.is-portal-mode .dc-neural-transition__stage--neural,
.dc-neural-transition.is-portal-mode .dc-neural-transition__stage--circle { display: none; }
.dc-neural-transition.is-portal-mode .dc-neural-transition__stage--portal { display: grid; place-items: center; }

.dc-neural-transition__sphere {
  position: relative;
  width: min(54vw, 300px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(calc(var(--portal-x, 0) * 13px), calc(var(--portal-y, 0) * 13px)) rotateX(calc(var(--portal-y, 0) * -8deg)) rotateY(calc(var(--portal-x, 0) * 10deg)) scale(.25);
  opacity: 0;
  background: radial-gradient(circle at 31% 24%, #fff 0 2%, #dbe2ec 4%, #828d9b 15%, #252b34 34%, #090b0f 60%, #66717f 73%, #0c0e13 84%);
  box-shadow: inset -34px -38px 64px #000, inset 18px 15px 30px rgba(255,255,255,.3), 0 0 75px rgba(172,190,220,.24);
  transition: transform .12s ease-out;
}

.dc-neural-transition__sphere::before,
.dc-neural-transition__sphere::after,
.dc-neural-transition__sphere i {
  content: "";
  position: absolute;
  border: 1px solid rgba(210,220,234,.58);
  border-radius: 50%;
}
.dc-neural-transition__sphere::before { inset: -11%; transform: rotate(50deg) scaleY(.31); }
.dc-neural-transition__sphere::after { inset: -24%; transform: rotate(-24deg) scaleY(.69); border-style: dashed; }
.dc-neural-transition__sphere i:nth-child(1) { inset: 18%; opacity: .5; }
.dc-neural-transition__sphere i:nth-child(2) { inset: 35%; opacity: .7; }
.dc-neural-transition__sphere b { position:absolute;left:48%;top:48%;width:4%;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 0 18px #fff; }
.dc-neural-transition__sphere span { position:absolute;left:50%;top:-18%;width:1px;height:136%;background:linear-gradient(transparent,#bac6d7,transparent);transform:rotate(34deg); }
.dc-neural-transition__stage--portal p { margin: 56px 0 0; color:#d8dde5; font: 500 10px Arial,Helvetica,sans-serif; letter-spacing:.34em; }

.dc-neural-transition.is-active.is-portal-mode .dc-neural-transition__sphere {
  animation: dc-portal-collapse .86s .06s cubic-bezier(.7,0,.25,1) forwards;
}
.dc-neural-transition.is-active.is-portal-mode .dc-neural-transition__sphere::after { animation: dc-portal-orbit .7s .08s linear forwards; }
.dc-neural-transition.is-active.is-portal-mode .dc-neural-transition__stage--portal p { animation: dc-portal-copy .62s .12s ease-out forwards; }
.dc-neural-transition.is-arrival.is-portal-mode .dc-neural-transition__sphere { opacity:1; transform:scale(.05); }
.dc-neural-transition.is-arrival.is-portal-mode .dc-neural-transition__stage--portal p { opacity:0; }

.dc-neural-transition__broken-ring,
.dc-neural-transition__orbit,
.dc-neural-transition__break-mark {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.dc-neural-transition__broken-ring {
  stroke: url(#dc-circle-gradient);
  stroke-width: 8;
  filter: url(#dc-circle-glow);
}

.dc-neural-transition__orbit {
  stroke: #828d9c;
  stroke-width: 1.2;
  opacity: .52;
}

.dc-neural-transition__break-mark {
  stroke: #fff;
  stroke-width: 2.2;
  opacity: 0;
  filter: url(#dc-circle-glow);
}

.dc-neural-transition__circle-copy {
  fill: #eef2f7;
  font: 600 12px Arial, Helvetica, sans-serif;
  letter-spacing: 5px;
  text-anchor: middle;
  opacity: 0;
}

.dc-neural-transition.is-active.is-circle-mode .dc-neural-transition__broken-ring {
  animation: dc-circle-draw .56s .08s cubic-bezier(.45, 0, .18, 1) forwards;
}

.dc-neural-transition.is-active.is-circle-mode .dc-neural-transition__orbit {
  animation: dc-circle-draw .42s .2s ease-out forwards;
}

.dc-neural-transition.is-active.is-circle-mode .dc-neural-transition__break-mark {
  animation: dc-circle-break .18s .61s ease-out forwards;
}

.dc-neural-transition.is-active.is-circle-mode .dc-neural-transition__circle-copy {
  animation: dc-circle-copy .28s .34s ease-out forwards;
}

.dc-neural-transition.is-arrival.is-circle-mode .dc-neural-transition__broken-ring,
.dc-neural-transition.is-arrival.is-circle-mode .dc-neural-transition__orbit,
.dc-neural-transition.is-arrival.is-circle-mode .dc-neural-transition__break-mark { stroke-dashoffset: 0; }
.dc-neural-transition.is-arrival.is-circle-mode .dc-neural-transition__break-mark,
.dc-neural-transition.is-arrival.is-circle-mode .dc-neural-transition__circle-copy { opacity: 1; }

.dc-neural-transition__connection {
  fill: none;
  stroke: url(#dc-neural-gradient);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: .72;
}

.dc-neural-transition__node {
  fill: #e8edf5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.dc-neural-transition__monogram {
  fill: none;
  stroke: url(#dc-monogram-gradient);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: url(#dc-neural-glow);
}

.dc-neural-transition__fracture {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  filter: url(#dc-neural-glow);
}

.dc-neural-transition.is-active .dc-neural-transition__connection {
  animation: dc-network-draw .28s var(--delay, 0s) ease-out forwards;
}

.dc-neural-transition.is-active .dc-neural-transition__node {
  animation: dc-node-appear .28s var(--delay, 0s) ease-out forwards;
}

.dc-neural-transition.is-active .dc-neural-transition__monogram {
  animation: dc-monogram-draw .44s var(--delay, .28s) cubic-bezier(.45, 0, .2, 1) forwards;
}

.dc-neural-transition.is-active .dc-neural-transition__fracture {
  animation: dc-fracture-draw .16s .72s ease-out forwards;
}

.dc-neural-transition.is-arrival .dc-neural-transition__connection,
.dc-neural-transition.is-arrival .dc-neural-transition__monogram,
.dc-neural-transition.is-arrival .dc-neural-transition__fracture {
  stroke-dashoffset: 0;
}

.dc-neural-transition.is-arrival .dc-neural-transition__node { opacity: 1; }
.dc-neural-transition.is-arrival .dc-neural-transition__fracture { opacity: 1; }

.dc-neural-transition__pulse {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(232, 238, 248, .88);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.4);
}

.dc-neural-transition.is-active .dc-neural-transition__pulse {
  animation: dc-pulse .48s .52s ease-out forwards;
}

.dc-neural-transition__cut {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 0;
  height: 1px;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-12deg);
  background: linear-gradient(90deg, transparent, #939dac 10%, #fff 50%, #939dac 90%, transparent);
  box-shadow: 0 0 18px rgba(226, 234, 246, .58);
}

.dc-neural-transition.is-active .dc-neural-transition__cut {
  animation: dc-screen-cut .2s .78s cubic-bezier(.2, .8, .2, 1) forwards;
}

.dc-neural-transition.is-revealing .dc-neural-transition__stage,
.dc-neural-transition.is-revealing .dc-neural-transition__grid { opacity: 0; }
.dc-neural-transition.is-revealing .dc-neural-transition__panel--top { transform: translateY(-101%); }
.dc-neural-transition.is-revealing .dc-neural-transition__panel--bottom { transform: translateY(101%); }

@keyframes dc-network-draw { to { stroke-dashoffset: 0; } }
@keyframes dc-monogram-draw { to { stroke-dashoffset: 0; } }
@keyframes dc-circle-draw { to { stroke-dashoffset: 0; } }
@keyframes dc-circle-break { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes dc-circle-copy { from { opacity: 0; transform: translateY(5px); } to { opacity: .92; transform: translateY(0); } }
@keyframes dc-portal-collapse {
  0% { opacity:0; transform:translate(calc(var(--portal-x,0)*13px),calc(var(--portal-y,0)*13px)) scale(.24); }
  20% { opacity:1; transform:translate(calc(var(--portal-x,0)*13px),calc(var(--portal-y,0)*13px)) scale(1); }
  68% { opacity:1; transform:translate(0,0) scale(.88); }
  88% { opacity:1; transform:translate(0,0) scale(.06); filter:brightness(2.2); }
  100% { opacity:0; transform:translate(0,0) scale(4.8); filter:brightness(3); }
}
@keyframes dc-portal-orbit { to { transform:rotate(336deg) scaleY(.69); opacity:0; } }
@keyframes dc-portal-copy { 0%{opacity:0;letter-spacing:.55em} 35%,72%{opacity:.8} 100%{opacity:0;letter-spacing:.34em} }
@keyframes dc-fracture-draw { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes dc-node-appear {
  0% { opacity: 0; transform: scale(.35); }
  55% { opacity: 1; transform: scale(1.55); }
  100% { opacity: .86; transform: scale(1); }
}
@keyframes dc-pulse {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  20% { opacity: .85; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(22); }
}
@keyframes dc-screen-cut {
  0% { width: 0; opacity: 0; }
  22% { opacity: 1; }
  100% { width: 125vw; opacity: .95; }
}

@media (max-width: 700px) {
  .dc-neural-transition__stage { width: min(88vw, 470px); }
  .dc-neural-transition__grid { background-size: 76px 76px; }
  .dc-neural-transition__monogram { stroke-width: 8; }
}

@media (prefers-reduced-motion: reduce) {
  .dc-neural-transition__connection,
  .dc-neural-transition__monogram,
  .dc-neural-transition__fracture,
  .dc-neural-transition__broken-ring,
  .dc-neural-transition__orbit,
  .dc-neural-transition__break-mark { stroke-dashoffset: 0; }
  .dc-neural-transition__node { opacity: 1; }
  .dc-neural-transition.is-active * { animation: none !important; }
  .dc-neural-transition__panel { transition-duration: .18s; }
}