/* Tela de entrada no estilo da intro do AfiliaTudo: creme com a grade sutil,
 * marca pequena, eyebrow e um filete da marca. Era preta com o logo piscando —
 * aqui nada pisca, a régua percorre, que é o que diz "carregando". */
.entry-loading-open{overflow:hidden!important}

.entry-loading{
  position:fixed; inset:0; z-index:2147483000;
  display:grid; place-items:center; min-height:100%; padding:24px;
  background:
    linear-gradient(to right, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px),
    var(--canvas) !important;
  background-size:44px 44px, 44px 44px, auto !important;
  color:var(--ink); isolation:isolate; opacity:1; transition:opacity .22s ease; outline:none;
}
/* a mesma vinheta da intro: puxa o olho pro centro sem escurecer nada */
.entry-loading:after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 0%, var(--canvas) 72%);
}
.entry-in{position:relative; z-index:1; text-align:center; padding:0 24px}

.entry-logo{
  /* 22px é a altura do logo do AfiliaTudo, que é quase quadrado; este é um
     wordmark 3:1 e na mesma altura ficava ilegível. Cresce com a tela. */
  display:block; height:clamp(44px, 9vw, 64px); width:auto; margin:0 auto 24px;
  opacity:0; animation:entrarSuave .5s ease .05s forwards;
}
.entry-eb{opacity:0; animation:entrarSuave .5s ease .14s forwards}

/* filete da marca percorrendo: indeterminado, porque não sabemos quanto falta */
.entry-line{
  display:block; height:2px; width:160px; margin:26px auto 0; border-radius:2px;
  background:color-mix(in srgb, var(--green) 14%, transparent); overflow:hidden; position:relative;
}
.entry-line:after{
  content:''; position:absolute; inset:0; width:40%; border-radius:2px;
  background:var(--green); animation:reguaAndando 1.1s cubic-bezier(.4,0,.2,1) infinite;
}

.entry-loading-leave{opacity:0; pointer-events:auto}

@keyframes entrarSuave{to{opacity:1}}
@keyframes reguaAndando{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}

@media(prefers-reduced-motion:reduce){
  .entry-loading{transition:none}
  .entry-logo,.entry-eb{opacity:1; animation:none}
  .entry-line:after{animation:none; width:100%}
}