/* ==========================================================================
   Efeitos EXCLUSIVOS da tela de login — Mídia 63

   Este arquivo é carregado só em templates/core/registration/login.html.
   Nada daqui entra no painel interno: dashboard, listas e formulários ficam
   limpos, porque lá o editor passa horas trabalhando e efeito decorativo
   atrapalha. Aqui a visita dura dez segundos, então cabe.

   Dois efeitos, ambos reimplementados em CSS e JS puro a partir das ideias do
   reactbits.dev (que entrega componente React e não serve para um painel
   Django):

   1. CACOS   — estilhaços de vidro com parallax leve ao mover o ponteiro.
                Fundo da tarja da marca, atrás do conteúdo, em opacidade baixa.
                Nunca por cima dos campos de usuário e senha.
   2. GLITCH  — em UM elemento só, o título "Mídia 63". Uma passada de 600ms ao
                carregar e outra no hover. Nunca em laço infinito: texto
                piscando eterno na tela de senha é hostil.

   Tudo anima apenas `transform` e `opacity`.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CACOS — estilhaços com parallax

   Substituíram os cubos 3D. Cubos mais estilhaços mais glitch na mesma tela
   é excesso: três coisas se mexendo enquanto alguém digita a senha.

   Oito peças, em `clip-path`. Nada de canvas nem WebGL: são oito polígonos
   estáticos, e a única coisa que muda por quadro é um `translate3d`.

   O parallax vem de duas custom properties escritas pelo JS no CONTAINER
   (`--cx`/`--cy`, já em px e já limitadas a 12px). Cada caco multiplica pelo
   próprio `--prof`, que é a profundidade dele: os do fundo se movem menos.
   Assim o JS escreve DUAS propriedades por quadro, não dezesseis.

   Paleta: grafite da marca com um caco em crimson. Sem arco-íris.
   -------------------------------------------------------------------------- */

.lgfx-cacos {
    position: absolute;
    inset: 0;
    z-index: 0; /* atrás de todo o conteúdo da tarja, que sobe para z-index 1 */
    overflow: hidden;
    pointer-events: none; /* jamais captura clique */
    --cx: 0px;
    --cy: 0px;
}

.lgfx-caco {
    position: absolute;
    display: block;
    --prof: 0.5;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.16) 0%,
        rgba(255, 255, 255, 0.04) 45%,
        rgba(255, 255, 255, 0) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.10);
    transform: translate3d(calc(var(--cx) * var(--prof)), calc(var(--cy) * var(--prof)), 0);
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

/* Lâminas: polígonos finos e alongados, inclinados. As posições são fixas e
   escolhidas para não cair atrás da manchete nem do jabuti. */
.lgfx-caco--1 {
    top: -6%; left: 4%; width: 26%; height: 46%;
    --prof: 0.35;
    clip-path: polygon(38% 0%, 100% 12%, 62% 100%, 0% 74%);
}
.lgfx-caco--2 {
    top: 8%; right: -4%; width: 30%; height: 38%;
    --prof: 0.85;
    clip-path: polygon(0% 18%, 82% 0%, 100% 66%, 24% 100%);
}
.lgfx-caco--3 {
    top: 34%; left: -6%; width: 22%; height: 34%;
    --prof: 1;
    clip-path: polygon(0% 0%, 100% 22%, 70% 100%, 12% 78%);
}
.lgfx-caco--4 {
    bottom: 6%; left: 18%; width: 34%; height: 40%;
    --prof: 0.55;
    clip-path: polygon(20% 0%, 100% 30%, 74% 100%, 0% 62%);
}
.lgfx-caco--5 {
    bottom: -8%; right: 8%; width: 28%; height: 44%;
    --prof: 0.7;
    clip-path: polygon(0% 26%, 68% 0%, 100% 58%, 30% 100%);
}
.lgfx-caco--6 {
    top: 52%; right: 26%; width: 18%; height: 26%;
    --prof: 1.1;
    clip-path: polygon(0% 12%, 88% 0%, 100% 84%, 16% 100%);
}
/* O caco de crimson: UM só. É acento da marca, não fundo. */
.lgfx-caco--7 {
    top: 18%; left: 30%; width: 16%; height: 30%;
    --prof: 0.95;
    clip-path: polygon(46% 0%, 100% 40%, 54% 100%, 0% 56%);
    background: linear-gradient(
        135deg,
        rgba(200, 16, 46, 0.42) 0%,
        rgba(200, 16, 46, 0.10) 60%,
        rgba(200, 16, 46, 0) 100%
    );
    border-color: rgba(255, 77, 94, 0.22);
}
.lgfx-caco--8 {
    bottom: 24%; left: 52%; width: 24%; height: 30%;
    --prof: 0.25;
    clip-path: polygon(0% 0%, 84% 18%, 100% 76%, 22% 100%);
}

