/* Work page motion layer (wm)
   Loaded after wb/wc/wd/we/wf css. Owns three things only:
   1. safety when the motion layer is not live, 2. per-group hold states,
   3. per-group reveal. Nothing here changes layout, size or spacing. */

:root {
  --wm-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wm-shift: 14px;
  --wm-dur: 760ms;
  --wm-dur-media: 880ms;
}

/* ---------- 1. progressive enhancement safety ----------
   If wm.js never runs (no JS, script error, reduced motion) nothing is
   hidden: every animated element renders in its final state. */
html:not(.wm-on) [data-wb-anim],
html:not(.wm-on) [data-wc-anim],
html:not(.wm-on) [data-wd-anim],
html:not(.wm-on) [data-we-anim],
html:not(.wm-on) [data-wf-anim] {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  transition: none !important;
}
html:not(.wm-on) [data-wf-anim="rule"] {
  width: var(--wf-rule-w, 34px) !important;
}

/* ---------- 2. group hold ----------
   A card / stage / row stays in its entrance state until it arrives,
   even after its parent section has already revealed. */
html.wm-on [data-wm-group]:not(.wm-in) [data-wb-anim],
html.wm-on [data-wm-group]:not(.wm-in)[data-wb-anim],
html.wm-on [data-wm-group]:not(.wm-in) [data-wc-anim],
html.wm-on [data-wm-group]:not(.wm-in)[data-wc-anim],
html.wm-on [data-wm-group]:not(.wm-in) [data-wd-anim],
html.wm-on [data-wm-group]:not(.wm-in)[data-wd-anim],
html.wm-on [data-wm-group]:not(.wm-in) [data-we-anim],
html.wm-on [data-wm-group]:not(.wm-in)[data-we-anim],
html.wm-on [data-wm-group]:not(.wm-in) [data-wf-anim],
html.wm-on [data-wm-group]:not(.wm-in)[data-wf-anim] {
  opacity: 0;
  transform: translateY(var(--wm-shift));
}
html.wm-on [data-wm-group]:not(.wm-in) [data-wb-anim="rule"],
html.wm-on [data-wm-group]:not(.wm-in)[data-wb-anim="rule"],
html.wm-on [data-wm-group]:not(.wm-in) [data-wc-anim="rule"],
html.wm-on [data-wm-group]:not(.wm-in)[data-wc-anim="rule"],
html.wm-on [data-wm-group]:not(.wm-in) [data-wd-anim="rule"],
html.wm-on [data-wm-group]:not(.wm-in)[data-wd-anim="rule"],
html.wm-on [data-wm-group]:not(.wm-in) [data-we-anim="rule"],
html.wm-on [data-wm-group]:not(.wm-in)[data-we-anim="rule"],
html.wm-on [data-wm-group]:not(.wm-in) [data-wf-anim="rule"],
html.wm-on [data-wm-group]:not(.wm-in)[data-wf-anim="rule"] {
  opacity: 1;
  transform: scaleX(0);
}
html.wm-on [data-wm-group]:not(.wm-in) [data-wf-anim="rule"] {
  transform: none;
  width: 0;
}
html.wm-on [data-wm-group]:not(.wm-in) [data-wb-anim="mask"],
html.wm-on [data-wm-group]:not(.wm-in)[data-wb-anim="mask"],
html.wm-on [data-wm-group]:not(.wm-in) [data-wc-anim="mask"],
html.wm-on [data-wm-group]:not(.wm-in)[data-wc-anim="mask"],
html.wm-on [data-wm-group]:not(.wm-in) [data-wd-anim="mask"],
html.wm-on [data-wm-group]:not(.wm-in)[data-wd-anim="mask"],
html.wm-on [data-wm-group]:not(.wm-in) [data-we-anim="mask"],
html.wm-on [data-wm-group]:not(.wm-in)[data-we-anim="mask"],
html.wm-on [data-wm-group]:not(.wm-in) [data-wf-anim="mask"],
html.wm-on [data-wm-group]:not(.wm-in)[data-wf-anim="mask"] {
  opacity: 0.82;
  transform: scale(1.012);
  clip-path: inset(6% 0 0 0);
}

