/* NobisRealtimeCL - interfaccia comune (configuratore pubblico ed editor) */

:root{
  --bg:#d9d8d5; --ink:#131316; --ink-2:#45454b; --muted:#6b6b66;
  --line:rgba(0,0,0,.14); --panel:rgba(246,245,241,.88);
  --ease:cubic-bezier(.22,.7,.24,1);
  --side:304px;
}
*{ box-sizing:border-box; margin:0; padding:0 }
html,body{ height:100%; background:var(--bg); color:var(--ink); overflow:hidden }
body{ font-family:'Jost','Century Gothic','Futura',system-ui,sans-serif; font-weight:300; -webkit-font-smoothing:antialiased }
button,select,input{ font:inherit; color:inherit }

#view{ position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:grab }
#view:active{ cursor:grabbing }

.lbl{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted) }

header{
  position:fixed; top:0; left:0; right:0; z-index:5;
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:clamp(18px,2.6vw,34px) clamp(18px,3vw,44px); pointer-events:none;
}
header > *{ pointer-events:auto }
#name{ font-weight:200; font-size:clamp(34px,4.6vw,64px); letter-spacing:-.03em; line-height:1; margin-top:8px }
#sub{ margin-top:8px }
.homelink{ text-decoration:none; display:inline-block }
.homelink:hover{ color:var(--ink) }

/* ------------------------------------------------ pannello laterale */
#side{
  position:fixed; z-index:6; right:clamp(14px,2.4vw,32px); top:clamp(78px,8vw,104px);
  width:var(--side); max-height:calc(100% - clamp(78px,8vw,104px) - 24px); overflow:auto;
  background:var(--panel); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line); padding:4px 18px 12px;
  transition:opacity .8s var(--ease), transform .45s var(--ease);
}
#side section{ padding:14px 0 15px; border-bottom:1px solid var(--line) }
#side section:last-child{ border-bottom:0 }
#side h3{ font-weight:400; margin-bottom:10px }
#sidetoggle{ display:none }
.row{ display:flex; gap:6px; flex-wrap:wrap; align-items:center }
#side button{
  background:transparent; border:1px solid var(--line); padding:8px 12px; font-size:12px;
  letter-spacing:.04em; cursor:pointer; transition:background .2s, border-color .2s, color .2s;
}
#side button:hover{ border-color:var(--ink) }
#side button.on, #fire.on{ background:var(--ink); border-color:var(--ink); color:#f3f1ec }
.cine-btn{ letter-spacing:.2em !important; text-transform:uppercase; font-size:11px !important }

/* varianti: famiglia = nome + scelte */
.optgroup{ margin:2px 0 12px }
.optgroup:last-child{ margin-bottom:0 }
.optgroup > span{ display:block; font-size:13px; margin-bottom:7px }
.optgroup .row button{ min-width:38px }
/* pallini colore */
.optgroup.colors .row{ gap:8px }
#side .optgroup.colors button.swatch{ padding:0; border:0; width:28px; height:28px; border-radius:50%; min-width:0; background:none }
.optgroup.colors button.swatch i{ display:block; width:100%; height:100%; border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.2); transition:transform .2s }
#side .optgroup.colors button.swatch.on{ background:none }
.optgroup.colors button.swatch.on i{ box-shadow:0 0 0 2px #f6f5f1, 0 0 0 3px var(--ink) }
.optgroup.colors em{ display:block; font-style:normal; font-size:11px; color:var(--muted); margin-top:7px; letter-spacing:.04em }

/* rotazione luci */
.lights{ display:flex; align-items:center; gap:10px; margin-top:10px; font-size:12px }
.lights input{ flex:1; accent-color:var(--ink) }

.hint{ position:fixed; left:clamp(18px,3vw,44px); bottom:calc(14px + env(safe-area-inset-bottom)); z-index:5; pointer-events:none;
       transition:opacity .8s var(--ease) }

/* telefono: il pannello scorre dal basso */
@media (max-width:760px){
  #side{ left:0; right:0; bottom:0; top:auto; width:auto; max-height:62%; border:0; border-top:1px solid var(--line);
         padding:0 18px calc(12px + env(safe-area-inset-bottom)); transform:translateY(calc(100% - 48px)) }
  body.sideopen #side{ transform:none }
  #sidetoggle{ display:flex; position:sticky; top:0; width:calc(100% + 36px); margin:0 -18px; height:48px; z-index:1;
               align-items:center; justify-content:center; gap:8px; background:var(--panel) !important; border:0 !important;
               border-bottom:1px solid var(--line) !important; font-size:11px !important; letter-spacing:.22em !important; text-transform:uppercase }
  #sidetoggle::after{ content:''; width:7px; height:7px; border-left:1px solid; border-top:1px solid; transform:rotate(45deg) translateY(2px); transition:transform .3s }
  body.sideopen #sidetoggle::after{ transform:rotate(225deg) translateY(2px) }
  .hint{ display:none }
}

/* ------------------------------------------------ homepage (gamma) */
body.gallery{ overflow:auto }
body.gallery #view, body.gallery header, body.gallery #side, body.gallery .hint, body.gallery #load,
body.gallery #cinectl, body.gallery #modelpanel{ display:none !important }
#gallery{ max-width:1320px; margin:0 auto; padding:clamp(28px,5vw,72px) clamp(16px,4vw,56px) 40px; min-height:100vh;
          display:flex; flex-direction:column }
#gallery .ghead h1{ font-weight:200; font-size:clamp(40px,6vw,84px); letter-spacing:-.035em; line-height:1; margin:12px 0 14px }
#gallery .ggrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:clamp(16px,2.4vw,32px);
                 margin-top:clamp(28px,4vw,56px) }
