/* FAUNA BG — liquid glass layer (2026-10-31)
   Surface treatment only: no layout, size, position or copy changes. Loaded LAST
   (see index.html) so it can be reviewed or rolled back by removing one <link>.
   - Every glass surface has an opaque-ish fallback tint (>= .92) when backdrop-filter
     is unavailable; inside @supports the tint drops to .76-.86 (still AA over any basemap).
   - All motion is inside prefers-reduced-motion: no-preference.
   - Basemap / satellite filters (.basemap-invert etc.) are intentionally untouched.
   - Selectors carry an `html` prefix so they win over the bundled atlas-runtime.css
     regardless of <link> order. */

:root {
  --gl-tint: rgba(8, 22, 39, .93);          /* panels over the map */
  --gl-tint-strong: rgba(7, 20, 36, .96);   /* menus, drawer, modals (dense text) */
  --gl-tint-lite: rgba(8, 22, 39, .92);     /* small readouts / chips over the map */
  --gl-tint-drawer: rgba(7, 20, 36, .98);   /* species drawer / sheet: long-form text */
  --gl-sheen: linear-gradient(155deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.035) 38%, rgba(255,255,255,0) 62%, rgba(255,255,255,.025) 100%);
  --gl-border: rgba(255, 255, 255, .13);
  --gl-border-hi: rgba(255, 255, 255, .26);
  --gl-blur: blur(22px) saturate(165%);
  --gl-shadow:
    0 30px 70px -34px rgba(0, 0, 0, .85),
    0 10px 24px -14px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 1px 0 0 rgba(255, 255, 255, .05),
    inset 0 -1px 0 rgba(0, 0, 0, .35),
    inset 0 0 0 1px rgba(255, 255, 255, .03);
  --gl-shadow-sm:
    0 12px 28px -16px rgba(0, 0, 0, .8),
    inset 0 1px 0 rgba(255, 255, 255, .24),
    inset 0 -1px 0 rgba(0, 0, 0, .35);
  --gl-chip-bg: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.015));
  --gl-ease: cubic-bezier(.22, 1, .36, 1);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --gl-tint: rgba(8, 22, 39, .78);
    --gl-tint-strong: rgba(7, 20, 36, .86);
    --gl-tint-lite: rgba(8, 22, 39, .76);
    --gl-tint-drawer: rgba(7, 20, 36, .9);
  }
  /* Light basemaps (Nature / Terrain) leak much more brightness through the blur:
     raise the tint so panel text keeps its contrast there. Night / Satellite stay lighter. */
  html:has(#app[data-basemap="nature"]),
  html:has(#app[data-basemap="terrain"]) {
    --gl-tint: rgba(8, 22, 39, .88);
    --gl-tint-strong: rgba(7, 20, 36, .92);
    --gl-tint-lite: rgba(8, 22, 39, .88);
    --gl-tint-drawer: rgba(7, 20, 36, .94);
  }
}

/* 1. Floating panels over the map -------------------------------------------- */
html .explore-panel,
html .legend,
html .discovery-sidebar,
html .compare-panel,
html .sub-toggle,
html .map-status .ms-card,
html .map-overview__card,
html .zoom-onboarding__card,
html .loc-cycler {
  background: var(--gl-sheen), var(--gl-tint);
  border: 1px solid var(--gl-border);
  border-radius: 14px;
  box-shadow: var(--gl-shadow);
  -webkit-backdrop-filter: var(--gl-blur);
  backdrop-filter: var(--gl-blur);
}
html .sub-toggle,
html .loc-cycler { border-radius: 14px; background: var(--gl-sheen), var(--gl-tint-lite); box-shadow: var(--gl-shadow-sm); }
html .map-status .ms-card,
html .zoom-onboarding__card { box-shadow: var(--gl-shadow-sm); }
html .map-overview__card { box-shadow: var(--gl-shadow), 0 0 0 1px rgba(201, 168, 76, .14); }
html .explore-panel { box-shadow: var(--gl-shadow), 0 0 0 1px rgba(201, 168, 76, .10); }

