/* ClarityOpp landing pages: statistics row and motion.
   Loaded after styles.css. Motion only runs when the <html> element has the
   "motion" class, which the inline script in each page's <head> adds unless
   the visitor has asked for reduced motion. Without it, everything is static. */

/* Statistics */
.stat-list {
  list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px);
}
.stat-list li { border-top: 2px solid var(--mark); padding-top: 18px; }
.stat-num {
  display: block;
  font-stretch: 68%; font-weight: 800; font-size: clamp(3.6rem, 7vw, 5.6rem); line-height: .95;
  color: var(--mark); font-variant-numeric: tabular-nums;
}
.stat-text { display: block; margin-top: 12px; font-size: 1.1rem; line-height: 1.45; max-width: 32ch; }
.stat-src { display: block; margin-top: 12px; font-size: .85rem; color: var(--muted); max-width: 36ch; }
.stat-src a { text-underline-offset: 3px; }
.stat-src a:hover { color: var(--text); }
@media (max-width: 900px) {
  .stat-list { grid-template-columns: minmax(0, 1fr); }
}

/* Hover: buttons lift */
.btn { transition: translate .18s cubic-bezier(.2, .7, .2, 1), box-shadow .18s cubic-bezier(.2, .7, .2, 1), background-color .18s; }
.motion .btn:hover { translate: -2px -2px; box-shadow: 4px 4px 0 var(--text); }
.motion .yellow .btn:hover { box-shadow: 4px 4px 0 var(--white); }
.motion .nav .btn:hover { translate: 0 0; box-shadow: none; }

/* Load-in: the hero arrives in order */
@keyframes co-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes co-sheet { from { opacity: 0; transform: translateY(28px) rotate(1.6deg); } to { opacity: 1; transform: rotate(1.6deg); } }
@keyframes co-step { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.motion .hero .crumb,
.motion .hero h1,
.motion .hero .lede,
.motion .hero .actions { animation: co-rise .8s cubic-bezier(.2, .7, .2, 1) both; }
.motion .hero h1 { animation-delay: .08s; }
.motion .hero .lede { animation-delay: .2s; }
.motion .hero .actions { animation-delay: .34s; }
.motion .hero .sheet-holder { animation: co-sheet .9s cubic-bezier(.2, .7, .2, 1) .4s both; }
.motion .hero .findings li { animation: co-step .5s cubic-bezier(.2, .7, .2, 1) both; }
.motion .hero .findings li:nth-child(1) { animation-delay: .7s; }
.motion .hero .findings li:nth-child(2) { animation-delay: .95s; }
.motion .hero .findings li:nth-child(3) { animation-delay: 1.2s; }
.motion .hero .findings li:nth-child(4) { animation-delay: 1.45s; }
.motion .hero .findings li:nth-child(5) { animation-delay: 1.7s; }
/* the yellow marker sweeps just after each line lands */
.motion .hero .findings li:nth-child(1) .hl { animation-delay: .9s; }
.motion .hero .findings li:nth-child(2) .hl { animation-delay: 1.15s; }
.motion .hero .findings li:nth-child(3) .hl { animation-delay: 1.4s; }
.motion .hero .findings li:nth-child(4) .hl { animation-delay: 1.65s; }
.motion .hero .sheet-foot { animation: co-rise .6s cubic-bezier(.2, .7, .2, 1) 1.9s both; }

/* Scroll reveal: landing.js adds "in" when each block enters the screen */
.motion :is(.section-head, .check-list li, .rule-list li, .steps-list li, .stat-list li, .search-list li, .ind-list li, .two-col > div, .faq-grid > h2, .faq-grid details, .cta-row > *, .band > .wrap > h2) {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), transform .6s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), translate .18s cubic-bezier(.2, .7, .2, 1), box-shadow .18s cubic-bezier(.2, .7, .2, 1);
}
.motion .in { opacity: 1 !important; transform: none !important; }

/* The step numbers pop as they arrive */
@keyframes co-pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.motion .steps-list li.in::before { animation: co-pop .5s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) both; transform-origin: left bottom; }