/* ==================================================================
   DS 5.1 — "Vidro vivo": glassmorphism real com blur e transparência

   Classes utilitárias para superfícies de vidro em vários níveis.
   Usa backdrop-filter: blur() — funciona em todos os navegadores modernos.
   Cai graciosamente para um fundo sólido em contextos sem suporte.
   ================================================================== */

/* Tokens de vidro */
:root {
  --glass-blur-sm: 8px;
  --glass-blur: 16px;
  --glass-blur-lg: 28px;
  --glass-blur-xl: 40px;
  --glass-tint: rgba(255, 255, 255, .06);
  --glass-tint-strong: rgba(255, 255, 255, .12);
  --glass-border: rgba(255, 255, 255, .08);
  --glass-border-strong: rgba(255, 255, 255, .15);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, .12), inset 0 .5px 0 rgba(255, 255, 255, .1);
  --glass-shadow-lg: 0 16px 48px rgba(0, 0, 0, .2), inset 0 .5px 0 rgba(255, 255, 255, .12);
}
:root:not([data-theme="dark"]):not([data-theme="neon"]) {
  --glass-tint: rgba(255, 255, 255, .65);
  --glass-tint-strong: rgba(255, 255, 255, .82);
  --glass-border: rgba(0, 0, 0, .06);
  --glass-border-strong: rgba(0, 0, 0, .1);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, .06), inset 0 .5px 0 rgba(255, 255, 255, .8);
  --glass-shadow-lg: 0 16px 48px rgba(0, 0, 0, .1), inset 0 .5px 0 rgba(255, 255, 255, .9);
}

/* Superfícies de vidro */
.glass {
  background: var(--glass-tint);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.glass--subtle {
  background: var(--glass-tint);
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  border: 1px solid var(--glass-border);
}
.glass--strong {
  background: var(--glass-tint-strong);
  backdrop-filter: blur(var(--glass-blur-lg));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
  border: 1px solid var(--glass-border-strong);
  box-shadow: var(--glass-shadow-lg);
}
.glass--hero {
  background: var(--glass-tint);
  backdrop-filter: blur(var(--glass-blur-xl));
  -webkit-backdrop-filter: blur(var(--glass-blur-xl));
  border: 1px solid var(--glass-border-strong);
  box-shadow: var(--glass-shadow-lg);
}

/* Vidro com cor do tema */
.glass--accent {
  background: color-mix(in srgb, var(--accent) 12%, var(--glass-tint));
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--glass-border));
  box-shadow: var(--glass-shadow);
}

/* Fallback: navegadores sem backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {
  .glass, .glass--subtle, .glass--strong, .glass--hero, .glass--accent {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--float);
  }
}

/* Vidro no player (controles flutuantes) */
.player-glass {
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}

/* Navbar de vidro (quando sobre hero) */
.nav-glass {
  background: var(--glass-tint);
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.4);
  border-bottom: 1px solid var(--glass-border);
}