/* ══════════════════════════════════════════════════════════
   CHUNLUN · MOTION LAYER  (Luxury Pass v2 + Motion Preview)
   Singleton-style quiet reveals. Static design untouched.
   All rules are scoped to html.motion (set by a 1-line inline
   script) and disabled under prefers-reduced-motion.
   ══════════════════════════════════════════════════════════ */
:root{
  --m-ease:cubic-bezier(0.22,1,0.36,1);
  --m-dur:800ms;      /* general reveal 700–900ms */
  --m-dur-img:1100ms; /* image reveal 900–1200ms */
  --m-y:20px;
}

/* ── generic fade-up (applied via selectors, no markup change) ── */
html.motion :is(
  .hero-mark img, .hero-mark .eyebrow, .hero h1, .hero-statement, .hero-sub, .hero-cta,
  #mission .break-copy > *, #mission .figure figcaption, #mission .value-item,
  #people .sec-head > *, #people .portrait, #people .person-info > *, #people .texture,
  #expertise .sec-head, .practice-primary > *, .practice-secondary > *,
  #financial-crime .feature-copy > *, #financial-crime .feature-list li,
  #private-clients .feature-copy > *,
  #sectors .sector-card,
  #tools .sec-head, #tools .tool-card,
  #blog-cta .sec-head, .j-featured, .j-item, .j-more, .media-head, .video-card,
  .place-copy > *,
  #contact .reveal
){
  opacity:0;
  transform:translateY(var(--m-y));
  transition:opacity var(--m-dur) var(--m-ease), transform var(--m-dur) var(--m-ease);
  transition-delay:var(--m-delay,0ms);
  will-change:opacity,transform;
}
html.motion :is(
  .hero-mark img, .hero-mark .eyebrow, .hero h1, .hero-statement, .hero-sub, .hero-cta,
  #mission .break-copy > *, #mission .figure figcaption, #mission .value-item,
  #people .sec-head > *, #people .portrait, #people .person-info > *, #people .texture,
  #expertise .sec-head, .practice-primary > *, .practice-secondary > *,
  #financial-crime .feature-copy > *, #financial-crime .feature-list li,
  #private-clients .feature-copy > *,
  #sectors .sector-card,
  #tools .sec-head, #tools .tool-card,
  #blog-cta .sec-head, .j-featured, .j-item, .j-more, .media-head, .video-card,
  .place-copy > *,
  #contact .reveal
).m-in{opacity:1;transform:none}

/* Financial Crime list: the <ul> itself is not hidden, only its <li> lines */
html.motion #financial-crime .feature-list{opacity:1;transform:none;transition:none}

/* ── hero gold line (existing width reveal, moved here) ── */
html.motion .hero-line{width:0;transition:width 1000ms var(--m-ease);transition-delay:var(--m-delay,0ms)}
html.motion .hero-line.m-in{width:96px}

/* ── Editorial Break · image A: clip-path mask reveal (bottom → top) ── */
html.motion #mission .figure picture{
  display:block;
  clip-path:inset(100% 0 0 0);
  transition:clip-path var(--m-dur-img) var(--m-ease);
  transition-delay:var(--m-delay,0ms);
}
html.motion #mission .figure.m-in picture{clip-path:inset(0 0 0 0)}

/* ── Financial Crime · image B: mask reveal (left → right) + subtle parallax ── */
html.motion #financial-crime .feature-media picture{
  display:block;position:absolute;inset:0;
  clip-path:inset(0 100% 0 0);
  transition:clip-path var(--m-dur-img) var(--m-ease);
}
html.motion #financial-crime .feature-media.m-in picture{clip-path:inset(0 0 0 0)}
html.motion #financial-crime .feature-media img{transform:translate3d(0,var(--m-px,0px),0) scale(1.06);transform-origin:center}

/* ── Private Clients · image C: calm, scale(1.02 → 1) + fade only ── */
html.motion #private-clients .feature-media img{
  opacity:0;transform:scale(1.02);
  transition:opacity var(--m-dur-img) var(--m-ease), transform var(--m-dur-img) var(--m-ease);
}
html.motion #private-clients .feature-media.m-in img{opacity:1;transform:scale(1)}

/* ── CHUNLUN · TAIPEI: slowest reveal + 2–3% vertical drift (desktop only) ── */
html.motion .place-media{overflow:hidden}
html.motion .place-media img{
  opacity:0;
  transform:translate3d(0,var(--m-px,0px),0) scale(1.04);
  transition:opacity 1300ms var(--m-ease);
}
html.motion .place-media.m-in img{opacity:1}
html.motion .place-copy > *{--m-dur:1300ms}

/* mobile: no parallax / drift (JS also disables) */
@media (max-width:899px){
  html.motion #financial-crime .feature-media img,
  html.motion .place-media img{transform:none}
}

/* ── reduced motion: everything visible, no transitions, no drift ── */
@media (prefers-reduced-motion:reduce){
  html.motion *,html.motion *::before,html.motion *::after{transition:none!important}
  html.motion :is(.hero-mark img,.hero-mark .eyebrow,.hero h1,.hero-statement,.hero-sub,.hero-cta,#mission .break-copy > *,#mission .figure figcaption,#mission .value-item,#people .sec-head > *,#people .portrait,#people .person-info > *,#people .texture,#expertise .sec-head,.practice-primary > *,.practice-secondary > *,#financial-crime .feature-copy > *,#financial-crime .feature-list li,#private-clients .feature-copy > *,#sectors .sector-card,#tools .sec-head,#tools .tool-card,#blog-cta .sec-head,.j-featured,.j-item,.j-more,.media-head,.video-card,.place-copy > *,#contact .reveal){opacity:1;transform:none}
  html.motion .hero-line{width:96px}
  html.motion #mission .figure picture,html.motion #financial-crime .feature-media picture{clip-path:none}
  html.motion #financial-crime .feature-media img,html.motion .place-media img{transform:none;opacity:1}
  html.motion #private-clients .feature-media img{opacity:1;transform:none}
}