/* TextbookLens landing page styles. */

/* Hide scrollbar on horizontal carousels while keeping scroll behavior */
.scrollbar-hide {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE / Edge */
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;                /* Chrome / Safari */
}

/* Stagger fade-in for Section 2 cards on viewport entry */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

#problem-carousel article,
#how-grid article,
#why-cards article,
#features article {
  opacity: 0;
}

#problem-carousel article.animate-in,
#how-grid article.animate-in,
#why-cards article.animate-in,
#features article.animate-in {
  animation: fadeInUp 600ms cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
/* Section 2/4/7: stagger delay (整 section 一次性触发) */
#problem-carousel article.animate-in:nth-child(1),
#how-grid article.animate-in:nth-child(1),
#why-cards article.animate-in:nth-child(1) { animation-delay: 0s; }
#problem-carousel article.animate-in:nth-child(2),
#how-grid article.animate-in:nth-child(2),
#why-cards article.animate-in:nth-child(2) { animation-delay: 0.1s; }
#problem-carousel article.animate-in:nth-child(3),
#how-grid article.animate-in:nth-child(3),
#why-cards article.animate-in:nth-child(3) { animation-delay: 0.2s; }
#problem-carousel article.animate-in:nth-child(4),
#why-cards article.animate-in:nth-child(4) { animation-delay: 0.3s; }
/* Section 3: per-element trigger (block 太高，每个 block 单独 fade-in) */
/* #features article 不设 animation-delay—— 每个 block 进入 viewport 时立即播放 */

/* Section 5: 2x2 ai cards stagger fade-in (0.15s offset per spec) + workflow/banner single fade-in */
/* Section 6: comparison line fade-in (count-up handled in JS) */
/* Section 7: pilot callout fade-in */
#ai-cards article,
#workflow-callout,
#ai-banner,
#metrics-comparison,
#pilot-callout {
  opacity: 0;
}

#ai-cards article.animate-in,
#workflow-callout.animate-in,
#ai-banner.animate-in,
#metrics-comparison.animate-in,
#pilot-callout.animate-in {
  animation: fadeInUp 600ms cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
#ai-cards article.animate-in:nth-child(1) { animation-delay: 0s; }
#ai-cards article.animate-in:nth-child(2) { animation-delay: 0.15s; }
#ai-cards article.animate-in:nth-child(3) { animation-delay: 0.3s; }
#ai-cards article.animate-in:nth-child(4) { animation-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
  #problem-carousel article,
  #how-grid article,
  #why-cards article,
  #features article,
  #ai-cards article,
  #workflow-callout,
  #ai-banner,
  #metrics-comparison,
  #pilot-callout {
    opacity: 1;
    animation: none;
  }
}

/* Browser frame mockup (Section 3 / 4 screenshots) */
.browser-frame {
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.browser-chrome {
  background: #F0F2F5;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
}

.browser-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}