/* ============================================================================
   DALFASTART — Virtual Gallery Walkthrough
   An immersive CSS-3D hall you move through; click any piece to open the
   360° artwork viewer. Navy/gold museum aesthetic.
   ========================================================================== */
:root{
  --bg:#FFFFFF; --navy:#0B1F3B; --navy-2:#143462; --gold:#C99B2E; --gold-text:#A87F1F;
  --gold-soft:#F3E7C9; --ink:#14202E; --ink-soft:#5B6B7E; --line:#E3E8EF; --radius:14px;
  --shadow-card:0 10px 30px -18px rgba(11,31,59,.25);
  --ease:cubic-bezier(.22,.61,.36,1);
  --wallx:320px; --spacing:640px; --near:280px;
}
*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{font:15px/1.5 'Segoe UI','Helvetica Neue',Arial,sans-serif;color:#fff;background:#05080f;overflow:hidden;}
button{font:inherit;cursor:pointer;}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}

/* Header */
.gtop{position:fixed;top:0;left:0;right:0;height:60px;z-index:30;display:flex;align-items:center;gap:14px;padding:0 18px;
  background:linear-gradient(180deg,rgba(6,10,18,.92),rgba(6,10,18,0));}
.gbrand{display:flex;align-items:center;gap:10px;font-weight:700;}
.gbrand svg{width:30px;height:30px;}
.gbrand b{color:var(--gold);}
.gtop .spacer{flex:1;}
.gfilters{display:flex;gap:7px;overflow-x:auto;max-width:64vw;padding:4px 0;scrollbar-width:thin;}
.gchip{flex:0 0 auto;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#eaf0f8;border-radius:20px;padding:7px 14px;font-size:13px;white-space:nowrap;transition:all .16s var(--ease);}
.gchip:hover{background:rgba(255,255,255,.16);}
.gchip.sel{background:var(--gold);color:var(--navy);border-color:var(--gold);font-weight:700;}
.gexit{border:0;background:rgba(255,255,255,.12);color:#fff;border-radius:10px;padding:9px 14px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:7px;}
.gexit:hover{background:rgba(255,255,255,.22);}

/* The hall */
.hall{position:fixed;inset:0;perspective:1150px;perspective-origin:50% 44%;overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 30%, #16233b 0%, #0b1220 55%, #05080f 100%);}
.world{position:absolute;left:50%;top:46%;transform-style:preserve-3d;transform:translateZ(0);transition:transform .7s var(--ease);will-change:transform;}

/* Floor */
.floor{position:absolute;left:-2000px;top:220px;width:4000px;height:6000px;transform-origin:top center;
  transform:rotateX(78deg);
  background:
    linear-gradient(180deg, rgba(20,32,60,.0) 0%, rgba(9,14,26,.9) 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 2px, transparent 2px 120px),
    linear-gradient(#0d1526,#0a1120);}

/* Artwork piece */
.piece{position:absolute;transform-style:preserve-3d;cursor:pointer;transition:filter .4s var(--ease),transform .3s var(--ease);}
.piece .frame{border:16px solid #12100c;background:linear-gradient(135deg,#241f16,#0e0b06) border-box;
  box-shadow:0 30px 50px -20px rgba(0,0,0,.8), inset 0 0 0 2px rgba(201,155,46,.25);}
.piece .frame img{display:block;width:100%;height:100%;object-fit:cover;}
/* mat */
.piece .frame .mat{background:#f7f4ec;padding:10px;width:100%;height:100%;}
/* spotlight glow */
.piece .spot{position:absolute;left:50%;top:-40%;width:150%;height:70%;transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(255,248,230,.5), rgba(255,248,230,0));filter:blur(6px);pointer-events:none;}
/* label plaque */
.piece .plaque{position:absolute;left:50%;bottom:-64px;transform:translateX(-50%);background:rgba(255,255,255,.94);color:var(--navy);
  border-radius:8px;padding:7px 12px;text-align:center;min-width:150px;box-shadow:var(--shadow-card);opacity:0;transition:opacity .3s var(--ease);}
.piece .plaque .t{font-size:12px;font-weight:700;white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis;}
.piece .plaque .p{font-size:11px;color:var(--gold-text);}
.piece.current{filter:none;}
.piece.current .plaque{opacity:1;}
.piece.dim{filter:brightness(.5) saturate(.8);}
/* floor reflection */
.piece .reflect{position:absolute;left:0;top:100%;width:100%;height:100%;overflow:hidden;transform:scaleY(-1);opacity:.16;
  -webkit-mask-image:linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0) 70%);mask-image:linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0) 70%);pointer-events:none;}
.piece .reflect img{width:100%;height:100%;object-fit:cover;}

/* Navigation */
.gnav{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:14px;
  background:rgba(255,255,255,.95);border-radius:40px;padding:10px 16px;box-shadow:var(--shadow-card);}
.gnav button{width:46px;height:46px;border-radius:50%;border:0;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .14s var(--ease),background .16s;}
.gnav button:hover{background:var(--navy-2);}
.gnav button:disabled{opacity:.35;cursor:not-allowed;}
.gnav button svg{width:22px;height:22px;}
.gnav .counter{color:var(--ink);font-size:13px;min-width:92px;text-align:center;font-variant-numeric:tabular-nums;}
.gnav .open{background:var(--gold);color:var(--navy);width:auto;padding:0 18px;border-radius:24px;font-weight:700;}

/* Current-piece caption (top center) */
.gcaption{position:fixed;top:70px;left:50%;transform:translateX(-50%);z-index:20;text-align:center;pointer-events:none;
  text-shadow:0 2px 20px rgba(0,0,0,.6);transition:opacity .3s var(--ease);}
.gcaption .ct{font-size:22px;font-weight:600;}
.gcaption .cc{font-size:12px;color:var(--gold-soft);letter-spacing:.14em;text-transform:uppercase;margin-top:3px;}

.ghint{position:fixed;bottom:92px;left:50%;transform:translateX(-50%);z-index:20;color:rgba(255,255,255,.6);font-size:12px;transition:opacity .5s var(--ease);}

.gloading{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#cdd7e6;z-index:50;background:#05080f;}
.gspin{width:42px;height:42px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--gold);animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

@media (max-width:760px){
  :root{--wallx:150px;--spacing:520px;}
  .gfilters{max-width:52vw;}
  .gcaption .ct{font-size:17px;}
}
@media (prefers-reduced-motion:reduce){ .world{transition-duration:.01ms;} }