/* expy-frontend — mobile-expy world (LIGHT globe) inside the base layout.
   IMPORTANT: Mapbox owns the transform of each marker ROOT element, so every
   fade/scale/hover/rotate lives on a CHILD (.poi-fx / .dp-fx / .pl-fx) — putting
   transform on the root makes the marker fly in from top-left / jump to 0,0. */

#expy-map{position:fixed;inset:0;z-index:2;background:#050608}
#expy-map canvas{outline:none}
.mapboxgl-ctrl-logo,.mapboxgl-ctrl-attrib,.mapboxgl-control-container{display:none!important}
/* keep markers on their own GPU layer → occlusion opacity fades are smooth, no flicker/vibration.
   NB: never set transform on the marker ROOT — Mapbox owns it. Only will-change hints. */
.mbx-marker,.expy-avatar,.expy-dp,.mbx-polaroid{will-change:opacity,transform;backface-visibility:hidden;
  transition:opacity .4s ease}   /* soft eased fade for the per-frame occlusion opacity → no flicker/vibration */
.poi-fx,.av-fx,.dp-fx,.pl-fx{backface-visibility:hidden;will-change:transform,opacity}

/* Monospazio DISEGNATO per i micro-testi strumentali (didascalia loader, HUD coordinate).
   File nostro, tagliato ai soli caratteri che servono: 7,6 KB. Mai un <link> a un dominio
   esterno nella testa (regola niente-lampo-bianco-al-caricamento). E' dichiarato come famiglia
   a se': il giorno che si compra un mono da licenza si sostituisce il file e basta. */
@font-face{font-family:'Expy Mono';src:url('/assets/fonts/geist-mono-400.subset.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}

/* ── HUD strumentale: due blocchi agli ANGOLI OPPOSTI ──
   Coordinate in basso a sinistra, ora e fuso in alto a destra: la lettura attraversa lo schermo
   in diagonale e il globo resta il centro, invece di avere un blocchetto solo in un angolo.
   Le quote non sono a occhio, sono misurate sugli elementi che c'erano gia' (1280x720): il tasto
   business finisce a y 62, quindi l'ora parte da 74; la pill del messaggio comincia a 68px dal
   fondo, quindi le coordinate stanno a 80. Non e' decorazione: dice due cose vere, il punto al
   centro del globo e l'ora di chi guarda. */
.expy-hud{position:fixed;z-index:3;pointer-events:none;
  font-family:'Expy Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10.5px;line-height:1.9;letter-spacing:.08em;color:rgba(255,255,255,.5);
  text-shadow:0 1px 3px rgba(0,0,0,.6);font-variant-numeric:tabular-nums}
.expy-hud--geo{left:28px;bottom:80px}
.expy-hud--time{right:24px;top:74px;text-align:right}
.expy-hud .r{display:grid;grid-template-columns:34px auto;gap:10px}
.expy-hud--time .r{grid-template-columns:auto auto;justify-content:end}
.expy-hud .k{color:rgba(255,255,255,.32)}
.expy-hud b{font-weight:400;color:rgba(255,255,255,.72)}
/* Sotto i 640px l'HUD sparisce. Non e' pigrizia: misurato a 375x812 ogni angolo e' gia' occupato
   (logo 16-60, business 22-66, frase 74-118, comandi 684-726, messaggio a tutta larghezza 754-798,
   banner cookie 614-797). Le uniche posizioni libere sono in mezzo allo schermo, sopra il globo,
   dove un quadro strumenti galleggiante e' peggio che non averlo. */
@media (max-width:640px){ .expy-hud{display:none} }

/* ── loading screen (preloads the map) — nero, tutto in UNA colonna al centro ──
   Riquadro che scansiona → barra larga quanto lui → frase piccola sotto.
   Il protagonista e' la FOTO (e' quello che il loader sta dicendo: sto guardando esperienze
   vere); la barra e' un filo, la frase e' didascalia. Font monospazio di SISTEMA per la frase:
   zero byte da scaricare — nel momento del caricamento un webfont e' esattamente cio' che non
   ci si puo' permettere — e stacca di netto dallo Switzer del sito, come una strumentazione. */
#expy-loader{position:fixed;inset:0;z-index:100000;background:#000;display:flex;align-items:center;justify-content:center;
  font-family:'Switzer','Switzer Placeholder',sans-serif;color:#fff;transition:opacity .9s ease}
#expy-loader.done{opacity:0;pointer-events:none}
#expy-loader.bare .el-stack{display:none}   /* return from a section = plain dark cover */
.el-stack{display:flex;flex-direction:column;align-items:center;gap:16px;width:clamp(112px,13vw,140px)}
/* single FIXED square that swaps its photo (a real "scan") — 90° corners, never moves */
#el-strip{width:100%;aspect-ratio:1;overflow:hidden;border-radius:0;position:relative;border:1px solid rgba(255,255,255,.16)}
.el-thumb{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;background:#161616}
/* barra: un filo di 2px largo quanto il riquadro, attaccato a lui e non galleggiante */
#el-bar{width:100%;height:2px;background:rgba(255,255,255,.14);overflow:hidden}
#el-bar > i{display:block;height:100%;width:0;background:#fff;transition:width .22s linear}
/* frase: piccola, sotto, monospazio — didascalia della scansione, non titolo */
#el-phrase{font-family:'Expy Mono',ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  font-size:11px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;text-align:center;
  color:rgba(255,255,255,.62);opacity:0;width:78vw;max-width:none;margin-inline:calc((100% - 78vw) / 2);
  line-height:1.6;text-wrap:balance;will-change:opacity,filter,transform}
/* cancello audio a fine caricamento — la selezione E' lo stato della pillola, niente anelli:
   .sel = pillola bianca piena che viene avanti (glow morbido), l'altra = ghost sottile e dimessa.
   Frecce/hover spostano la .sel, Invio conferma. .ask allarga la colonna del loader
   (i 140px del riquadro-scansione non bastano ai bottoni). */
#expy-loader.ask .el-stack{width:auto;max-width:88vw;gap:22px}
#el-audio-q{font-family:'Expy Mono',ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;text-align:center;
  color:rgba(255,255,255,.55);white-space:nowrap}
#el-audio-btns{display:flex;gap:12px;justify-content:center}
#el-audio-btns button{font-family:'Expy Mono',ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;white-space:nowrap;
  padding:15px 30px;border-radius:999px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);color:rgba(255,255,255,.5);outline:none;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease,
             transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease}
