/* NextElement scroll motion — load after the main stylesheet.
   States are only applied when <html> has .ne-motion (added by motion.js),
   so the page is fully visible without JS or with reduced motion. */

:root{
  --ne-ease: cubic-bezier(.2,.7,.2,1);
  --ne-ease-pop: cubic-bezier(.3,1.5,.5,1);
  --ne-dist: 28px;
  --ne-lime: #D9F31B;
}
@media (max-width:820px){ :root{ --ne-dist: 16px; } }

/* ---------- Initial (hidden) states ---------- */
.ne-motion [data-rv]{
  opacity:0;
  transition:
    transform 760ms var(--ne-ease) var(--d,0ms),
    opacity 600ms ease var(--d,0ms);
  will-change: transform, opacity;
}
.ne-motion [data-rv="up"]    { transform: translateY(var(--ne-dist)); }
.ne-motion [data-rv="left"]  { transform: translateX(calc(var(--ne-dist) * -1)); }
.ne-motion [data-rv="right"] { transform: translateX(calc(var(--ne-dist) * 1.6)); }
.ne-motion [data-rv="scale"] { transform: translateY(var(--ne-dist)) scale(.96); }
.ne-motion [data-rv="pop"]   {
  transform: scale(.4);
  transition: transform 640ms var(--ne-ease-pop) var(--d,0ms), opacity 600ms ease var(--d,0ms);
}

/* Mask: text rises from behind an invisible edge. motion.js wraps it in .ne-mask */
.ne-mask{ display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em; }
.ne-motion [data-rv="mask"]{
  opacity:1;
  transform: translateY(105%);
  transition: transform 900ms var(--ne-ease) var(--d,0ms);
}

/* ---------- Revealed ---------- */
.ne-motion [data-rv].is-in{ opacity:1; transform:none; }
.ne-motion [data-rv].is-done{ will-change:auto; }

/* ---------- Lime highlight sweep (left → right) ---------- */
[data-sweep]{
  background-image: linear-gradient(var(--ne-lime), var(--ne-lime));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ne-motion [data-sweep]{
  background-size: 0% 100%;
  transition: background-size 820ms var(--ne-ease) calc(var(--d,0ms) + 260ms);
}
.ne-motion [data-sweep].is-in{ background-size: 100% 100%; }
/* On dark backgrounds the highlighted text is ink, so keep it readable while the lime sweeps in */
.ne-motion [data-sweep].ne-on-dark{ color:#fff; transition: background-size 820ms var(--ne-ease) calc(var(--d,0ms) + 260ms), color 0ms linear calc(var(--d,0ms) + 520ms); }
.ne-motion [data-sweep].ne-on-dark.is-in{ color:#141414; }

/* ---------- Hover micro-interactions (independent of scroll) ---------- */
.ne-lift{ transition: transform 260ms var(--ne-ease), box-shadow 260ms ease; }
.ne-lift:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(20,20,20,.12); }
.ne-row-hover{ transition: background-color 220ms ease, padding-left 260ms var(--ne-ease); }
.ne-row-hover:hover{ background-color: var(--ne-lime); padding-left: calc(var(--row-pad, 24px) + 10px); }

@media (prefers-reduced-motion: reduce){
  .ne-lift, .ne-row-hover{ transition:none; }
  .ne-lift:hover{ transform:none; }
}

/* Keep reveal transforms from suppressing existing card interaction states. */
.ne-motion [data-rv].is-done { transition: background 220ms ease, transform 260ms var(--ne-ease), box-shadow 260ms ease; }
@media (hover: hover) and (pointer: fine) {
  .ne-motion .step.is-done:hover, .ne-motion .who-split-card.is-done:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(20,20,20,.12); }
}
/* The old highlight uses a solid background; clear it for the sweep. */
.ne-motion [data-sweep] { background-image: linear-gradient(var(--ne-lime), var(--ne-lime)); }
.ne-motion .lede [data-sweep] { background-color: transparent; }
.ne-motion [data-rv]:focus-within { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .ne-motion [data-rv] { opacity: 1; transform: none; transition: none; will-change: auto; }
  .ne-motion [data-sweep] { background-size: 100% 100%; transition: none; }
  .ne-motion [data-sweep].ne-on-dark { color: #141414; }
  .ne-motion .step.is-done:hover, .ne-motion .who-split-card.is-done:hover { transform: none; }
}

/* A gentle, overlapping entrance rather than a masked headline slide. */
.ne-motion .hero h1[data-rv] {
  transform: translateY(10px);
  transition: transform 1800ms cubic-bezier(.22,1,.36,1) var(--d,0ms), opacity 1600ms ease var(--d,0ms);
}
.ne-motion .hero h1.is-in { opacity: 1; transform: none; }
.ne-motion .hero .hero-term[data-rv] {
  display: inline;
  opacity: 0;
  transform: none;
  color: inherit;
  background-size: 100% 100%;
  transition: opacity 1800ms cubic-bezier(.22,1,.36,1) var(--d,0ms);
}
.ne-motion .hero .hero-term.is-in { opacity: 1; color: var(--ne-ink); }
.ne-motion .hero .hero-term.is-done {
  transition: opacity 1800ms cubic-bezier(.22,1,.36,1) var(--d,0ms);
}
.ne-motion .hero .sub[data-rv] {
  transform: translateY(8px);
  transition: transform 1800ms cubic-bezier(.22,1,.36,1) var(--d,0ms), opacity 1600ms ease var(--d,0ms);
}
.ne-motion .hero .sub.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ne-motion .hero h1[data-rv], .ne-motion .hero .hero-term[data-rv], .ne-motion .hero .sub[data-rv] { opacity: 1; transform: none; transition: none; }
}

/* Match the process and audience cards' hover depth. */
@media (hover: hover) and (pointer: fine) {
  .ne-motion .fitem.is-done:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(20,20,20,.12); }
  html:not(.ne-motion) .fitem:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(20,20,20,.12); }
}
@media (prefers-reduced-motion: reduce) {
  .ne-motion .fitem.is-done:hover, html:not(.ne-motion) .fitem:hover { transform: none; }
}

/* Process-strip depth comes from its number, not a floating card. */
.ne-motion .step.is-done:hover { transform: none; box-shadow: none; }
.ne-motion .step.is-done { transition: flex-grow 480ms var(--ne-ease), background 300ms ease, color 300ms ease; }

/* Phone reveals travel vertically, never beyond the screen's side edges. */
@media (max-width: 820px) {
  .ne-motion [data-rv="left"], .ne-motion [data-rv="right"] { transform: translateY(var(--ne-dist)); }
  .ne-motion [data-rv="left"].is-in, .ne-motion [data-rv="right"].is-in { transform: none; }
}
@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .ne-motion [data-rv="left"], .ne-motion [data-rv="right"] { transform: none; }
}