.content-container {
  max-width: 100%;
  background-color: black;
}

.welcome-container {
  --orbs-size: 28.5%;
  /* --tutorial-orbs-y-offset: min(calc(var(--orbs-size) + 150%), calc(100vh - 10px)); */
  --tutorial-orbs-y-offset: min(400%, calc(100vh / 3));
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10rem;

  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  overflow: hidden;

  .hidden {
    display: none;
  }

  &:has(#check-audio:checked) {
    &.transitioning {
      & .orb {
        transition: 0.5s transform, 0.6s 1s scale;
        scale: 0.5;

        & .orb-light {
          transition: all 0.6s 0.8s, width 3s cubic-bezier(0.075, 0.82, 0.165, 1),
            height 3s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
          transform-origin: center;
        }
      }

      #eclipse {
        transition: visibility 0.1s allow-discrete, translate 2s, width 1s 1s, height 1s 1s, transform 2s,
          box-shadow 0.6s 1.5s;
        box-shadow: 0 0 0 0 rgb(0, 0, 0), 0 0 0 0 rgb(0, 0, 0) inset;
      }
    }
  }
}

@keyframes ring-pulse {
  from {
    scale: 1;
    background-image: radial-gradient(circle, transparent 30%, transparent 100%, #4afff3 0%, #4afff3 30%);
  }

  to {
    background-image: radial-gradient(circle, transparent 30%, transparent 100%, #4afff3 0%, #4afff3 30%);
    scale: 2;
  }
}

.container-orbs {
  max-height: 15vh;
  max-width: 15vh;
  justify-content: center;

  &.fast-transition {
    transition: all 0s;
  }

  & #eclipse {
    content: "";
    visibility: hidden;
    position: absolute;
    width: calc(100% * 1.45);
    height: calc(100% * 1.45);
    left: 50%;
    top: 50%;
    border-radius: 50%;
    background-color: rgb(0, 0, 0);
    translate: min(120%, 90%) -50%;
    transition: visibility 0.1s allow-discrete, translate 2s, width 1s 1s, height 1s 1s, transform 2s,
      box-shadow 1s 1.5s;
    z-index: 2;

    &.fast-transition {
      transition: visibility 0.1s allow-discrete, translate 0s, width 0s, height 0s, transform 2s, box-shadow 1s 1.5s;
    }
  }

  /* When the orb has been selected */
  &:has(input#orb-selected:checked) {
    & #eclipse {
      visibility: visible;
      translate: -50% -50%;
      box-shadow: 0 0 50px 3px white, 0 0 12px 0px white inset;
    }

    & .orb {
      transition: transform 0s;

      /* prevent the orb to be hoverable when eclipsed */
      &:has(input:not(:checked)):hover {
        transform: none !important;
        cursor: default;

        & label {
          cursor: default;
        }
      }

      /* Hold the orb stil while eclipsing */
      & .orb-light:not(.eclipsed) {
        transform-origin: center !important;
        animation-play-state: paused !important;
      }
    }

    & .tutorial-container {
      opacity: 1;
      & #tutorial-orb-headsets {
        bottom: 0;
        transform: translateY(var(--tutorial-orbs-y-offset));
      }

      & .tutorial-orb {
        opacity: 1;
      }
    }
  }

  & .orb {
    visibility: visible;
    opacity: 0;
    z-index: 2;

    border-radius: 50%;

    animation: fadein 2s 0.5s forwards;

    /* Start the pusle animation and pause the angelating animation */
    /* Prevent the default hover effects from the orb.css */
    &:hover,
    &:active {
      transform: scale(1);
      cursor: default;
      animation: fadein 2s 0.5s forwards, pulse-shadow 1.5s 0.5s infinite forwards;
    }

    /* Stops the pulse animation when the orb is clicked */
    &:has(input#orb-selected:checked) {
      /* replacing the animation and keeping the fade in allows to stop the pulse but keep the opacity transitioning when clicked before fadein ends */
      /* animation: fadein 2s 0.5s forwards; */
      opacity: 1;
      animation: none;

      /*  */
      &:hover,
      &:active {
        transform: scale(1);
        cursor: default;
      }

      & .orb-light {
        transform-origin: calc(var(--origin-offset) + var(--offset)) !important;
        animation-play-state: running;
      }
    }

    &.hoverable:hover .orb-light,
    &.hoverable:active .orb-light {
      transform-origin: center;
      animation-play-state: paused;
    }

    & .orb-light {
      transition: all 1s;
      animation-delay: 1.2s;

      filter: blur(20px);

      /*
        Light colorful blob

        The white background changed to black
        mix-blend-mode: plus-lighter
      */

      /*
        Worm hole effect

        The white background changed to black
        mix-blend-mode: color-dodge
      */

      /*
        Dark hole effect

        The white background changed to black
        filter: blur(7px);
        mix-blend-mode: color-dodge

        <span class="orb-light" style="--color: #000000;--offset: 0px;--duration: 2.5s;--relative-size: 2px"></span>
        <span class="orb-light" style="--color: #38c3c5; --offset: 20px; --duration: 3s; --relative-size: 1px"></span>
        <span class="orb-light" style="--color: #cbf3f5;--offset: -20px;--duration: 6s;--relative-size: 1px;"></span>
        <span class="orb-light" style="--color: #38bfef;--offset: -15px;--duration: 5s;--relative-size: 2px;"></span>
        <span class="orb-light" style="--color: #000000;--offset: -15px;--duration: 9s;--relative-size: 2px"></span>
        <span class="orb-light" style="--color: #000000;--offset: 20px;--duration: 7.5s;--relative-size: 1px"></span>

        or

        <span class="orb-light" style="--color: #000000;--offset: 0px;--duration: 2.5s;--relative-size: 2px"></span>
        <span class="orb-light" style="--color: #38c3c5;--offset: 10px;--duration: 3s;--relative-size: 1px"></span>
        <span class="orb-light" style="--color: #cbf3f5;--offset: -10px;--duration: 6s;--relative-size: 1px;"></span>
        <span class="orb-light" style="--color: #38bfef;--offset: -5px;--duration: 5s;--relative-size: 2px;"></span>
        <span class="orb-light" style="--color: #000000;--offset: -5px;--duration: 9s;--relative-size: 2px"></span>
        <span class="orb-light" style="--color: #000000;--offset: 10px;--duration: 7.5s;--relative-size: 1px"></span>
      */

      &.fast-transition {
        transition: all 1s, width 0s, height 0s;
      }
    }

    & label {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      width: 100%;
      height: 100%;
      cursor: pointer;

      & input {
        height: 0;
        width: 0;
        appearance: none;
      }
    }
  }
}

