:root {
  --fade: 2000ms;
  --ink: rgba(255,255,255,.96);
  --ink-dim: rgba(255,255,255,.72);
}
* { margin:0; padding:0; box-sizing:border-box; }
html, body {
  width:100%; height:100%; overflow:hidden; background:#000;
  font-family: "Google Sans", "Product Sans", Roboto, -apple-system,
               "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  cursor: none;
}
/* The pointer comes back with the settings UI — a frame nobody is touching
   shouldn't have an arrow burned into it, but you can't aim at a gear you
   can't see the cursor for. */
body.ui-visible, body.drawer-open { cursor: default; }

#stage { position:fixed; inset:0; background:#000; }

/* ---- one slide = backdrop + 1..2 photos, crossfaded as a unit ---- */
.slide {
  position:absolute; inset:0;
  opacity:0;
  transition: opacity var(--fade) cubic-bezier(.4,0,.2,1);
  will-change: opacity;
}
.slide.on { opacity:1; }

.backdrop {
  position:absolute; inset:-8%;
  background-size:cover; background-position:center;
  filter: blur(44px) saturate(1.4) brightness(.66);
  transform: scale(1.35);   /* zoom past the photo's own dark edges */
}
.backdrop.flat { background:#000; filter:none; transform:none; }

.photos {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  gap: var(--gap, 0px);
}
/* Every photo lives in a box sized in JS to the photo's own aspect,
   so `cover` never crops except for the Ken Burns overscan. */
.ph {
  position:relative; flex:0 0 auto;
  overflow:hidden;
}
.ph img {
  display:block; width:100%; height:100%; object-fit:cover;
  transform: translate3d(var(--x0,0px), var(--y0,0px), 0) scale(var(--s0,1));
  transition: transform var(--kb, 14000ms) linear;
  will-change: transform;
  backface-visibility:hidden;
}
.ph.go img {
  transform: translate3d(var(--x1,0px), var(--y1,0px), 0) scale(var(--s1,1.06));
}

/* ---- readability scrims ---- */
#scrim {
  position:fixed; inset:0; pointer-events:none;
  background:
    linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.26) 14%, rgba(0,0,0,0) 34%),
    radial-gradient(120% 100% at 50% 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,.34) 100%);
}

/* ---- overlay ---- */
#overlay {
  position:fixed; inset:0; pointer-events:none;
  color:var(--ink);
  transition: transform 90s linear, opacity 800ms ease;
  text-shadow: 0 2px 22px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
}
#overlay.hide { opacity:0; }

#clockbox { position:absolute; left:4.4vw; bottom:5.2vh; }
#time {
  font-size:9.2vh; line-height:.95; font-weight:200;
  letter-spacing:-.018em; font-variant-numeric: tabular-nums;
}
#sub {
  margin-top:1.5vh; font-size:2.35vh; font-weight:300;
  letter-spacing:.012em; color:var(--ink-dim);
  display:flex; align-items:center; gap:1.1vw;
}
#sub .dot { width:.42vh; height:.42vh; border-radius:50%; background:currentColor; opacity:.55; }
#wx { display:flex; align-items:center; gap:.55vw; }
#wx .g { font-size:2.9vh; line-height:1; }

#caption {
  position:absolute; right:4.4vw; bottom:5.8vh; text-align:right;
  max-width:34vw;
}
#cap-place { font-size:2.25vh; font-weight:300; letter-spacing:.01em; }
#cap-date  { font-size:1.85vh; font-weight:300; color:var(--ink-dim); margin-top:.5vh; }
/* Album reads as a source credit, not a title — small, spaced, quiet. */
#cap-album {
  font-size:1.5vh; font-weight:400; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.5); margin-top:1.1vh;
}
#cap-album:empty, #cap-place:empty, #cap-date:empty { margin-top:0; }

#dim {
  position:fixed; inset:0; pointer-events:none; background:#000;
  opacity:0; transition: opacity 8s linear;
}
#err {
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  color:rgba(255,255,255,.5); font-size:2.2vh; font-weight:300;
  text-align:center; display:none; max-width:60vw; line-height:1.6;
  white-space: pre-line;
}
body.loading #err { display:block; }