/* ============================================================
   SknView — identidade visual: variáveis, fundo animado e logo.
   Carregado em TODAS as páginas, antes de ui.css.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

:root {
  --bg: #0e2423;
  --bg-2: #11302d;
  --card: rgba(14, 40, 38, .72);
  --borda: rgba(255, 255, 255, .09);
  --borda-forte: rgba(255, 255, 255, .18);
  --texto: rgba(255, 255, 255, .94);
  --texto-2: rgba(255, 255, 255, .62);
  --texto-3: rgba(255, 255, 255, .40);
  --accent: #2dd4bf;
  --accent-2: #5eead4;
  --ok: #34d399;
  --alerta: #fbbf24;
  --erro: #f87171;
  --raio: 14px;
}

body {
  background: var(--bg);
  color: var(--texto);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

/* ════════ camadas de fundo ════════
   Todas com pointer-events:none e z-index baixo: são decorativas e
   nunca podem interceptar clique do conteúdo. */
#aurora { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; opacity: .18; contain: strict; }
.aur { position: absolute; border-radius: 50%; will-change: transform; }
.aur:nth-child(1) {
  width: 70vw; height: 70vw; top: -28vw; left: -20vw;
  background: radial-gradient(circle at 35% 40%, rgba(45,212,191,.55) 0%, rgba(14,165,233,.18) 38%, transparent 68%);
  animation: aurDrift1 26s ease-in-out infinite;
}
.aur:nth-child(2) {
  width: 60vw; height: 60vw; bottom: -25vw; right: -16vw;
  background: radial-gradient(circle at 60% 55%, rgba(20,184,166,.5) 0%, rgba(45,212,191,.15) 40%, transparent 68%);
  animation: aurDrift2 32s ease-in-out infinite;
}
@keyframes aurDrift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(6vw,4vh) scale(1.08); } }
@keyframes aurDrift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-5vw,-5vh) scale(1.06); } }

.overlay {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(20,72,70,.46) 0%, transparent 24%, transparent 76%, rgba(20,72,70,.55) 100%),
    radial-gradient(ellipse 60% 60% at 50% 50%, rgba(14,36,35,.08) 0%, rgba(14,36,35,.72) 100%),
    rgba(14,36,35,.42);
}
.grid {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 100%);
}
.grain {
  position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  background-size: 180px;
}
#net { position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: .55; }

/* ════════ logo com órbitas ════════ */
.marca-logo {
  position: relative; width: 132px; height: 132px; margin: 0 auto 14px;
  animation: subirEntrando .65s cubic-bezier(.22,1,.36,1) .35s both;
}
@keyframes subirEntrando { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

.fl-halo {
  position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(45,212,191,.18) 0%, rgba(45,212,191,.05) 45%, transparent 70%);
  animation: haloRespira 5.5s ease-in-out infinite; will-change: transform, opacity;
}
@keyframes haloRespira { 0%,100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.18); opacity: 1; } }

.marca-logo img {
  position: absolute; top: 50%; left: 50%; width: 62px; transform: translate(-50%,-50%);
  filter: brightness(0) invert(1) drop-shadow(0 0 16px rgba(45,212,191,.5));
  animation: logoBrilha 3.5s ease-in-out infinite;
}
@keyframes logoBrilha {
  0%,100% { opacity: .82; transform: translate(-50%,-50%) scale(.96); }
  50%     { opacity: 1;   transform: translate(-50%,-50%) scale(1.06); }
}

.fl-orbit { position: absolute; top: 50%; left: 50%; border-radius: 50%; will-change: transform; pointer-events: none; }
.fl-orbit-1 { width: 112px; height: 112px; margin: -56px 0 0 -56px; animation: giraH 9s linear infinite; }
.fl-orbit-2 { width: 144px; height: 144px; margin: -72px 0 0 -72px; animation: giraAH 15s linear infinite; }
.fl-sat {
  position: absolute; top: -4px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 13px rgba(45,212,191,.95), 0 0 30px rgba(45,212,191,.45);
}
.fl-sat.small { width: 5px; height: 5px; top: auto; bottom: -3px; background: var(--accent-2); }

.fl-arc { position: absolute; top: 50%; left: 50%; border-radius: 50%; will-change: transform; pointer-events: none; }
.fl-arc-1 {
  width: 112px; height: 112px; margin: -56px 0 0 -56px;
  background: conic-gradient(from 0deg, transparent 0%, transparent 62%, rgba(45,212,191,.10) 72%, var(--accent) 88%, #b9fff5 96%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: giraH 4.5s linear infinite;
}
.fl-arc-2 {
  width: 130px; height: 130px; margin: -65px 0 0 -65px;
  background: conic-gradient(from 180deg, transparent 0%, transparent 74%, rgba(94,234,212,.55) 90%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  animation: giraAH 7s linear infinite; opacity: .85;
}
@keyframes giraH  { to { transform: rotate(360deg); } }
@keyframes giraAH { to { transform: rotate(-360deg); } }

/* Logo pequeno do cabeçalho das páginas internas. */
.logo-topo {
  width: 30px; height: 30px; flex: none;
  filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(45,212,191,.55));
}

@media (prefers-reduced-motion: reduce) {
  .aur, .fl-orbit, .fl-arc, .fl-halo, .marca-logo, .marca-logo img { animation: none !important; }
}