/* Добродетел — liquid glass layer (2026-10-31)
   Loaded after styles.css / palette.css. Pure enhancement: every glass surface
   keeps an opaque fallback (no backdrop-filter → solid tint), every animation is
   gated behind prefers-reduced-motion: no-preference, and the reveal hiding only
   applies once motion.js has tagged <html class="gl-motion">. */

@property --gl-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  /* Fallback tint is dark enough that text keeps AA without any blur. */
  --gl-tint: rgba(14, 22, 32, .92);
  --gl-tint-strong: rgba(12, 19, 28, .95);
  --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-ease: cubic-bezier(.22, 1, .36, 1);
  /* Wave 2: damped spring (slight overshoot) for press / pop-in. */
  --gl-spring: linear(0, .17 4%, .55 10%, .93 17%, 1.07 23%, 1.08 28%, 1.04 35%, .99 44%, .98 52%, 1.005 68%, 1);
  /* Muted text one step lighter: stays >= 4.5:1 on the lightest glass. */
  --text-mute: #8d9eae;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --gl-tint: rgba(16, 26, 38, .62);
    --gl-tint-strong: rgba(12, 20, 30, .74);
  }
}

/* Shared glass recipe ------------------------------------------------------ */
.nav,
.hero--orbital .hero__copy,
.hub-search__box,
.hub-search__results,
.project-search,
.card,
.catalog,
.offer-card,
.donate-card,
.contact-card,
.readiness-grid article,
.cookie-banner,
.stats-band__inner,
.ddp__box {
  background: var(--gl-sheen), var(--gl-tint);
  border: 1px solid var(--gl-border);
  box-shadow: var(--gl-shadow);
  -webkit-backdrop-filter: var(--gl-blur);
  backdrop-filter: var(--gl-blur);
}

/* Ambient light behind the glass — gives the blur something to refract. */
.hero--orbital { isolation: isolate; }
.hero--orbital::before,
#projects::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .9;
}
.hero--orbital::before {
  left: max(-2vw, -30px); top: 22%; width: min(40vw, 560px); aspect-ratio: 1;
  background:
    radial-gradient(closest-side at 35% 40%, rgba(241, 200, 121, .34), transparent 70%),
    radial-gradient(closest-side at 70% 72%, rgba(103, 201, 240, .28), transparent 72%);
}
.hero--orbital::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -8vw; top: -10%; width: min(40vw, 560px); aspect-ratio: 1; border-radius: 50%;
  filter: blur(70px);
  background:
    radial-gradient(closest-side at 50% 50%, rgba(167, 139, 250, .20), transparent 70%),
    radial-gradient(closest-side at 30% 70%, rgba(45, 212, 191, .14), transparent 70%);
}
#projects { position: relative; isolation: isolate; }
#projects::before {
  left: 50%; top: 140px; width: min(90vw, 1100px); height: 560px; transform: translateX(-50%);
  background:
    radial-gradient(closest-side at 20% 40%, rgba(78, 168, 222, .22), transparent 70%),
    radial-gradient(closest-side at 55% 60%, rgba(212, 175, 55, .16), transparent 70%),
    radial-gradient(closest-side at 85% 35%, rgba(167, 139, 250, .2), transparent 70%);
}

