/* ═══ polish layer ═══════════════════════════════════════════════════════
   Motion and loading behaviour. Nothing here changes the design — it only
   makes the design behave the way people now expect a finished site to.
   Every effect is disabled under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. image load fade ───────────────────────────────────────────────── */
/* Hover-zoom and the hero-video drift were removed at the owner's request —
   no scaling of images or video anywhere on the site. */
.slot.filled,
figure.shot .frame { overflow:hidden; }

.slot.filled img,
figure.shot .frame img { transition: opacity .7s ease; }

/* ── 2. blurred placeholder, then a fade to the real image ────────────── */
.slot.filled,
figure.shot .frame { background-size:cover; background-position:center; }
.slot.filled img,
figure.shot .frame img { opacity:0; }
.slot.filled img.ready,
figure.shot .frame img.ready { opacity:1; }

/* ── 3. reveal on scroll ──────────────────────────────────────────────── */
[data-reveal] {
  opacity:0; transform: translateY(16px);
  transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1);
}
[data-reveal].shown { opacity:1; transform:none; }
[data-reveal]:nth-child(2){transition-delay:.06s}
[data-reveal]:nth-child(3){transition-delay:.12s}
[data-reveal]:nth-child(4){transition-delay:.18s}

/* ── 4. header settles once you start reading ─────────────────────────── */
header { transition: box-shadow .35s ease, background-color .35s ease; }
header.settled { box-shadow: 0 10px 30px -26px rgba(42,38,32,.65); }

/* ── 5. the small things ──────────────────────────────────────────────── */
.btn { transition: background-color .24s ease, color .24s ease, transform .24s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
figure.shot figcaption { transition: color .3s ease; }
figure.shot:hover figcaption { color: var(--ink); }
.band figure.shot:hover figcaption { color:#EEEDE6; }

a:focus-visible, .btn:focus-visible, button:focus-visible {
  outline:2px solid var(--madder); outline-offset:3px;
}

@media (prefers-reduced-motion: reduce) {
  .slot.filled img, figure.shot .frame img { transition:none; }
  [data-reveal] { opacity:1; transform:none; transition:none; }
  .btn:hover { transform:none; }
}