/* ============================================================
   Phantomexposure — Blades overlay
   Compact in-page product panels. Replaces the full product
   pages as the primary route from the catalogue menu.
   Everything here is namespaced .pex- / --pex- so it cannot
   collide with site.css, pe-nav.css or pe-manual.css.
   ============================================================ */

:root{
  /* Base — near-black with a violet cast, not flat #000 */
  --pex-base:     #0d0c0e;
  --pex-shell:    #17161a;
  --pex-raise:    #201e24;
  --pex-sink:     #100f12;
  --pex-line:     #302d36;
  --pex-line-soft:#232128;

  /* Ink — bone and dusty mauve-grey */
  --pex-ink:      #ded7cc;
  --pex-dim:      #8c8593;
  --pex-faint:    #5d5866;

  /* Signal — sodium amber, muted brass */
  --pex-signal:   #c98a3e;
  --pex-signal-lo:#5c3d18;

  /* Per-product spine tints (all desaturated, no green-blue) */
  --pex-georeverb:  #8b7f9c;
  --pex-fluorotype: #b9b0a2;
  --pex-combgrain:  #a8734e;
  --pex-ghostvector:#c0973f;

  --pex-mono: "IBM Plex Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --pex-text: "Commissioner","Avenir Next","Segoe UI",ui-sans-serif,system-ui,sans-serif;
}

/* ---------- Scrim ---------- */
.pex-scrim{
  position:fixed; inset:0; z-index:9000;
  display:grid; place-items:center;
  padding:24px 18px;
  background:rgba(6,5,7,.82);
  -webkit-backdrop-filter:blur(10px) saturate(.6);
  backdrop-filter:blur(10px) saturate(.6);
  opacity:0; pointer-events:none;
  transition:opacity .22s ease;
}
.pex-scrim.is-live{ opacity:1; pointer-events:auto; }
.pex-scrim[hidden]{ display:none; }
body.pex-locked{ overflow:hidden; }

/* ---------- Shell ---------- */
.pex-shell{
  width:min(680px,100%);
  perspective:1400px;
  transform:translateY(10px) scale(.985);
  opacity:0;
  transition:transform .3s cubic-bezier(.2,.8,.3,1), opacity .3s ease;
}
.pex-scrim.is-live .pex-shell{ transform:none; opacity:1; }

/* ---------- Blade tabs ---------- */
.pex-blades{
  display:flex; gap:2px; align-items:flex-end;
  margin:0 0 -1px; padding:0 2px;
}
.pex-blade{
  flex:1 1 0; min-width:0;
  appearance:none; -webkit-appearance:none;
  cursor:pointer; text-align:left;
  font-family:var(--pex-mono);
  font-size:9px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--pex-faint);
  background:var(--pex-sink);
  border:1px solid var(--pex-line-soft);
  border-bottom:0;
  border-radius:3px 3px 0 0;
  padding:9px 8px 8px;
  position:relative;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transform-origin:50% 100%;
  transition:color .18s ease, background .18s ease, transform .18s ease, border-color .18s ease;
}
.pex-blade::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--tint,var(--pex-faint));
  opacity:.28; transition:opacity .18s ease;
}
.pex-blade:hover{ color:var(--pex-dim); background:var(--pex-shell); }
.pex-blade:hover::before{ opacity:.6; }
.pex-blade[aria-selected="true"]{
  color:var(--pex-ink);
  background:var(--pex-shell);
  border-color:var(--pex-line);
  transform:translateY(-3px);
  padding-bottom:11px;
}
.pex-blade[aria-selected="true"]::before{ opacity:1; height:3px; }
.pex-blade:focus-visible{ outline:2px solid var(--pex-signal); outline-offset:2px; }

/* ---------- Panel ---------- */
.pex-panel{
  position:relative;
  background:
    linear-gradient(180deg,var(--pex-shell),var(--pex-sink) 92%);
  border:1px solid var(--pex-line);
  border-radius:0 3px 4px 4px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.035);
  overflow:hidden;
}
/* faint scanline texture — the film-plate cue, kept almost invisible */
.pex-panel::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;
}

.pex-head{
  display:flex; align-items:center; gap:10px;
  padding:13px 14px 12px 16px;
  border-bottom:1px solid var(--pex-line-soft);
}
.pex-kicker{
  font-family:var(--pex-mono); font-size:9px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--pex-faint); flex:1 1 auto;
}
.pex-kicker b{ color:var(--tint,var(--pex-dim)); font-weight:600; }
.pex-close{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  width:26px; height:22px; flex:0 0 auto;
  display:grid; place-items:center;
  background:var(--pex-raise); color:var(--pex-dim);
  border:1px solid var(--pex-line); border-radius:2px;
  font-family:var(--pex-mono); font-size:12px; line-height:1;
  transition:color .16s ease, background .16s ease, border-color .16s ease;
}
.pex-close:hover{ color:var(--pex-ink); background:var(--pex-signal-lo); border-color:var(--pex-signal); }
.pex-close:focus-visible{ outline:2px solid var(--pex-signal); outline-offset:2px; }

.pex-body{ padding:16px 16px 15px; }

.pex-name{
  margin:0 0 6px;
  font-family:var(--pex-text);
  font-size:23px; font-weight:700; letter-spacing:-.02em; line-height:1;
  color:var(--pex-ink);
}
.pex-line{
  margin:0 0 14px;
  font-family:var(--pex-text);
  font-size:13.5px; line-height:1.45; color:var(--pex-dim);
  max-width:52ch;
}

