/*
 * LCS Estrutura - cena institucional compartilhada pela tela de carregamento
 * (public/index.html) e pela tela de login (src/pages/Login).
 *
 * Camadas, de trás para frente:
 *   .lcs-scene              fundo azul institucional (gradiente)
 *   .lcs-scene__photo       fotografia institucional opcional (ver abaixo)
 *   .lcs-scene__grid        malha técnica discreta (desenho de projeto)
 *   .lcs-scene__steel       estrutura metálica / galpão em pórticos (SVG local)
 *   .lcs-scene__blocks      parede de blocos de concreto (SVG local)
 *   .lcs-scene__shade       véu de contraste para garantir leitura
 *   .lcs-scene__band        filete azul/vermelho no rodapé
 *
 * Para usar uma fotografia institucional oficial no lugar da arte vetorial,
 * defina a variável --lcs-scene-photo, por exemplo:
 *   .lcs-scene { --lcs-scene-photo: url("/brand/lcs-foto-institucional.jpg"); }
 * (no login, a imagem de fundo configurada em Configurações > Whitelabel já
 * alimenta esta variável automaticamente).
 */

.lcs-scene {
  --lcs-blue: #32609e;
  --lcs-blue-deep: #10274a;
  --lcs-red: #932d2d;
  --lcs-red-light: #c25b5b;
  position: relative;
  overflow: hidden;
  background-color: var(--lcs-blue-deep);
  background-image:
    radial-gradient(ellipse 70% 60% at 72% 28%, rgba(50, 96, 158, 0.55) 0%, rgba(50, 96, 158, 0) 70%),
    radial-gradient(ellipse 50% 45% at 12% 92%, rgba(147, 45, 45, 0.18) 0%, rgba(147, 45, 45, 0) 70%),
    linear-gradient(160deg, #0e2342 0%, #173763 48%, #0f2547 100%);
}

.lcs-scene__layer {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.lcs-scene__photo {
  inset: 0;
  background-image: var(--lcs-scene-photo, none);
  background-size: cover;
  background-position: center;
  opacity: 0.32;
  filter: grayscale(0.35);
}

.lcs-scene__grid {
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 30%, transparent 100%);
}

.lcs-scene__steel {
  top: 5vh;
  right: -3vw;
  width: min(60vw, 980px);
  aspect-ratio: 885 / 659;
  background: url("lcs-cena-estrutura.svg") no-repeat center / contain;
  opacity: 0.55;
}

.lcs-scene__blocks {
  left: -2vw;
  bottom: -3vh;
  width: min(44vw, 700px);
  aspect-ratio: 772 / 711;
  background: url("lcs-cena-blocos.svg") no-repeat center / contain;
  opacity: 0.5;
}

.lcs-scene__shade {
  inset: 0;
  background:
    radial-gradient(ellipse 38% 34% at 50% 50%, rgba(10, 26, 50, 0.38) 0%, rgba(10, 26, 50, 0) 100%),
    linear-gradient(90deg, rgba(10, 26, 50, 0.25) 0%, rgba(10, 26, 50, 0) 45%, rgba(10, 26, 50, 0.35) 100%),
    linear-gradient(180deg, rgba(10, 26, 50, 0) 55%, rgba(10, 26, 50, 0.45) 100%);
}

.lcs-scene__band {
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--lcs-blue) 0%, var(--lcs-blue) 72%, var(--lcs-red) 72%, var(--lcs-red) 100%);
}

/* Tablet: a arte recua para as bordas e fica mais suave. */
@media (max-width: 959px) {
  .lcs-scene__steel {
    top: 2vh;
    right: -18vw;
    width: 92vw;
    opacity: 0.42;
  }
  .lcs-scene__blocks {
    left: -14vw;
    bottom: -2vh;
    width: 70vw;
    opacity: 0.42;
  }
}

/* Celular: composição leve - galpão no topo, blocos na base. */
@media (max-width: 599px) {
  .lcs-scene__steel {
    top: -1vh;
    right: -34vw;
    width: 130vw;
    opacity: 0.36;
  }
  .lcs-scene__blocks {
    left: -30vw;
    bottom: -1vh;
    width: 105vw;
    opacity: 0.36;
  }
  .lcs-scene__grid {
    background-size: 40px 40px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .lcs-scene__steel,
  .lcs-scene__blocks {
    animation: lcs-scene-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .lcs-scene__blocks {
    animation-delay: 0.08s;
  }
}

@keyframes lcs-scene-in {
  from {
    transform: translateY(14px);
    opacity: 0;
  }
}