/* =========================================================
   Design System — Camada 2: primitivas de vidro líquido
   GlassPanel, GlassButton, fundo aurora, tubos de líquido.
   Efeitos feitos só com CSS (backdrop-filter, gradientes).
   ========================================================= */

/* ---------- Fundo aurora (mesh gradient orgânico animado) ---------- */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: radial-gradient(circle at 50% 50%, var(--bg-deep-2), var(--bg-deep) 70%);
  overflow: hidden;
}

.aurora__blob {
  position: absolute;
  width: 62vmax;
  height: 62vmax;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  will-change: transform;
}

.aurora__blob--green {
  background: radial-gradient(circle, var(--brand-mint) 0%, rgba(61, 220, 151, 0) 65%);
  top: -22vmax;
  left: -16vmax;
  animation: drift-a 26s var(--ease-liquid) infinite alternate;
}

.aurora__blob--purple {
  background: radial-gradient(circle, var(--brand-purple) 0%, rgba(168, 85, 247, 0) 65%);
  bottom: -26vmax;
  right: -18vmax;
  animation: drift-b 32s var(--ease-liquid) infinite alternate;
}

.aurora__blob--teal {
  background: radial-gradient(circle, var(--brand-teal) 0%, rgba(20, 184, 166, 0) 60%);
  top: 30%;
  right: -10vmax;
  width: 44vmax;
  height: 44vmax;
  opacity: 0.4;
  animation: drift-c 38s var(--ease-liquid) infinite alternate;
}

/* Granulação sutil: tira o "banding" dos gradientes grandes. */
.aurora::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes drift-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(16vmax, 12vmax, 0) scale(1.18); }
}
@keyframes drift-b {
  0%   { transform: translate3d(0, 0, 0) scale(1.1); }
  100% { transform: translate3d(-18vmax, -10vmax, 0) scale(1); }
}
@keyframes drift-c {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-12vmax, 14vmax, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .aurora__blob { animation: none; }
}

/* ---------- GlassPanel ---------- */
.glass {
  position: relative;
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  overflow: hidden;
}

/* Realce especular: a "lente" pega luz na borda superior. */
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0.05) 26%,
    rgba(255, 255, 255, 0) 55%
  );
  mix-blend-mode: screen;
}

.glass--soft { background: var(--glass-surface-soft); }
.glass--strong {
  background: var(--glass-surface-strong);
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(165%);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(165%);
}
.glass--flat { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.glass--pill { border-radius: var(--r-pill); }

/* Fallback: sem backdrop-filter o vidro vira superfície sólida legível. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(22, 27, 48, 0.9); }
  :root[data-theme='light'] .glass { background: rgba(255, 255, 255, 0.92); }
}

/* ---------- GlassButton ---------- */
.gbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 12px 20px;
  min-height: 46px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-border);
  background: var(--glass-surface);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease-liquid),
              box-shadow var(--t-med) var(--ease-liquid),
              border-color var(--t-med) var(--ease-liquid),
              background var(--t-med) var(--ease-liquid);
  -webkit-tap-highlight-color: transparent;
}

.gbtn::after {
  /* Onda especular que atravessa o botão no hover. */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 20%, var(--glass-specular) 50%, transparent 80%);
  opacity: 0;
  transform: translateX(-70%);
  transition: transform var(--t-slow) var(--ease-liquid), opacity var(--t-fast) linear;
  pointer-events: none;
  mix-blend-mode: screen;
}

.gbtn:hover { border-color: var(--glass-border-bright); box-shadow: var(--shadow-lift); }
.gbtn:hover::after { opacity: 0.35; transform: translateX(70%); }
.gbtn:active { transform: scale(0.965); }
.gbtn:focus-visible { outline: 2px solid var(--brand-mint); outline-offset: 3px; }
.gbtn[disabled] { opacity: 0.42; cursor: not-allowed; transform: none; }

.gbtn--primary {
  background: var(--grad-primary);
  color: var(--text-on-accent);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: var(--shadow-glow-green), var(--shadow-soft);
}
.gbtn--premium {
  background: var(--grad-premium);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: var(--shadow-glow-purple), var(--shadow-soft);
}
.gbtn--ghost { background: transparent; }
.gbtn--sm { min-height: 38px; padding: 8px 14px; font-size: 0.86rem; }
.gbtn--block { width: 100%; }
.gbtn--icon { padding: 10px; min-width: 46px; }

/* ---------- Tubo de líquido (barra de atributo) ---------- */
.tube {
  --level: 60%;
  --liquid: var(--brand-mint);
  position: relative;
  height: 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.tube__liquid {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--level);
  border-radius: inherit;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--liquid) 65%, #000 8%),
    var(--liquid));
  box-shadow: 0 0 14px -2px var(--liquid);
  transition: width var(--t-slow) var(--ease-liquid), background var(--t-med) linear;
}

/* Superfície do líquido balança de leve, como num tubo de verdade. */
.tube__liquid::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  background-size: 60% 100%;
  background-repeat: no-repeat;
  animation: slosh 3.4s ease-in-out infinite;
  mix-blend-mode: screen;
}

@keyframes slosh {
  0%, 100% { background-position: -60% 0; }
  50% { background-position: 160% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tube__liquid::after { animation: none; }
}