/* Nav: floating glass pill ------------------------------------------------- */
.nav {
  position: relative;
  padding: .55rem .6rem .55rem .9rem;
  margin-bottom: clamp(1rem, 2.4vw, 1.6rem);
  border-radius: 999px;
}
.nav__links a { transition: background-color .25s var(--gl-ease), color .25s var(--gl-ease), box-shadow .25s var(--gl-ease); }
.nav__links a:hover {
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
.lang-toggle {
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
@media (max-width: 540px) {
  .nav { padding: .45rem .5rem .45rem .55rem; gap: .5rem; }
  .brand__mark { width: 40px; height: 40px; }
  .brand__name { font-size: 1.2rem; }
}

/* Hero card: glass slab with a slow light travelling around its edge ------ */
.hero--orbital .hero__copy {
  position: relative;
  background: var(--gl-sheen), var(--gl-tint-strong);
  border-color: var(--gl-border);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero--orbital .hero__copy { background: var(--gl-sheen), rgba(13, 21, 32, .58); }
}
.hero--orbital .hero__copy::before,
.hero--orbital .hero__copy::after,
.nav::after,
.ddp__box::before,
.ddp__box::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  padding: 1px;
  background: conic-gradient(from var(--gl-angle),
    transparent 0deg, rgba(241, 200, 121, 0) 20deg, rgba(241, 200, 121, .9) 70deg,
    rgba(255, 255, 255, 1) 90deg, rgba(103, 201, 240, .85) 115deg, transparent 180deg,
    transparent 200deg, rgba(103, 201, 240, .35) 260deg, transparent 300deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .9;
}
.hero--orbital .hero__copy::after { padding: 1.5px; }
/* Static specular rim: bright catch-light top-left, faint return bottom-right. */
.hero--orbital .hero__copy::before,
.nav::after,
.ddp__box::before {
  background: linear-gradient(140deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 18%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 70%, rgba(255,255,255,.16) 100%);
  opacity: 1;
}

/* Buttons: liquid highlight ------------------------------------------------ */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn--ghost {
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
  border-color: rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 22px -14px rgba(0, 0, 0, .7);
}
.btn--ghost:hover {
  background: linear-gradient(180deg, rgba(212,175,55,.14), rgba(212,175,55,.04));
  border-color: rgba(212, 175, 55, .6);
}
.btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 66%);
  transform: translateX(-120%);
}

/* Search boxes ------------------------------------------------------------- */
.hub-search__box { background: var(--gl-sheen), rgba(8, 14, 21, .7); }
.hub-search__box:focus-within {
  border-color: rgba(212, 175, 55, .75);
  box-shadow: var(--gl-shadow), 0 0 0 3px rgba(212, 175, 55, .18), 0 0 34px -6px rgba(212, 175, 55, .35);
}
.hub-search__results { background: var(--gl-sheen), var(--gl-tint-strong); }
.project-search { border-radius: var(--radius-lg); }
.project-search__field input {
  background: rgba(5, 9, 14, .72);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35);
}

/* Cards: glass, pointer-tracked specular light, hover tilt ------------------ */
.card,
.catalog,
.ex-atlas {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 0%;
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .45s var(--gl-ease), box-shadow .35s ease, border-color .35s ease;
  will-change: transform;
}
.card:not(.card--soon):hover,
.catalog:hover {
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-5px);
  border-color: var(--gl-border-hi);
  box-shadow: var(--gl-shadow), 0 34px 70px -30px rgba(0, 0, 0, .9), 0 0 0 1px var(--accent-border, rgba(212, 175, 55, .3));
}
.card.is-tilting,
.catalog.is-tilting,
.ex-atlas.is-tilting { transition: transform .12s linear, box-shadow .35s ease, border-color .35s ease; }
.card::after,
.catalog::after {
  content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, .16), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 22%);
  mix-blend-mode: screen;
  opacity: 0; transition: opacity .35s ease;
}
.card:hover::after,
.catalog:hover::after,
.card:focus-visible::after { opacity: 1; }
.card--soon::after { display: none; }
.catalog { position: relative; }
.card--cover .card__meta { background: linear-gradient(90deg, var(--accent-bg, rgba(255,255,255,.05)), transparent 82%); }
.card--cover .card__coverimg { transition: filter .4s ease; }
.card:not(.card--soon):hover .card__coverimg { filter: saturate(1.12) brightness(1.06); }