/* Small readouts */
html .count-readout,
html .coord-readout {
  background: var(--gl-sheen), var(--gl-tint-lite);
  border: 1px solid var(--gl-border);
  border-radius: 12px;
  box-shadow: var(--gl-shadow-sm);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}

/* 2. Menus, pickers, results (dense text → stronger tint) ---------------------- */
html .more-menu__panel,
html .share-menu,
html .cluster-picker,
html .search-results {
  background: var(--gl-sheen), var(--gl-tint-strong);
  border: 1px solid var(--gl-border);
  box-shadow: var(--gl-shadow), 0 24px 56px -22px rgba(0, 0, 0, .8);
  -webkit-backdrop-filter: var(--gl-blur);
  backdrop-filter: var(--gl-blur);
}
html .more-menu__panel,
html .share-menu { border-radius: 16px; }
html .cluster-picker { border-radius: 14px; }
html .search-results { border-radius: 12px; }
html .more-menu__item { border-radius: 10px; }
html .more-menu__item:hover { background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
html .fauna-toast {
  background: var(--gl-sheen), var(--gl-tint-strong);
  border: 1px solid var(--gl-border-hi);
  box-shadow: var(--gl-shadow);
  -webkit-backdrop-filter: var(--gl-blur);
  backdrop-filter: var(--gl-blur);
}

/* 3. Species drawer / mobile sheet --------------------------------------------- */
html .drawer {
  background: var(--gl-sheen), var(--gl-tint-drawer);
  border-left: 1px solid var(--gl-border);
  box-shadow: -22px 0 56px -18px rgba(0, 0, 0, .75), inset 1px 0 0 rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: var(--gl-blur);
  backdrop-filter: var(--gl-blur);
}
html .drawer.open { box-shadow: -22px 0 56px -18px rgba(0, 0, 0, .75), inset 1px 0 0 rgba(255, 255, 255, .12); }
html .drawer.drawer--premium { border-color: rgba(255, 212, 94, .3); }
@media (max-width: 720px) {
  html .drawer {
    border-left: 0;
    border-top: 1px solid var(--gl-border-hi);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -18px 50px -18px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .28);
  }
  html .drawer.open { box-shadow: 0 -18px 50px -18px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .28); }
}
html .drawer-close {
  background: var(--gl-sheen), rgba(8, 22, 39, .9);
  border: 1px solid var(--gl-border-hi);
  box-shadow: var(--gl-shadow-sm);
}

/* 4. Modals ------------------------------------------------------------------- */
html .modal-backdrop {
  background: rgba(3, 10, 18, .6);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
}
html .modal-card {
  background: var(--gl-sheen), var(--gl-tint-strong);
  border: 1px solid var(--gl-border-hi);
  border-radius: 10px; /* small radius: the L-bracket .corner ornaments sit 6px inside */
  box-shadow: var(--gl-shadow), 0 40px 100px -30px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  backdrop-filter: blur(30px) saturate(170%);
}

/* 5. Top bar (atlas bar) -------------------------------------------------------
   No backdrop-filter here on purpose: the bar sits above the map (nothing to blur)
   and a backdrop root would flatten the blur of the "Още" menu inside it. */
