/* ============================================================================
   RevelPics — slideshow (the projector view)

   Deliberately dark and chrome-less: this runs on a venue's TV or a projector,
   so everything defaults to the photo, and the controls fade out after a few
   idle seconds. Black bars rather than cropping, because the alternative is
   cutting the top off every portrait photo of somebody's grandmother.
   ========================================================================== */

:root{
  --ss-bg:#0b0a09;
  --ss-fg:#f6f2ee;
  --ss-dim:rgba(246,242,238,.62);
  --ss-ease:cubic-bezier(.2,.7,.3,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--ss-bg);color:var(--ss-fg);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
       "Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;cursor:none;
}
body.show-ui{cursor:default}

.ss{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}

/* ------------------------------------------------------------ the photo */
.ss-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ss-slide{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .3s linear;
}
.ss-slide.on{opacity:1}
/* A short fade, not the 1.1s one this used to be. Two photos of different shapes
   are both on screen for the length of the transition, and at a second and a bit
   that reads as a double exposure rather than a change of photo. A third of a
   second is enough to avoid a hard flash without ever showing two at once. */
.ss-slide img,.ss-slide video{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block;
}
/* No slow zoom. The Ken Burns drift was removed deliberately: a still that
   breathes on a 55-inch screen sounds nice and reads as a glitch, because each
   advance restarts the scale from 1 and the incoming photo fades up while
   growing, on top of the one fading out. Photos simply play through now. */
.ss-slide video{animation:none}
.ss-placeholder{
  color:var(--ss-dim);font-size:.9rem;text-align:center;max-width:32ch;
}
.ss-placeholder b{display:block;font-size:1.05rem;color:var(--ss-fg);margin-bottom:.3rem}

/* ------------------------------------------------------------ progress */
.ss-top{position:absolute;top:0;left:0;right:0;height:3px;z-index:6}
.ss-bar{height:3px;background:rgba(255,255,255,.14);overflow:hidden}
.ss-bar > i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--accent,#c8917a),var(--accent-hover,#b4695c));
}

/* ------------------------------------------------------------ caption */
.ss-cap{
  position:absolute;left:0;right:0;bottom:74px;z-index:5;
  padding:0 5vw;display:flex;justify-content:center;gap:.7rem;
  align-items:baseline;flex-wrap:wrap;text-align:center;
  transition:opacity .4s var(--ss-ease);
}
.ss-name{
  font-size:1.05rem;font-weight:640;letter-spacing:.01em;
  text-shadow:0 2px 16px rgba(0,0,0,.8);
}
.ss-meta{
  font-size:.82rem;color:var(--ss-dim);
  text-shadow:0 2px 14px rgba(0,0,0,.8);
  font-variant-numeric:tabular-nums;
}
body:not(.show-ui) .ss-cap{opacity:0}

/* ------------------------------------------------------------ empty / help */
.ss-help{
  position:relative;z-index:4;text-align:center;max-width:44ch;padding:0 6vw;
}
.ss-help h1{
  font-size:clamp(1.5rem,4vw,2.4rem);font-weight:400;margin:0 0 .6rem;
  letter-spacing:-.015em;
}
.ss-help p{color:var(--ss-dim);font-size:.95rem;margin:0}
.ss-help.hidden{display:none}

/* ------------------------------------------------------------ controls */
.ss-ui{
  position:absolute;left:0;right:0;bottom:0;z-index:7;
  display:flex;align-items:center;gap:8px;
  padding:14px 18px 18px;
  background:linear-gradient(transparent,rgba(0,0,0,.55));
  opacity:0;transition:opacity .35s var(--ss-ease);pointer-events:none;
}
body.show-ui .ss-ui{opacity:1;pointer-events:auto}
.ss-spacer{flex:1}
.ss-btn{
  background:rgba(255,255,255,.14);color:var(--ss-fg);border:0;
  border-radius:999px;min-width:42px;height:42px;padding:0 14px;
  font:inherit;font-size:1rem;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  text-decoration:none;transition:background .18s,transform .18s;
}
.ss-btn:hover{background:rgba(255,255,255,.26)}
.ss-btn.play{min-width:52px}
.ss-btn.like[aria-pressed="true"]{
  background:var(--accent,#c8917a);color:#fff;
}
.ss-btn.like .h{font-size:1.15rem;line-height:1}
.ss-speed{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.76rem;color:var(--ss-dim);
}
.ss-speed input{width:92px;accent-color:var(--accent,#c8917a)}
.ss-speed output{font-variant-numeric:tabular-nums;min-width:1.4rem;text-align:right}

/* ------------------------------------------------------------ QR corner */
.ss-qr{
  position:absolute;right:18px;top:16px;z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:rgba(255,255,255,.94);border-radius:14px;padding:8px 8px 6px;
  transition:opacity .35s var(--ss-ease);
}
.ss-qr img{display:block;width:96px;height:96px;border-radius:6px}
.ss-qr span{
  font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:#3a3330;max-width:96px;text-align:center;line-height:1.25;
}
body:not(.show-ui) .ss-qr{opacity:0}
@media (max-width:760px){
  .ss-qr{display:none}
  .ss-cap{bottom:78px}
  .ss-speed{display:none}
}