.logo-head {
  --size-factor: 0.45;
  width: calc(var(--orbs-size) + (var(--orbs-size) * var(--size-factor)));
  height: calc(var(--orbs-size) + (var(--orbs-size) * var(--size-factor)));
  min-height: unset;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  filter: drop-shadow(0 0 1rem rgba(166, 166, 166, 0.8));
  opacity: 0;
  transition: opacity 0.85s 0.45s ease-in-out, transform 0.7s 0.5s ease-in-out;

  pointer-events: none;
  z-index: 3;

  &.show {
    opacity: 1;
  }

  & img {
    min-width: 100%;
  }
}

.tutorial-container {
  width: 100%;
  height: 100%;

  position: absolute;
  left: 50%;
  translate: -50% 0%;

  display: flex;
  justify-content: center;
  align-items: center;

  opacity: 0;

  &.transitioning {
    transition: opacity 1.5s 0.5s;
    opacity: 0 !important;
  }

  &:has(input#check-headsets:checked) {
    & #tutorial-orb-headsets {
      bottom: 0;
      transition-delay: 0s;
      transform: rotate(7deg) translateY(var(--tutorial-orbs-y-offset)) !important;

      & span.material-symbols-outlined {
        rotate: -7deg;
      }
    }

    & #tutorial-orb-audio {
      bottom: 0;
      transition: all 0.2s, transform 1s 0s, opacity 0.2s 1s;
      transform: rotate(-7deg) translateY(var(--tutorial-orbs-y-offset)) !important;

      & span.material-symbols-outlined {
        rotate: 7deg;
      }
    }
  }

  & .tutorial-orb {
    --tutorial-orb-size: 50px;
    width: var(--tutorial-orb-size);
    height: var(--tutorial-orb-size);

    font-size: 1.5rem;

    background-color: #ffffff4a;
    border: 1px solid #ffffff30;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0px 0px 30px rgb(255 255 255 / 38%);
    border-radius: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 0;

    position: absolute;

    transition: box-shadow 0.4s, transform 1.2s 3s, opacity 0.2s 1s;
    transform-origin: center -230px;

    /* Set delay for transform to 0s */
    &.fast-transition-transform-delay {
      transition-delay: 0s, 0s, 1s;
      transition-duration: 0.05s, 0s, 0.2s;
      transition: all 0.2s, opacity 0.2s 1s;
    }

    &.fast-transition {
      transition: all 0.2s, transform 0s, opacity 0.2s 1s;
    }

    & span.material-symbols-outlined {
      color: white;
      font-size: inherit;
      line-height: inherit;
      vertical-align: bottom;
      font-variation-settings: "FILL" 1;

      transition: all 0.2s, transform 1.2s;
    }

    &:not(:has(input:checked)):hover {
      box-shadow: 0 0 7px 2px #ffffff70;
    }

    &:has(input:checked) {
      transition: all 0.2s, transform 1s 3s, opacity 0.2s 1s, filter 0.7s 4.2s;
      color: #ffffff;
      box-shadow: 0 0 7px 2px #ffffff70;
      border: 1px solid #ffffff;
      filter: brightness(0.7);

      & span.material-symbols-outlined {
        font-weight: 500;
        text-shadow: 0px 0px 10px #e0f9fb;
      }
    }

    & label {
      width: 100%;
      height: 100%;

      pointer-events: all;
      cursor: pointer;
      z-index: 1;

      & input:checked {
        &::after,
        &::before {
          animation-play-state: paused;
        }
      }
    }
  }
}