/* ---------- Image window ---------- */
.pex-frame{
  position:relative;
  background:var(--pex-base);
  border:1px solid var(--pex-line-soft);
  border-radius:2px;
  overflow:hidden;
  aspect-ratio:16/10;
}
.pex-frame img{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  object-fit:cover; object-position:center top;
  opacity:0; transition:opacity .32s ease;
}
.pex-frame img.is-shown{ opacity:1; }
.pex-frame.is-tall{ aspect-ratio:4/3; }
.pex-frame.is-tall img{ object-fit:contain; object-position:center; }

.pex-frame-bar{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:center; gap:8px;
  padding:7px 8px;
  background:linear-gradient(180deg,rgba(13,12,14,0),rgba(13,12,14,.92) 55%);
}
.pex-caption{
  flex:1 1 auto; min-width:0;
  font-family:var(--pex-mono); font-size:9.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--pex-dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pex-count{
  font-family:var(--pex-mono); font-size:9.5px; letter-spacing:.1em;
  color:var(--tint,var(--pex-signal)); flex:0 0 auto;
}
.pex-step{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  width:22px; height:20px; flex:0 0 auto;
  display:grid; place-items:center;
  background:rgba(32,30,36,.9); color:var(--pex-dim);
  border:1px solid var(--pex-line); border-radius:2px;
  font-family:var(--pex-mono); font-size:11px; line-height:1;
  transition:color .16s ease, border-color .16s ease;
}
.pex-step:hover{ color:var(--pex-ink); border-color:var(--pex-signal); }
.pex-step:focus-visible{ outline:2px solid var(--pex-signal); outline-offset:2px; }

/* auto-advance tick */
.pex-tick{
  position:absolute; left:0; top:0; height:2px; z-index:3;
  width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:var(--tint,var(--pex-signal)); opacity:.75;
}
.pex-tick.is-running{ animation:pex-tick var(--pex-dwell,3600ms) linear forwards; }
@keyframes pex-tick{ from{transform:scaleX(0);} to{transform:scaleX(1);} }

/* single-image products: hide the stepper furniture */
.pex-frame.is-single .pex-step,
.pex-frame.is-single .pex-count,
.pex-frame.is-single .pex-tick{ display:none; }

/* ---------- Spec strip ---------- */
.pex-specs{
  display:flex; flex-wrap:wrap; gap:5px;
  margin:12px 0 15px; padding:0; list-style:none;
}
.pex-specs li{
  font-family:var(--pex-mono); font-size:9px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--pex-dim);
  background:var(--pex-raise);
  border:1px solid var(--pex-line-soft);
  border-radius:2px;
  padding:4px 7px;
}

/* ---------- Actions ---------- */
.pex-actions{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding-top:13px; border-top:1px dashed var(--pex-line);
}
.pex-buy{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--pex-mono); font-size:10.5px; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--pex-base); text-decoration:none;
  background:var(--pex-ink);
  border:1px solid var(--pex-ink);
  border-radius:2px;
  padding:11px 16px;
  box-shadow:3px 3px 0 var(--pex-signal-lo);
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.pex-buy:hover{
  background:var(--pex-signal);
  border-color:var(--pex-signal);
  transform:translate(-1px,-1px);
  box-shadow:4px 4px 0 var(--pex-signal-lo);
}
.pex-buy:active{ transform:translate(1px,1px); box-shadow:1px 1px 0 var(--pex-signal-lo); }
.pex-buy:focus-visible{ outline:2px solid var(--pex-signal); outline-offset:3px; }
.pex-buy span{ font-size:12px; letter-spacing:0; }

.pex-alt{
  font-family:var(--pex-mono); font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--pex-faint); text-decoration:none;
  border-bottom:1px solid var(--pex-line);
  padding-bottom:2px;
  transition:color .16s ease, border-color .16s ease;
}
.pex-alt:hover{ color:var(--pex-ink); border-color:var(--pex-signal); }
.pex-alt:focus-visible{ outline:2px solid var(--pex-signal); outline-offset:3px; }

/* ---------- Slat reveal (the signature) ---------- */
.pex-slats{
  position:absolute; inset:0; z-index:5;
  pointer-events:none;
  transform-style:preserve-3d;
}
.pex-slats i{
  display:block; width:100%;
  background:var(--pex-shell);
  border-bottom:1px solid var(--pex-line-soft);
  transform-origin:50% 0;
  transform:rotateX(0deg);
  opacity:1;
}
.pex-shell.is-open .pex-slats i{
  animation:pex-slat .42s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay:calc(var(--i) * 34ms);
}
@keyframes pex-slat{
  to{ transform:rotateX(-88deg); opacity:0; }
}

/* ---------- Mobile ---------- */
@media (max-width:560px){
  .pex-scrim{ padding:14px 10px; align-items:flex-start; }
  .pex-blades{ gap:1px; }
  .pex-blade{ font-size:8px; letter-spacing:.1em; padding:8px 5px 7px; }
  .pex-blade[aria-selected="true"]{ padding-bottom:10px; }
  .pex-name{ font-size:20px; }
  .pex-line{ font-size:13px; }
  .pex-body{ padding:14px 13px; }
  .pex-actions{ gap:11px; }
  .pex-buy{ flex:1 1 100%; justify-content:center; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .pex-scrim,.pex-shell,.pex-frame img{ transition-duration:.01ms; }
  .pex-shell.is-open .pex-slats i{ animation:none; opacity:0; }
  .pex-tick.is-running{ animation:none; }
  .pex-buy:hover{ transform:none; }
}