/* ============================================================================
   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;} }

/* ==========================================================================
   DALFASTART ART EXPERIENCE — refined virtual gallery, September 2026
   ========================================================================== */
:root{
  --navy:#101c2e;
  --navy-2:#1b304b;
  --gold:#bd9138;
  --gold-text:#b98f3e;
  --gold-soft:#f4ecdc;
  --ink:#172131;
  --ink-soft:#687385;
  --line:#dcd8cf;
  --shadow-card:0 20px 55px -32px rgba(0,0,0,.78);
}
body{font-family:Inter,'Segoe UI','Helvetica Neue',Arial,sans-serif;background:#070b12;}
.gtop{height:70px;padding:0 22px;gap:18px;background:rgba(8,14,24,.88);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(18px);}
.gbrand{font-size:13px;letter-spacing:.025em;white-space:nowrap;}
.gbrand svg{width:28px;height:28px;}
.gfilters{max-width:62vw;gap:6px;padding:8px 2px;scrollbar-width:none;mask-image:linear-gradient(90deg,transparent,#000 15px,#000 calc(100% - 18px),transparent);}
.gfilters::-webkit-scrollbar{display:none;}
.gchip{padding:7px 12px;border-radius:4px;border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.04);font-size:12px;color:#d8dee8;}
.gchip:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);}
.gchip.sel{background:#f5f1e8;color:#101c2e;border-color:#f5f1e8;box-shadow:inset 0 -2px 0 #bd9138;}
.gexit{border:1px solid rgba(255,255,255,.18);background:transparent;border-radius:4px;padding:8px 12px;font-size:12px;}
.gexit:hover{background:#f5f1e8;color:#101c2e;}
.hall{perspective:1320px;perspective-origin:50% 43%;background:radial-gradient(100% 72% at 50% 30%,#17263f 0%,#0b1322 55%,#060a11 100%);}
.hall::before{content:"";position:absolute;inset:70px 0 auto;height:34%;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:16.66% 100%;opacity:.45;}
.floor{background:linear-gradient(180deg,rgba(19,29,48,0),rgba(7,11,19,.94) 70%),repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 150px),linear-gradient(#111a2b,#080d16);}
.piece .frame{border-width:13px;background:linear-gradient(135deg,#2a241b,#0e0c09) border-box;box-shadow:0 36px 60px -28px rgba(0,0,0,.9),inset 0 0 0 1px rgba(189,145,56,.26);}
.piece .frame .mat{padding:9px;background:#f4f1e9;}
.piece .plaque{bottom:-62px;min-width:168px;padding:9px 12px;border:1px solid rgba(23,33,49,.12);border-radius:2px;background:rgba(250,248,243,.97);box-shadow:0 14px 36px -25px rgba(0,0,0,.8);}
.piece .plaque .t{font-family:Georgia,'Times New Roman',serif;font-size:13px;font-weight:500;letter-spacing:-.01em;}
.piece .plaque .p{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#8f6a22;margin-top:2px;}
.gcaption{top:92px;text-shadow:0 4px 24px rgba(0,0,0,.7);}
.gcaption .ct{font-family:Georgia,'Times New Roman',serif;font-size:26px;font-weight:400;letter-spacing:-.015em;}
.gcaption .cc{font-size:10px;letter-spacing:.18em;color:#e5d5b2;}
.ghint{bottom:103px;color:rgba(255,255,255,.62);font-size:11px;letter-spacing:.02em;}
.gnav{bottom:25px;gap:10px;padding:8px 10px;border:1px solid rgba(23,33,49,.11);border-radius:8px;background:rgba(250,248,243,.97);box-shadow:0 22px 52px -32px rgba(0,0,0,.9);}
.gnav button{width:40px;height:40px;border-radius:5px;background:#101c2e;}
.gnav button:hover{background:#1b304b;}
.gnav .counter{min-width:76px;font-size:12px;}
.gnav .open{border-radius:5px;padding:0 17px;background:#bd9138;color:#101c2e;font-size:12.5px;}
.gnav .open:hover{background:#caa04d;}

@media(max-width:760px){
  :root{--wallx:150px;--spacing:520px;}
  .gtop{height:112px;padding:0 14px 42px;gap:9px;}
  .gbrand span{font-size:0;}
  .gbrand span::after{content:"DALFASTART · Gallery";font-size:12px;}
  .gfilters{position:absolute;left:12px;right:12px;bottom:7px;max-width:none;width:auto;mask-image:linear-gradient(90deg,#000 92%,transparent);}
  .gchip{padding:6px 10px;font-size:11px;}
  .gexit{margin-left:auto;}
  .gcaption{top:132px;width:calc(100% - 32px);}
  .gcaption .ct{font-size:20px;}
  .gcaption .cc{font-size:9px;}
  .ghint{display:none;}
  .gnav{left:12px;right:12px;bottom:12px;transform:none;justify-content:center;gap:8px;}
  .gnav .counter{min-width:56px;}
  .gnav .open{margin-left:auto;}
}

/* Configuration-aware gallery purchase action */
.gnav a.open{height:40px;display:flex;align-items:center;justify-content:center;text-decoration:none;white-space:nowrap}
.gnav .buy{background:#fff;color:#101c2e;border:1px solid #bd9138}
.gnav .buy:hover{background:#faf6ec}
@media(max-width:760px){.gnav{gap:5px}.gnav .open{padding:0 10px;font-size:11px}.gnav .buy{max-width:150px;overflow:hidden;text-overflow:ellipsis}}