/* =========================================================
   GAYZZEE CAMROOM 4.1
   DEEP SPACE ORBIT
   ========================================================= */

#camArena.cam-arena {
  position:
    relative;

  overflow:
    hidden;

  isolation:
    isolate;

  background:
    #000000 !important;

  background-image:
    none !important;
}


/* =========================================================
   OUDE ACHTERGRONDGLOW
   ========================================================= */

#camArena .arena-glow {
  display:
    none !important;
}


/* =========================================================
   ORBIT RINGEN
   Terug zichtbaar, maar subtiel.
   ========================================================= */

#camArena .orbit {
  position:
    absolute;

  left:
    50%;

  top:
    50%;

  transform:
    translate(
      -50%,
      -50%
    );

  opacity:
    0.30 !important;

  border-color:
    rgba(
      137,
      92,
      246,
      0.34
    ) !important;

  box-shadow:
    0 0 24px
    rgba(
      112,
      66,
      255,
      0.08
    );

  pointer-events:
    none;

  z-index:
    5;
}


/* =========================================================
   FOCUSCAM
   ========================================================= */

#camArena .focus-cam {
  position:
    absolute !important;

  left:
    50% !important;

  top:
    50% !important;

  right:
    auto !important;

  bottom:
    auto !important;

  margin:
    0 !important;

  transform:
    translate(
      -50%,
      -50%
    )
    scale(
      var(
        --camroom-focus-scale,
        1
      )
    ) !important;

  transform-origin:
    center center;

  z-index:
    100 !important;

  will-change:
    transform,
    opacity;
}


/* =========================================================
   SATELLIET ORIGIN
   ========================================================= */

#camArena .satellite-cams {
  position:
    absolute !important;

  left:
    50% !important;

  top:
    50% !important;

  width:
    0 !important;

  height:
    0 !important;

  transform:
    translate(
      -50%,
      -50%
    ) !important;

  z-index:
    110;

  pointer-events:
    none;
}


/* =========================================================
   SATELLIETCAM
   Grootte komt uit depth.js
   ========================================================= */

#camArena .satellite-cam {
  --satellite-width:
    128px;

  --satellite-height:
    80px;

  position:
    absolute !important;

  left:
    0 !important;

  top:
    0 !important;

  width:
    var(
      --satellite-width
    ) !important;

  height:
    var(
      --satellite-height
    ) !important;

  margin-left:
    calc(
      var(
        --satellite-width
      ) /
      -2
    ) !important;

  margin-top:
    calc(
      var(
        --satellite-height
      ) /
      -2
    ) !important;

  border:
    0 !important;

  border-radius:
    18px !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  overflow:
    visible !important;

  transform:
    rotate(
      var(
        --orbit-angle,
        0deg
      )
    )
    translateX(
      var(
        --orbit-radius,
        var(
          --camroom-orbit-radius,
          365px
        )
      )
    )
    rotate(
      calc(
        -1 *
        var(
          --orbit-angle,
          0deg
        )
      )
    ) !important;

  transform-origin:
    center center;

  pointer-events:
    auto;

  will-change:
    width,
    height,
    transform,
    opacity,
    filter;
}


/* =========================================================
   CAMERA VISUAL
   ========================================================= */

#camArena .satellite-visual {
  position:
    absolute;

  inset:
    0;

  width:
    100% !important;

  height:
    100% !important;

  border:
    1px solid
    rgba(
      170,
      137,
      255,
      0.46
    ) !important;

  border-radius:
    18px !important;

  overflow:
    hidden;

  background:
    #050508;

  transform:
    none !important;

  opacity:
    1 !important;

  filter:
    blur(
      var(
        --satellite-blur,
        0px
      )
    )
    brightness(
      var(
        --satellite-brightness,
        1
      )
    )
    saturate(
      var(
        --satellite-saturation,
        1
      )
    ) !important;

  box-shadow:
    0 10px 28px
    rgba(
      0,
      0,
      0,
      0.52
    ),
    0 0
    var(
      --satellite-glow,
      0px
    )
    rgba(
      125,
      80,
      255,
      0.34
    );

  transition:
    border-color
    160ms ease;

  will-change:
    filter;
}


