/* css/components/slideshow.css
   Three layouts, by screen shape (the map's own rules are in route-map.css):
     desktop (default)          photo and map side by side: photo 75%, map 25%
     phone held upright         photo on top (60% of the height), map below (40%), both full width
     phone held sideways        photo fills the screen; the map is a portrait card in the top-right corner
   Controls, timeline and buttons float above the photo. Nothing scrolls. */

.slideshow {
  --fade: 1000ms; /* overwritten from script so timing has one source */
  --edge: 14px;   /* gap between floating elements and the frame's edge */
  position: relative;
  height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: 100%;
  background: var(--color-stage);
  color: var(--color-paper);
  font: 16px/1.45 var(--font-ui);
}
.slideshow--no-map { grid-template-columns: 1fr; }
.slideshow--no-map .route-map { display: none; }

/* Photo frame with two stacked, cross-faded layers */
.slideshow__photos { position: relative; min-width: 0; min-height: 0; overflow: hidden; }

/* Phone held upright: photo on top, map below */
@media (orientation: portrait) and (max-width: 768px) {
  .slideshow { grid-template-columns: 1fr; grid-template-rows: 60% 40%; }
  .slideshow--no-map { grid-template-rows: 100%; }
}

/* Phone held sideways: photo fills the screen, map inset top-right.
   Map card: 20% of the screen's width and 1.5x as tall (20:30), at least 160px wide, at most 60% of the height. */
@media (orientation: landscape) and (max-height: 500px) {
  .slideshow {
    display: block;
    --map-width: clamp(160px, 20vw, 420px);
    --map-height: min(calc(var(--map-width) * 1.5), 60vh);
  }
  .slideshow__photos { position: absolute; inset: 0; }
}

.slideshow__photos--zoomed { cursor: grab; }
.slideshow__photos--zoomed:active { cursor: grabbing; }
.slideshow__photos--scrubbing .slideshow__layer { transition: none; }

.slideshow__layer { position: absolute; inset: 0; opacity: 0; transition: opacity var(--fade) ease; }
.slideshow__layer--visible { opacity: 1; }
/* Each layer holds a wrapper (takes the wheel/drag zoom) around the photo or video (takes the Ken Burns motion).
   Photos fill the frame, cropping the overhang; "Fill the screen" off shows them whole over a blurred copy of
   themselves (so do portrait photos that filling would crop too much). Videos always fit, with bars. */
.slideshow__media { position: relative; width: 100%; height: 100%; overflow: hidden; }
.slideshow__media > img,
.slideshow__media > video { display: block; user-select: none; -webkit-user-drag: none; width: 100%; height: 100%; object-fit: contain; }
.slideshow__media > img { object-fit: cover; will-change: transform; }
.slideshow--fit .slideshow__media > .slideshow__photo { object-fit: contain; }

/* A photo much taller than the frame: shown whole, over a blurred, darkened copy of itself */
.slideshow__media--backdrop > .slideshow__photo { position: relative; object-fit: contain; }
.slideshow__media > .slideshow__backdrop { position: absolute; inset: 0; object-fit: cover; filter: blur(28px) brightness(.55) saturate(1.1); transform: scale(1.15); }

/* Back to the album (top-left; mirrors the settings gear top-right) */
.slideshow__back { position: absolute; top: max(14px, env(safe-area-inset-top)); left: 14px; display: inline-flex; align-items: center; gap: 8px; max-width: min(40ch, 45%); height: 44px; padding: 0 16px 0 12px; border-radius: 999px; background: rgba(20, 24, 29, .55); color: var(--color-paper); font-size: 15px; text-decoration: none; opacity: .45; transition: opacity .2s; }
.slideshow__back:hover, .slideshow__back:focus-visible { opacity: 1; }

/* "Show details": bottom right, above the controls (clear of the timeline's labels, the buttons and the map card); stays when idle */
.slideshow__details { position: absolute; right: 14px; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 66px); margin: 0; padding: 4px 12px; border-radius: 999px; background: rgba(20, 24, 29, .7); color: var(--color-paper); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.slideshow__back:focus-visible { outline: 2px solid var(--color-lamp); outline-offset: 2px; }
.slideshow__back-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Idle: overlays fade out, and the cursor hides over the photo. !important beats their own
   hover/focus opacity rules, which can't apply anyway: any pointer movement or key wakes them. */
.slideshow--idle .controls,
.slideshow--idle .timeline,
.slideshow--idle .settings__toggle,
.slideshow--idle .slideshow__back { opacity: 0 !important; pointer-events: none; transition: opacity .6s; }
.slideshow--idle .slideshow__photos { cursor: none; }

/* Buttons inside the slideshow */
.slideshow button { font: inherit; color: var(--color-paper); background: transparent; border: 1px solid rgba(233, 228, 216, .35); border-radius: 6px; padding: 10px 16px; cursor: pointer; }
.slideshow button:hover { border-color: var(--color-paper); }

/* Tap to play (phones: sound needs a tap). The whole photo is the button; the first photo shows,
   dimmed, behind a frosted disc. The controls and timeline wait until it's pressed. */
.slideshow .slideshow__start { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 0; border: 0; border-radius: 0; background: radial-gradient(circle at center, rgba(0, 0, 0, .15), rgba(0, 0, 0, .5)); -webkit-tap-highlight-color: transparent; }
.slideshow .slideshow__start[hidden] { display: none; }
.slideshow__start-disc { display: grid; place-items: center; width: clamp(92px, 22vmin, 132px); aspect-ratio: 1; border-radius: 50%;
  background: rgba(20, 24, 29, .5); border: 1.5px solid rgba(233, 228, 216, .55); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .45), 0 0 0 0 rgba(242, 184, 75, .5); animation: start-pulse 2.4s ease-out infinite; transition: transform .2s ease, background .2s ease; }
.slideshow__start-disc svg { width: 46%; height: 46%; fill: var(--color-lamp); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); }
.slideshow__start-label { padding: 6px 14px; border-radius: 999px; background: rgba(20, 24, 29, .55); color: var(--color-paper); font-size: 15px; letter-spacing: .04em; }
.slideshow__start:hover .slideshow__start-disc,
.slideshow__start:focus-visible .slideshow__start-disc { transform: scale(1.06); background: rgba(20, 24, 29, .65); }
.slideshow__start:active .slideshow__start-disc { transform: scale(.96); }
.slideshow__start:focus-visible { outline: none; }
.slideshow__start:focus-visible .slideshow__start-disc { border-color: var(--color-lamp); }
@keyframes start-pulse {
  0%   { box-shadow: 0 10px 40px rgba(0, 0, 0, .45), 0 0 0 0 rgba(242, 184, 75, .45); }
  70%  { box-shadow: 0 10px 40px rgba(0, 0, 0, .45), 0 0 0 22px rgba(242, 184, 75, 0); }
  100% { box-shadow: 0 10px 40px rgba(0, 0, 0, .45), 0 0 0 0 rgba(242, 184, 75, 0); }
}
@media (prefers-reduced-motion: reduce) { .slideshow__start-disc { animation: none; } }
.slideshow--waiting .controls,
.slideshow--waiting .timeline { visibility: hidden; }
.slideshow .button--primary { background: var(--color-lamp); border-color: var(--color-lamp); color: var(--color-ink); font-weight: 600; }
.slideshow button:focus-visible,
.slideshow input:focus-visible { outline: 2px solid var(--color-lamp); outline-offset: 2px; }