:root{
  --orbit-radius: 120px;
  --line-length: 120px;
  --line-offset: 30px;
  --particle-start: 30px;
  --particle-end: 100px;
  --sat-1-angle: 0deg;
  --sat-2-angle: 120deg;
  --sat-3-angle: 240deg;
  --orbit-start-offset: 0deg;
}

@media (max-width: 880px) {
  :root{
    --orbit-radius: 100px;
    --line-length: 100px;
    --particle-start: 30px;
    --particle-end: 80px;
  }
}

.window__screen {
    aspect-ratio: 4/3;
    display: grid;
    place-items: center;
    position: relative;
    background: radial-gradient(circle at center, #ffffff 0%, #eeeeee 100% );
    overflow: hidden;
}

.window__screen::before{
  content:'';
  position:absolute;
  inset:-20px;
  background:radial-gradient(circle at center, 
    rgba(10,10,10,0.9) 0%, 
    rgba(12,74,110,0.5) 40%, 
    transparent 70%
  );
  filter:blur(30px);
  pointer-events:none;
  z-index:1;
}

.screen__placeholder{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}

.plasma-center{
  position:absolute;
  width:80px;
  height:80px;
  z-index:10;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}

.plasma-center img{
  width:100%;
  height:100%;
  filter:drop-shadow(0 0 12px rgba(56,189,248,0.6));
}

.plasma-orbit{
  position:absolute;
  width:240px;
  height:240px;
  left:50%;
  top:50%;
  margin-left:-120px;
  margin-top:-120px;
  z-index:6;
}

.plasma-orbit::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
}

.plasma-orbit{
  animation:rotate-orbit 12s linear infinite;
}

.plasma-satellite{
  position:absolute;
  width:60px;
  height:60px;
  left:50%;
  top:50%;
  margin-left:-30px;
  margin-top:-30px;
  z-index:10;
}

.plasma-satellite::before{
  content:'';
  position:absolute;
  inset:-20px;
  background:radial-gradient(circle at center, 
    rgba(30,30,30,0.7) 0%, 
    rgba(40,40,40,0.5) 30%, 
    rgba(50,50,50,0.3) 50%,
    transparent 70%
  );
  filter:blur(35px);
  pointer-events:none;
  z-index:-1;
}

.plasma-satellite img{
  width:100%;
  height:100%;
  filter:drop-shadow(0 0 8px rgba(96,165,250,0.7));
  position:relative;
  z-index:1;
}

.plasma-satellite.sat-1{
  width:50px;
  height:50px;
  margin-left:-25px;
  margin-top:-25px;
  transform:rotate(0deg) translateY(var(--orbit-radius));
}

.plasma-satellite.sat-1 img{
  animation:keep-upright-1 12s linear infinite;
}

.plasma-satellite.sat-2{
  width:100px;
  height:50px;
  margin-left:-50px;
  margin-top:-25px;
  transform:rotate(120deg) translateY(var(--orbit-radius));
}

.plasma-satellite.sat-2 img{
  animation:keep-upright-2 12s linear infinite;
}

.plasma-satellite.sat-3{
  width:60px;
  height:60px;
  margin-left:-30px;
  margin-top:-30px;
  transform:rotate(240deg) translateY(var(--orbit-radius));
}

.plasma-satellite.sat-3 img{
  animation:keep-upright-3 12s linear infinite;
}

.connection-line{
  position:absolute;
  left:50%;
  top:50%;
  width:2px;
  height:var(--line-length);
  background:linear-gradient(180deg, 
    rgba(56,189,248,0.8) 0%,
    rgba(96,165,250,0.5) 50%,
    rgba(56,189,248,0.2) 100%
  );
  transform-origin:center top;
  margin-left:-1px;
  margin-top:0;
  border-radius:2px;
  filter:blur(1px);
  z-index:3;
}

.connection-line.line-1{
  transform:rotate(0deg);
}

.connection-line.line-2{
  transform:rotate(120deg);
}

.connection-line.line-3{
  transform:rotate(240deg);
}

.data-particle{
  position:absolute;
  left:50%;
  top:50%;
  width:6px;
  height:6px;
  background:rgba(56,189,248,1);
  border-radius:50%;
  margin-left:-3px;
  margin-top:-3px;
  box-shadow:0 0 8px rgba(56,189,248,0.9);
  filter:blur(0.5px);
  z-index:4;
}

.data-particle.out-1{
  animation:particle-out-0 2.5s ease-in-out infinite;
}

.data-particle.out-2{
  animation:particle-out-120 2.5s ease-in-out infinite 0.8s;
}

.data-particle.out-3{
  animation:particle-out-240 2.5s ease-in-out infinite 1.6s;
}

.data-particle.in-1{
  animation:particle-in-0 2.5s ease-in-out infinite 1.25s;
}

.data-particle.in-2{
  animation:particle-in-120 2.5s ease-in-out infinite 2.05s;
}

.data-particle.in-3{
  animation:particle-in-240 2.5s ease-in-out infinite 0.4s;
}

.data-particle-small{
  position:absolute;
  left:50%;
  top:50%;
  width:4px;
  height:4px;
  background:rgba(147,197,253,1);
  border-radius:50%;
  margin-left:-2px;
  margin-top:-2px;
  box-shadow:0 0 6px rgba(147,197,253,0.8);
  filter:blur(0.5px);
  z-index:4;
}

