/* expy-frontend chrome — NEWS + A MESSAGE FOR YOU are ONE glass element each that
   MORPHS pill → card on hover (base glass). No separate patch. */
:root{--cc-glass:rgba(12,14,15,.24);--cc-glass2:rgba(12,14,15,.4);--cc-bd:rgba(255,255,255,.12);
  --cc-accent:#f97316;--cc-font:'Switzer','Switzer Placeholder',sans-serif}

/* EXPY FOR BUSINESS — same glass + weight as the NEWS pill (not bold) */
#cc-biz{position:fixed;top:22px;right:24px;z-index:65;display:flex;align-items:center;gap:12px;padding:11px 18px;border-radius:8px;
  background:var(--cc-glass);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border:1px solid var(--cc-bd);
  text-decoration:none;color:#fff;font-family:var(--cc-font);font-size:12px;letter-spacing:.18em;font-weight:400;
  text-shadow:0 1px 4px rgba(0,0,0,.55);transition:color .3s,border-color .3s,background .3s}
#cc-biz .biz-short{display:none}   /* shown only on mobile */
#cc-biz .arrow{display:inline-flex;color:#fff;transition:transform .35s cubic-bezier(.22,1,.36,1)}
#cc-biz:hover{color:#fff;border-color:rgba(255,255,255,.34);background:rgba(12,14,15,.48)}
#cc-biz:hover .arrow{transform:rotate(-45deg) translateX(2px)}

/* ── shared morphing glass box ── */
/* overflow VISIBLE so the corner badges (letter / "!") can stick out without being clipped;
   the inner news content clips itself (see .cc-body below) */
.cc-morph{position:fixed;z-index:64;border-radius:12px;overflow:visible;color:#f4f1ea;font-family:var(--cc-font);
  background:var(--cc-glass);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border:1px solid var(--cc-bd);
  transition:width .62s cubic-bezier(.25,.8,.25,1),height .62s cubic-bezier(.25,.8,.25,1),background .5s ease}
.cc-morph .cc-body{border-radius:12px;overflow:hidden}
.cc-morph:hover{background:var(--cc-glass2);-webkit-backdrop-filter:blur(24px) saturate(1.35);backdrop-filter:blur(24px) saturate(1.35)}
.cc-morph .cc-bar{position:absolute;bottom:0;left:0;right:0;height:44px;display:flex;align-items:center;gap:10px;padding:0 18px}
.cc-morph .cc-body{position:absolute;left:0;right:0;top:0;bottom:44px;opacity:0;pointer-events:none;transition:opacity .35s ease .12s}
.cc-morph:hover .cc-body{opacity:1;pointer-events:auto}

/* NEWS box (bottom-right) */
#cc-news{right:24px;bottom:24px;width:158px;height:44px;transform-origin:bottom right}
#cc-news:hover{width:min(660px,90vw);height:min(420px,70vh)}
#cc-news .cc-bar{justify-content:space-between;font-size:12px;letter-spacing:.18em;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.55)}
#cc-news .cc-bar .lbl-wrap{display:inline-flex;align-items:center;gap:9px}
#cc-news .cc-bar .lbl-long{display:none}
#cc-news:hover .cc-bar .lbl-short{display:none}
#cc-news:hover .cc-bar .lbl-long{display:inline}
/* WHITE "!" as a badge in the TOP-LEFT corner, sticking out a bit — and it DISAPPEARS when
   the NEWS box opens (like the letter badge on the message box) */
