/* =============================================================================
 * Grafo — Glass Premium layer
 * -----------------------------------------------------------------------------
 * Sits ON TOP of the existing liquid-glass-* CSS. It does NOT replace those
 * files; it just adds a small set of professional tokens, classes, animations
 * and microinteractions that give the app a more realistic, premium feel.
 *
 * Highlights:
 *   - Tokens: --glass-bg, --glass-border, --glass-blur, --glass-ease, …
 *   - Reusable classes: .liquid-glass, .glass-panel, .glass-card,
 *                       .glass-popover, .glass-toolbar, .glass-button
 *   - Subtle highlight + noise specular layers via ::before / ::after
 *   - Reduced-motion safe: shimmer, float and parallax are disabled when the
 *     OS asks for less motion.
 *   - Backdrop-filter fallback: when unsupported, glass surfaces become a
 *     legible solid colour with the same border + shadow.
 * =============================================================================
 */

/* ── Tokens (light) ───────────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --glass-bg:            rgba(255, 255, 255, 0.62);
  --glass-bg-strong:     rgba(255, 255, 255, 0.78);
  --glass-bg-soft:       rgba(255, 255, 255, 0.42);

  /* Borders */
  --glass-border:        rgba(255, 255, 255, 0.55);
  --glass-border-strong: rgba(255, 255, 255, 0.78);
  --glass-border-soft:   rgba(255, 255, 255, 0.30);

  /* Highlights and shadows */
  --glass-highlight:     rgba(255, 255, 255, 0.78);
  --glass-shadow:        0 24px 60px rgba(15, 18, 28, 0.16),
                         0 4px 14px rgba(15, 18, 28, 0.10);
  --glass-shadow-strong: 0 36px 100px rgba(15, 18, 28, 0.28),
                         0 6px 22px rgba(15, 18, 28, 0.18);
  --glass-inner-shadow:  inset 0 1px 0 rgba(255, 255, 255, 0.65),
                         inset 0 -1px 0 rgba(0, 0, 0, 0.06);

  /* Filters */
  --glass-blur:          22px;
  --glass-saturate:      1.5;
  --glass-radius:        16px;

  /* Motion */
  --glass-ease:          cubic-bezier(0.2, 0.8, 0.2, 1);
  --glass-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --glass-fast:          160ms;
  --glass-medium:        260ms;
  --glass-slow:          440ms;

  /* Specular / noise */
  --glass-noise-opacity:    0.05;
  --glass-specular-opacity: 0.35;

  /* Parallax (set by glass-premium.js) */
  --gx-mx: 0;
  --gx-my: 0;
  --gx-tilt-x: 0deg;
  --gx-tilt-y: 0deg;
}

/* ── Tokens (dark) ────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --glass-bg:            rgba(20, 22, 28, 0.55);
  --glass-bg-strong:     rgba(20, 22, 28, 0.74);
  --glass-bg-soft:       rgba(20, 22, 28, 0.36);

  --glass-border:        rgba(255, 255, 255, 0.14);
  --glass-border-strong: rgba(255, 255, 255, 0.26);
  --glass-border-soft:   rgba(255, 255, 255, 0.07);

  --glass-highlight:     rgba(255, 255, 255, 0.18);
  --glass-shadow:        0 28px 70px rgba(0, 0, 0, 0.55),
                         0 4px 16px rgba(0, 0, 0, 0.45);
  --glass-shadow-strong: 0 44px 120px rgba(0, 0, 0, 0.70),
                         0 6px 22px rgba(0, 0, 0, 0.55);
  --glass-inner-shadow:  inset 0 1px 0 rgba(255, 255, 255, 0.10),
                         inset 0 -1px 0 rgba(0, 0, 0, 0.32);

  --glass-noise-opacity:    0.07;
  --glass-specular-opacity: 0.22;
}

/* Ultra intensity boosts blur and saturation for a richer feel. */
:root[data-lg-intensity="ultra"] {
  --glass-blur:     34px;
  --glass-saturate: 1.7;
}
:root[data-lg-intensity="intense"] {
  --glass-blur:     28px;
  --glass-saturate: 1.6;
}
:root[data-lg-intensity="balanced"] {
  --glass-blur:     22px;
  --glass-saturate: 1.5;
}
:root[data-lg-intensity="subtle"] {
  --glass-blur:     14px;
  --glass-saturate: 1.3;
}

/* When the user explicitly asks for less transparency, lock the surfaces
 * to opaque values for legibility. */
:root[data-lg-reduce-transparency="1"] {
  --glass-bg:        rgba(255, 255, 255, 0.96);
  --glass-bg-strong: rgba(255, 255, 255, 0.99);
}
:root[data-theme="dark"][data-lg-reduce-transparency="1"] {
  --glass-bg:        rgba(20, 22, 28, 0.94);
  --glass-bg-strong: rgba(20, 22, 28, 0.98);
}

/* ── Base liquid-glass surface ─────────────────────────────────────────────
 * Apply to any container that should look like real frosted glass.
 * The element keeps its own padding/margins/sizing — we only add background,
 * border, shadow, blur and the two pseudo-element layers for highlight + noise.
 */