.data-particle-small.out-1b{
  animation:particle-out-0 2s ease-in-out infinite 0.3s;
}

.data-particle-small.out-2b{
  animation:particle-out-120 2s ease-in-out infinite 1.1s;
}

.data-particle-small.out-3b{
  animation:particle-out-240 2s ease-in-out infinite 1.9s;
}

.data-particle-small.in-1b{
  animation:particle-in-0 2s ease-in-out infinite 0.6s;
}

.data-particle-small.in-2b{
  animation:particle-in-120 2s ease-in-out infinite 1.4s;
}

.data-particle-small.in-3b{
  animation:particle-in-240 2s ease-in-out infinite 2.2s;
}

.data-particle-tiny{
  position:absolute;
  left:50%;
  top:50%;
  width:3px;
  height:3px;
  background:rgba(186,230,253,1);
  border-radius:50%;
  margin-left:-1.5px;
  margin-top:-1.5px;
  box-shadow:0 0 4px rgba(186,230,253,0.7);
  filter:blur(0.5px);
  z-index:4;
}

.data-particle-tiny.out-1c{
  animation:particle-out-0 1.8s ease-in-out infinite 0.15s;
}

.data-particle-tiny.out-2c{
  animation:particle-out-120 1.8s ease-in-out infinite 0.95s;
}

.data-particle-tiny.out-3c{
  animation:particle-out-240 1.8s ease-in-out infinite 1.75s;
}

.data-particle-tiny.in-1c{
  animation:particle-in-0 1.8s ease-in-out infinite 0.45s;
}

.data-particle-tiny.in-2c{
  animation:particle-in-120 1.8s ease-in-out infinite 1.25s;
}

.data-particle-tiny.in-3c{
  animation:particle-in-240 1.8s ease-in-out infinite 2.05s;
}

.plasma-connections,
.plasma-data-flow,
.plasma-energy,
.plasma-beam,
.plasma-particles,
.particle,
.plasma-energy-ring,
.plasma-sparkle,
.plasma-micro,
.plasma-dust,
.plasma-burst,
.connection-line-secondary,
.data-particle-diagonal,
.data-particle-comet{
  display:none;
}

.sound-toggle{
  position:absolute;
  bottom:10px;
  right:10px;
  width:36px;
  height:36px;
  background:rgba(0,0,0,0.6);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:6px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.3s ease;
  z-index:100;
  padding:0;
}

.sound-toggle:hover{
  background:rgba(0,0,0,0.8);
  border-color:rgba(255,255,255,0.4);
  transform:scale(1.05);
}

.sound-toggle:active{
  transform:scale(0.95);
}

.sound-icon{
  width:20px;
  height:20px;
  color:#fff;
  display:none;
}

.sound-toggle .sound-off{
  display:block;
}

.sound-toggle.active .sound-off{
  display:none;
}

.sound-toggle.active .sound-on{
  display:block;
  animation:pulse-icon 2s ease-in-out infinite;
}

.sound-toggle.active{
  background:rgba(0,0,0,0.6);
  border-color:rgba(255,255,255,0.2);
}

.sound-toggle.active:hover{
  background:rgba(0,0,0,0.8);
  border-color:rgba(255,255,255,0.4);
}

@keyframes rotate-orbit{
  from{transform:rotate(var(--orbit-start-offset))}
  to{transform:rotate(calc(var(--orbit-start-offset) + 360deg))}
}

@keyframes keep-upright-1{
  from{transform:rotate(0deg)}
  to{transform:rotate(-360deg)}
}

@keyframes keep-upright-2{
  from{transform:rotate(-120deg)}
  to{transform:rotate(-480deg)}
}

@keyframes keep-upright-3{
  from{transform:rotate(-240deg)}
  to{transform:rotate(-600deg)}
}

@keyframes particle-out-0{
  0%{transform:rotate(0deg) translateY(var(--particle-start)); opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:rotate(0deg) translateY(var(--particle-end)); opacity:0}
}

@keyframes particle-out-120{
  0%{transform:rotate(120deg) translateY(var(--particle-start)); opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:rotate(120deg) translateY(var(--particle-end)); opacity:0}
}

@keyframes particle-out-240{
  0%{transform:rotate(240deg) translateY(var(--particle-start)); opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:rotate(240deg) translateY(var(--particle-end)); opacity:0}
}

@keyframes particle-in-0{
  0%{transform:rotate(0deg) translateY(var(--particle-end)); opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:rotate(0deg) translateY(var(--particle-start)); opacity:0}
}

@keyframes particle-in-120{
  0%{transform:rotate(120deg) translateY(var(--particle-end)); opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:rotate(120deg) translateY(var(--particle-start)); opacity:0}
}

@keyframes particle-in-240{
  0%{transform:rotate(240deg) translateY(var(--particle-end)); opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:rotate(240deg) translateY(var(--particle-start)); opacity:0}
}

@keyframes pulse-icon{
  0%, 100%{
    opacity:1;
    transform:scale(1);
  }
  50%{
    opacity:0.6;
    transform:scale(1.1);
  }
}