/* Homepage hero: the Blender factory island, played back by scroll (scene/scene.js). */
.scrolly { position: relative; height: 700vh; }
.stage-bg { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #2a1f33; }
.stage-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage-bg .shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 8, 16, 0.55) 0%, rgba(10, 8, 16, 0.15) 45%, rgba(10, 8, 16, 0) 70%); opacity: 0;
  transition: opacity 900ms cubic-bezier(0.32, 0.72, 0, 1); }
.stage-bg.steps .shade { opacity: 1; }
.overlay { position: absolute; inset: 0; pointer-events: none; }
.beat { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; }
.overlay .wrap { width: 100%; }
.copy { opacity: 0; transform: translateY(32px); filter: blur(10px); pointer-events: none;
  transition: opacity 900ms cubic-bezier(0.32, 0.72, 0, 1), transform 900ms cubic-bezier(0.32, 0.72, 0, 1), filter 900ms cubic-bezier(0.32, 0.72, 0, 1); }
.copy.on { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.layer { position: absolute; inset: 0; display: flex; align-items: center; }
.hero-layer { align-items: flex-start; padding-top: 128px; }
.hero-layer .hero-copy { margin: 0 auto; }
.hero-layer h1 { text-shadow: none; }
.cap-box { max-width: 420px; }
.cap-box .cap-n { font-size: 14px; line-height: 20px; color: #ffb27a; font-weight: 600; }
.cap-box h2 { font-size: 48px; line-height: 1; letter-spacing: -0.03em; margin: 12px 0 16px; color: #fff; }
.cap-box p { margin: 0; font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, 0.82); }
.dots { position: absolute; right: 32px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; }
.dots i { width: 8px; height: 8px; border-radius: 9999px; background: rgba(255, 255, 255, 0.3); transition: background-color 500ms cubic-bezier(0.32, 0.72, 0, 1), transform 500ms cubic-bezier(0.32, 0.72, 0, 1); }
.dots i.on { background: #fff; transform: scale(1.4); }
.loading { position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); font-size: 14px; color: rgba(255, 255, 255, 0.7); }
@media (max-width: 760px) {
  .hero-layer { padding-top: 104px; }
  .hero-layer .hero-copy { gap: 16px; }
  .hero-layer .badge { font-size: 12px; }
  .hero-layer .lede { font-size: 16px; line-height: 24px; }
  .hero-layer .btn-ghost { display: none; }
  .layer.cap-layer { align-items: flex-start; padding-top: 112px; }
  .cap-box { max-width: none; text-align: center; margin: 0 auto; }
  .cap-box h2 { font-size: 30px; line-height: 36px; }
  .cap-box p { font-size: 16px; line-height: 24px; }
  .stage-bg .shade { background: linear-gradient(180deg, rgba(10, 8, 16, 0.6) 0%, rgba(10, 8, 16, 0) 50%); }
  .dots { display: none; }
}
.hero-layer.hero { padding: 128px 0 0; }
.hero-layer h1 { background: none; color: #fff; -webkit-text-fill-color: #fff; }
.stage-bg:not(.steps) .shade { opacity: 1; background: linear-gradient(180deg, rgba(20, 12, 30, 0.55) 0%, rgba(20, 12, 30, 0.12) 50%, rgba(20, 12, 30, 0) 70%); }
.hero-layer .lede, .hero-layer .proof { color: rgba(255, 255, 255, 0.85); }
.hero-layer .proof b { color: #fff; }
.hero-layer .badge { background: rgba(0, 0, 0, 0.35); border-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.85); }