@keyframes ccPop{0%{transform:translateY(-6px) scale(.4);opacity:0}60%{transform:translateY(1px) scale(1.12);opacity:1}100%{transform:translateY(0) scale(1);opacity:1}}
/* just the "!" symbol — no glass square behind it (cleaner) */
.news-bang{position:absolute;top:-8px;left:-7px;z-index:4;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  width:20px;height:22px;animation:ccPop .5s cubic-bezier(.34,1.56,.64,1);transition:opacity .25s ease}
.news-bang i{width:3px;height:9px;border-radius:2px;background:#fff;display:block;box-shadow:0 1px 2px rgba(0,0,0,.55)}
.news-bang b{width:3px;height:3px;border-radius:50%;background:#fff;display:block;box-shadow:0 1px 2px rgba(0,0,0,.55)}
#cc-news:hover .news-bang,#cc-news.open .news-bang{opacity:0}
/* arrow on the RIGHT — identical to the EXPY FOR BUSINESS arrow (same rotate-on-open) */
#cc-news .cc-bar .news-arrow{display:inline-flex;color:#fff;transition:transform .35s cubic-bezier(.22,1,.36,1)}
#cc-news:hover .cc-bar .news-arrow,#cc-news.open .cc-bar .news-arrow{transform:rotate(-45deg) translateX(1px)}
/* slides: FIXED width (expanded size) so morphing the box width doesn't reflow text (no flicker) */
.news-slides{position:absolute;top:0;left:0;bottom:0;width:min(660px,90vw);overflow:hidden}
.news-slide{position:absolute;inset:0;opacity:0;pointer-events:none;overflow:hidden;will-change:transform}
.news-slide--current{opacity:1;pointer-events:auto}
.news-slide__inner{position:absolute;inset:0;display:grid;grid-template-columns:44% 56%;will-change:transform}
.news-slide__img{position:relative;overflow:hidden}
.news-slide__img-inner{position:absolute;inset:0;background-size:cover;background-position:50% 50%;will-change:transform}
.news-slide__content{display:flex;flex-direction:column;justify-content:center;padding:24px 26px;gap:10px}
/* eyebrow = pilot TYPE (orange) · venue = hotel/APT name (white, bigger) */
.news-eyerow{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.news-tag{display:none}   /* "THE LATEST NEWS" tag shown only inside the mobile news sheet */
.news-slide__content .eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;line-height:1.2;text-transform:uppercase;color:var(--cc-accent);margin-bottom:1px}
.news-slide__content .venue{font-size:20px;font-weight:800;letter-spacing:-.01em;line-height:1.12;text-transform:uppercase;color:#fff;margin-bottom:6px}
.news-slide__content h3{font-size:22px;font-weight:700;line-height:1.1;letter-spacing:-.02em;margin:0}
.news-slide__content p{font-size:14px;line-height:1.58;color:rgba(244,241,234,.82);margin:0}
.news-link{margin-top:12px;align-self:flex-start;font-size:11px;letter-spacing:.06em;color:var(--cc-accent);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .25s}
.news-link:hover{border-color:var(--cc-accent)}
.news-hint{position:absolute;bottom:10px;right:14px;font-size:10px;letter-spacing:.18em;color:#c9cdd3;z-index:3}
.news-hint b{font-weight:700}
.news-dots{position:absolute;bottom:12px;left:14px;display:flex;gap:6px;z-index:3}
.news-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3)}
.news-dots i.on{background:var(--cc-accent)}

/* MESSAGE box (bottom-left): the [note + label] head is the pill and RISES to the top
   (becomes the title) as the box grows; subtitle EXPY TEAM + copy appear below. */
/* FIXED width (only height morphs) so the box never grows into the detached social chip */
/* narrower box → the detached social chip sits closer, less empty space */
#cc-msg{left:24px;bottom:24px;width:250px;height:44px;transform-origin:bottom left;
  display:flex;flex-direction:column;padding:0 16px}
#cc-msg:hover{height:312px;padding:16px 16px 20px}
/* DESKTOP: the COLLAPSED pill shows "UN MESSAGGIO PER TE" CENTERED; on hover (card open) the
   title aligns LEFT, in line with the subtitle + copy below it. (The letter badge is absolutely
   positioned in the corner, so centering doesn't shift it.) */
#cc-msg .m-head{display:flex;align-items:center;justify-content:center;flex:0 0 44px;transition:flex-basis .3s}
#cc-msg:hover .m-head{flex-basis:auto;margin-bottom:2px;justify-content:flex-start}
#cc-msg .m-label-short{display:none}   /* PER TE — mobile-only short label */
/* body wrapper clips the copy so it NEVER spills below the card (esp. while collapsing) */
#cc-msg .m-body{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column}
/* letter symbol = badge in the TOP-LEFT corner, sticking out (with a little bounce) */
/* just the letter symbol — no glass square behind it (cleaner) */
#cc-msg .m-head .cc-note{position:absolute;top:-10px;left:-8px;z-index:4;display:inline-flex;align-items:center;justify-content:center;width:22px;height:24px;
  animation:ccPop .5s cubic-bezier(.34,1.56,.64,1)}
