/* ============================================================
   EdilBerat — galleria-3d.css
   Carosello 3D dinamico: si adatta al numero di immagini,
   leggero (ruota solo l'anello, niente reflow).
   ============================================================ */

body.page-3d{background:#100d0b;color:#f3efe9}

.g3d{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:120px 16px 60px;overflow:hidden;
  background:radial-gradient(circle at 50% 38%,#26201b 0%,#100d0b 68%)}

.g3d-head{position:absolute;top:96px;left:0;width:100%;text-align:center;z-index:4;pointer-events:none;padding:0 16px}
.g3d-head .kicker{color:var(--gold)}
.g3d-head h1{color:#fff;font-size:clamp(1.8rem,4vw,2.6rem)}
.g3d-head p{color:#bdb5aa;font-size:.95rem;margin-top:6px}

/* Scena 3D */
.g3d-scene{position:relative;width:100%;max-width:1100px;height:62vh;min-height:420px;
  perspective:1500px;perspective-origin:50% 45%;touch-action:pan-y;cursor:grab}
.g3d-scene:active{cursor:grabbing}
.g3d-ring{position:absolute;left:50%;top:50%;transform-style:preserve-3d;will-change:transform}
.g3d-card{position:absolute;left:0;top:0;border-radius:14px;overflow:hidden;background:#1b1714;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 40px rgba(0,0,0,.45);
  backface-visibility:hidden;cursor:pointer;transition:border-color .25s}
.g3d-card::after{content:"";position:absolute;inset:0;border-radius:14px;
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,0) 40%);pointer-events:none}
.g3d-card img{width:100%;height:100%;object-fit:cover;display:block}
.g3d-card:hover{border-color:var(--gold)}

/* Pavimento riflettente soft */
.g3d-floor{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);width:min(680px,80%);height:120px;
  background:radial-gradient(ellipse at center,rgba(201,162,75,.18),rgba(0,0,0,0) 70%);
  filter:blur(6px);z-index:0;pointer-events:none}

/* Controlli */
.g3d-controls{position:relative;z-index:4;display:flex;align-items:center;gap:16px;margin-top:26px}
.g3d-btn{width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.06);color:#fff;font-size:1.1rem;cursor:pointer;display:flex;
  align-items:center;justify-content:center;transition:.25s}
.g3d-btn:hover{background:var(--red);border-color:var(--red);transform:translateY(-2px)}
.g3d-hint{color:#9a938a;font-size:.82rem;display:flex;align-items:center;gap:8px}

@media (max-width:600px){
  .g3d-scene{height:54vh;min-height:340px}
  .g3d-head{top:84px}
}
@media (prefers-reduced-motion:reduce){
  .g3d-ring{transition:none}
}