.liquid-glass,
.glass-panel,
.glass-card,
.glass-popover,
.glass-toolbar {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow), var(--glass-inner-shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  isolation: isolate;
  transition:
    background var(--glass-fast) var(--glass-ease),
    border-color var(--glass-fast) var(--glass-ease),
    box-shadow var(--glass-medium) var(--glass-ease),
    transform var(--glass-medium) var(--glass-ease);
}

/* Top highlight (catches “light” coming from above) */
.liquid-glass::before,
.glass-panel::before,
.glass-card::before,
.glass-popover::before,
.glass-toolbar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      var(--glass-highlight) 0%,
      transparent 35%,
      transparent 65%,
      rgba(0, 0, 0, 0.08) 100%);
  mix-blend-mode: overlay;
  opacity: 0.85;
  z-index: 0;
}

/* Soft noise / specular layer */
.liquid-glass::after,
.glass-panel::after,
.glass-card::after,
.glass-popover::after,
.glass-toolbar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, var(--glass-specular-opacity)), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n' x='0' y='0'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: cover, 160px 160px;
  opacity: var(--glass-noise-opacity);
  mix-blend-mode: overlay;
  z-index: 0;
}

.liquid-glass > *,
.glass-panel  > *,
.glass-card   > *,
.glass-popover > *,
.glass-toolbar > * {
  position: relative;
  z-index: 1; /* above the ::before / ::after layers */
}

/* Variants */
.glass-card     { border-radius: 18px; box-shadow: var(--glass-shadow), var(--glass-inner-shadow); }
.glass-panel    { border-radius: 22px; box-shadow: var(--glass-shadow-strong), var(--glass-inner-shadow); }
.glass-popover  { border-radius: 14px; box-shadow: var(--glass-shadow); }
.glass-toolbar  { border-radius: 12px; box-shadow: var(--glass-shadow), var(--glass-inner-shadow); }

/* Hover state: lifts the surface a hair and brightens the border. */
.liquid-glass:hover,
.glass-card:hover,
.glass-panel:hover {
  border-color: var(--glass-border-strong);
  box-shadow: var(--glass-shadow-strong), var(--glass-inner-shadow);
  transform: translateY(-1px);
}

/* ── Glass buttons ────────────────────────────────────────────────────────── */
.glass-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  color: var(--text-1, #f5f5f7);
  backdrop-filter: blur(calc(var(--glass-blur) * 0.6)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.6)) saturate(var(--glass-saturate));
  box-shadow: var(--glass-shadow), var(--glass-inner-shadow);
  font-weight: 600;
  cursor: pointer;
  transition:
    background var(--glass-fast) var(--glass-ease),
    border-color var(--glass-fast) var(--glass-ease),
    transform var(--glass-fast) var(--glass-ease),
    box-shadow var(--glass-medium) var(--glass-ease);
  overflow: hidden;
}
.glass-button::before {
  /* Diagonal shine that moves on hover, very tasteful, no casino. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 65%
  );
  transform: translateX(-100%);
  transition: transform 700ms var(--glass-ease-out);
  pointer-events: none;
}
.glass-button:hover {
  border-color: var(--glass-border-strong);
  transform: translateY(-1px);
}
.glass-button:hover::before { transform: translateX(100%); }
.glass-button:active { transform: translateY(0) scale(0.98); }
.glass-button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}

/* ── Animations ───────────────────────────────────────────────────────────── */
@keyframes glassFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes glassScaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes glassSlideUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes glassFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes glassShimmer {
  0%   { background-position: -180% 0; }
  100% { background-position: 180% 0; }
}
@keyframes glassPulseSoft {
  0%, 100% { box-shadow: var(--glass-shadow), var(--glass-inner-shadow); }
  50%      { box-shadow: var(--glass-shadow-strong), var(--glass-inner-shadow); }
}
@keyframes glassMenuReveal {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes glassModalEnter {
  from { opacity: 0; transform: translateY(8px) scale(0.96); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    filter: blur(0); }
}
@keyframes glassCardHover {
  from { transform: translateY(0); }
  to   { transform: translateY(-2px); }
}

.glass-anim-fade-in   { animation: glassFadeIn   var(--glass-medium) var(--glass-ease) both; }
.glass-anim-scale-in  { animation: glassScaleIn  var(--glass-medium) var(--glass-ease-out) both; }
.glass-anim-slide-up  { animation: glassSlideUp  var(--glass-medium) var(--glass-ease-out) both; }
.glass-anim-modal     { animation: glassModalEnter var(--glass-slow) var(--glass-ease-out) both; }
.glass-anim-menu      { animation: glassMenuReveal var(--glass-medium) var(--glass-ease-out) both; }
.glass-anim-float     { animation: glassFloat 6.5s var(--glass-ease) infinite; }

/* ── Sidebar polish ──────────────────────────────────────────────────────── */
:root[data-visual="liquid-glass"] #sidebar {
  background: var(--glass-bg);
  border-right: 1px solid var(--glass-border-soft);
  backdrop-filter: blur(calc(var(--glass-blur) * 0.9)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.9)) saturate(var(--glass-saturate));
}

