/* ============================================================
   A capa — porte fiel do fundo animado da TELA DE LOGON do InvenTI
   (frontend/src/theme.css:235-289 e :1153-1177).

   Seis camadas, na mesma ordem do produto:
     1 aurora cônica desfocada, girando
     2 grade em perspectiva (piso tron)
     3 pontos flutuantes rosa e azul
     4 circuito SVG com pulso de energia percorrendo as trilhas
     5 palavras do domínio cruzando a tela
     6 vinheta, para o conteúdo ficar em foco

   Como no produto, a capa é uma ILHA ESCURA: foi desenhada para fundo
   escuro e continua escura no tema claro, senão a animação sai lavada.
   ============================================================ */

.capa {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0a0814;
  border-radius: 3px;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
  padding: clamp(2.6rem, 7vw, 5.5rem) clamp(1.4rem, 4vw, 3.4rem);
  color: #f2f0f8;
}

/* 1 — aurora */
.capa-aurora {
  position: absolute; inset: -40%; z-index: 0; pointer-events: none;
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(50,0,120,.5), rgba(202,45,126,.32), rgba(58,82,200,.34), rgba(50,0,120,.5));
  filter: blur(90px); opacity: .55;
  animation: capaAurora 26s linear infinite;
}
@keyframes capaAurora { to { transform: rotate(360deg); } }

/* 2 — grade em perspectiva (piso tron) */
.capa-grade {
  position: absolute; left: -20%; right: -20%; bottom: -12%; height: 55%; z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(202,45,126,.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58,82,200,.30) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: perspective(480px) rotateX(62deg);
  transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.8), transparent 85%);
          mask-image: linear-gradient(to top, rgba(0,0,0,.8), transparent 85%);
  animation: capaGrade 7s linear infinite;
}
@keyframes capaGrade { to { background-position: 0 44px, 0 0; } }

/* 3 — pontos */
.capa-ponto {
  position: absolute; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(202,45,126,.95), rgba(202,45,126,0) 70%);
  animation: capaPonto var(--dur, 9s) ease-in-out var(--delay, 0s) infinite alternate;
  opacity: .5;
}
.capa-ponto.azul { background: radial-gradient(circle, rgba(96,140,255,.9), rgba(96,140,255,0) 70%); }
@keyframes capaPonto {
  from { transform: translate3d(0,0,0) scale(.8); opacity: .25; }
  to   { transform: translate3d(var(--dx,18px), var(--dy,-26px), 0) scale(1.15); opacity: .7; }
}

/* 4 — circuito com energia percorrendo */
.capa-circuito {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  opacity: .4; pointer-events: none;
}
.capa-circuito path {
  fill: none; stroke-width: 1.4; stroke-linecap: round;
  stroke-dasharray: 8 180;
  animation: capaCircuito 5.5s linear infinite;
}
@keyframes capaCircuito { to { stroke-dashoffset: -376; } }

/* 5 — palavras do domínio cruzando a tela */
.capa-flutua { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.capa-flutua .fl {
  position: absolute; left: -14%;
  display: inline-flex; align-items: center; gap: 7px;
  opacity: 0; will-change: transform, opacity;
  animation: capaAtravessa var(--dur, 44s) linear var(--delay, 0s) infinite;
  filter: drop-shadow(0 0 7px currentColor);
  font: 800 var(--fs, 13px)/1 var(--mono, "JetBrains Mono", monospace);
  letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
  text-shadow: 0 0 12px currentColor, 0 0 3px currentColor;
}
@keyframes capaAtravessa {
  0%   { transform: translateX(0) translateY(0) rotate(var(--rot, 0deg)); opacity: 0; }
  6%   { opacity: var(--op, .40); }
  50%  { transform: translateX(60vw) translateY(calc(var(--drift, 0px) * .5)) rotate(var(--rot, 0deg)); }
  94%  { opacity: var(--op, .40); }
  100% { transform: translateX(128vw) translateY(var(--drift, 0px)) rotate(var(--rot, 0deg)); opacity: 0; }
}

/* 6 — vinheta */
.capa-vinheta {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(720px 560px at 50% 46%, transparent 30%, rgba(10,8,20,.72) 100%);
}

/* conteúdo */
.capa-conteudo {
  position: relative; z-index: 1;
  animation: capaEntra .55s cubic-bezier(.22,.9,.3,1) both;
}
.capa-conteudo > * + * { margin-top: 0; }
@keyframes capaEntra {
  from { opacity: 0; transform: translateY(22px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.capa h1 { color: #fff; }
.capa .lead { color: #c6bfe2; }
.capa .eyebrow { color: #8b83ad; }
.capa .btn-ghost { color: #f2f0f8; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.capa .tag { color: #8b83ad; border-color: rgba(255,255,255,.16); }

/* respeita quem pediu menos movimento — como o produto faz */
@media (prefers-reduced-motion: reduce) {
  .capa-aurora, .capa-grade, .capa-ponto, .capa-circuito path { animation: none !important; }
  .capa-flutua { display: none; }
  .capa-conteudo { animation: none; }
}