/* ===== Math VPS — Homepage custom theme (glass + animações) ===== */

/* Fundo com gradiente animado */
body, #page_container {
  background: linear-gradient(-45deg, #0f172a, #1e1b4b, #0c4a6e, #164e63, #1e1b4b) !important;
  background-size: 400% 400% !important;
  animation: gradientShift 22s ease infinite !important;
  min-height: 100vh;
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Brilho suave no topo */
#page_container::before {
  content: "";
  position: fixed;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 80vw;
  height: 60vh;
  background: radial-gradient(ellipse at center, rgba(56,189,248,0.16), transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: floatGlow 12s ease-in-out infinite alternate;
}
@keyframes floatGlow {
  from { opacity: .5; transform: translateX(-50%) translateY(0); }
  to   { opacity: .9; transform: translateX(-50%) translateY(20px); }
}

/* Cards de serviço — glassmorphism */
.service-card,
li[class*="service"] > div,
#services .service > div {
  background: rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s, border-color .28s, background .28s;
  animation: fadeInUp .6s both;
}

/* Hover: eleva + brilho ciano */
.service-card:hover,
li[class*="service"] > div:hover,
#services .service > div:hover {
  transform: translateY(-6px) scale(1.02) !important;
  border-color: rgba(56,189,248,0.6) !important;
  box-shadow: 0 14px 40px rgba(56,189,248,0.25), 0 0 0 1px rgba(56,189,248,0.35) inset !important;
  background: rgba(255,255,255,0.10) !important;
}

/* Entrada escalonada dos cards */
#services .service:nth-child(1) > div { animation-delay: .04s; }
#services .service:nth-child(2) > div { animation-delay: .10s; }
#services .service:nth-child(3) > div { animation-delay: .16s; }
#services .service:nth-child(4) > div { animation-delay: .22s; }
#services .service:nth-child(5) > div { animation-delay: .28s; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Widgets (glances/resources) — mesmo vidro */
.information-widget-glances,
#information-widgets > div,
.widget-container {
  background: rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 16px !important;
}

/* Barras de recurso com brilho */
.resource-bar, [class*="progress"] > div {
  box-shadow: 0 0 8px rgba(56,189,248,0.5);
}

/* Títulos dos grupos */
.services-group > h2, #services h2 {
  letter-spacing: .5px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

/* Status dot pulsante */
[class*="status"] [class*="bg-green"],
.status-dot {
  box-shadow: 0 0 0 rgba(34,197,94,0.7);
  animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* Barra de busca / quicklaunch em vidro */
input[type="text"], .quicklaunch input {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(10px);
}

/* Saudação */
#greeting { text-shadow: 0 2px 20px rgba(56,189,248,0.4); }