#cc-msg .m-head .cc-note svg{width:18px;height:18px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
#cc-msg .m-head .m-label{font-size:12px;letter-spacing:.12em;color:#fff;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.35);transition:font-size .3s}
#cc-msg:hover .m-head .m-label{font-size:15px;font-weight:700;letter-spacing:.02em}
/* EXPY TEAM subtitle — readable even when the card floats over a LIGHT patch of globe:
   brighter tone + a soft dark shadow give it contrast on both dark and light backgrounds */
#cc-msg .m-sub{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#c3c8cf;text-shadow:0 1px 3px rgba(0,0,0,.55);margin:6px 0 10px;opacity:0;transition:opacity .35s ease .1s}
#cc-msg .m-copy{font-size:12px;line-height:1.55;color:rgba(244,241,234,.8);opacity:0;transition:opacity .35s ease .14s}
#cc-msg:hover .m-sub,#cc-msg:hover .m-copy{opacity:1}
#cc-msg .m-copy b{color:#fff;font-weight:700}

/* detached social chip (email + instagram), to the right of the message pill */
#cc-social{position:fixed;left:290px;bottom:24px;z-index:64;height:44px;display:flex;align-items:center;gap:12px;padding:0 15px;
  border-radius:10px;background:var(--cc-glass);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border:1px solid var(--cc-bd);color:#8b9099}
#cc-social svg{width:15px;height:15px;display:block}
/* email + instagram vertically aligned (both inline-flex centered, same box height) */
#cc-social a.cc-mail,#cc-social .cc-ig{display:inline-flex;align-items:center;height:20px}
#cc-social .cc-ig{opacity:.32}
#cc-social a.cc-mail{color:#fff;transition:color .25s}          /* email = solid white */
#cc-social a.cc-mail:hover{color:#fff}

/* ── colonna sonora: bottone nota accanto alla chip social + pannello glass con le 5 tracce.
   Crediti CC direttamente in riga (autore · licenza, link alla fonte) — obbligo BY assolto
   nel punto d'uso, piu' la riga in /utility (ut_lic). ── */
/* z-index 44: UNO MENO della card POI (world.css #expy-poi-card z:45) — quando la card si
   apre nella stessa zona lo copre lei, e il bottone non deve mai sparire (la musica continua). */
#cc-music{position:fixed;left:394px;bottom:24px;z-index:44;width:44px;height:44px;cursor:pointer;
  display:grid;place-items:center;border-radius:10px;color:#8b9099;border:1px solid var(--cc-bd);
  background:var(--cc-glass);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  transition:color .25s ease,background-color .25s ease}
#cc-music svg{width:17px;height:17px}
#cc-music:hover{color:#fff;background:var(--cc-glass2)}
#cc-music.on{color:#fff}
#cc-music.on::after{content:'';position:absolute;top:7px;right:7px;width:6px;height:6px;border-radius:50%;
  background:var(--cc-accent);box-shadow:0 0 6px rgba(249,115,22,.8)}
#cc-music:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(249,115,22,.55)}
/* autoradio: pillolina di sole icone che si apre accanto alla nota — mute / salta / crediti */
#cc-radio{position:fixed;left:446px;bottom:24px;z-index:44;display:flex;align-items:center;gap:5px;padding:4px;
  border-radius:12px;background:var(--cc-glass2);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:0 12px 34px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.10);
  opacity:0;visibility:hidden;transform:translateX(-6px);pointer-events:none;
  transition:opacity .25s ease,transform .25s cubic-bezier(.22,1,.36,1),visibility 0s linear .25s}
