html, body { margin: 0; height: 100%; background: #050a14; overflow: hidden; }

.stage { --m: url(/static/images/logo_mask.webp); }

.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 70% 55% at 50% 32%, #12253f 0%, #0a1526 45%, #050a14 100%);
  contain: strict;
}

/* luz de estudio suave, alta e centralizada */
.keylight {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 46% 38% at 50% 20%,
    rgba(178, 205, 245, 0.14) 0%,
    rgba(150, 180, 225, 0.05) 45%,
    transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* vinheta discreta */
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 75% 70% at 50% 48%, transparent 42%, rgba(2, 6, 14, 0.72) 100%);
  pointer-events: none;
  z-index: 6;
}

/* ---- varredura especular: barra rasterizada pequena, ampliada na GPU ---- */
.sweeper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  contain: paint;
}
.sweeper > i {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 500px;
  transform-origin: 0 0;
  backface-visibility: hidden;
}

.screen-glow { z-index: 2; }
.screen-glow > i {
  height: var(--gh, 280px);
  transform: scale(var(--gs, 1)) translate3d(-83.08%, 0, 0);
  background: linear-gradient(112deg,
    transparent 26%,
    rgba(200, 220, 255, 0.012) 38%,
    rgba(225, 238, 255, 0.05) 47%,
    rgba(240, 248, 255, 0.085) 50%,
    rgba(225, 238, 255, 0.05) 53%,
    rgba(200, 220, 255, 0.012) 62%,
    transparent 74%);
}

.logo-shine {
  z-index: 4;
  -webkit-mask-image: var(--m);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: var(--m);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
.logo-shine > i {
  height: var(--lgh, 280px);
  transform: scale(var(--lgs, 1)) translate3d(-83.08%, 0, 0);
  background: linear-gradient(112deg,
    transparent 18%,
    rgba(255, 240, 210, 0.04) 34%,
    rgba(255, 246, 226, 0.26) 44%,
    rgba(255, 252, 242, 0.82) 49.5%,
    rgba(255, 246, 226, 0.26) 55%,
    rgba(255, 240, 210, 0.04) 66%,
    transparent 82%);
}

.logo-wrap {
  position: relative;
  max-width: 58vw;
  max-height: 74vh;
  opacity: 0;
  z-index: 3;
  transform: translate3d(0, 14px, 0) scale(1.14) rotateY(-3.5deg);
}

/* respiro lento no final: o quadro nunca fica 100% parado */
.logo-inner { position: relative; display: block; }

.logo {
  display: block;
  max-width: 58vw;
  max-height: 74vh;
  width: auto;
  height: auto;
  filter: brightness(0.6) saturate(0.95) contrast(1.06);
}

/* sombra direcional: escurece o lado oposto a luz */
.logo-shadow {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(292deg,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.6) 32%,
    rgba(0, 0, 0, 0.12) 58%,
    transparent 78%);
  mix-blend-mode: multiply;
  pointer-events: none;
  opacity: 0;
  -webkit-mask-image: var(--m);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: var(--m);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

/* rim light: fio de luz na aresta superior-esquerda, tipo estudio */
.logo-rim {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(118deg,
    rgba(255, 250, 235, 0.5) 0%,
    rgba(255, 245, 220, 0.14) 12%,
    transparent 30%);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  -webkit-mask-image: var(--m);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: var(--m);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

/* ---------- animacoes: so opacity e transform ---------- */
.stage.play .logo-wrap   { animation: appear 2.8s cubic-bezier(.33,.9,.3,1) .4s forwards,
                                      settle 5.4s cubic-bezier(.14,.85,.15,1) .4s forwards; }
.stage.play .logo-shadow { animation: fadeIn 2.2s ease 3.4s forwards; }
.stage.play .logo-rim    { animation: fadeIn 2.4s ease 3.8s forwards; }
.stage.play .logo-shine,
.stage.play .screen-glow { animation: fadeIn 1.3s ease 1.4s forwards; }
.stage.play .logo-shine > i,
.stage.play .screen-glow > i { animation: sweep 3.8s cubic-bezier(.42,.02,.58,1) 1.6s forwards; }
.stage.play .logo-inner  { animation: breathe 16s ease-in-out 6s infinite alternate; }

.stage.play .logo-wrap,
.stage.play .logo-inner,
.stage.play .logo-shine,
.stage.play .screen-glow,
.stage.play .logo-shine > i,
.stage.play .screen-glow > i { will-change: transform, opacity; }

@keyframes fadeIn  { to { opacity: 1; } }
@keyframes appear  { to { opacity: 1; } }
@keyframes settle {
  0%   { transform: translate3d(0, 14px, 0) scale(1.14) rotateY(-3.5deg); }
  100% { transform: translate3d(0, 0, 0) scale(1) rotateY(-1.2deg); }
}
@keyframes breathe {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(0, -6px, 0) scale(1.014); }
}
@keyframes sweep {
  0%   { transform: scale(var(--s)) translate3d(-83.08%, 0, 0); }
  100% { transform: scale(var(--s)) translate3d(21.54%, 0, 0); }
}
.screen-glow > i { --s: var(--gs, 1); }
.logo-shine  > i { --s: var(--lgs, 1); }

/* aquecimento: rasteriza as camadas antes do primeiro frame real */
.stage.warm .logo-wrap,
.stage.warm .logo-shadow,
.stage.warm .logo-rim,
.stage.warm .logo-shine,
.stage.warm .screen-glow { opacity: 0.002 !important; }

/* maquinas fracas: corta a camada de tela cheia */
.stage.lite .screen-glow { display: none; }

/* estado assentado direto (tela de /login: mesmo visual final da /, sem
   nunca rodar a animação de novo) — mesmos valores finais das keyframes. */
.stage.settled .logo-wrap { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotateY(-1.2deg); }
.stage.settled .logo-shadow,
.stage.settled .logo-rim,
.stage.settled .logo-shine,
.stage.settled .screen-glow { opacity: 1; }
.stage.settled .logo-shine > i,
.stage.settled .screen-glow > i { transform: scale(var(--s)) translate3d(21.54%, 0, 0); }

@media (prefers-reduced-motion: reduce) {
  .stage.play * { animation: none !important; }
  .logo-wrap { opacity: 1; transform: none; }
  .logo-shadow, .logo-rim, .logo-shine { opacity: 1; }
  .logo-shine > i { transform: scale(var(--lgs, 1)) translate3d(21.54%, 0, 0); }
  .screen-glow { display: none; }
}

.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  /* Sem transition aqui de propósito: o card é translúcido (efeito
     vidro), então animar a opacidade deste contêiner faria o tom dele
     compor com a transição (mais transparente no meio, "mais opaco" só
     no final) — visível como se o vidro mudasse de aparência. Exibindo
     direto, o card sempre mostra o mesmo nível de opacidade. */
  display: none;
  pointer-events: none;
}
.login-overlay.show {
  display: block;
  pointer-events: auto;
}