/* ============ DECK VIEWER — Sergio Collalto ============ */
:root{
  --bg:#0F0F0E; --bg-2:#191917; --ink:#EEEAE2;
  --ink-soft:rgba(255,255,255,.62); --ink-faint:rgba(255,255,255,.38);
  --line:rgba(255,255,255,.14); --accent:#8FB0EC;
  --font-display:"Schibsted Grotesk",sans-serif; --font-body:"Schibsted Grotesk",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--font-body);
  display:flex;flex-direction:column;overflow:hidden;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

/* ---- top bar ---- */
.bar{
  flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding:14px clamp(16px,3vw,34px);border-bottom:1px solid var(--line);
  background:rgba(14,14,14,.9);backdrop-filter:blur(10px);z-index:5;
}
.bar-back{
  display:inline-flex;align-items:center;gap:9px;justify-self:start;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
  transition:color .25s;
}
.bar-back:hover{color:var(--accent)}
.bar-title{text-align:center;min-width:0}
.bar-title b{
  display:block;font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(15px,1.6vw,19px);line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bar-title span{
  display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:3px;
}
.bar-right{display:inline-flex;align-items:center;gap:16px;justify-self:end}
.counter{font-family:"DM Mono",monospace;font-size:13px;letter-spacing:.04em;color:var(--ink-soft)}
.counter{white-space:nowrap}
.icon-btn{
  width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:transparent;
  color:var(--ink-soft);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:border-color .25s,color .25s;
}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}

/* ---- stage ---- */
.stage{
  flex:1;position:relative;display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,3vh,40px) clamp(48px,7vw,110px);cursor:pointer;overflow:hidden;
}
.slide-wrap{
  position:relative;width:100%;max-width:min(100%,calc((100vh - 190px) * 16 / 9));
  aspect-ratio:16/9;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  background:var(--bg-2);box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.slide{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .32s ease;
}
.slide.is-active{opacity:1}

/* ---- arrows ---- */
.arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:clamp(38px,4vw,52px);height:clamp(38px,4vw,52px);border-radius:50%;
  border:1px solid var(--line);background:rgba(14,14,14,.6);backdrop-filter:blur(6px);
  color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:border-color .25s,color .25s,background .25s,opacity .25s;
}
.arrow:hover{border-color:var(--accent);color:var(--accent);background:rgba(14,14,14,.85)}
.arrow:disabled{opacity:.25;cursor:default;pointer-events:none}
.arrow.prev{left:clamp(8px,1.8vw,26px)}
.arrow.next{right:clamp(8px,1.8vw,26px)}

/* ---- bottom ---- */
.foot{flex:none;border-top:1px solid var(--line);background:rgba(14,14,14,.9)}
.progress{height:2px;background:var(--line);position:relative;overflow:hidden}
.progress i{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .32s ease}
.dots{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;padding:12px 16px}
.dot{width:7px;height:7px;border-radius:50%;border:none;background:var(--line);cursor:pointer;transition:background .25s,transform .25s;padding:0}
.dot:hover{background:var(--ink-soft)}
.dot.is-on{background:var(--accent);transform:scale(1.35)}

/* ---- empty state ---- */
.empty{
  display:none;position:absolute;inset:0;z-index:6;flex-direction:column;gap:12px;
  align-items:center;justify-content:center;text-align:center;padding:24px;background:var(--bg);
}
.empty b{font-family:var(--font-display);font-size:clamp(24px,3vw,34px);letter-spacing:.04em}
.empty p{color:var(--ink-soft);font-size:14px;max-width:42ch;line-height:1.6}
.empty code{color:var(--accent);font-family:ui-monospace,monospace;font-size:13px}

@media(max-width:640px){
  .bar{grid-template-columns:auto 1fr auto}
  .bar-title{display:none}
  .dots{display:none}
  .stage{padding:14px 10px}
  .slide-wrap{max-width:100%}
}