/* Stats band: glass shelf ---------------------------------------------------- */
.stats-band { background: none; border: 0; padding: 0 clamp(1rem, 4vw, 2rem); }
.stats-band__inner { border-radius: var(--radius-lg); }
.stat__num {
  background: linear-gradient(180deg, #ffe7a3 0%, #d4af37 70%, #b8902a 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 18px rgba(212, 175, 55, .25));
}
@media (forced-colors: active) { .stat__num { color: CanvasText; background: none; } }

/* Other panels -------------------------------------------------------------- */
.offer-card, .donate-card, .readiness-grid article { transition: transform .35s var(--gl-ease), border-color .35s ease; }
.offer-card:hover, .donate-card:hover { border-color: var(--gl-border-hi); background: var(--gl-sheen), var(--gl-tint); }
.contact-card:hover, .contact-card:focus-visible { border-color: rgba(212, 175, 55, .5); }
.cookie-banner {
  background: var(--gl-sheen), var(--gl-tint-strong);
  border-color: var(--gl-border-hi);
  border-radius: 18px;
}

/* Command palette ------------------------------------------------------------ */
.ddp__scrim { background: rgba(3, 7, 12, .5); -webkit-backdrop-filter: blur(10px) saturate(130%); backdrop-filter: blur(10px) saturate(130%); }
.ddp__box {
  background: var(--gl-sheen), var(--gl-tint-strong);
  border-radius: 22px;
  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%);
}
.ddp__field { border-bottom-color: rgba(255, 255, 255, .09); }
.ddp__foot { border-top-color: rgba(255, 255, 255, .09); color: #8a9baa; }
.ddp__kbd, .ddp__grp { color: #8a9baa; }
.ddp__ic { background: rgba(255, 255, 255, .06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.ddp__row.is-active, .ddp__row:hover { background: linear-gradient(90deg, rgba(212, 175, 55, .14), rgba(212, 175, 55, .04)); }
.dd-palette-btn {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* Donate / share modals (styles injected by donate*.js; html prefix wins) ---- */
html .civic-modal-backdrop { background: rgba(4, 9, 18, .6); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); }
html .civic-modal {
  background: var(--gl-sheen), linear-gradient(165deg, rgba(24, 38, 60, .9), rgba(6, 14, 26, .94));
  border-color: var(--gl-border-hi);
  box-shadow: 0 40px 90px -24px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .4);
}
html .civic-modal__why { background: rgba(255, 255, 255, .05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
html .civic-share { box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .28); }

/* Motion (all opt-in) -------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .hero--orbital .hero__copy::after,
  .ddp__box::after { animation: gl-orbit 9s linear infinite; }
  .btn--primary:hover::after { transform: translateX(120%); transition: transform .9s var(--gl-ease); }
  .hero--orbital::before { animation: gl-float 18s ease-in-out infinite alternate; }
  .hero--orbital::after { animation: gl-float 24s ease-in-out infinite alternate-reverse; }

  html.gl-motion .gl-reveal {
    opacity: 0;
    translate: 0 22px;
    transition: opacity .8s var(--gl-ease), translate .8s var(--gl-ease);
    transition-delay: calc(var(--gl-i, 0) * 70ms);
  }
  html.gl-motion .gl-reveal.is-in { opacity: 1; translate: 0 0; }
}
@keyframes gl-orbit { to { --gl-angle: 360deg; } }
@keyframes gl-float {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(4%, -6%, 0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .card, .catalog, .ex-atlas { transform: none !important; transition: none; }
  .card::after, .catalog::after { display: none; }
}
@media print {
  .gl-reveal { opacity: 1 !important; translate: none !important; }
  .hero--orbital::before, .hero--orbital::after, #projects::before { display: none; }
}

/* ============================ Explore page ================================ */
.ex-top {
  margin-top: 12px;
  margin-bottom: 14px;
  max-width: calc(1360px - 2 * clamp(16px, 4vw, 40px));
  width: calc(100% - 2 * clamp(16px, 4vw, 40px));
  padding: 10px 12px 10px 16px;
  border-radius: 999px;
  background: var(--gl-sheen), var(--gl-tint);
  border: 1px solid var(--gl-border);
  box-shadow: var(--gl-shadow);
  -webkit-backdrop-filter: var(--gl-blur);
  backdrop-filter: var(--gl-blur);
}
.ex-body { position: relative; isolation: isolate; }
.ex-body::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -10vw; top: 60px; width: min(60vw, 760px); aspect-ratio: 1; border-radius: 50%;
  filter: blur(70px);
  background:
    radial-gradient(closest-side at 40% 40%, rgba(241, 200, 121, .14), transparent 70%),
    radial-gradient(closest-side at 70% 70%, rgba(103, 201, 240, .12), transparent 72%);
}
.ex-stage { box-shadow: 0 0 0 1px rgba(5, 11, 22, .6), 0 -10px 80px -26px rgba(103, 201, 240, .45), 0 40px 80px -40px #000, inset 0 1px 0 rgba(255, 255, 255, .14); }

/* Controls and panels that float over the globe */
.ex-solid,
.ex-ibtn,
.ex-switch,
.ex-panel,
.ex-tour {
  background: var(--gl-sheen), rgba(14, 26, 40, .9);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 18px 44px -20px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(0, 0, 0, .35);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ex-solid, .ex-ibtn, .ex-switch, .ex-panel, .ex-tour {
    background: var(--gl-sheen), rgba(14, 26, 40, .74);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
  }
}
.ex-solid:hover, .ex-ibtn:hover { background: var(--gl-sheen), rgba(24, 40, 58, .9); }
.ex-tour { border-color: rgba(241, 200, 121, .35); border-radius: 22px; }
.ex-switch__opt input:checked + .ex-switch__face {
  background: linear-gradient(180deg, #f8dc9c, #e6b85c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 4px 14px -4px rgba(241, 200, 121, .55);
}

/* Atlas list */
.ex-atlas {
  position: relative;
  background: var(--gl-sheen), var(--gl-tint);
  border: 1px solid var(--gl-border);
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: var(--gl-blur);
  backdrop-filter: var(--gl-blur);
}
.ex-atlas::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(320px circle at var(--mx) var(--my), color-mix(in srgb, var(--ac) 22%, transparent), transparent 55%);
  opacity: 0; transition: opacity .35s ease;
}
.ex-atlas:hover {
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-3px);
  background: var(--gl-sheen), var(--gl-tint);
  border-color: color-mix(in srgb, var(--ac) 60%, transparent);
}
.ex-atlas:hover::after { opacity: 1; }
.ex-atlases--panel .ex-atlas { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ====================== Wave 2 (2026-11-01): fluid globe =================== */
/* Imagery shimmer: sits on the map box until MapLibre reports idle (globe.js toggles .is-wait). */
.ex-map::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(103, 201, 240, .10) 50%, transparent 65%);
  transform: translateX(-100%); opacity: 0; transition: opacity .5s ease;
}
.ex-map.is-wait::after { opacity: 1; }

/* Panels and the presentation card are big: on phones use a solid-ish tint, no blur over the canvas. */
@media (max-width: 899px) {
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ex-panel, .ex-tour {
      background: var(--gl-sheen), rgba(14, 26, 40, .97);
      -webkit-backdrop-filter: none; backdrop-filter: none;
    }
  }
}
.ex-map { touch-action: pan-x pan-y; }

@media (prefers-reduced-motion: no-preference) {
  .ex-map.is-wait::after { animation: gl-shimmer 1.6s var(--gl-ease) infinite; }
  @keyframes gl-shimmer { to { transform: translateX(100%); } }

  /* Panels glide in (opacity + translate/scale only). `translate`/`scale` leave .ex-tour's own transform alone. */
  .ex-panel:not([hidden]), .ex-tour:not([hidden]) { animation: gl-pop .5s var(--gl-spring) both; }
  .ex-info:not([hidden]), .ex-atlaspanel:not([hidden]) { transform-origin: top right; }
  .ex-tour:not([hidden]) { transform-origin: bottom center; }
  @keyframes gl-pop { from { opacity: 0; translate: 0 16px; scale: .965; } }
  @media (max-width: 899px) {
    .ex-atlaspanel:not([hidden]), .ex-tour:not([hidden]) { transform-origin: bottom center; }
  }
  /* Tour copy re-flows with every step: soft slide-fade on the text block. */
  .ex-tour.is-swap .ex-tour__count, .ex-tour.is-swap .ex-tour__title, .ex-tour.is-swap .ex-tour__text {
    animation: gl-swap .55s var(--gl-ease) both;
  }
  .ex-tour.is-swap .ex-tour__title { animation-delay: .04s; }
  .ex-tour.is-swap .ex-tour__text { animation-delay: .09s; }
  @keyframes gl-swap { from { opacity: 0; translate: 0 10px; } }

  /* Spring press on globe controls and buttons. */
  .ex-ibtn, .ex-solid, .ex-switch__face, .ex-ui .btn { transition-property: border-color, color, background, background-color, box-shadow, translate, scale; }
  .ex-ibtn:active, .ex-solid:active, .ex-ui .btn:active { scale: .94; transition-duration: .08s; }
  .ex-ibtn:not(:active), .ex-solid:not(:active), .ex-ui .btn:not(:active) { transition-timing-function: var(--gl-spring); transition-duration: .5s, .2s, .2s, .2s, .25s, .5s, .5s; }
  .ex-ibtn[aria-expanded] svg { transition: transform .45s var(--gl-spring); }
  .ex-switch__opt input:checked + .ex-switch__face { animation: gl-pop .45s var(--gl-spring) both; }
}
@media (prefers-reduced-motion: reduce) {
  .ex-map::after { display: none; }
}