@charset "UTF-8";

:root {
  --s: 200px;
  --c1-login: #143a74;
  --c2-login: #3d6aff;
  --c3-login: #2c428c;

  --c1-cadastro: #f8f8ff;
  --c2-cadastro: #ffffff;
  --c3-cadastro: #f0ebe8;
}

body {
  width: 100%;
  height: 100%;

  background: repeating-conic-gradient(
        from 30deg,
        #0000 0 120deg,
        var(--c3-login) 0 180deg
      )
      calc(0.5 * var(--s)) calc(0.5 * var(--s) * 0.577),
    repeating-conic-gradient(
      from 30deg,
      var(--c1-login) 0 60deg,
      var(--c2-login) 0 120deg,
      var(--c3-login) 0 180deg
    );
  background-size: var(--s) calc(var(--s) * 0.577);

  transition: all 0.5s cubic-bezier(0.12, 0.53, 0.54, 0.94);
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Fica atrás do conteúdo principal */

  background: repeating-conic-gradient(
        from 30deg,
        #0000 0 120deg,
        var(--c3-cadastro) 0 180deg
      )
      calc(0.5 * var(--s)) calc(0.5 * var(--s) * 0.577),
    repeating-conic-gradient(
      from 30deg,
      var(--c1-cadastro) 0 60deg,
      var(--c2-cadastro) 0 120deg,
      var(--c3-cadastro) 0 180deg
    );
  background-size: var(--s) calc(var(--s) * 0.577);
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.12, 0.53, 0.54, 0.94);
}

body.state-cadastro::before {
  opacity: 1;
}

.container-master {
  filter: drop-shadow(0px 0px 85px #ffffffbf);
  transition: all 0.5s cubic-bezier(0.12, 0.53, 0.54, 0.94);
}