html .app-header {
  background: var(--gl-sheen), linear-gradient(180deg, rgba(13, 37, 64, .86), rgba(7, 21, 37, .72));
  border-bottom: 1px solid var(--gl-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 14px 30px -22px rgba(0, 0, 0, .9);
}
html .cat-pill,
html .rail-curate,
html .basemap-picker,
html .lang-toggle,
html .app-header .ghost-btn,
html .chip {
  background: var(--gl-chip-bg), rgba(7, 21, 37, .42);
  border-color: rgba(255, 255, 255, .13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 6px 16px -12px rgba(0, 0, 0, .8);
}
html .chip { background: var(--gl-chip-bg), var(--gl-tint-lite); }
html .cat-pill:hover,
html .rail-curate:hover,
html .lang-toggle:hover,
html .app-header .ghost-btn:hover {
  background: var(--gl-chip-bg), color-mix(in srgb, var(--cat-color, var(--cyan)) 10%, rgba(7, 21, 37, .42));
  border-color: color-mix(in srgb, var(--cat-color, var(--cyan)) 55%, rgba(255, 255, 255, .13));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 10px 22px -12px rgba(0, 0, 0, .85);
}
html .cat-pill.is-active {
  background: linear-gradient(155deg, color-mix(in srgb, var(--cat-on, var(--gold)) 16%, transparent), rgba(7, 21, 37, .62));
  box-shadow: 0 0 12px -3px color-mix(in srgb, var(--cat-on, var(--gold)) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, .26);
}
html .basemap-opt.is-on { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
html .more-btn[aria-expanded='true'] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 14px -4px rgba(79, 195, 247, .5); }

/* 6. Leaflet controls ----------------------------------------------------------
   Container carries the glass; the <a> buttons go transparent so the blur shows.
   Attribution keeps a strong tint and a brighter text colour so it stays readable. */
html .leaflet-control-zoom {
  background: var(--gl-sheen), var(--gl-tint) !important;
  border: 1px solid var(--gl-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--gl-shadow-sm) !important;
  -webkit-backdrop-filter: var(--gl-blur);
  backdrop-filter: var(--gl-blur);
}
html .leaflet-control-zoom a { background: transparent !important; border-bottom-color: rgba(255, 255, 255, .1) !important; }
html .leaflet-control-zoom a:hover { background: rgba(255, 255, 255, .1) !important; }
html .leaflet-control-attribution {
  background: var(--gl-tint-strong) !important;
  color: rgba(232, 244, 253, .74) !important;
  border-top-left-radius: 10px;
  border-left-color: var(--gl-border);
  border-top-color: var(--gl-border);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
}

/* 7. Inside the explore panel --------------------------------------------------- */
html .search-input {
  background: rgba(4, 12, 22, .55);
  border-color: rgba(255, 255, 255, .16);
  border-radius: 10px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35);
}
html .search-input:focus {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35), 0 0 0 3px rgba(79, 195, 247, .16), 0 0 28px -8px rgba(79, 195, 247, .45);
}
html .spot-card { border-radius: 10px; }

/* Muted labels that sat at 40-60% alpha: lift them so they hold >= 4.5:1 on the glass. */
html .explore-panel__tagline { color: rgba(129, 212, 250, .86); }
html .count-readout .cr-label,
html .cr-conf-label { color: rgba(232, 244, 253, .78); }
html .discovery-sidebar__label { opacity: .88; }
html .discovery-today__title { color: rgba(129, 212, 250, .88); }
html .discovery-sidebar__dismiss { color: rgba(129, 212, 250, .8); }
html .sr-head { color: rgba(129, 212, 250, .85); }

/* 8. Motion (all opt-in) ------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes gl-in {
    from { opacity: 0; translate: 0 10px; }
    to   { opacity: 1; translate: 0 0; }
  }
  @keyframes gl-fade { from { opacity: 0; } to { opacity: 1; } }

  html .explore-panel,
  html .legend,
  html .discovery-sidebar,
  html .count-readout,
  html .coord-readout,
  html .sub-toggle,
  html .loc-cycler,
  html .cluster-picker,
  html .share-menu,
  html .more-menu__panel,
  html .modal-card { animation: gl-in .26s var(--gl-ease) both; }
  html .modal-backdrop { animation: gl-fade .2s ease both; }

  /* Drawer / sheet: keep the existing slide, add a fade so the glass "arrives". */
  html .drawer {
    opacity: 0;
    transition: transform 280ms cubic-bezier(.22, 1, .36, 1), opacity 240ms ease, box-shadow 280ms ease;
  }
  html .drawer.open { opacity: 1; }

  /* Hover lift + specular on chips, buttons and cards. */
  html .cat-pill,
  html .rail-curate,
  html .lang-toggle,
  html .app-header .ghost-btn,
  html .spot-card,
  html .sr-item {
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
                background var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                transform .25s var(--gl-ease);
  }
  html .cat-pill:hover,
  html .rail-curate:hover,
  html .lang-toggle:hover,
  html .app-header .ghost-btn:hover,
  html .spot-card:hover { transform: translateY(-1px); }
  html .leaflet-control-zoom a { transition: background-color .2s var(--gl-ease), color .2s var(--gl-ease); }
}