@keyframes click-me-pusle-late {
  from {
    transform: scale(1);
  }
  30% {
    transform: scale(1.05);
  }
  to {
    transform: scale(1.35);
    opacity: 0;
  }
}

@keyframes click-me-pusle {
  from {
    transform: scale(1);
    opacity: 0;
  }
  30% {
    transform: scale(1.05);
    opacity: 1;
  }
  to {
    transform: scale(1.3);
    opacity: 0;
  }
}

@keyframes pulse-shadow {
  from,
  to {
    box-shadow: 0 0 0 0 #4afff38f;
  }
  30% {
    box-shadow: 0 0 30px 10px #4afff38f;
  }
  50% {
    box-shadow: 0 0 60px 19px #4afff38f;
  }
  70% {
    box-shadow: 0 0 30px 10px #4afff38f;
  }
  90% {
    box-shadow: 0 0 60px 19px #4afff38f;
  }
}

@keyframes animateShadow {
  from,
  to {
    box-shadow: 0 0 5px 1px #4acaff57, 0 0 8px 0.5px #00a0aa54;
  }
  25% {
    box-shadow: 2px 2px 3px 1px #4ac9ff94, -1px 2px 8px 0.5px #008baa54;
  }
  50% {
    box-shadow: 2px -2px 7px 1px #4afff38f, -3px -1px 4px 1px #735b95b1;
  }
  75% {
    box-shadow: -2px -2px 5px 1px #4affa757, 3px 3px 6px 0.5px #d5a4ed;
  }
}

