/* Exorys fullscreen media viewer — "the Deck".
   Shared by index.html (work reels) and stills.html (photography).
   Pairs with deck.js; do not fork either file.
   Expects the site tokens (--paper, --accent, --display, --mono) from the
   host page. --vh is declared here so the viewer is self-sufficient. */
/* --vh comes from /tokens.css, loaded by both pages that use this deck */

.dk{
  position:fixed;inset:0;z-index:100;background:#050505;color:var(--paper);
  opacity:0;pointer-events:none;transition:opacity .35s;
}
.dk.open{opacity:1;pointer-events:auto}
.dk-stage{
  position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:min(100vw,calc(var(--vh) * 0.5625));
  overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;
  background:#050505;
}
.dk-track{height:100%;will-change:transform}
.dk-track.anim{transition:transform .45s cubic-bezier(.22,.9,.24,1)}
.dk-slide{position:relative;height:100%;overflow:hidden;background:#0B0B0B}
.dk-slide video,.dk-slide img{width:100%;height:100%;object-fit:cover;display:block}
.dk-slide .ph{
  position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;
  background:
    repeating-linear-gradient(90deg,transparent 0 13px,rgba(233,233,228,.05) 13px 14px),
    linear-gradient(180deg,#141413,#0B0B0B);
}
.dk-slide .ph b{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 118;font-size:clamp(52px,16vw,96px);color:#1F1F1D;line-height:1}
.dk-slide .ph span{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#4A4A45}

.dk-top{
  position:absolute;top:0;left:0;right:0;z-index:5;
  padding:calc(12px + env(safe-area-inset-top)) 14px 26px;
  display:flex;flex-direction:column;gap:10px;
  background:linear-gradient(180deg,rgba(5,5,5,.62),rgba(5,5,5,0));
}
.dk-segs{display:flex;gap:5px}
.dk-segs i{flex:1;height:2px;background:rgba(233,233,228,.28);position:relative;overflow:hidden;display:block}
.dk-segs i::after{content:"";position:absolute;inset:0;transform:scaleX(var(--p,0));transform-origin:left;background:var(--paper)}
.dk-segs i.done::after{--p:1}
.dk-rowa{display:flex;justify-content:space-between;align-items:center;gap:10px}
.dk-count{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#B9B9B1}
.dk-btns{display:flex;gap:8px;align-items:center}
.dk-ib{
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(233,233,228,.28);background:rgba(5,5,5,.35);backdrop-filter:blur(6px);
  transition:background .2s,border-color .2s;
}
.dk-ib:hover{background:var(--accent);border-color:var(--accent)}
/* display:flex above would otherwise beat the UA [hidden] rule */
.dk-ib[hidden]{display:none}
.dk-ib svg{width:15px;height:15px;stroke:var(--paper);fill:none;stroke-width:1.6}
.dk-ib.mut svg .on{display:none}
.dk-ib.mut.muted svg .on{display:block}
.dk-ib.mut.muted svg .off{display:none}

/* ---- volume: only inserted where volume is actually settable ---- */
.dk-vol{
  display:flex;align-items:center;height:34px;width:78px;padding:0 10px;
  border:1px solid rgba(233,233,228,.28);background:rgba(5,5,5,.35);
  backdrop-filter:blur(6px);transition:border-color .2s;
}
.dk-vol[hidden]{display:none}
.dk-vol:focus-within{border-color:var(--accent)}
.dk-vol input{
  -webkit-appearance:none;appearance:none;
  width:100%;height:12px;margin:0;padding:0;background:transparent;cursor:pointer;display:block;
}
.dk-vol input:focus{outline:none}
.dk-vol input::-webkit-slider-runnable-track{
  height:2px;border:0;
  background:linear-gradient(to right,var(--paper) 0 var(--vp,0%),rgba(233,233,228,.28) var(--vp,0%) 100%);
}
.dk-vol input::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;border:0;
  width:9px;height:9px;border-radius:50%;background:var(--paper);margin-top:-3.5px;
  transition:background .2s;
}
.dk-vol input:focus-visible::-webkit-slider-thumb,
.dk-vol input:active::-webkit-slider-thumb{background:var(--accent)}
.dk-vol input::-moz-range-track{height:2px;border:0;background:rgba(233,233,228,.28)}
.dk-vol input::-moz-range-progress{height:2px;border:0;background:var(--paper)}
.dk-vol input::-moz-range-thumb{width:9px;height:9px;border:0;border-radius:50%;background:var(--paper)}
.dk-vol input:focus-visible::-moz-range-thumb,
.dk-vol input:active::-moz-range-thumb{background:var(--accent)}

.dk-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  padding:60px 16px calc(18px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg,rgba(5,5,5,.72),rgba(5,5,5,0));
  pointer-events:none;
}
.dk-cap .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#B9B9B1;display:block;margin-bottom:6px}
.dk-cap strong{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 112;font-size:clamp(24px,6.4vw,34px);letter-spacing:-.015em;line-height:1;display:block}
.dk-cap .t{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:#77776F;display:block;margin-top:8px}

.dk-zone{position:absolute;top:0;bottom:0;z-index:4;-webkit-tap-highlight-color:transparent}
.dk-zone.prev{left:0;width:34%}
.dk-zone.next{right:0;width:66%}

.dk-hint{
  position:absolute;left:50%;bottom:calc(86px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:6;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#8A8A83;
  background:rgba(5,5,5,.5);border:1px solid rgba(233,233,228,.16);padding:7px 12px;backdrop-filter:blur(6px);
  opacity:0;transition:opacity .5s;pointer-events:none;white-space:nowrap;
}
.dk-hint.show{opacity:1}

.dk-heart{position:absolute;z-index:7;width:64px;height:64px;margin:-32px 0 0 -32px;pointer-events:none;animation:dkpop .8s cubic-bezier(.2,.9,.3,1) forwards}
.dk-heart svg{width:100%;height:100%}
.dk-heart svg path{fill:var(--accent);stroke:var(--accent)}
@keyframes dkpop{
  0%{transform:scale(.4);opacity:0}
  25%{transform:scale(1.12);opacity:1}
  55%{transform:scale(1)}
  100%{transform:scale(1) translateY(-26px);opacity:0}
}
@media(min-width:900px){
  .dk-stage{border-left:1px solid #1C1C1A;border-right:1px solid #1C1C1A}
}
@media(prefers-reduced-motion:reduce){
  .dk-track.anim{transition:none}
}