/* /photography: the Wall, Spectrum, and the photo view.
   Colors come from the tokens in /styles.css. */

html.noscroll, html.noscroll body { overflow: hidden; }

.ph {
  max-width: 90rem;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 3vw, 2rem) 4rem;
}
.ph .subpage-header { margin-bottom: 2rem; }

.ph button,
.detail button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
}
.ph button:focus-visible,
.detail button:focus-visible {
  outline: 2px solid var(--link-hover);
  outline-offset: 3px;
  border-radius: 2px;
}

.ph-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-bottom: 1.25rem;
}
.ph-head h1 { font-size: 1.15rem; font-weight: 600; margin: 0; }

.seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--rule); border-radius: 999px; }
.seg[hidden] { display: none; }
.ph .seg button { font-size: .85rem; padding: .3rem .95rem; border-radius: 999px; color: var(--muted); transition: background 150ms ease, color 150ms ease; }
.ph .seg button:hover { color: var(--fg); }
.ph .seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }

.ph-tools:empty { display: none; }
.ph-tools { margin-bottom: 1rem; }
/* The whole row is the wheel's touch area, so swipes here turn it instead of scrolling the page */
.yw { display: flex; align-items: center; gap: .85rem; width: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }
.yw-label { font-size: .99rem; color: var(--muted); }
.yw-win { --row: 2.25rem; position: relative; width: 7.25rem; height: calc(var(--row) * 3); }
.yw-band { position: absolute; left: 0; right: 0; top: var(--row); height: var(--row); border-block: 1px solid var(--fg); pointer-events: none; }
.yw-win:has(.yw-list:focus-visible) .yw-band { border-color: var(--link-hover); }
.yw-list {
  height: 100%; margin: 0; padding: var(--row) 0; list-style: none;
  overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent);
  mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent);
}
.yw-list::-webkit-scrollbar { display: none; }
.yw-list.free { scroll-snap-type: none; }
.yw-list:focus-visible { outline: none; }
.yw-list li { height: var(--row); scroll-snap-align: center; }
.ph .yw-list button { width: 100%; height: 100%; text-align: center; font-size: 1.07rem; color: var(--muted); font-variant-numeric: tabular-nums; transition: color 150ms ease; }
.ph .yw-list button:hover { color: var(--fg); }
.ph .yw-list button.on { color: var(--fg); font-weight: 600; font-size: 1.15rem; }

.ph-hint { margin: 0 0 1rem; color: var(--muted); font-size: .92rem; }
.ph-body { transition: opacity 160ms ease; }
.ph-body.out { opacity: 0; }
.ph-empty { color: var(--muted); margin: 3rem 0; }

/* Photos fade in over their blurred preview once loaded */
/* .ph prefix so the button reset above can't wipe the preview's sizing */
.ph .wl-ph, .ph .sp-sl { background-size: cover; background-position: center; background-repeat: no-repeat; background-color: var(--rule); }
.wl-ph img, .sp-sl img { opacity: 0; transition: opacity 300ms ease; }
.wl-ph img.in, .sp-sl img.in { opacity: 1; }

/* Wall */
.wl-grid { display: flex; flex-direction: column; gap: 6px; }
.wl-row { display: flex; gap: 6px; overflow: hidden; }
.wl-ph { flex: none; display: block; overflow: hidden; }
.wl-ph img { width: 100%; height: 100%; object-fit: cover; transition: opacity 300ms ease, transform 300ms ease; }
.wl-ph:hover img { transform: scale(1.03); }

/* Spectrum */
.sp { display: flex; flex-direction: column; gap: 1rem; }
.sp-band { display: flex; gap: 2px; height: clamp(18rem, 42vw, 32rem); }
.sp-sl { flex: 1 1 0; min-width: 0; display: block; overflow: hidden; transition: flex-grow 380ms cubic-bezier(.2,.7,.2,1); }
.sp-sl img { width: 100%; height: 100%; object-fit: cover; }
.sp-sl:hover, .sp-sl:focus-visible { flex-grow: 9; }
.sp-scale { height: 6px; border-radius: 3px; }
.sp-read { margin: 0; min-height: 1.6em; color: var(--muted); font-size: .95rem; }

/* Photo view: grows out of its spot, palette strip underneath */
.detail {
  position: fixed; inset: 0; z-index: 50; overflow: hidden; color: var(--fg); touch-action: pan-y;
  --grow: 420ms; --fade: 340ms; --cap-delay: 320ms; --strip-delay: 160ms; --strip-step: 50ms;
}
/* Phones get a quicker open and close */
@media (max-width: 640px) {
  .detail { --grow: 280ms; --fade: 220ms; --cap-delay: 140ms; --strip-delay: 80ms; --strip-step: 30ms; }
}
.detail[hidden] { display: none; }
.dt-bg { position: fixed; inset: 0; background: var(--bg); opacity: 0; transition: opacity var(--fade) ease; }
.dt-img {
  position: fixed; z-index: 2; object-fit: cover; background-size: cover;
  transform-origin: 0 0; will-change: transform;
  /* transform does the grow; the box properties are the fallback for very different shapes */
  transition: transform var(--grow) cubic-bezier(.2,.75,.2,1), left var(--grow) cubic-bezier(.2,.75,.2,1), top var(--grow) cubic-bezier(.2,.75,.2,1), width var(--grow) cubic-bezier(.2,.75,.2,1), height var(--grow) cubic-bezier(.2,.75,.2,1), opacity 200ms ease;
}
.detail .dt-close {
  position: fixed; z-index: 5;
  top: calc(env(safe-area-inset-top, 0px) + .6rem);
  right: calc(env(safe-area-inset-right, 0px) + .6rem);
  width: 2.75rem; height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 200ms ease var(--strip-delay), color 120ms ease;
}
.detail .dt-close svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.dt-strip { position: fixed; z-index: 3; display: flex; height: clamp(14px, 3.4vh, 26px); }
.dt-strip span { flex: 1; transform: scaleY(0); transform-origin: top; transition: transform calc(var(--grow) * .8) cubic-bezier(.2,.7,.2,1); }
.dt-cap {
  position: fixed; z-index: 3;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .5rem 1.5rem;
  opacity: 0; transition: opacity 220ms ease var(--cap-delay);
}
.dt-cap h2 { margin: 0; font-size: 1.1rem; font-weight: 600; line-height: 1.3; color: var(--fg); text-transform: none; letter-spacing: 0; }
.dt-cap p { margin: .15rem 0 0; color: var(--muted); font-size: .92rem; max-width: 40rem; }
.dt-cap p.note { color: var(--fg); }
.dt-nav { display: flex; align-items: center; gap: 1.25rem; font-size: .95rem; font-variant-numeric: tabular-nums; }
.detail .dt-nav button { border-bottom: 1px solid currentColor; }
.detail .dt-nav button:hover, .detail .dt-close:hover { color: var(--link-hover); }
.dt-count { color: var(--muted); }

.detail.ready .dt-bg, .detail.ready .dt-close, .detail.ready .dt-cap { opacity: 1; }
.detail.ready .dt-strip span { transform: none; }
.detail.fading .dt-img { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .ph *, .detail * { transition-duration: 1ms !important; transition-delay: 0ms !important; }
}