/* The slide show: square pairs sliding in from either side, together and at the same pace. */
.slides{--gap:22px;height:100vh;height:100dvh;overflow:hidden}

.show{position:fixed;inset:var(--top) 0 var(--bottom);z-index:5;cursor:pointer}
.show-pair{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;gap:var(--gap);
}
.slides{--calm:cubic-bezier(.42,0,.16,1)}
.slides body{transition:background-color 2.6s var(--calm),color 2.6s var(--calm)}
.show-frame{
  overflow:hidden;flex:0 0 auto;background-size:cover;background-position:center;
  opacity:0;
  transition:transform var(--travel,2600ms) var(--calm),opacity calc(var(--travel,2600ms) * .7) var(--calm);
}
.show-frame img{width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .5s var(--ease)}
.show-frame img.is-there{opacity:1}
.still .show-frame img{opacity:1;transition:none}
.show-pair .f-l{transform:translateX(calc(-50vw - 100%))}
.show-pair .f-r{transform:translateX(calc(50vw + 100%))}
.show-pair.is-in .f-l,.show-pair.is-in .f-r{transform:none;opacity:1}
.show-pair.is-out .f-l,.show-pair.is-out .f-r{opacity:0}

.show-card{
  position:absolute;left:0;right:0;margin:0;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  opacity:0;transition:opacity 1.2s var(--calm);pointer-events:none;
}
.show-card-name{font-family:var(--display);font-style:italic;font-weight:300;font-size:17px;letter-spacing:.04em;color:var(--fg-dim)}
.show-card-time{display:block;width:64px;height:1px;background:var(--hair);position:relative;overflow:hidden}
.show-card-time::after{content:'';position:absolute;inset:0;background:var(--brass);transform:scaleX(0);transform-origin:left}
.show-pair.is-held .show-card{opacity:1}
.show-pair.is-held .show-card-time::after{transform:scaleX(1);transition:transform var(--hold,5600ms) linear}
.show-pair.is-out .f-l{transform:translateX(calc(-50vw - 100%))}
.show-pair.is-out .f-r{transform:translateX(calc(50vw + 100%))}

.show-hint{opacity:.45;transition:opacity 1s var(--ease)}


.show-hint.is-gone{opacity:0}


/* An upright phone: everything else steps aside for the one instruction and the way back. */
.turn{
  position:fixed;inset:0;z-index:40;background:var(--ground);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  padding:0 28px;text-align:center;color:var(--fg);
}
.turn[hidden]{display:none}
.is-upright .topbar,.is-upright .footbar,.is-upright .show{display:none}
.turn-icon{color:var(--brass)}
.turn-phone{transform-origin:32px 28px;animation:ij-turn 3.2s var(--ease) infinite}
@keyframes ij-turn{0%,25%{transform:none}55%,85%{transform:rotate(-90deg)}100%{transform:none}}
.turn-text{margin:0;font-family:var(--display);font-weight:400;font-size:27px;line-height:1.25;letter-spacing:.01em}
.turn-back{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg);
  border-bottom:1px solid var(--brass);padding:4px 0;
}
@media (prefers-reduced-motion:reduce){.turn-phone{animation:none}}

@media (max-width:720px){
  .slides{--gap:14px}
}

.still .show-frame{transition:none}
@media (orientation:landscape) and (max-height:560px){
  /* Room to scroll, so a swipe up lets Safari fold its tabs and address bar away.
     Everything on the page is fixed, so the show itself does not move. */
  .slides{height:auto;min-height:calc(100lvh + 48px);overflow:visible}
  .show-card{gap:6px}
  .show-card-name{font-size:14px}
}
.still .show-card{opacity:1}
@media (prefers-reduced-motion:reduce){
  .show-frame{transform:none !important;opacity:0;transition:opacity 700ms linear}
  .show-card-time{display:none}
  .show-pair.is-in .show-frame{opacity:1}
  .show-pair.is-out .show-frame{opacity:0}
}

/* ---------- other looks, for Ian to choose between (?look=) ---------- */

/* Fade and breathe: no travel. The pair appears where it hangs, grows by a breath
   while it is looked at, and fades away. A slide show in a darkened room. */
[data-look="fade"] .show-pair .f-l,[data-look="fade"] .show-pair .f-r{transform:scale(.985)}
[data-look="fade"] .show-frame{transition:transform var(--travel,2600ms) var(--calm),opacity var(--travel,2600ms) var(--calm)}
[data-look="fade"] .show-pair.is-in .f-l,[data-look="fade"] .show-pair.is-in .f-r{transform:scale(1)}
[data-look="fade"] .show-pair.is-held .f-l,[data-look="fade"] .show-pair.is-held .f-r{
  transform:scale(1.02);transition:transform var(--hold,5600ms) linear,opacity var(--travel,2600ms) var(--calm);
}
[data-look="fade"] .show-pair.is-out .f-l,[data-look="fade"] .show-pair.is-out .f-r{transform:scale(1.02);opacity:0}

/* Rise: the pair comes up from below and settles, as the pairs do inside the galleries,
   then carries on upward. One movement for the whole site. */
[data-look="rise"] .show{overflow:hidden}
[data-look="rise"] .show-pair .f-l,[data-look="rise"] .show-pair .f-r{transform:translateY(calc(50vh + 100%))}
[data-look="rise"] .show-pair.is-in .f-l,[data-look="rise"] .show-pair.is-in .f-r{transform:none}
[data-look="rise"] .show-pair.is-out .f-l,[data-look="rise"] .show-pair.is-out .f-r{transform:translateY(calc(-50vh - 100%));opacity:0}

/* Curtain: the two pictures start together at the centre and part, each to its own
   side, then close again before the next pair. Two halves of one thing. */
[data-look="curtain"] .show-pair .f-l{transform:translateX(calc(50% + var(--gap) / 2))}
[data-look="curtain"] .show-pair .f-r{transform:translateX(calc(-50% - var(--gap) / 2))}
[data-look="curtain"] .show-pair.is-in .f-l,[data-look="curtain"] .show-pair.is-in .f-r{transform:none}
[data-look="curtain"] .show-pair.is-out .f-l{transform:translateX(calc(50% + var(--gap) / 2));opacity:0}
[data-look="curtain"] .show-pair.is-out .f-r{transform:translateX(calc(-50% - var(--gap) / 2));opacity:0}