/* ==========================================================================
   MOTION: a site-wide layer for the "dynamic" build (--motion=full). Loaded
   after the theme; everything is scoped to body.motion and backed off under
   prefers-reduced-motion. The banner keeps its own behaviour (hero-fx.css).
   What moves: staggered reveals, headline words, counters, a scroll-linked
   custody line, card tilt and sheen, a live London clock
   on the arrested page, and quicker page transitions with the header pinned.
   ========================================================================== */
.motion{--mo-ease:cubic-bezier(.22,.61,.36,1)}

/* ---- staggered reveal: children arrive one after another ---------------- */
.motion .stg>*{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--mo-ease),transform .7s var(--mo-ease);
  transition-delay:calc(var(--i,0)*70ms)}
.motion .stg.in>*{opacity:1;transform:none}
/* a staggered container no longer needs its own block reveal */
.motion .stg.rv{opacity:1;transform:none;transition:none}

/* ---- headline words rise in sequence ------------------------------------ */
.motion .wd{display:inline-block;opacity:0;transform:translateY(.45em);
  transition:opacity .55s var(--mo-ease),transform .7s var(--mo-ease);
  transition-delay:calc(var(--i,0)*55ms)}
.motion .wds.in .wd{opacity:1;transform:none}

/* ---- counters ------------------------------------------------------------- */
.motion .ct{font-variant-numeric:tabular-nums}

/* ---- custody clock: a gold line sweeps across the four stages on scroll -- */
.motion .pr-clock__row{position:relative}
.motion .pr-clock__row::before{content:"";position:absolute;top:0;left:0;height:1px;
  background:var(--gold);width:calc(var(--p,0)*100%);transition:width .3s linear;z-index:1}

/* ---- cards tilt toward the pointer, with a soft sheen -------------------- */
.motion .tilt{position:relative;transform-style:preserve-3d;will-change:transform;
  transition:transform .45s var(--mo-ease),box-shadow .45s var(--mo-ease)}
.motion .tilt.is-live{transition:transform .08s linear,box-shadow .45s var(--mo-ease)}
.motion .tilt:hover{box-shadow:0 26px 50px -30px rgba(10,28,58,.45)}
.motion .tilt::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(420px circle at var(--sx,50%) var(--sy,50%),rgba(255,255,255,.16),transparent 62%);
  opacity:0;transition:opacity .35s var(--mo-ease)}
.motion .tilt:hover::after{opacity:1}

/* ---- buttons and arrows ---------------------------------------------------- */
.motion .btn{transition:transform .25s var(--mo-ease),background .25s var(--mo-ease),color .25s var(--mo-ease)}
.motion .btn:hover{transform:translateY(-2px)}
.motion .link-arrow{transition:letter-spacing .3s var(--mo-ease)}
.motion .link-arrow:hover{letter-spacing:.02em}

/* ---- live London clock on the arrested page ------------------------------ */
.motion .now{display:grid;gap:6px;margin:0 0 34px;padding:22px 26px;background:var(--ink);
  color:var(--text-invert);border-left:3px solid var(--gold)}
.motion .now__t{margin:0;font-family:var(--font-display);font-size:2rem;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums}
.motion .now__t small{font-family:var(--font-ui);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-invert-mute);margin-left:12px;vertical-align:middle}
.motion .now__d{margin:0;font-size:15px;line-height:1.55;color:var(--text-invert)}
.motion .now__d strong{color:var(--gold);font-weight:600}
.motion .now__n{margin:0;font-size:12.5px;color:var(--text-invert-mute)}

/* ---- page transitions: quicker, and the header stays put ---------------- */
.motion .site-head{view-transition-name:site-head}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.8s}
  ::view-transition-new(root){animation-name:moPageIn,-ua-view-transition-fade-in}
  ::view-transition-old(site-head),::view-transition-new(site-head){animation:none;mix-blend-mode:normal}
}
@keyframes moPageIn{from{transform:translateY(14px)}to{transform:none}}

/* ---- reduced motion: everything settles, nothing moves ------------------- */
@media (prefers-reduced-motion:reduce){
  .motion .stg>*,.motion .wd{opacity:1;transform:none;transition:none}
  .motion .tilt,.motion .tilt.is-live{transform:none!important;transition:none}
  .motion .tilt::after{display:none}
  .motion .btn:hover{transform:none}
  .motion .pr-clock__row::before{width:100%;transition:none}
}