/* Showcase — the wordmark as a window onto the photographs. Made to be left
   running: black, quiet, and nothing on screen but the picture once you stop
   moving the pointer. Behaviour: assets/showcase.js. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body.showcase {
  overflow: hidden;
  background: #000;
  color: #f5f5f7;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Dark glass for the controls */
  --lg-tint: rgba(255,255,255,.08); --lg-tint-hover: rgba(255,255,255,.15);
  --lg-text: #f5f5f7; --lg-text-dim: #c0c0c5;
  --lg-rim: rgba(255,255,255,.6); --lg-rim-base: rgba(255,255,255,.14); --lg-edge: rgba(0,0,0,.5);
  --lg-shadow: 0 18px 40px -20px rgba(0,0,0,.8);
}
a { color: inherit; text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The current photograph's colour, faint, so the screen never goes dead black.
   Blurred small and scaled up: cheap enough to leave running for hours. */
.sc-ambient { position: fixed; inset: -12%; z-index: 0; pointer-events: none; overflow: hidden; }
.sc-ambient-layer {
  position: absolute; left: 30%; top: 30%; width: 40%; height: 40%;
  background-size: cover; background-position: center;
  filter: blur(30px) saturate(1.6); transform: scale(2.9);
  opacity: 0; transition: opacity 2.4s ease;
}
.sc-ambient-layer.is-on { opacity: .22; }

/* The wordmark */
.sc-stage { position: fixed; inset: 0; z-index: 1; display: grid; place-items: center; padding: 0 4vw; }
.sc-title { width: 100%; display: grid; place-items: center; font-weight: inherit; }
.sc-mark { width: min(92vw, 170vh); height: auto; overflow: visible; }
.sc-text {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  font-size: 200px; font-weight: 600; letter-spacing: -16px;
}
.sc-outline { fill: #fff; }
.sc-base { fill: #15181b; }
.sc-veil { fill: #fff; opacity: .16; }
.sc-photo { opacity: 0; transition: opacity 2.4s ease; }
.sc-photo.is-on { opacity: 1; }
/* The photograph travels slowly through the letters */
.sc-photo.pan { animation: sc-pan var(--dur, 12s) linear forwards; }
@keyframes sc-pan {
  from { transform: translate(0px, var(--sy0, 0px)); }
  to   { transform: translate(var(--sx, 0px), var(--sy1, 0px)); }
}
.sc-mark.is-paused .sc-photo { animation-play-state: paused; }

/* Controls: dark glass, gone when the pointer rests */
.sc-back, .sc-full, .sc-caption, .sc-hint { position: fixed; z-index: 5; transition: opacity .7s ease; }
.sc-back {
  top: max(20px, env(safe-area-inset-top)); left: 24px;
  display: inline-flex; align-items: center; height: 44px; padding: 0 18px;
  border-radius: 999px; font-size: 14px; font-weight: 500; letter-spacing: -.01em;
}
.sc-full {
  top: max(20px, env(safe-area-inset-top)); right: 24px;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%;
}
.sc-full svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sc-full[hidden] { display: none; }
.sc-caption {
  left: 0; right: 0; bottom: max(30px, env(safe-area-inset-bottom));
  display: flex; justify-content: center; align-items: baseline; gap: 14px;
  font-size: 13px; color: rgba(245,245,247,.78); pointer-events: none;
}
.sc-caption #sc-count { font-size: 11px; color: #86868b; font-variant-numeric: tabular-nums; }
.sc-hint { right: 24px; bottom: max(30px, env(safe-area-inset-bottom)); font-size: 11px; color: #6e6e73; pointer-events: none; }
body.is-idle { cursor: none; }
body.is-idle .sc-back, body.is-idle .sc-full, body.is-idle .sc-caption, body.is-idle .sc-hint { opacity: 0; pointer-events: none; }

@media (hover: none), (max-width: 700px) { .sc-hint { display: none; } }
@media (max-width: 700px) { .sc-back { left: 16px; } .sc-full { right: 16px; } }
@media (prefers-reduced-motion: reduce) {
  .sc-photo.pan { animation: none; }
  .sc-photo, .sc-ambient-layer { transition-duration: 1.2s; }
}
@media (prefers-reduced-transparency: reduce) { .sc-ambient { display: none; } }