:host {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  &.show {
    opacity: 1;
    pointer-events: all;
    transition: opacity 0.3s ease;
  }

  .organic-loader {
    width: 80px;
    height: 80px;
    z-index: 1100;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    svg {
      width: 100%;
      height: 100%;
    }
  }
  .inner-circle {
    transform-origin: 100px 100px;
    animation: spin 2s linear infinite;
    stroke: rgb(150, 80, 160);
    stroke-width: 10px;
    stroke-dasharray: 500px;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  /* Blinking letters from left to right */
  #letter1, #letter2, #letter3, #letter4 {
    opacity: 0;
    animation: blink 1.6s infinite;
  }

  #letter1 { animation-delay: 0s; }
  #letter2 { animation-delay: 0.3s; }
  #letter3 { animation-delay: 0.6s; }
  #letter4 { animation-delay: 0.9s; }

  @keyframes blink {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
  }
}