/* =========================================================
   SATELLIET VIDEO
   ========================================================= */

#camArena .satellite-video {
  position:
    absolute;

  inset:
    0;

  width:
    100% !important;

  height:
    100% !important;

  object-fit:
    cover;

  border-radius:
    inherit;

  background:
    #000000;
}


/* =========================================================
   ZEER BELANGRIJK
   hidden moet ALTIJD verborgen blijven.
   Dit verwijdert de M bovenop een actieve video.
   ========================================================= */

#camArena .satellite-video[hidden],
#camArena .satellite-initial[hidden] {
  display:
    none !important;
}


/* =========================================================
   FALLBACK INITIAL
   Alleen zichtbaar wanneer er geen videotrack is.
   ========================================================= */

#camArena .satellite-initial {
  position:
    absolute;

  inset:
    0;

  display:
    grid;

  place-items:
    center;

  border-radius:
    inherit;

  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(
        117,
        76,
        205,
        0.26
      ),
      rgba(
        10,
        7,
        17,
        0.96
      )
    );

  color:
    #ffffff;

  font-size:
    clamp(
      22px,
      2vw,
      34px
    );

  font-weight:
    800;
}


/* =========================================================
   LABEL
   ========================================================= */

#camArena .satellite-label {
  position:
    absolute;

  left:
    50%;

  bottom:
    -27px;

  transform:
    translateX(
      -50%
    );

  max-width:
    calc(
      100% +
      30px
    );

  padding:
    4px 9px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  border-radius:
    999px;

  background:
    rgba(
      0,
      0,
      0,
      0.80
    );

  border:
    1px solid
    rgba(
      155,
      115,
      255,
      0.26
    );

  color:
    #ffffff;

  font-size:
    11px;

  font-weight:
    700;

  backdrop-filter:
    blur(
      8px
    );

  pointer-events:
    none;
}


/* =========================================================
   MICROFOON STATUS
   ========================================================= */

#camArena .satellite-mic-state {
  position:
    absolute;

  right:
    6px;

  bottom:
    6px;

  display:
    grid;

  place-items:
    center;

  min-width:
    22px;

  height:
    22px;

  padding:
    0 5px;

  border-radius:
    999px;

  background:
    rgba(
      0,
      0,
      0,
      0.76
    );

  font-size:
    11px;

  pointer-events:
    none;
}


/* =========================================================
   ACTIVE SPEAKER
   ========================================================= */

#camArena .satellite-cam.is-speaking
.satellite-visual {
  border-color:
    rgba(
      185,
      144,
      255,
      0.94
    ) !important;
}


/* =========================================================
   GEFOCUSTE SATELLIET
   ========================================================= */

#camArena .satellite-cam.is-focus
.satellite-visual {
  border-color:
    rgba(
      226,
      207,
      255,
      1
    ) !important;
}


/* =========================================================
   GALAXY
   ========================================================= */

#camArena .camroom-galaxy-layer {
  z-index:
    0 !important;
}


/* =========================================================
   PARTICLES
   ========================================================= */

#camArena .camroom-particle-layer {
  z-index:
    4 !important;

  pointer-events:
    none;
}


/* =========================================================
   REACTIONS
   ========================================================= */

#camArena .camroom-reaction-layer {
  z-index:
    200 !important;
}


#camArena .camroom-reaction-toolbar {
  z-index:
    220 !important;

  bottom:
    20px !important;
}


/* =========================================================
   FULLSCREEN
   ========================================================= */

#camArena:fullscreen {
  width:
    100vw;

  height:
    100vh;

  background:
    #000000 !important;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {
  #camArena .camroom-particle-layer {
    opacity:
      0.65;
  }
}