/* text-shadow: 2px 2px 2px #9bf7ff; */
@keyframes moveTextShadow {
  0%,
  100% {
    text-shadow: 3px -1px 2px #4acaff57;
  }
  20% {
    text-shadow: -2px -3px 3px #4acaff57;
  }
  50% {
    text-shadow: 2px 3px 1px #4afff38f;
  }
  80% {
    text-shadow: 0px 0px 3px #4afff38f;
  }
  90% {
    text-shadow: 3px 2px 1px #4affa757;
  }
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fade-in-out {
  from {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes revealHideText {
  from,
  to {
    filter: blur(9px);
  }
  5% {
    filter: blur(9px);
  }
  10% {
    filter: blur(0px);
  }
  90% {
    filter: blur(0px);
  }
  95% {
    filter: blur(9px);
  }
}

@keyframes revealText {
  from {
    filter: blur(9px);
  }
  17% {
    filter: blur(9px);
  }
  22% {
    filter: blur(0px);
  }
  78% {
    filter: blur(0px);
  }
  to {
    filter: blur(0px);
  }
}

/* iPad Pro resolution portrait */
@media screen and (max-width: 1024px) and (max-height: 1400px) {
}

/* iPad Pro resolution landscape */
@media screen and (max-width: 1400px) and (max-height: 1024px) {
}

/* iPhone Pro Max resolution lanscape */
@media screen and (max-height: 960px) and (max-height: 450px) {
  .welcome-container {
    --orbs-size: 34%;
    --tutorial-orbs-y-offset: min(300%, calc(100vh / 3));
  }

  .tutorial-container {
    & .tutorial-orb {
      --tutorial-orb-size: 40px;

      & span.material-symbols-outlined {
        font-size: 22px;
      }
    }
  }

  /* #orb-guide-welcome {
    & .orb-light:nth-child(1) {
      --offset: 0;
      --relative-size: 7px;
      width: calc(100% + 7px);
      transform-origin: calc(var(--origin-offset) + 0);
    }
    & .orb-light:nth-child(2) {
      --offset: 10px;
      --relative-size: 6px;
      width: calc(100% + 6px);
      transform-origin: calc(var(--origin-offset) + 2px);
    }
    & .orb-light:nth-child(3) {
      --offset: -40px;
      --relative-size: 10px;
      width: calc(100% + 10px);
      transform-origin: calc(var(--origin-offset) + -22px);
    }
    & .orb-light:nth-child(4) {
      --offset: -20px;
      --relative-size: 8px;
      width: calc(100% + 8px);
      transform-origin: calc(var(--origin-offset) + -7px);
    }
    & .orb-light:nth-child(5) {
      --offset: -5px;
      --relative-size: 7px;
      width: calc(100% + 7px);
      transform-origin: calc(var(--origin-offset) + -2px);
    }
    & .orb-light:nth-child(6) {
      --offset: 40px;
      --relative-size: 6px;
      width: calc(100% + 6px);
      transform-origin: calc(var(--origin-offset) + 22px);
    }
  } */

  #eclipse {
    width: calc(100% * 1.7) !important;
    height: calc(100% * 1.7) !important;
  }
}

/* iPhone Pro Max resolution portrait */
@media screen and (max-width: 450px) and (max-height: 960px) {
  .welcome-container {
    --tutorial-orbs-y-offset: min(320%, calc(100vh / 3));
  }

  .tutorial-container {
    & .tutorial-orb {
      --tutorial-orb-size: 40px;

      & span.material-symbols-outlined {
        font-size: 22px;
      }
    }
  }

  /* #orb-guide-welcome {
    & .orb-light:nth-child(2) {
      --offset-override: 3%;
      transform-origin: calc(var(--origin-offset) + var(--offset-override, var(--offset)))
        calc(var(--origin-offset) + var(--offset-override, var(--offset)));
    }
    & .orb-light:nth-child(3) {
      --offset-override: -10%;
      transform-origin: calc(var(--origin-offset) + var(--offset-override, var(--offset)))
        calc(var(--origin-offset) + var(--offset-override, var(--offset)));
    }
    & .orb-light:nth-child(4) {
      --offset-override: -7.5%;
      transform-origin: calc(var(--origin-offset) + var(--offset-override, var(--offset)))
        calc(var(--origin-offset) + var(--offset-override, var(--offset)));
    }
    & .orb-light:nth-child(5) {
      --offset-override: 2.5%;
      transform-origin: calc(var(--origin-offset) + var(--offset-override, var(--offset)))
        calc(var(--origin-offset) + var(--offset-override, var(--offset)));
    }
    & .orb-light:nth-child(6) {
      --offset-override: 10%;
      transform-origin: calc(var(--origin-offset) + var(--offset-override, var(--offset)))
        calc(var(--origin-offset) + var(--offset-override, var(--offset)));
    }
  } */
}