/* Work With China — motion layer
   Additive only: no content, layout, font or colour changes.
   Hidden states apply only when JS has added .motion to <html>,
   so the page is fully visible without JS. */

:root {
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --rise: 18px;
}

/* ---------- Hero: slow settle-in of the background + staggered intro ---------- */
.motion .hero-bg {
  transform: scale(1.08);
  transition: transform 2.4s var(--ease-out);
  will-change: transform;
}
.motion.ready .hero-bg { transform: scale(1); }

.motion .hero-inner > * {
  opacity: 0;
  transform: translateY(var(--rise));
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.motion.ready .hero-inner > * { opacity: 1; transform: none; }
.motion.ready .hero-inner > *:nth-child(1) { transition-delay: .15s; }
.motion.ready .hero-inner > *:nth-child(2) { transition-delay: .35s; }
.motion.ready .hero-inner > *:nth-child(3) { transition-delay: .55s; }

/* ---------- Scroll reveal ---------- */
.motion [data-reveal] {
  opacity: 0;
  transform: translateY(var(--rise));
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.motion [data-reveal].in { opacity: 1; transform: none; }

/* ---------- Header: hairline + soft shadow once the page scrolls ---------- */
.site-header { transition: box-shadow .3s ease, background-color .3s ease; }
.site-header.scrolled { box-shadow: 0 1px 0 var(--line), 0 8px 24px -18px rgba(17, 20, 23, .35); }

/* ---------- Cards: quiet lift on hover ---------- */
.card {
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s ease;
}
a.card:hover, .expert-card:hover, .channel-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -24px rgba(17, 20, 23, .28);
}
.card-photo { overflow: hidden; }
.card-photo > * { transition: transform .8s var(--ease-out); }
.expert-card:hover .card-photo > * { transform: scale(1.03); }

/* ---------- Buttons and text links ---------- */
.btn { transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s var(--ease-out); }
.btn:hover { transform: translateY(-1px); }

/* ---------- Respect reduced-motion settings ---------- */
@media (prefers-reduced-motion: reduce) {
  .motion .hero-bg,
  .motion .hero-inner > *,
  .motion [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .card, .btn, .card-photo > * { transition: none !important; }
  a.card:hover, .expert-card:hover, .channel-card:hover, .btn:hover { transform: none; }
}