/* ---------- 3. group reveal ---------- */
html.wm-on [data-wm-group].wm-in [data-wb-anim],
html.wm-on [data-wm-group].wm-in[data-wb-anim],
html.wm-on [data-wm-group].wm-in [data-wc-anim],
html.wm-on [data-wm-group].wm-in[data-wc-anim],
html.wm-on [data-wm-group].wm-in [data-wd-anim],
html.wm-on [data-wm-group].wm-in[data-wd-anim],
html.wm-on [data-wm-group].wm-in [data-we-anim],
html.wm-on [data-wm-group].wm-in[data-we-anim],
html.wm-on [data-wm-group].wm-in [data-wf-anim],
html.wm-on [data-wm-group].wm-in[data-wf-anim] {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--wm-dur) var(--wm-ease),
    transform var(--wm-dur) var(--wm-ease);
  transition-delay: var(--wm-delay, 0ms);
}
html.wm-on [data-wm-group].wm-in [data-wb-anim="rule"],
html.wm-on [data-wm-group].wm-in[data-wb-anim="rule"],
html.wm-on [data-wm-group].wm-in [data-wc-anim="rule"],
html.wm-on [data-wm-group].wm-in[data-wc-anim="rule"],
html.wm-on [data-wm-group].wm-in [data-wd-anim="rule"],
html.wm-on [data-wm-group].wm-in[data-wd-anim="rule"],
html.wm-on [data-wm-group].wm-in [data-we-anim="rule"],
html.wm-on [data-wm-group].wm-in[data-we-anim="rule"],
html.wm-on [data-wm-group].wm-in [data-wf-anim="rule"],
html.wm-on [data-wm-group].wm-in[data-wf-anim="rule"] {
  transform: scaleX(1);
  transition: transform 700ms var(--wm-ease);
  transition-delay: var(--wm-delay, 0ms);
}
html.wm-on [data-wm-group].wm-in [data-wf-anim="rule"] {
  transform: none;
  width: var(--wf-rule-w, 34px);
  transition: width 650ms var(--wm-ease);
  transition-delay: var(--wm-delay, 0ms);
}
html.wm-on [data-wm-group].wm-in [data-wb-anim="mask"],
html.wm-on [data-wm-group].wm-in[data-wb-anim="mask"],
html.wm-on [data-wm-group].wm-in [data-wc-anim="mask"],
html.wm-on [data-wm-group].wm-in[data-wc-anim="mask"],
html.wm-on [data-wm-group].wm-in [data-wd-anim="mask"],
html.wm-on [data-wm-group].wm-in[data-wd-anim="mask"],
html.wm-on [data-wm-group].wm-in [data-we-anim="mask"],
html.wm-on [data-wm-group].wm-in[data-we-anim="mask"],
html.wm-on [data-wm-group].wm-in [data-wf-anim="mask"],
html.wm-on [data-wm-group].wm-in[data-wf-anim="mask"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  transition:
    clip-path var(--wm-dur-media) var(--wm-ease),
    opacity var(--wm-dur-media) var(--wm-ease),
    transform var(--wm-dur-media) var(--wm-ease);
  transition-delay: var(--wm-delay, 0ms);
}

/* Deep links, restored scroll and fast flicks: settle without a late replay. */
html.wm-on [data-wm-instant],
html.wm-on [data-wm-instant] * {
  transition: none !important;
  transition-delay: 0ms !important;
}

/* ---------- mobile: same choreography, lighter travel ---------- */
@media (max-width: 700px) {
  :root {
    --wm-shift: 8px;
    --wm-dur: 640ms;
    --wm-dur-media: 720ms;
  }
  html.wm-on [data-wm-group]:not(.wm-in) [data-wb-anim="mask"],
  html.wm-on [data-wm-group]:not(.wm-in)[data-wb-anim="mask"],
  html.wm-on [data-wm-group]:not(.wm-in) [data-wc-anim="mask"],
  html.wm-on [data-wm-group]:not(.wm-in)[data-wc-anim="mask"],
  html.wm-on [data-wm-group]:not(.wm-in) [data-wd-anim="mask"],
  html.wm-on [data-wm-group]:not(.wm-in)[data-wd-anim="mask"],
  html.wm-on [data-wm-group]:not(.wm-in) [data-we-anim="mask"],
  html.wm-on [data-wm-group]:not(.wm-in)[data-we-anim="mask"],
  html.wm-on [data-wm-group]:not(.wm-in) [data-wf-anim="mask"],
  html.wm-on [data-wm-group]:not(.wm-in)[data-wf-anim="mask"] {
    transform: scale(1.006);
    clip-path: inset(4% 0 0 0);
  }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-wb-anim],
  [data-wc-anim],
  [data-wd-anim],
  [data-we-anim],
  [data-wf-anim] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  [data-wf-anim="rule"] {
    width: var(--wf-rule-w, 34px) !important;
  }
}