/* expy-frontend — MATRICE DEI MONDI (EXPY FOR BUSINESS).
   Pannello modale in liquid glass sopra il globo: la pillola #cc-biz lo apre invece di
   navigare via. Usa i token --liquid-glass-* e --cc-* dichiarati in chrome-content.css
   (caricato PRIMA di questo file in index-v2.ejs / index.ejs).
   Gerarchia z dichiarata: backdrop 80 / pannello dentro il backdrop — sopra header .xh (70),
   pillole (64-65) e hero (60), sotto il loader (#expy-loader, 100000). */

#bm-backdrop{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(6,8,9,.55);-webkit-backdrop-filter:blur(7px) saturate(1.1);backdrop-filter:blur(7px) saturate(1.1);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s ease,visibility 0s linear .35s}
#bm-backdrop.on{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}

#bm-panel{position:relative;width:min(720px,94vw);max-height:min(86vh,760px);overflow-y:auto;
  border-radius:22px;padding:34px 36px 30px;color:#f4f1ea;font-family:var(--cc-font);
  background:var(--liquid-glass-bg);
  -webkit-backdrop-filter:var(--liquid-glass-blur);backdrop-filter:var(--liquid-glass-blur);
  box-shadow:0 24px 70px rgba(0,0,0,.45),var(--liquid-glass-shadow);
  transform:translateY(14px);transition:transform .45s cubic-bezier(.22,1,.36,1)}
#bm-backdrop.on #bm-panel{transform:translateY(0)}
#bm-panel:focus{outline:none}

/* misura, cerchio, segno e hover stanno in .expy-x (chrome-content.css), condivisi con la
   card POI e le sheet mobile: qui resta SOLO la posizione nel pannello */
.bm-x{top:16px;right:16px}

/* testa: eyebrow arancio + titolo con la parola accent nel corsivo del brand (stessa famiglia
   dell'hero: il subset copre tutto il latino base, non solo la frase del titolo) */
.bm-eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cc-accent);margin-bottom:10px}
.bm-title{margin:0 0 12px;font-family:'Switzer',sans-serif;font-weight:400;
  font-size:clamp(26px,3.4vw,38px);letter-spacing:-.02em;line-height:1.08;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.5)}
.bm-title i{font-family:'Expy Accent Italic',serif;font-style:normal;letter-spacing:-.01em}
.bm-copy{margin:0 0 22px;max-width:56ch;font-size:14px;line-height:1.62;color:rgba(244,241,234,.85)}
.bm-q{margin:0 0 10px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#c3c8cf;
  text-shadow:0 1px 3px rgba(0,0,0,.55)}

/* card scenario: vetro SCURO dentro il liquid chiaro (carta di contenuto, stessa eccezione
   della card POI: testo lungo sul liquid pieno e' illeggibile) */
.bm-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.bm-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:20px 20px 18px;border-radius:16px;
  background:rgba(11,13,14,.5);border:1px solid rgba(255,255,255,.14);
  text-decoration:none;color:#f4f1ea;
  transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s ease,background-color .3s ease}
.bm-card:hover{transform:translateY(-2px);border-color:rgba(249,115,22,.6);background:rgba(11,13,14,.62)}
.bm-card:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(249,115,22,.55)}
.bm-badge{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:5px;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.bm-badge i{width:6px;height:6px;border-radius:50%;background:var(--cc-accent);
  box-shadow:0 0 6px rgba(249,115,22,.8);animation:bmPulse 2.4s ease infinite}
@keyframes bmPulse{0%,100%{opacity:1}50%{opacity:.45}}
.bm-ic{width:34px;height:34px;display:grid;place-items:center;margin-bottom:4px;border-radius:10px;
  background:rgba(249,115,22,.16);color:var(--cc-accent)}
.bm-ic svg{width:18px;height:18px}
.bm-card h3{margin:0;font-size:16px;font-weight:700;letter-spacing:-.01em;color:#fff}
.bm-sub{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.bm-desc{margin:4px 0 10px;font-size:13px;line-height:1.55;color:rgba(244,241,234,.8)}
.bm-cta{margin-top:auto;display:inline-flex;align-items:center;gap:7px;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cc-accent)}
.bm-cta .arrow{display:inline-flex;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.bm-card:hover .bm-cta .arrow{transform:translateX(3px)}

/* verticali in arrivo: chip sommesse, NON cliccabili (2026-08-12) — sono etichette di stato.
   Niente hover e niente cursore a mano: nulla deve promettere un clic che non c'e'. */
.bm-soon{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px}
.bm-soon-lbl{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-right:2px}
.bm-chip{display:inline-block;padding:7px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.16);
  font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.6);text-decoration:none;
  cursor:default;-webkit-user-select:none;user-select:none}
.bm-foot{margin:0;font-size:12px;color:#c3c8cf}
.bm-foot a{color:var(--cc-accent);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .25s}
.bm-foot a:hover{border-color:var(--cc-accent)}

/* stessa condizione di mobile.css e di isTouch in chrome-content.js: finestra stretta
   OPPURE puntatore touch → il pannello diventa bottom sheet a tutta larghezza */
@media (max-width:640px),(hover:none){
  #bm-backdrop{padding:0;align-items:flex-end}
  #bm-panel{width:100%;max-height:88vh;border-radius:22px 22px 0 0;
    padding:26px 18px calc(26px + env(safe-area-inset-bottom));
    transform:translateY(100%)}
  #bm-backdrop.on #bm-panel{transform:translateY(0)}
  .bm-cards{grid-template-columns:1fr}
}

/* Banner cookie del kernel (#cck, z 99999): non si tocca e non si copre (sotto il loader
   100000 non c'e' spazio sopra). Stesso pattern di chrome-content.css: finche' il banner
   e' in pagina il pannello si fa da parte; alla scelta il nodo #cck sparisce e il pannello
   (se aperto, es. deep link /#business alla prima visita) riappare da solo. */
body:has(#cck) #bm-backdrop{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease}

@media (prefers-reduced-motion:reduce){
  #bm-backdrop,#bm-panel,.bm-card,.bm-cta .arrow{transition:none}
  .bm-badge i{animation:none}
}