/* ═══════════════════════════════════════════════════════════════
   FMST · THE OBSIDIAN SHOWROOM · stage-8
   Category grid → black-glass vitrines. Equal weight for all 8.
   Photos preserved — lifted into a dedicated layer for the
   duotone veil / color bloom. Additive presentation only.
   ═══════════════════════════════════════════════════════════════ */

/* department color per existing cc-* theme */
.cc-light   { --vc:#F59E0B; --vc-glow:rgba(245,158,11,.22); }
.cc-cable   { --vc:#3B82F6; --vc-glow:rgba(59,130,246,.22); }
.cc-switch  { --vc:#10B981; --vc-glow:rgba(16,185,129,.22); }
.cc-pipe    { --vc:#22C55E; --vc-glow:rgba(34,197,94,.20); }
.cc-breaker { --vc:#EF4444; --vc-glow:rgba(239,68,68,.22); }
.cc-camera  { --vc:#6366F1; --vc-glow:rgba(99,102,241,.22); }
.cc-solar   { --vc:#F97316; --vc-glow:rgba(249,115,22,.22); }
.cc-battery { --vc:#A855F7; --vc-glow:rgba(168,85,247,.22); }

/* room for the floor reflections */
.cat-grid{ row-gap:56px !important; }

/* ── The vitrine shell ───────────────────────────────────────── */
.vitrine-wrap{ position:relative; }
.cat-card.vitrine{
  background:#0A0C13 !important;                 /* photo moves to its own layer */
  border:1px solid rgba(255,255,255,.075);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),        /* specular top edge */
    inset 0 0 0 1px rgba(255,255,255,.015),
    0 6px 22px rgba(0,0,0,.35);
  transition:transform .55s cubic-bezier(.16,1,.3,1),
             box-shadow .55s cubic-bezier(.16,1,.3,1),
             border-color .45s ease !important;
}
.cat-card.vitrine:hover{
  filter:none !important;                        /* retire the old brightness(1.5) */
  transform:translateY(-8px);
  border-color:color-mix(in srgb, var(--vc) 45%, transparent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 30px 64px rgba(0,0,0,.6),
    0 24px 56px -18px var(--vc-glow);
}
.cat-card.vitrine.vitrine-lit{
  border-color:color-mix(in srgb, var(--vc) 32%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 14px 40px rgba(0,0,0,.45),
    0 22px 48px -16px var(--vc-glow);
}

/* ── The photograph — preserved, veiled, bloomable ───────────── */
.vitrine-photo{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  border-radius:inherit;
  filter:saturate(.5) brightness(.68) contrast(1.03);
  transform:scale(1.001);
  transition:filter .8s cubic-bezier(.16,1,.3,1),
             transform .8s cubic-bezier(.16,1,.3,1);
  will-change:filter, transform;
}
.vitrine-photo::before{                          /* disciplined scrim */
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(180deg, rgba(4,6,10,.30) 0%, rgba(4,6,10,.10) 45%, rgba(4,6,10,.55) 100%);
}
/* museum glint — one diagonal light pass */
.vitrine-photo::after{
  content:''; position:absolute; top:-20%; bottom:-20%; width:34%;
  left:-45%; transform:skewX(-18deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.09) 45%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.09) 55%, transparent);
  opacity:0; pointer-events:none;
}
.vitrine:hover .vitrine-photo,
.vitrine-lit .vitrine-photo{
  filter:saturate(1.04) brightness(1.02) contrast(1);
  transform:scale(1.05);
}
.vitrine:hover .vitrine-photo::after,
.vitrine-lit .vitrine-photo::after{
  animation:vitrineGlint 1.15s cubic-bezier(.4,0,.2,1) .05s 1 both;
}
@keyframes vitrineGlint{
  from{ left:-45%; opacity:1; }
  to{ left:115%; opacity:1; }
}

/* ── The caption plate — machined label, text off the photo ──── */
.vitrine .cat-body{
  background:linear-gradient(180deg, rgba(9,11,17,0) 0%, rgba(9,11,17,.88) 26%, rgba(9,11,17,.97) 55%);
  padding:30px 22px 18px !important;
  border-radius:0 0 20px 20px;
}
.vitrine .cat-body::before{                      /* dept keyline */
  content:''; position:absolute; top:12px; left:22px; right:22px; height:2px;
  border-radius:2px;
  background:linear-gradient(to right, var(--vc), transparent 80%);
  opacity:.28; transition:opacity .5s ease;
}
.vitrine:hover .cat-body::before,
.vitrine-lit .cat-body::before{ opacity:.95; }
.vitrine .cat-name{ text-shadow:none; }
.vitrine .cat-desc{ color:rgba(255,255,255,.62); }

/* icon pop */
.vitrine .cat-icon-box{ transition:transform .45s cubic-bezier(.34,1.4,.64,1) !important; }
.vitrine:hover .cat-icon-box,
.vitrine-lit .cat-icon-box{ transform:scale(1.1) rotate(-6deg); }

/* ↗ chip retires into the reveal's Explore */
.vitrine:hover .cat-arrow{ opacity:0; transform:translate(4px,-4px); }
.vitrine .cat-arrow{ transition:opacity .35s ease, transform .35s ease; }

/* ── The data reveal — equal fields for every category ──────── */
.vitrine-meta{
  display:grid; grid-template-rows:0fr;
  opacity:0; margin-top:0;
  transition:grid-template-rows .55s cubic-bezier(.16,1,.3,1),
             opacity .4s ease, margin-top .55s cubic-bezier(.16,1,.3,1);
}
.vitrine:hover .vitrine-meta,
.vitrine-lit .vitrine-meta{
  grid-template-rows:1fr; opacity:1; margin-top:12px;
}
.vm-in{
  overflow:hidden; min-height:0;
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:10px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
}
.vm-count{ color:rgba(255,255,255,.55); }
.vm-sep{ color:rgba(255,255,255,.22); }
.vm-line{ color:rgba(255,255,255,.55); display:inline-flex; align-items:center; gap:5px; }
.vm-line svg{ width:10px; height:10px; stroke:var(--vc); fill:none; stroke-width:2.2; stroke-linecap:round; }
.vm-explore{
  color:var(--vc);
  display:inline-flex; align-items:center; gap:5px;
  transition:gap .3s cubic-bezier(.16,1,.3,1);
}
.vm-explore::after{ content:'→'; transition:transform .3s cubic-bezier(.16,1,.3,1); }
.vitrine:hover .vm-explore{ gap:8px; }
.vitrine:hover .vm-explore::after{ transform:translateX(2px); }

/* ── Floor reflection + light pool (desktop) ─────────────────── */
.vitrine-reflection{
  position:absolute; top:calc(100% + 5px); left:7%; right:7%; height:44px;
  background-size:cover; background-position:center bottom;
  transform:scaleY(-1);
  border-radius:14px;
  opacity:.14; filter:saturate(.4) brightness(.55) blur(2px);
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,.8), transparent 85%);
  mask-image:linear-gradient(to top, rgba(0,0,0,.8), transparent 85%);
  pointer-events:none;
  transition:opacity .7s ease, filter .7s ease;
}
.vitrine-wrap:hover .vitrine-reflection,
.vitrine-wrap.wrap-lit .vitrine-reflection{
  opacity:.26; filter:saturate(.9) brightness(.75) blur(2px);
}
@media (max-width:1024px), (pointer:coarse){
  .vitrine-reflection{ display:none; }
  .cat-grid{ row-gap:20px !important; }
}

/* touch: substance without theater — data always visible */
@media (pointer:coarse){
  .vitrine-meta{ grid-template-rows:1fr; opacity:1; margin-top:12px; }
  .vitrine .cat-arrow{ opacity:1 !important; }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .vitrine-photo{ filter:saturate(.9) brightness(.9) !important; transform:none !important; }
  .vitrine-photo::after{ display:none !important; }
  .vitrine-meta{ grid-template-rows:1fr !important; opacity:1 !important; margin-top:12px !important; }
  .vitrine-reflection{ transition:none !important; }
}