#cc-radio.open{opacity:1;visibility:visible;transform:translateX(0);pointer-events:auto;transition-delay:0s}
#cc-radio button,#cc-radio a{display:grid;place-items:center;width:36px;height:36px;cursor:pointer;
  border-radius:9px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#fff;
  transition:background-color .2s ease,color .2s ease}
/* icone come quelle del tasto filtri (.expy-side-btn in world.css: 18px, bianco pieno,
   tratto 2). Erano 15px e con toni diversi fra un tasto e l'altro: sullo stesso vetro
   sembravano di due famiglie. 2026-08-12. */
#cc-radio svg{width:18px;height:18px;color:#fff;stroke-width:2}
#cc-radio button:hover,#cc-radio a:hover{background:rgba(255,255,255,.16)}
#cc-radio button:focus-visible,#cc-radio a:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(249,115,22,.55)}
/* altoparlante: mostra lo stato vero — barrato quando la musica e' spenta */
#cc-radio .rd-mute .ic-on{display:none}
#cc-radio .rd-mute .ic-off{display:grid}
#cc-radio.playing .rd-mute .ic-on{display:grid}
#cc-radio.playing .rd-mute .ic-off{display:none}
#cc-radio.playing .rd-mute{background:var(--cc-accent);border-color:var(--cc-accent);color:#0b0d0e}
/* sul fondo arancio l'icona torna scura: il bianco della regola generale qui sopra sarebbe
   illeggibile (bianco su arancio ~2:1) */
#cc-radio.playing .rd-mute svg{color:#0b0d0e}
/* la "i" dei crediti bianca come le altre tre: era l'unica grigia (#8b9099) e sul vetro
   chiaro spariva. Richiesta 2026-08-12, desktop e mobile. */
#cc-radio .rd-info{color:#fff}
/* NB: su DESKTOP il bottone musica NON si dissolve con body.poi-open (la musica suona, il
   controllo resta): il click sull'emoji chiude gia' il pannello (click fuori) e la card, se si
   sovrappone, copre il bottone per z-index.
   Su MOBILE invece se ne va in dissolvenza insieme ai filtri (mobile.css, `body.poi-open`,
   2026-08-12): li' la card e' larga quanto lo schermo e gli finisce addosso davvero. */

/* ═══ LIQUID GLASS SKIN (2026-08-09, su richiesta) ═══════════════════════════════════
   Stessa ricetta premium degli overlay mappa dentro l'app expy (scenario.css:238,
   memoria expy/glass-map-overlays): translucido chiaro #bbbbbc 12% + bevel inset lucidi,
   blur 18 saturate 1.8. Applicata a TUTTI i comandi sopra la mappa della home, header .xh
   compreso (secondo giro 2026-08-09: "non e' applicato qua" — le VOCI del menu aperto
   restano scure per la leggibilita', e' il contenitore a essere liquid). Escluso di
   proposito solo #expy-poi-card (carta di CONTENUTO: stessa eccezione dell'app, il liquid
   pieno sotto testo lungo e' illeggibile).
   Questo blocco sta in coda e VINCE sulle definizioni sopra e su world.css/header-v2.css
   (caricano prima). */
