@property --gap {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(245, 247, 250, 0.6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 999999;
  isolation: isolate;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: all;
}

/* quando quiser ocultar */
#loading-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#loading-overlay .loader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#loading-overlay #loader-text {
  margin-top: 16px;
  text-align: center;
}

.loader {
  --size: 3px;
  --radius: 10px;

  --face-blue: rgba(100, 170, 195, 0.85);
  --face-green: rgba(110, 165, 85, 0.85);
  --face-beige: rgba(202, 193, 181, 0.85);
  --face-side: rgba(50, 60, 70, 0.85);

  /*
    Distância visual de abertura.

    Esse valor continua relacionado ao deslocamento
    original de 25 unidades.
  */
  --travel: calc(14.9418 * var(--size));

  /*
    Inclinação da lateral calculada para uma face 45x45
    com rotateX(65deg) e rotateZ(45deg).
  */
  --side-slope: calc(13.4476 * var(--size));

  --gap: 0px;

  position: relative;

  width: calc(100 * var(--size));
  height: calc(100 * var(--size));

  animation: loaderCycle 2.2s ease-in-out infinite;
}


/* =========================================================
   FACES PRINCIPAIS
   ========================================================= */

.loader-green,
.loader-blue,
.loader-beige {
  position: absolute;

  left: calc(26 * var(--size));
  top: calc(27 * var(--size));

  width: calc(45 * var(--size));
  height: calc(45 * var(--size));

  border-radius:
    var(--radius)
    var(--radius)
    0
    0;

  transform-origin: center;

  will-change: transform;
}


/* =========================================================
   VERDE
   ========================================================= */

.loader-green {
  background: var(--face-green);

  z-index: 4;

  transform:
    translateY(calc(-1 * var(--gap)))
    rotateX(65deg)
    rotateZ(45deg);
}


/* =========================================================
   AZUL
   ========================================================= */

.loader-blue {
  background: var(--face-blue);

  z-index: 2;

  transform:
    rotateX(65deg)
    rotateZ(45deg);
}


/* =========================================================
   BEGE
   ========================================================= */

.loader-beige {
  background: var(--face-beige);

  z-index: 1;

  transform:
    translateY(var(--gap))
    rotateX(65deg)
    rotateZ(45deg);
}


/* =========================================================
   FACE LATERAL
   ========================================================= */

.loader-side {
  position: absolute;

  /*
    Geometria recalculada para faces 45x45.
  */
  left: calc(16.6802 * var(--size));
  top: calc(34.5582 * var(--size));

  width: calc(31.8198 * var(--size));

  height: calc(
    var(--travel)
    + var(--travel)
    + var(--side-slope)
  );

  background: var(--face-side);

  z-index: 3;

  /*
    A lateral utiliza exatamente o mesmo --gap
    das faces verde e bege.

    Portanto:
      topo sobe com o verde
      base desce com o bege
  */
  clip-path: polygon(
    0 calc(var(--travel) - var(--gap)),

    100% calc(
      var(--travel)
      - var(--gap)
      + var(--side-slope)
    ),

    100% calc(
      var(--travel)
      + var(--gap)
      + var(--side-slope)
    ),

    0 calc(
      var(--travel)
      + var(--gap)
    )
  );

  will-change: clip-path;
}


/* =========================================================
   ANIMAÇÃO
   ========================================================= */

@keyframes loaderCycle {

  /*
    Fechado
  */
  0%,
  100% {
    --gap: 0px;
  }

  /*
    Aberto

    0 → 27.27%     abre
    27.27 → 72.73% permanece aberto
    72.73 → 100%   fecha
  */
  27.27%,
  72.73% {
    --gap: var(--travel);
  }
}


/* =========================================================
   ACESSIBILIDADE
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .loader {
    animation: none;

    /*
      Mantém o logo aberto caso o usuário
      prefira reduzir animações.
    */
    --gap: var(--travel);
  }
}