/* Fullscreen slideshow, after the look of the old Supersized "Shutter" theme. */

:root {
  --bar: 42px;      /* height of the control bar */
  --tray: 150px;    /* height of the thumbnail tray, the bar covers its bottom */
  --fade: 700ms;    /* cross-fade between photos */
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { background: #111; color: #fff; font: 14px var(--font); overflow: hidden; }
a:link, a:visited { color: gray; }
ul { list-style: none; }
button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
svg { display: block; }

.title {
  position: fixed; z-index: 5; top: 0; left: 15px;
  padding: 10px; background: rgb(0 0 0 / .8);
  color: #aaa; font: bold 22px var(--font);
}

/* Photos: stacked, the active one fades in, each covers the whole window. */
#slides { position: fixed; inset: 0; }
#slides img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity var(--fade);
}
#slides img.active { opacity: 1; }
#slides img.portrait { object-fit: contain; }
.noscript, .message { position: fixed; top: 50%; width: 100%; text-align: center; color: #999; }

.arrow {
  position: fixed; z-index: 5; top: 50%; width: 43px; height: 43px; margin-top: -21px;
  opacity: .6;
}
.arrow:hover { opacity: .8; }
.arrow:active { transform: translateY(2px); }
.arrow svg { width: 43px; height: 43px; }
#prev { left: 10px; }
#next { right: 10px; }

/* Thumbnail tray: hidden below the window, slides up behind the bar. */
#tray {
  position: fixed; z-index: 3; left: 0; bottom: 0; width: 100%; height: var(--tray);
  padding-bottom: var(--bar); background: rgb(0 0 0 / .8); box-shadow: 0 0 4px #000;
  transform: translateY(100%); transition: transform 300ms;
}
#tray.open { transform: none; }
#thumbs {
  display: flex; justify-content: safe center; height: 100%;
  overflow-x: auto; scrollbar-width: thin; scrollbar-color: #444 transparent;
}
#thumbs li { flex: none; width: 150px; height: 100%; background: #111; }
#thumbs button { width: 100%; height: 100%; }
#thumbs img { width: 100%; height: 100%; object-fit: cover; opacity: .5; transition: opacity 100ms; }
#thumbs .current img, #thumbs button:hover img { opacity: 1; }

#progress {
  position: fixed; z-index: 5; left: 0; bottom: var(--bar); width: 100%; height: 8px;
  background: rgb(17 17 17 / .25);
}
#progress-bar { width: 0; height: 100%; background: rgb(255 255 255 / .25); }
#progress-bar.running { animation: progress var(--interval) linear forwards; }
@keyframes progress { from { width: 0; } to { width: 100%; } }

#controls {
  position: fixed; z-index: 4; left: 0; bottom: 0; width: 100%; height: var(--bar);
  display: flex; align-items: center; background: rgb(0 1 1 / .85);
  line-height: var(--bar); white-space: nowrap;
}
#play, #tray-button {
  flex: none; display: grid; place-items: center; width: var(--bar); height: 100%; color: #ccc;
}
#play:hover, #tray-button:hover { background: linear-gradient(#111, transparent); color: #fff; }
#play { border-right: 1px solid #333; }
#tray-button { margin-left: auto; border-left: 1px solid #333; }
#play svg, #tray-button svg { width: 18px; height: 18px; }
#counter { flex: none; margin: 0 10px 0 15px; color: #999; text-shadow: #000 0 -1px 0; }
/* Up to two lines, so the license credit stays visible on narrow windows. */
#caption {
  min-width: 0; margin-right: 20px; text-shadow: #000 1px 1px 2px;
  white-space: normal; line-height: 1.25;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

#dots { position: absolute; left: 50%; display: flex; gap: 5px; }
#dots button {
  display: block; width: 12px; height: 12px; border-radius: 50%;
  background: #555; box-shadow: inset 0 1px 1px #000;
}
#dots button:hover { background: #888; }
#dots .current button { background: #ddd; }

/* The dots sit in the middle of the bar, the caption stays left of them. */
@media (min-width: 901px) {
  #caption { max-width: calc(50% - 140px); }
}
/* Narrow windows: no room for the dots next to the caption. */
@media (max-width: 900px) {
  #dots { display: none; }
}
@media (max-width: 600px) {
  .title { left: 0; font-size: 18px; }
  .arrow { opacity: .4; }
  #counter { margin: 0 8px; }
  #caption { margin-right: 8px; font-size: 12px; -webkit-line-clamp: 3; line-height: 13px; }
}

/* One photo: nothing to step through. */
.single .arrow, .single #play, .single #dots, .single #progress { display: none; }
/* No photos (or photos.json failed to load): just the title and a message. */
.empty .arrow, .empty #tray, .empty #progress, .empty #controls { display: none; }

@media (prefers-reduced-motion: reduce) {
  :root { --fade: 0ms; }
  #tray { transition: none; }
}

.title a:link, .title a:visited { color: inherit; text-decoration: none; }

/* Small, but on every page view: German law wants the Impressum in reach. */
.legal {
  position: fixed; z-index: 5; top: 0; right: 15px;
  padding: 6px 10px; background: rgb(0 0 0 / .6); font-size: 12px;
}
a.legal:link, a.legal:visited { color: #999; text-decoration: none; }
a.legal:hover { color: #fff; }

/* Text pages (data-privacy.html): scrolling, readable width. */
.page { overflow: auto; color: #ccc; line-height: 1.5; }
.page .title { position: static; display: inline-block; margin-left: 15px; }
.page main { max-width: 40em; padding: 20px 25px 40px; }
.page h2 { margin: 1.5em 0 .5em; color: #fff; font-size: 20px; }
.page h3 { margin: 1.2em 0 .3em; color: #fff; font-size: 16px; }
.page p { margin-bottom: .8em; }
.page a:link, .page a:visited { color: #aaa; }