:root{
  --liquid-glass-bg: color-mix(in srgb, #bbbbbc 12%, transparent);
  --liquid-glass-bg-hover: color-mix(in srgb, #d5d5d6 20%, transparent);
  --liquid-glass-blur: blur(18px) saturate(1.8);
  --liquid-glass-shadow:
    inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent),
    inset 1.8px 3px 0px -2px color-mix(in srgb, #fff 90%, transparent),
    inset -2px -2px 0px -2px color-mix(in srgb, #fff 80%, transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, #fff 60%, transparent),
    inset -0.3px -1px 4px 0px color-mix(in srgb, #000 12%, transparent),
    inset -1.5px 2.5px 0px -2px color-mix(in srgb, #000 20%, transparent);
}
.xh,.expy-side-btn,#cc-biz,.cc-morph,#cc-social,#cc-music,#cc-radio,#cc-hero{
  background:var(--liquid-glass-bg);
  -webkit-backdrop-filter:var(--liquid-glass-blur);backdrop-filter:var(--liquid-glass-blur);
  border:0;
  box-shadow:var(--liquid-glass-shadow);
}
/* hover coerenti: il liquid si schiarisce appena, mai il vetro scuro piatto di prima */
.expy-side-btn:hover,#cc-biz:hover,.cc-morph:hover,#cc-music:hover{
  background:var(--liquid-glass-bg-hover);
  -webkit-backdrop-filter:var(--liquid-glass-blur);backdrop-filter:var(--liquid-glass-blur);
  border:0;
  box-shadow:var(--liquid-glass-shadow);
}
/* sul vetro chiaro le icone dimesse (#8b9099) si impastano: testo/icone alla bianca .92
   come i chip dell'app */
#cc-social,#cc-music{color:rgba(255,255,255,.92)}
#cc-social .cc-ig{opacity:.4}

/* ═══ X DI CHIUSURA — UNA SOLA FORMA PER TUTTI I PANNELLI ════════════════════════════
   Matrice dei mondi (.bm-x), card POI (.pc-x) e sheet PER TE / NOVITÀ (.cc-sheet-x)
   portano la stessa classe .expy-x: stessa misura, stesso cerchio, stesso segno.
   Il segno e' un SVG e non il glifo '✕': il glifo porta le metriche del font e resta
   sempre un po' fuori centro dentro il cerchio (era il difetto segnalato sul pannello
   business). Con `place-items:center` su una griglia e un tratto disegnato, il centro
   e' geometrico.
   HOVER SOLO COL PUNTATORE: su touch `:hover` resta appiccicato dopo il tap.
   I file che posizionano queste X (business-matrix.css, world.css, mobile.css)
   dichiarano SOLO top/right/z-index: la grafica sta qui, in un punto solo. */
.expy-x{position:absolute;display:grid;place-items:center;width:34px;height:34px;padding:0;
  border:0;border-radius:50%;cursor:pointer;color:#fff;background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background-color .2s ease,transform .2s ease}
/* l'ombra sul segno, non sul cerchio: la X resta leggibile anche quando la card ha una
   foto chiara sotto (card POI, sheet NOVITÀ) senza cambiare grafica fra un pannello e l'altro */
.expy-x svg{width:17px;height:17px;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
@media (hover:hover){
  .expy-x:hover{background:rgba(255,255,255,.3);transform:scale(1.06)}
}
.expy-x:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(249,115,22,.55)}   /* mai l'outline blu di sistema */

/* tip "personalizza i suoni" — bollicina liquid sopra il tasto musica, chiudibile.
   left:146 e NON 394: allineata al bottone finiva DIETRO l'hero card (z60 vs z44) — qui
   sta sopra-a-sinistra della nota, fuori dall'ingombro dell'hero a ogni larghezza. */
#cc-music-tip{position:fixed;left:146px;bottom:80px;z-index:44;width:238px;
  display:flex;align-items:flex-start;gap:10px;padding:12px 12px 12px 15px;border-radius:14px;
  background:var(--liquid-glass-bg);
  -webkit-backdrop-filter:var(--liquid-glass-blur);backdrop-filter:var(--liquid-glass-blur);
  box-shadow:var(--liquid-glass-shadow);
  font-family:var(--cc-font);font-size:11.5px;line-height:1.55;color:rgba(255,255,255,.92);
  opacity:0;visibility:hidden;transform:translateY(6px);pointer-events:none;
  transition:opacity .4s ease,transform .4s cubic-bezier(.22,1,.36,1),visibility 0s linear .4s}
#cc-music-tip.on{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;transition-delay:0s}
#cc-music-tip .tip-x{flex:0 0 auto;width:20px;height:20px;display:grid;place-items:center;cursor:pointer;
  margin-top:-2px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:10px;
  transition:background-color .2s ease}
#cc-music-tip .tip-x:hover{background:rgba(255,255,255,.3)}
#cc-music-tip .tip-x:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(249,115,22,.55)}

/* manifesto quote (easter-egg entry) — top-center, aligned with the nav pill + EXPY FOR
   BUSINESS. Clearly visible & WHITE by default; on hover it just neons up + an arrow
   appears to signal it's clickable → r3f reveal page.
   Tipografia "proposta 2" (tests/expy/loader/tipografia.html, 2026-08-08): Switzer dritto
   stretto + SOLO la parola inventata nel corsivo alto contrasto. Il corsivo e' una famiglia
   a se' (come Exposure Italic su brunocis.co): si applica per nome, non con font-style, cosi'
   un domani si sostituisce col font comprato cambiando una riga. Niente piu' @import Google
   di Lora: dichiarato ma mai caricato davvero (il titolo usciva col serif di sistema), e i
   CSS esterni nell'head sono vietati dalla regola "niente lampo bianco". */
@font-face{font-family:'Expy Accent Italic';src:url('/assets/fonts/instrument-serif-italic.subset.woff2') format('woff2');font-weight:400;font-display:swap}
/* hero glass in basso (2026-08-08): il titolo scende dal top dentro un contenitore vetro
   stile Apple con la CTA ENTER sotto.
   Sta sopra la fila di pillole del fondo per non collidere con MESSAGE/social/NEWS.
   2026-08-09: qui restano SOLO forma e posizione. Il vetro lo dà il blocco liquid sopra
   (#cc-hero è nella sua lista): prima questa regola ridichiarava background/blur/border e,
   stando piu' in basso a parità di specificità, vinceva — l'hero era l'unico comando rimasto
   col vetro scuro vecchio. Della vecchia riga si tiene solo l'OMBRA PORTATA, che gli dà
   profondità sulla mappa chiara, composta davanti ai bevel del liquid. */
#cc-hero{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:60;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:22px 34px 24px;border-radius:22px;
  box-shadow:0 18px 50px rgba(0,0,0,.35),var(--liquid-glass-shadow);
  /* UNICA eccezione al vetro chiaro, per la stessa ragione gia' scritta per #expy-poi-card:
     e' l'unica carta che porta TESTO, e sul vetro chiaro il titolo bianco non si leggeva.
     Verificato a schermo il 2026-08-10 con la card ferma sui ghiacci della Groenlandia: col
     vetro al 12% chiaro il titolo restava tenue anche con tre ombre, che sono gia' al limite
     oltre il quale l'alone si vede come effetto. La leva giusta e' il fondo, non l'ombra.
     Restano il blur, la saturazione e i bevel del liquid: il materiale e' lo stesso, cambia
     solo la tinta, come nell'app. NB: con una carta translucida sopra il ghiaccio il
     rapporto di contrasto AA (4.5:1) non e' raggiungibile a nessuna percentuale sensata —
     servirebbe un fondo praticamente opaco, che ucciderebbe il vetro. Questo valore e' il
     compromesso: testo nettamente leggibile su ghiaccio e su oceano notturno, vetro ancora
     vetro. Per la garanzia AA si alza a 90% e si perde la trasparenza. */
  background:color-mix(in srgb, #0b0d0e 62%, transparent)}
#cc-quote{display:block;cursor:pointer;
  font-family:'Switzer',sans-serif;font-style:normal;font-weight:400;font-size:clamp(22px,2.3vw,30px);letter-spacing:-.02em;
  color:#fff;white-space:nowrap;transition:text-shadow .35s ease;
  /* 2026-08-09: da quando il vetro dell'hero e' liquid (chiaro), il titolo bianco sopra un
     oceano illuminato perdeva contrasto. Ombra scura morbida sempre accesa: non si vede come
     effetto, tiene le lettere staccate su fondo chiaro e su fondo notte allo stesso modo.
     2026-08-10: rinforzata dopo la verifica a schermo — con la card sopra i ghiacci della
     Groenlandia il vetro diventa ciano acceso e la prima versione non bastava. Tre strati:
     contorno stretto per staccare le aste, alone medio, alone largo che scurisce il vetro
     dietro le lettere senza mettere un pannello opaco davanti al globo. */
  text-shadow:0 1px 2px rgba(0,0,0,.6),0 2px 12px rgba(0,0,0,.7),0 0 34px rgba(0,0,0,.55)}
/* NON flex: in un flex container gli spazi tra i nodi di testo e l'<i> dell'accento vengono
   scartati come item anonimi vuoti → "The NewExperienverseof Tourism". Il titolo e' un item
   block del column-flex dell'hero: dentro di lui il testo scorre inline e gli spazi vivono. */
#cc-quote i{font-family:'Expy Accent Italic',serif;font-style:normal;letter-spacing:-.01em}
/* CTA ENTER — pulsante vero e proprio, stessa lingua delle pillole (mono spaziato, vetro) */
#cc-enter{display:inline-flex;align-items:center;gap:9px;padding:12px 30px;cursor:pointer;
  border-radius:999px;border:1px solid rgba(255,255,255,.34);
  /* fondo SCURO, non un velo bianco: sul vetro liquid chiaro il bianco su bianco spariva.
     Stessa scelta gia' fatta per le voci del menu burger, che restano scure sul contenitore
     liquid. In hover il bottone si riempie di bianco con testo scuro, quindi il contrasto
     e' netto in tutti e due gli stati. */
  background:rgba(11,13,14,.55);color:#fff;
  font-family:var(--cc-font);font-size:12px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background-color .25s ease,color .25s ease,transform .25s cubic-bezier(.22,1,.36,1)}
#cc-enter .arrow{display:inline-flex;transition:transform .25s cubic-bezier(.22,1,.36,1)}
#cc-enter:hover{background:#fff;color:#0b0d0e;transform:translateY(-1px)}
#cc-enter:hover .arrow{transform:translateX(3px)}
#cc-enter:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(249,115,22,.55)}   /* mai l'outline blu di sistema */
/* la card POI apre ESATTAMENTE lì (fixed, bottom, centrata): mai due elementi accavallati —
   quando e' aperta l'hero si fa da parte, su desktop e mobile */
body.poi-open #cc-hero{opacity:0;pointer-events:none;transition:opacity .3s ease}
#cc-quote::after{content:'→';display:inline-block;vertical-align:baseline;font-style:normal;font-family:var(--cc-font);font-size:.78em;margin-left:0;max-width:0;
  opacity:0;overflow:hidden;transform:translateX(-4px);
  transition:opacity .3s ease,transform .3s cubic-bezier(.22,1,.36,1),max-width .3s ease,margin-left .3s ease}