#el-audio-btns button.sel{background:#fff;border-color:#fff;color:#0b0d0e;
  transform:translateY(-2px);box-shadow:0 10px 34px rgba(255,255,255,.22),0 2px 8px rgba(0,0,0,.4)}
#el-audio-hint{font-family:'Expy Mono',ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;text-align:center;
  color:rgba(255,255,255,.26);white-space:nowrap}
@media (hover:none){ #el-audio-hint{display:none} }   /* su touch le frecce non esistono */
@media (max-width:640px){
  .el-stack{width:clamp(104px,34vw,132px);gap:14px}
  #el-phrase{font-size:10px;letter-spacing:.18em;width:84vw;margin-inline:calc((100% - 84vw) / 2)}
  #el-audio-btns{flex-direction:column;gap:8px;align-items:stretch}
}
@media (prefers-reduced-motion: reduce){ #el-bar > i{transition:none} }

/* ── POI marker (emoji sticker) — root untouched, fx on child ── */
.mbx-marker{cursor:pointer}
.poi-fx{display:flex;flex-direction:column;align-items:center;transform-origin:50% 100%;
  opacity:0;transform:scale(.45);transition:opacity .5s ease,transform .55s cubic-bezier(.34,1.56,.64,1)}
.poi-fx.in{opacity:1;transform:scale(1)}
.mbx-marker:hover .poi-fx{transform:scale(1.18)}
.poi-fx .sticker-emoji{font-size:1.7rem;line-height:1;
  text-shadow:-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,2px 2px 0 #fff,0 -2px 0 #fff,0 2px 0 #fff,-2px 0 0 #fff,2px 0 0 #fff;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.poi-fx .sticker-dot{width:7px;height:7px;border-radius:50%;margin-top:2px;box-shadow:0 1px 3px rgba(0,0,0,.4);background:#fff}
/* CONTORNO BIANCO PER TUTTI (2026-08-08). L'anello di 8 ombre attorno all'emoji era colorato per
   classe (viola/blu/rosso): tre contorni diversi sullo stesso globo. Ora e' bianco per tutti, una
   riga sola qui sopra. PALLINI BIANCHI ANCHE LORO (richiesta 2026-08-08, secondo giro): il colore
   per categoria e' stato tolto pure dalla base — il pallino eredita il #fff della regola sopra.
   Le classi marker-* restano nei dati e nel markup (se un domani il colore torna, si riattiva qui). */

/* ── user avatar marker (photo circle + emoji badge + anchor triangle) ── */
.expy-avatar{cursor:pointer}
.av-fx{display:flex;flex-direction:column;align-items:center;transform-origin:50% 100%;
  opacity:0;transform:scale(.45);transition:opacity .5s ease,transform .55s cubic-bezier(.34,1.56,.64,1)}
.av-fx.in{opacity:1;transform:scale(1)}
.expy-avatar:hover .av-fx{transform:scale(1.16)}
.av-fx .av-circle{position:relative;width:38px;height:38px}
.av-fx .av-img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid #fff;
  box-shadow:0 3px 10px rgba(0,0,0,.35);background:linear-gradient(135deg,#6366f1,#8b5cf6);display:block}
.av-fx .av-badge{position:absolute;top:-6px;left:-6px;font-size:15px;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.av-fx .av-pin{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid #fff;margin-top:-1px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}

/* ── discovery-pool sticker — root untouched, fx on child ── */
.expy-dp{cursor:pointer}
.dp-fx{display:flex;flex-direction:column;align-items:center;transform-origin:50% 50%;
  opacity:0;transform:scale(.5);transition:opacity 900ms ease,transform 320ms cubic-bezier(.34,1.56,.64,1)}
.dp-fx.in{opacity:.92;transform:scale(1)}
.expy-dp:hover .dp-fx{transform:scale(1.18)}
.dp-fx .expy-dp-emo{font-size:1.4rem;line-height:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3));
  text-shadow:-1.5px -1.5px 0 #fff,1.5px -1.5px 0 #fff,-1.5px 1.5px 0 #fff,1.5px 1.5px 0 #fff,0 -1.5px 0 #fff,0 1.5px 0 #fff,-1.5px 0 0 #fff,1.5px 0 0 #fff}
/* pallino bianco come i marker POI (prima arancio, gem ciano) — pallini di base tutti bianchi */
.dp-fx .expy-dp-dot{width:5px;height:5px;border-radius:50%;background:#fff;margin-top:2px;box-shadow:0 1px 2px rgba(0,0,0,.4)}

/* ── polaroid marker (cobe visual on Mapbox) — card + pin below, hover on card ── */
/* non cliccabili (2026-08-12): cursore normale. L'hover che ingrandisce lo scatto resta, ed e'
   l'unico effetto — su touch non esiste hover, quindi la polaroid li' e' del tutto inerte. */
.mbx-polaroid{cursor:default}
.pl-fx{display:flex;flex-direction:column;align-items:center;transform-origin:50% 100%;
  opacity:0;transition:opacity .5s ease}
.pl-fx.in{opacity:1}
.pl-fx .pl-card{background:#fff;padding:4px 4px 4px;border-radius:2px;width:74px;transform-origin:50% 100%;
  box-shadow:0 3px 10px rgba(0,0,0,.28),0 1px 3px rgba(0,0,0,.2);transition:box-shadow .3s ease,scale .3s cubic-bezier(.34,1.56,.64,1)}
.mbx-polaroid:hover .pl-fx .pl-card{box-shadow:0 10px 24px rgba(0,0,0,.45);scale:1.08}
.pl-fx .pl-dot{width:6px;height:6px;border-radius:50%;margin-top:2px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.5)}
.pl-fx .pl-user{display:flex;align-items:center;gap:3px;margin-bottom:3px}
.pl-fx .pl-uav{width:12px;height:12px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:#ddd}
.pl-fx .pl-uname{font:500 6.5px/1 'Switzer','Switzer Placeholder',sans-serif;color:#14181c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-fx .pl-photo{display:block;width:66px;height:66px;object-fit:cover;background:#eee}
.pl-fx .pl-caption{display:block;text-align:center;padding:3px 2px 1px;font:500 7px/1 'Switzer','Switzer Placeholder',sans-serif;color:#333;letter-spacing:.01em}

/* ── 4/5 glass side toggles — base glass (coherent with the chrome) ── */
.expy-side-buttons{position:fixed;left:16px;top:42%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;gap:8px;align-items:center}
.expy-side-btn{width:40px;height:40px;border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:rgba(12,14,15,.24);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(255,255,255,.12);transition:background .25s,transform .3s cubic-bezier(.34,1.56,.64,1)}
.expy-side-btn:hover{background:rgba(12,14,15,.42)}
.expy-side-btn:active{transform:scale(.9)}
.expy-side-btn i,.expy-side-btn svg{width:18px;height:18px;color:#fff!important;stroke:#fff!important;stroke-width:2}
.expy-side-btn .b3d{font-weight:800;font-size:13px;letter-spacing:.5px;color:#fff}
.expy-side-btn:hover{background:rgba(12,14,15,.44);border-color:rgba(255,255,255,.28)}
/* click / active state → WHITE outline (not orange) */
.expy-side-btn.active{border-color:#fff!important;box-shadow:inset 0 0 0 1px #fff, 0 0 0 1px rgba(255,255,255,.35)}
#tilt-3d-btn.active .b3d{color:#fff}

/* ── POI / user detail card — base glass, slides from bottom, minimal ── */
#expy-poi-card{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(24px);
  z-index:45;width:min(340px,92vw);border-radius:16px;overflow:visible;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s ease,transform .45s cubic-bezier(.22,1,.36,1);
  background:rgba(12,14,15,.3);-webkit-backdrop-filter:blur(22px) saturate(1.35);backdrop-filter:blur(22px) saturate(1.35);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 60px rgba(0,0,0,.5);color:#f4f1ea;
  font-family:'Switzer','Switzer Placeholder',sans-serif}
#expy-poi-card.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
#expy-poi-card .pc-emoji{position:absolute;top:-16px;left:-10px;font-size:30px;z-index:3;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
#expy-poi-card.open .pc-emoji{animation:pcBounce .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes pcBounce{0%{transform:translateY(-8px) scale(.4);opacity:0}60%{transform:translateY(2px) scale(1.15)}100%{transform:translateY(0) scale(1);opacity:1}}
/* misura, cerchio, segno e hover arrivano da .expy-x (chrome-content.css, caricato DOPO questo
   foglio): stessa X del pannello "Create your own explorable world" e delle sheet mobile.
   Qui resta solo la posizione. Nessuna proprieta' grafica va rimessa in questa regola: ha piu'
   specificita' di .expy-x (id + classe) e vincerebbe, riaprendo la differenza fra i pannelli. */
#expy-poi-card .pc-x{top:12px;right:12px;z-index:3}
#expy-poi-card .pc-photo{width:100%;height:140px;object-fit:cover;display:block;border-radius:16px 16px 0 0;background:linear-gradient(135deg,#334155,#1e293b)}
/* no-photo variant (human avatars & hidden gems): no cover image, but the emoji STILL sits
   in the top-left corner (sticking out) and keeps the bounce-in — like the photo cards */
#expy-poi-card.no-photo .pc-photo{display:none}
#expy-poi-card.no-photo .pc-body{padding-top:24px}
#expy-poi-card .pc-body{padding:14px 16px 16px}
#expy-poi-card .pc-user{display:flex;align-items:center;gap:8px;margin-bottom:8px}
#expy-poi-card .pc-user img{width:26px;height:26px;border-radius:50%;object-fit:cover}
#expy-poi-card .pc-user .pc-uname{font-size:12px;color:rgba(244,241,234,.7)}
/* Spunta blu "verified": stessa forma a sigillo del badge collaudato su mobile-expy
   (.exp-av-badge in public/css/exp-airbnb.css, righe 411-413). L'SVG e' copiato verbatim
   da scenario-view/16-exp-model.js: se quel sigillo cambia, esiste questa seconda copia.
   .pc-uav porta il position:relative che il cerchio foto non aveva; misure in scala
   (17px su avatar 34px, 13px su 24px → qui avatar 26px, badge 13px con offset -2px). */
#expy-poi-card .pc-uav{position:relative;width:26px;height:26px;flex:0 0 auto;display:block;overflow:visible}
#expy-poi-card .pc-uav img{display:block}
#expy-poi-card .pc-verified{position:absolute;right:-2px;bottom:-2px;width:13px;height:13px;
  display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
#expy-poi-card .pc-verified svg{width:100%;height:100%;display:block}
#expy-poi-card .pc-title{font-size:17px;font-weight:800;margin:0}
#expy-poi-card .pc-place{font-size:12px;color:rgba(244,241,234,.55);margin:3px 0 0;display:flex;align-items:center;gap:5px}