/* DESIGN SYSTEM «LIQUID GLASS» — la pelle: quello che SOLO questo design system aggiunge ai componenti (che sono già vetro grazie ai token).
   Contiene: i colori delle paint della mappa (la loro struttura è in defs.js), il tocco «liquido» a molla, la luce che si muove sul mare, il riflesso sul pulsante principale.
   Tutto ciò che si muove si ferma con «riduci animazioni» (la regola è in css/base.css). Per un altro design system basta NON caricare questo file: i componenti restano funzionanti. */

/* ---- le paint della mappa (la struttura: defs.js) */
.ds-sea-a { stop-color: var(--map-sea-1); }
.ds-sea-b { stop-color: var(--map-sea-2); }
.ds-gloss-a { stop-color: #fff; stop-opacity: .52; }
.ds-gloss-b { stop-color: #fff; stop-opacity: .06; }
.ds-gloss-c { stop-color: #000; stop-opacity: .10; }
.ds-wave-line { stroke: #fff; stroke-opacity: .26; stroke-width: 1.1; }
:root[data-theme="dark"] .ds-gloss-a { stop-opacity: .22; }
:root[data-theme="dark"] .ds-wave-line { stroke-opacity: .09; }

/* ---- il tocco liquido: il vetro «si gonfia» quando lo premi e torna con una molla; i pulsanti pieni si schiacciano */
.chip, .ctl button, .seg > button, .icon-btn.glass { transition: transform var(--d2) var(--ease-spring), background var(--d1) var(--ease), box-shadow var(--d2) var(--ease), color var(--d2) var(--ease); }
.chip:active, .icon-btn.glass:active { transform: scale(1.06); }
.ctl button:active { transform: scale(1.12); background: var(--glass-spec), var(--glass-thick-bg); }
.btn { transition: transform var(--d2) var(--ease-spring), background var(--d1), opacity var(--d1), box-shadow var(--d2) var(--ease); }
.btn:active { transform: scale(.95); }
.seal:active, .pin:active, .node:active { transform: scale(1.1); }

/* ---- il pulsante principale: una luce lo attraversa ogni tanto */
.btn.primary { position: relative; overflow: hidden; }
.btn.primary::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .38), rgba(255, 255, 255, 0));
  transform: skewX(-18deg); animation: sheen 5.5s var(--ease) 1.2s infinite; pointer-events: none; }
@keyframes sheen { 0% { left: -60%; } 22%, 100% { left: 130%; } }

/* ---- il mare respira: due chiazze di luce lente sotto la mappa (non intercettano il tocco) */
.map::before { content: ''; position: absolute; inset: -25%; pointer-events: none; z-index: 0; opacity: .55;
  background: radial-gradient(40% 32% at 28% 22%, rgba(255, 255, 255, .55), transparent 70%), radial-gradient(36% 30% at 78% 68%, rgba(255, 255, 255, .32), transparent 72%);
  animation: drift 32s ease-in-out infinite alternate; }
:root[data-theme="dark"] .map::before { opacity: .22; }
.map > svg, .map > .ov-layer { z-index: 1; }
@keyframes drift { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.08); } }

/* ---- la regione da fare ora: una luce attorno al contorno */
.m-region.is-current { stroke: var(--glass-edge-hi); stroke-width: 2.6; }