/* ============================================================
   Product page visuals — each panel plays itself out when it
   scrolls into view. Everything keys off .rv.in, so nothing
   runs until the reader can actually see it.
   ============================================================ */

.vis-anim { position: relative; overflow: hidden; }

/* a light sweep across the panel as it arrives */
.vis-sweep {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.14) 50%, transparent 70%);
}
.rv.in .vis-sweep { animation: vsweep 1.1s var(--ease) .1s 1; }
@keyframes vsweep { 0% { opacity: 1; transform: translateX(-70%); } 100% { opacity: 0; transform: translateX(70%); } }

/* ---- shared building blocks ---------------------------------- */

/* lead / thread / signal rows arrive one after another */
.rv.in .vis-anim .lead-r { animation: vrow .42s var(--ease) both; }
.rv.in .vis-anim .lead-r:nth-child(1) { animation-delay: .16s; }
.rv.in .vis-anim .lead-r:nth-child(2) { animation-delay: .28s; }
.rv.in .vis-anim .lead-r:nth-child(3) { animation-delay: .40s; }
.rv.in .vis-anim .lead-r:nth-child(4) { animation-delay: .52s; }
.rv.in .vis-anim .lead-r:nth-child(5) { animation-delay: .64s; }
@keyframes vrow { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

/* the badge on the right lands after its row */
.rv.in .vis-anim .score { animation: vpop .38s var(--ease) both; }
.rv.in .vis-anim .lead-r:nth-child(1) .score { animation-delay: .46s; }
.rv.in .vis-anim .lead-r:nth-child(2) .score { animation-delay: .58s; }
.rv.in .vis-anim .lead-r:nth-child(3) .score { animation-delay: .70s; }
.rv.in .vis-anim .lead-r:nth-child(4) .score { animation-delay: .82s; }
.rv.in .vis-anim .lead-r:nth-child(5) .score { animation-delay: .94s; }
@keyframes vpop { 0% { opacity: 0; transform: scale(.62); } 62% { transform: scale(1.1); } 100% { opacity: 1; transform: none; } }

/* stat cells and key-value tiles rise together */
.rv.in .vis-anim .stats > div,
.rv.in .vis-anim .kv > div { animation: vrise .42s var(--ease) both; }
.rv.in .vis-anim .stats > div:nth-child(1), .rv.in .vis-anim .kv > div:nth-child(1) { animation-delay: .72s; }
.rv.in .vis-anim .stats > div:nth-child(2), .rv.in .vis-anim .kv > div:nth-child(2) { animation-delay: .80s; }
.rv.in .vis-anim .stats > div:nth-child(3), .rv.in .vis-anim .kv > div:nth-child(3) { animation-delay: .88s; }
.rv.in .vis-anim .stats > div:nth-child(4), .rv.in .vis-anim .kv > div:nth-child(4) { animation-delay: .96s; }
@keyframes vrise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* chips in a row */
.rv.in .vis-anim .row > .tag,
.rv.in .vis-anim .row > .chip { animation: vpop .34s var(--ease) both; }
.rv.in .vis-anim .row > :nth-child(1) { animation-delay: .18s; }
.rv.in .vis-anim .row > :nth-child(2) { animation-delay: .26s; }
.rv.in .vis-anim .row > :nth-child(3) { animation-delay: .34s; }
.rv.in .vis-anim .row > :nth-child(4) { animation-delay: .42s; }
.rv.in .vis-anim .callout { animation: vrise .5s var(--ease) 1s both; }

/* ---- 1. LinkedIn Automation: limits fill, then hold under the cap ---- */
[data-feature="linkedin-automation"] .meter-f { width: 0; }
.rv.in [data-feature="linkedin-automation"] .meter-f { animation: vfill 1.3s var(--ease) both; }
.rv.in [data-feature="linkedin-automation"] .meter:nth-child(1) .meter-f { animation-delay: .25s; }
.rv.in [data-feature="linkedin-automation"] .meter:nth-child(2) .meter-f { animation-delay: .40s; }
.rv.in [data-feature="linkedin-automation"] .meter:nth-child(3) .meter-f { animation-delay: .55s; }
@keyframes vfill { from { width: 0; } to { width: var(--w, 100%); } }

/* ---- 2. AI Sequences: steps fire in order, each lighting as it runs ---- */
.rv.in [data-feature="ai-sequence"] .seq-n { animation: vrow .34s var(--ease) both, vfire 1s ease-out both; }
.rv.in [data-feature="ai-sequence"] .seq-n:nth-child(1),
.rv.in [data-feature="ai-sequence"] .seq-n:nth-child(2)  { animation-delay: .18s, .28s; }
.rv.in [data-feature="ai-sequence"] .seq-n:nth-child(3),
.rv.in [data-feature="ai-sequence"] .seq-n:nth-child(4)  { animation-delay: .34s, .44s; }
.rv.in [data-feature="ai-sequence"] .seq-n:nth-child(5),
.rv.in [data-feature="ai-sequence"] .seq-n:nth-child(6)  { animation-delay: .50s, .60s; }
.rv.in [data-feature="ai-sequence"] .seq-n:nth-child(7),
.rv.in [data-feature="ai-sequence"] .seq-n:nth-child(8)  { animation-delay: .66s, .76s; }
.rv.in [data-feature="ai-sequence"] .seq-n:nth-child(9),
.rv.in [data-feature="ai-sequence"] .seq-n:nth-child(10) { animation-delay: .82s, .92s; }
.rv.in [data-feature="ai-sequence"] .seq-n:nth-child(11),
.rv.in [data-feature="ai-sequence"] .seq-n:nth-child(12) { animation-delay: .98s, 1.08s; }
@keyframes vfire {
  0%   { border-color: var(--line); box-shadow: none; }
  32%  { border-color: rgba(122,77,255,.6); box-shadow: 0 0 0 3px rgba(122,77,255,.12); }
  100% { border-color: var(--line); box-shadow: none; }
}
.rv.in [data-feature="ai-sequence"] .seq-line { animation: vgrow .3s var(--ease) both; transform-origin: top; }
@keyframes vgrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---- 3. AI Messages: variants generate one by one ---- */
.rv.in [data-feature="ai-personalized-message"] .varitem { animation: vrow .44s var(--ease) both; }
.rv.in [data-feature="ai-personalized-message"] .varitem:nth-child(1) { animation-delay: .20s; }
.rv.in [data-feature="ai-personalized-message"] .varitem:nth-child(2) { animation-delay: .46s; }
.rv.in [data-feature="ai-personalized-message"] .varitem:nth-child(3) { animation-delay: .72s; }
.rv.in [data-feature="ai-personalized-message"] .varitem.on { animation: vrow .44s var(--ease) .2s both, vselect .9s var(--ease) 1s both; }
@keyframes vselect {
  0%   { box-shadow: none; }
  40%  { box-shadow: 0 0 0 4px rgba(122,77,255,.14); }
  100% { box-shadow: none; }
}

/* ---- 4. ICP Scoring: below-threshold rows drop away ---- */
.rv.in [data-feature="ai-icp-scoring"] .lead-r:nth-child(4),
.rv.in [data-feature="ai-icp-scoring"] .lead-r:nth-child(5) {
  animation: vrow .42s var(--ease) both, vdrop .8s var(--ease) both;
}
.rv.in [data-feature="ai-icp-scoring"] .lead-r:nth-child(4) { animation-delay: .52s, 1.5s; }
.rv.in [data-feature="ai-icp-scoring"] .lead-r:nth-child(5) { animation-delay: .64s, 1.7s; }
@keyframes vdrop { to { opacity: .4; transform: translateX(14px) scale(.985); filter: grayscale(1); } }

/* ---- 5. Open Profile: the free ones flip open ---- */
.rv.in [data-feature="open-profile-inmail"] .score-hi { animation: vunlock .6s var(--ease) both; }
.rv.in [data-feature="open-profile-inmail"] .lead-r:nth-child(1) .score-hi { animation-delay: .5s; }
.rv.in [data-feature="open-profile-inmail"] .lead-r:nth-child(2) .score-hi { animation-delay: .64s; }
.rv.in [data-feature="open-profile-inmail"] .lead-r:nth-child(4) .score-hi { animation-delay: .78s; }
@keyframes vunlock {
  0%   { opacity: 0; transform: rotateX(80deg); }
  60%  { transform: rotateX(-10deg); }
  100% { opacity: 1; transform: none; }
}

/* ---- 6. Smart Inbox: threads land newest first ---- */
.rv.in [data-feature="smart-inbox"] .lead-r { animation: vslidein .44s var(--ease) both; }
@keyframes vslidein { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ---- 7. Social Signals: a live feed with a pulsing watcher ---- */
.rv.in [data-feature="social-signal"] .lead-r { animation: vrow .42s var(--ease) both; }
[data-feature="social-signal"] .pulse { animation: vping 1.8s ease-in-out infinite; }
@keyframes vping { 0%,100% { box-shadow: 0 0 0 0 rgba(12,130,86,.45); } 60% { box-shadow: 0 0 0 6px rgba(12,130,86,0); } }

/* ---- 8. Templates: the variables light up ---- */
.rv.in [data-feature="message-templates"] .tplmini { animation: vrow .44s var(--ease) both; }
.rv.in [data-feature="message-templates"] .tplmini:nth-of-type(1) { animation-delay: .2s; }
.rv.in [data-feature="message-templates"] .tplmini:nth-of-type(2) { animation-delay: .38s; }
.rv.in [data-feature="message-templates"] .var { animation: vvar 2.6s ease-in-out infinite; }
.rv.in [data-feature="message-templates"] .var:nth-of-type(2) { animation-delay: .5s; }
.rv.in [data-feature="message-templates"] .var:nth-of-type(3) { animation-delay: 1s; }
@keyframes vvar { 0%,100% { background: rgba(122,77,255,.10); } 50% { background: rgba(122,77,255,.26); } }

/* ---- 9. Email Finder: addresses resolve, then verify ---- */
.rv.in [data-feature="email-finder"] .lead-m { animation: vresolve .7s var(--ease) both; }
.rv.in [data-feature="email-finder"] .lead-r:nth-child(1) .lead-m { animation-delay: .30s; }
.rv.in [data-feature="email-finder"] .lead-r:nth-child(2) .lead-m { animation-delay: .42s; }
.rv.in [data-feature="email-finder"] .lead-r:nth-child(3) .lead-m { animation-delay: .54s; }
.rv.in [data-feature="email-finder"] .lead-r:nth-child(4) .lead-m { animation-delay: .66s; }
.rv.in [data-feature="email-finder"] .lead-r:nth-child(5) .lead-m { animation-delay: .78s; }
@keyframes vresolve { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: none; } }

/* ---- 10. Workspaces: clients populate, each isolated ---- */
.rv.in [data-feature="team-management"] .wsdot { animation: vpop .42s var(--ease) both; }
.rv.in [data-feature="team-management"] .lead-r:nth-child(1) .wsdot { animation-delay: .24s; }
.rv.in [data-feature="team-management"] .lead-r:nth-child(2) .wsdot { animation-delay: .36s; }
.rv.in [data-feature="team-management"] .lead-r:nth-child(3) .wsdot { animation-delay: .48s; }
.rv.in [data-feature="team-management"] .lead-r:nth-child(4) .wsdot { animation-delay: .60s; }

@media (prefers-reduced-motion: reduce) {
  .vis-anim *, .vis-sweep { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  [data-feature="linkedin-automation"] .meter-f { width: var(--w, 100%); }
}

/* ============================================================
   Before / after comparison
   ============================================================ */
.ba {
  display: grid; grid-template-columns: 1fr 56px 1fr; gap: 0;
  align-items: stretch;
}
.ba-col {
  border-radius: var(--r-lg); padding: 26px 28px;
  border: 1px solid var(--line);
}
/* the manual side reads as the duller option, on purpose */
.ba-before {
  background: var(--ink-850);
  border-style: dashed;
}
.ba-after {
  background: #fff;
  border-color: rgba(122,77,255,.34);
  box-shadow: 0 18px 44px -26px rgba(122,77,255,.55), var(--sh-1);
}
.ba-h {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--f-display); font-weight: 640; font-size: 14.5px;
  color: var(--text-hi); letter-spacing: -.015em;
  padding-bottom: 15px; margin-bottom: 16px; border-bottom: 1px solid var(--line);
}
.ba-h i {
  width: 24px; height: 24px; border-radius: 8px; flex: none;
  display: grid; place-items: center; font-size: 10.5px;
}
.ba-before .ba-h { color: var(--text-lo); }
.ba-before .ba-h i { background: rgba(194,42,80,.11); color: var(--acc-rose); }
.ba-after  .ba-h i { background: rgba(12,130,86,.11); color: var(--acc-emerald); }

.ba-col ul { display: grid; gap: 13px; }
.ba-col li {
  position: relative; padding-left: 24px;
  font-size: 14.4px; line-height: 1.6; opacity: 0;
}
.ba-col li::before {
  content: ''; position: absolute; left: 2px; top: .58em;
  width: 7px; height: 7px; border-radius: 2px;
}
.ba-before li { color: var(--text-lo); }
.ba-before li::before { background: var(--acc-rose); opacity: .5; }
.ba-after  li { color: var(--text-mid); }
.ba-after  li::before { background: var(--acc-emerald); }

.rv.in .ba-col li { animation: vrow .42s var(--ease) both; }
.rv.in .ba-before li:nth-child(1) { animation-delay: .10s; }
.rv.in .ba-before li:nth-child(2) { animation-delay: .19s; }
.rv.in .ba-before li:nth-child(3) { animation-delay: .28s; }
.rv.in .ba-before li:nth-child(4) { animation-delay: .37s; }
.rv.in .ba-after  li:nth-child(1) { animation-delay: .54s; }
.rv.in .ba-after  li:nth-child(2) { animation-delay: .63s; }
.rv.in .ba-after  li:nth-child(3) { animation-delay: .72s; }
.rv.in .ba-after  li:nth-child(4) { animation-delay: .81s; }

/* the arrow sits in its own column, clear of both cards */
.ba-arrow { display: grid; place-items: center; }
.ba-arrow i {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; color: #fff;
  background: linear-gradient(135deg, var(--violet-500), var(--violet-700));
  box-shadow: 0 10px 24px -10px rgba(122,77,255,.9);
}
.rv.in .ba-arrow i { animation: baPush 1.9s var(--ease) .5s infinite; }
@keyframes baPush {
  0%, 100% { transform: translateX(-3px); }
  50%      { transform: translateX(3px); }
}

@media (max-width: 860px) {
  .ba { grid-template-columns: 1fr; gap: 0; }
  .ba-arrow { height: 46px; }
  .ba-arrow i { transform: rotate(90deg); }
  .rv.in .ba-arrow i { animation: baPushV 1.9s var(--ease) .5s infinite; }
  @keyframes baPushV {
    0%, 100% { transform: rotate(90deg) translateX(-3px); }
    50%      { transform: rotate(90deg) translateX(3px); }
  }
}

/* ============================================================
   Scenario cards
   ============================================================ */
.scen {
  padding: 26px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: #fff; box-shadow: var(--sh-1);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.scen:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--line-glow); }
.scen h3 { font-size: 1.02rem; margin-bottom: 9px; }
.scen p { font-size: 14.2px; color: var(--text-lo); line-height: 1.65; }
.rv.in .scen { animation: vrise .5s var(--ease) both; animation-delay: calc(var(--i) * .12s + .1s); }

@media (prefers-reduced-motion: reduce) {
  .ba-col li, .scen { animation: none !important; opacity: 1 !important; }
  .ba-arrow i { animation: none !important; }
}