/* l'ombra scura di base resta anche nel neon: il bagliore arancio si somma, non sostituisce */
#cc-quote:hover{text-shadow:0 1px 2px rgba(0,0,0,.6),0 2px 12px rgba(0,0,0,.7),0 0 12px rgba(249,115,22,.7),0 0 28px rgba(249,115,22,.45),0 0 3px rgba(255,255,255,.4)}
#cc-quote:hover::after{opacity:1;transform:translateX(0);max-width:28px;margin-left:10px}

/* ── TAP-TO-OPEN (touch devices): .open mirrors the :hover expanded state ── */
#cc-news.open{width:min(660px,92vw);height:min(420px,70vh)}
/* stessa pelle liquid dello stato hover: prima qui tornava il vetro scuro vecchio, quindi al
   tap su touch le pillole aperte stonavano con tutto il resto */
.cc-morph.open{background:var(--liquid-glass-bg-hover);
  -webkit-backdrop-filter:var(--liquid-glass-blur);backdrop-filter:var(--liquid-glass-blur);
  border:0;box-shadow:var(--liquid-glass-shadow)}
.cc-morph.open .cc-body{opacity:1;pointer-events:auto}
#cc-news.open .cc-bar .lbl-short{display:none}
#cc-news.open .cc-bar .lbl-long{display:inline}
#cc-msg.open{height:288px;padding:16px 16px 22px}
#cc-msg.open .m-head{flex-basis:auto;margin-bottom:2px}
#cc-msg.open .m-head .m-label{font-size:15px;font-weight:700;letter-spacing:.02em}
#cc-msg.open .m-sub,#cc-msg.open .m-copy{opacity:1}