.gcard{ display:flex; flex-direction:column; text-decoration:none; color:inherit }
.gthumb{ display:block; aspect-ratio:1; overflow:hidden; background:#e2e1de }
.gthumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s var(--ease) }
.gcard:hover .gthumb img{ transform:scale(1.035) }
.gnum{ margin-top:14px }
.gname{ font-size:clamp(22px,2.2vw,30px); font-weight:300; letter-spacing:-.02em; margin:2px 0 4px }
.gfoot{ display:block; margin-top:auto; padding:48px 0 0 }

/* ------------------------------------------------ scelta del modello */
#modelbtn{
  background:var(--panel); border:1px solid var(--line); backdrop-filter:blur(10px);
  padding:9px 15px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; cursor:pointer;
}
#modelbtn:hover{ border-color:var(--ink) }
#modelpanel{ position:fixed; inset:0; z-index:15; display:flex; align-items:flex-start; justify-content:flex-end;
             padding:clamp(70px,9vw,110px) clamp(14px,3vw,44px) 20px; background:rgba(217,216,213,.35);
             opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s }
body.models #modelpanel{ opacity:1; visibility:visible }
#modelpanel .box{ width:min(560px,100%); max-height:100%; overflow:auto; background:rgba(246,245,241,.94);
                  border:1px solid var(--line); backdrop-filter:blur(14px); padding:18px }
#modelpanel .head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px }
#modelpanel .close{ background:none; border:0; font-size:24px; line-height:1; cursor:pointer; color:var(--ink-2) }
#modelpanel .grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px }
.mcard{ display:flex; flex-direction:column; gap:6px; text-decoration:none; color:inherit; padding:8px;
        border:1px solid transparent; transition:border-color .2s }
.mcard:hover{ border-color:var(--line) }
.mcard.on{ border-color:var(--ink) }
.mcard .thumb{ aspect-ratio:1; background:var(--bg); overflow:hidden; display:block }
.mcard .thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.mcard .mname{ font-size:17px; font-weight:300; letter-spacing:-.01em }
body.cine #modelbtn{ pointer-events:none }

/* ------------------------------------------------ cinema */
header{ transition:opacity .8s var(--ease) }
body.cine header, body.cine #side, body.cine .hint{ opacity:0; pointer-events:none }
body.cine #view{ cursor:none }
#cinectl{
  position:fixed; right:clamp(14px,2.4vw,32px); bottom:clamp(12px,2vw,24px); z-index:7;
  display:none; gap:8px; align-items:center; opacity:.35; transition:opacity .4s;
}
#cinectl:hover{ opacity:1 }
body.cine #cinectl{ display:flex }
#cinectl button{
  background:rgba(20,20,20,.55); color:#e9e6df; border:1px solid rgba(255,255,255,.18);
  padding:8px 13px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
}
#cinectl button:hover{ border-color:rgba(255,255,255,.6) }
#rec{ color:#ff6b5e !important }
.recdot{ display:none; color:#ff6b5e; font-size:11px; letter-spacing:.14em; text-transform:uppercase; animation:blink 1.2s infinite }
body.rec .recdot{ display:inline }
body.rec #rec{ display:none }
@keyframes blink{ 50%{ opacity:.25 } }

/* ------------------------------------------------ realta' aumentata */
#arui{ display:none; position:fixed; inset:0; z-index:40; pointer-events:none }
body.xr #arui{ display:block }
body.xr header, body.xr #side, body.xr .hint, body.xr #ruota{ display:none }
#arhint{ position:absolute; top:calc(18px + env(safe-area-inset-top)); left:0; right:0; text-align:center;
         color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.6); letter-spacing:.16em }
#exitar{ position:absolute; right:16px; bottom:calc(20px + env(safe-area-inset-bottom)); pointer-events:auto;
         background:rgba(20,20,20,.6); color:#fff; border:1px solid rgba(255,255,255,.3); padding:11px 18px;
         font-size:12px; letter-spacing:.16em; text-transform:uppercase }

/* telefono girato in orizzontale: la visione resta in verticale */
#ruota{ display:none; position:fixed; inset:0; z-index:30; background:#0d0d0e; color:#e9e6df;
        flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center; padding:24px }
#ruota i{ display:block; width:34px; height:56px; border:1.5px solid #e9e6df; border-radius:7px; animation:gira 2.4s var(--ease) infinite }
@keyframes gira{ 0%,30%{ transform:rotate(90deg) } 60%,100%{ transform:rotate(0) } }
@media (orientation:landscape) and (max-height:540px){ body.touch #ruota{ display:flex } }

#load{
  position:fixed; inset:0; z-index:20; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  transition:opacity .7s var(--ease), visibility .7s;
}
#load.done{ opacity:0; visibility:hidden }
#load .bar{ width:min(260px,60vw); height:1px; background:var(--line); overflow:hidden }
#load .bar i{ display:block; height:100%; width:0; background:var(--ink); transition:width .25s }
#load.err .txt{ color:#b3261e; letter-spacing:.05em; text-transform:none; font-size:13px }

/* fondo scuro (ambienti Studio scuro / Nero): testi chiari */
body.dark{ --ink:#ecebe7; --ink-2:#c9c7c1; --muted:#9b9a95; --line:rgba(255,255,255,.16); --panel:rgba(24,24,26,.72) }
body.dark #side button.on, body.dark #fire.on{ color:#131316 }
body.dark #modelpanel .box{ background:rgba(28,28,30,.94) }