/* Opacidade baixa: o fundo é ambiente, não ilustração. O card de acesso fica
   na coluna da direita, sobre superfície própria, então o contraste do
   formulário não depende disto — mas a manchete da tarja fica POR CIMA, e por
   isso os cacos param em 0,5. Branco sobre a tarja grafite continua em 15:1. */
.lgfx-cacos {
    opacity: 0.5;
}
/* --------------------------------------------------------------------------
   2. GLITCH — um elemento, dois disparos, nunca infinito
   -------------------------------------------------------------------------- */

.lgfx-glitch {
    position: relative;
    display: inline-block;
}

/* as duas cópias ficam escondidas e só aparecem durante a passada */
.lgfx-glitch::before,
.lgfx-glitch::after {
    content: attr(data-texto);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
}
.lgfx-glitch::before {
    color: #c8102e; /* crimson da marca */
    text-shadow: -2px 0 #c8102e;
}
.lgfx-glitch::after {
    color: #2de2e6; /* ciano de contraponto, só no efeito */
    text-shadow: 2px 0 #2de2e6;
}

.lgfx-glitch.is-glitch::before {
    opacity: 0.85;
    animation: lgfx-glitch-a 0.6s steps(2, end) 1;
}
.lgfx-glitch.is-glitch::after {
    opacity: 0.85;
    animation: lgfx-glitch-b 0.6s steps(2, end) 1;
}

@keyframes lgfx-glitch-a {
    0%   { clip-path: inset(12% 0 78% 0); transform: translate3d(-3px, 0, 0); }
    20%  { clip-path: inset(56% 0 22% 0); transform: translate3d(3px, 0, 0); }
    40%  { clip-path: inset(30% 0 60% 0); transform: translate3d(-2px, 0, 0); }
    60%  { clip-path: inset(72% 0 8% 0);  transform: translate3d(2px, 0, 0); }
    80%  { clip-path: inset(20% 0 66% 0); transform: translate3d(-1px, 0, 0); }
    100% { clip-path: inset(0 0 100% 0);  transform: translate3d(0, 0, 0); }
}
@keyframes lgfx-glitch-b {
    0%   { clip-path: inset(66% 0 16% 0); transform: translate3d(3px, 0, 0); }
    20%  { clip-path: inset(18% 0 70% 0); transform: translate3d(-3px, 0, 0); }
    40%  { clip-path: inset(48% 0 38% 0); transform: translate3d(2px, 0, 0); }
    60%  { clip-path: inset(8% 0 84% 0);  transform: translate3d(-2px, 0, 0); }
    80%  { clip-path: inset(60% 0 26% 0); transform: translate3d(1px, 0, 0); }
    100% { clip-path: inset(0 0 100% 0);  transform: translate3d(0, 0, 0); }
}

/* --------------------------------------------------------------------------
   3. CURSOR NO LOGIN — aqui pode ser mais expressivo
   O painel interno mantém a seta do sistema; aqui, e só aqui, ela some.
   A classe é posta pelo JS: sem JS, o cursor nativo continua.
   -------------------------------------------------------------------------- */

body.lgfx-sem-cursor {
    cursor: none;
}
/* campo de texto é exceção mesmo na tela de login: sem I-beam ninguém acerta
   onde está digitando */
body.lgfx-sem-cursor input,
body.lgfx-sem-cursor textarea,
body.lgfx-sem-cursor select,
body.lgfx-sem-cursor [contenteditable] {
    cursor: auto;
}

/* A tela de login é standalone e não carrega o custom.css, então os tokens
   --adm-* não existem aqui. Além disso ela é meio escura (tarja) e meio clara
   (formulário): um anel de cor fixa sumiria numa das metades. `difference`
   resolve as duas coisas — o anel se inverte conforme o fundo. */
body.lgfx-sem-cursor .efx-cursor {
    border-color: #ffffff;
    mix-blend-mode: difference;
}
body.lgfx-sem-cursor .efx-cursor.is-interativo {
    border-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.35);
}

/* --------------------------------------------------------------------------
   4. DESLIGAMENTOS
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .lgfx-cacos {
        display: none !important;
    }
    .lgfx-glitch::before,
    .lgfx-glitch::after {
        display: none !important;
        animation: none !important;
    }
    body.lgfx-sem-cursor {
        cursor: auto !important;
    }
}

/* abaixo de 1024px não há ponteiro para seguir e os cacos só comem bateria */
@media (max-width: 1023.98px) {
    .lgfx-cacos {
        display: none !important;
    }
    body.lgfx-sem-cursor {
        cursor: auto !important;
    }
}

@media (pointer: coarse) {
    .lgfx-cacos {
        display: none !important;
    }
    body.lgfx-sem-cursor {
        cursor: auto !important;
    }
}