/* =====================================================================
   Motion (v5) — cinematic, slow, quiet.
   Active only when <html class="js-motion"> (set in the <head>, never for
   visitors who prefer reduced motion). Without it everything renders
   instantly. The header is never animated (its menu panel is fixed).
   ===================================================================== */
:root {
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-slow: cubic-bezier(0.65, 0, 0.35, 1);
}

@keyframes motion-bar-top {
  from { transform: scaleY(1); }
  to { transform: scaleY(0); }
}

@keyframes motion-char {
  from { opacity: 0; transform: translateY(0.45em); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes motion-lift {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes motion-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes motion-zoom {
  from { scale: 1.12; }
  to { scale: 1; }
}

/* ---- hero: the film opens ---- */
html.js-motion .motion-letterbox {
  position: absolute;
  left: 0;
  right: 0;
  height: 14vh;
  background: #000;
  z-index: 4;
  pointer-events: none;
  animation: motion-bar-top 1.6s var(--motion-slow) 0.15s both;
}

html.js-motion .motion-letterbox--top {
  top: 0;
  transform-origin: top center;
}

html.js-motion .motion-letterbox--bottom {
  bottom: 0;
  transform-origin: bottom center;
}

html.js-motion .motion-hero video {
  animation: motion-zoom 9s var(--motion-ease) both;
}

html.js-motion .motion-hero .search-header > :not(h1) {
  animation: motion-lift 1.2s var(--motion-ease) both;
  animation-delay: calc(var(--title-end, 900ms) + 150ms);
}

html.js-motion .motion-hero .scrollTo {
  animation: motion-fade 1s ease-out both;
  animation-delay: calc(var(--title-end, 900ms) + 500ms);
}

/* letters */
.motion-w {
  display: inline-block;
  white-space: nowrap;
}

html.js-motion .motion-hero .motion-c {
  display: inline-block;
  animation: motion-char 1.1s var(--motion-ease) both;
  animation-delay: var(--d, 0ms);
}

html.js-motion .reveal-chars .motion-c {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em);
  filter: blur(5px);
  transition: opacity 0.9s ease, transform 1s var(--motion-ease), filter 0.9s ease;
  transition-delay: var(--d, 0ms);
}

html.js-motion .reveal-chars.is-visible .motion-c {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ---- photographs: a shutter opens from the centre ---- */
html.js-motion .reveal-shutter {
  overflow: hidden; /* the scaled photo must not widen the page (clip-path does not) */
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 1.5s var(--motion-slow);
  transition-delay: var(--reveal-delay, 0s);
}

html.js-motion .reveal-shutter.is-visible {
  clip-path: inset(0 0 0 0);
}

/* overflow only clips block boxes: an inline <picture> would let the
   scaled photo widen the page */
html.js-motion picture.reveal-shutter {
  display: block;
}

html.js-motion .reveal-shutter img {
  scale: 1.1;
  transition: scale 2.2s var(--motion-ease);
  transition-delay: var(--reveal-delay, 0s);
}

html.js-motion .reveal-shutter.is-visible img {
  scale: 1;
}

/* ---- cards settle from a slight scale ---- */
html.js-motion .reveal-settle {
  opacity: 0;
  scale: 0.96;
  transition: opacity 1.1s ease, scale 1.3s var(--motion-ease);
  transition-delay: var(--reveal-delay, 0s);
}

html.js-motion .reveal-settle.is-visible {
  opacity: 1;
  scale: 1;
}

/* ---- soft rise ---- */
html.js-motion .reveal {
  opacity: 0;
  translate: 0 22px;
  transition: opacity 1s var(--motion-ease), translate 1s var(--motion-ease);
  transition-delay: var(--reveal-delay, 0s);
}

html.js-motion .reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}

/* ---- hover: photographs breathe ---- */
.agents--card__img,
.news--list li picture,
.chain picture {
  overflow: hidden;
}

.agents--card__img img,
.news--list li picture img,
.chain picture img {
  transition: transform 1.4s var(--motion-ease);
}

.agents--card:hover .agents--card__img img,
.news--list li:hover picture img {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .motion-letterbox {
    display: none;
  }
  html.js-motion *,
  html.js-motion *::before {
    animation: none !important;
    transition: none !important;
  }
}