/* ── FINESTRA STRETTA COL MOUSE (641-900px) — la fila bassa non ci sta ────────────────
   Sotto i 640 comanda mobile.css; sopra i 900 c'e' spazio. In mezzo, col puntatore preciso
   (quindi NON su tablet, che qui e' gia' in modalita' mobile), la fila di sinistra arriva a
   626px — messaggio 24-274, social 290-360, nota 394-438, autoradio aperta 446-626 — mentre
   NOVITA' comincia a `larghezza - 182`: a 800px partirebbe da 618 e le due si sovrappongono.
   Qui l'autoradio si apre SOPRA la nota invece che di fianco, e mentre e' aperta l'hero si
   scosta: e' lo stesso comportamento che ha gia' su telefono, non un'invenzione nuova. */
@media (min-width:641px) and (max-width:900px) and (hover:hover){
  #cc-radio{left:394px;bottom:76px}
  body.music-open #cc-hero{opacity:0;pointer-events:none;transition:opacity .3s ease}
  /* Stessa strettoia per il fumetto "personalizza i suoni": largo 238 a partire da x146, cioe'
     fino a 384, mentre la card centrale a 800px comincia a 216 — misurato il 2026-08-10, si
     sovrapponevano per 168x61px, ed era l'unico difetto presente anche a riposo. Sopra i 900
     la card si sposta abbastanza a destra da non toccarlo piu'. Qui il fumetto sale SOPRA la
     card invece di stringersi: a sinistra della card, a queste larghezze, non c'e' spazio per
     238px, e stringerlo lo renderebbe illeggibile. */
  #cc-music-tip{bottom:250px}
}