:root[data-visual="liquid-glass"] .sb-item {
  position: relative;
  border-radius: 10px;
  border: 1px solid transparent;
  transition:
    background var(--glass-fast) var(--glass-ease),
    border-color var(--glass-fast) var(--glass-ease),
    transform var(--glass-fast) var(--glass-ease);
}
:root[data-visual="liquid-glass"] .sb-item:hover {
  background: var(--glass-bg-soft);
  border-color: var(--glass-border-soft);
  transform: translateX(1px);
}
:root[data-visual="liquid-glass"] .sb-item.active,
:root[data-visual="liquid-glass"] .sb-item[aria-pressed="true"] {
  background: var(--glass-bg-strong);
  border-color: var(--glass-border);
  box-shadow: var(--glass-inner-shadow);
}

/* ── Modals ──────────────────────────────────────────────────────────────── */
:root[data-visual="liquid-glass"] .modal,
:root[data-visual="liquid-glass"] .modal-card,
:root[data-visual="liquid-glass"] #settings-modal .modal-card,
:root[data-visual="liquid-glass"] #settings-card {
  animation: glassModalEnter var(--glass-slow) var(--glass-ease-out) both;
}

/* The settings card itself becomes a real glass panel under liquid-glass. */
:root[data-visual="liquid-glass"] #settings-card {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  box-shadow: var(--glass-shadow-strong), var(--glass-inner-shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

/* ── Support Grafo panel (Settings → Support) — premium polish ───────────── */
:root[data-visual="liquid-glass"] .gp-support .gp-support-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow: var(--glass-shadow), var(--glass-inner-shadow);
  backdrop-filter: blur(calc(var(--glass-blur) * 0.85)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.85)) saturate(var(--glass-saturate));
  animation: glassSlideUp var(--glass-medium) var(--glass-ease-out) both;
}

:root[data-visual="liquid-glass"] .gp-support .gp-donate {
  background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
  color: #0a0a0a;
  border: 1px solid #ffffff;
  position: relative;
  overflow: hidden;
  transition:
    transform var(--glass-fast) var(--glass-ease),
    box-shadow var(--glass-medium) var(--glass-ease);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
:root[data-visual="liquid-glass"] .gp-support .gp-donate::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 65%
  );
  transform: translateX(-100%);
  transition: transform 700ms var(--glass-ease-out);
  pointer-events: none;
}
:root[data-visual="liquid-glass"] .gp-support .gp-donate:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
}
:root[data-visual="liquid-glass"] .gp-support .gp-donate:hover::before { transform: translateX(100%); }

:root[data-visual="liquid-glass"] .gp-support .gp-support-status {
  background: var(--glass-bg-soft);
  border: 1px solid var(--glass-border-soft);
  backdrop-filter: blur(calc(var(--glass-blur) * 0.6));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.6));
}
:root[data-visual="liquid-glass"] .gp-support .gp-support-status.is-supporter {
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-strong);
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .liquid-glass,
  .glass-panel,
  .glass-card,
  .glass-popover,
  .glass-toolbar,
  .glass-button {
    transition: none !important;
  }
  .liquid-glass:hover,
  .glass-card:hover,
  .glass-panel:hover,
  .glass-button:hover {
    transform: none !important;
  }
  .glass-anim-float,
  .glass-anim-fade-in,
  .glass-anim-scale-in,
  .glass-anim-slide-up,
  .glass-anim-modal,
  .glass-anim-menu {
    animation: none !important;
  }
  .glass-button::before { display: none; }
  /* Disable parallax — glass-premium.js also bails out when reduced. */
  :root { --gx-tilt-x: 0deg; --gx-tilt-y: 0deg; }
}

/* ── Backdrop-filter fallback ────────────────────────────────────────────── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .liquid-glass,
  .glass-panel,
  .glass-card,
  .glass-popover,
  .glass-toolbar,
  .glass-button {
    background: var(--glass-bg-strong);
  }
  :root[data-theme="dark"] .liquid-glass,
  :root[data-theme="dark"] .glass-panel,
  :root[data-theme="dark"] .glass-card,
  :root[data-theme="dark"] .glass-popover,
  :root[data-theme="dark"] .glass-toolbar,
  :root[data-theme="dark"] .glass-button {
    background: rgba(20, 22, 28, 0.94);
  }
}

/* ── Mobile: no hover lift, lighter shadows for perf ─────────────────────── */
@media (max-width: 720px) {
  .liquid-glass:hover,
  .glass-card:hover,
  .glass-panel:hover { transform: none; }
  .glass-button:hover { transform: none; }
  /* Cap blur to keep mobile GPUs happy. */
  :root[data-lg-intensity="ultra"]   { --glass-blur: 22px; }
  :root[data-lg-intensity="intense"] { --glass-blur: 18px; }
}