/* ── BANNER COOKIE DEL KERNEL (#cck) — nessun elemento accavallato ──────────────────────
   E' il pannello bianco servito da /cookie-consent/banner.js: kernel CONDIVISO da tutte le
   app, quindi non si tocca la sua posizione. Su desktop sta in basso a destra (right:24,
   bottom:16) e copriva la pillola NOVITA'; sotto i 768 diventa una fascia a tutta larghezza
   e copre anche PER TE, i comandi mappa, il tasto musica e l'hero.
   Regola "mai due elementi accavallati": finche' il banner e' in pagina i comandi che sta
   coprendo si fanno da parte, con la stessa dissolvenza che usiamo quando si apre la card POI
   (`body.poi-open`). Il banner sparisce alla prima scelta e non ricompare.
   Se il browser non conosce `:has()` la riga viene semplicemente ignorata e si torna al
   comportamento di prima: nessun rischio di rompere la pagina.
   Misurato il 2026-08-10: la prima versione di questa regola faceva sparire SOLO `#cc-news`
   a tutte le larghezze e il resto sotto i 768. Ma il banner sta in basso a destra gia' da
   768 in su, e li' finiva sopra la card centrale — 271x105px a 768, 327x102 a 800, 62x102
   perfino a 1440. Quindi la fascia bassa si fa da parte a OGNI larghezza; restano fuori solo
   i comandi mappa a meta' altezza, che sopra i 767 il banner non raggiunge mai. */
body:has(#cck) #cc-news,body:has(#cck) #cc-msg,body:has(#cck) #cc-hero,
body:has(#cck) #cc-music,body:has(#cck) #cc-radio,body:has(#cck) #cc-music-tip,
body:has(#cck) #cc-social{opacity:0;pointer-events:none;transition:opacity .3s ease}
@media (max-width:767px){
  body:has(#cck) .expy-side-buttons{opacity:0;pointer-events:none;transition:opacity .3s ease}
}