/* Headline words rise out of a blur, one after another */
.w { display: inline-block; opacity: 0; transform: translateY(0.45em) rotate(2deg); filter: blur(12px); transition: opacity 900ms var(--ease), transform 1100ms var(--ease), filter 900ms var(--ease); }
.is-ready .w { opacity: 1; transform: none; filter: blur(0); }
.hero-sub, .hero-actions, .hero-note { opacity: 0; transform: translateY(16px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
.is-ready .hero-sub { opacity: 1; transform: none; transition-delay: 700ms; }
.is-ready .hero-actions { opacity: 1; transform: none; transition-delay: 850ms; }
.is-ready .hero-note { opacity: 1; transform: none; transition-delay: 1000ms; }

/* The desktop tips up into place as it scrolls in, like a lid opening */
.stage-wrap { perspective: 1600px; }
.stage { transform-origin: 50% 0; will-change: transform; }

.card .card-shot img { transform: scale(1.08) translateY(20px); transition: transform 1600ms var(--ease); }
.card.is-in .card-shot img { transform: none; }
.tile[data-reveal] { clip-path: inset(30% 0 0 0 round 26px); }
.tile[data-reveal].is-in { clip-path: inset(0 round 26px); }

@media (prefers-reduced-motion: reduce) {
  .w, .hero-sub, .hero-actions, .hero-note { opacity: 1; transform: none; filter: none; }
}

/* Words inside the gradient line carry the gradient themselves, so it survives the split */
.hero h1 strong .w { background: linear-gradient(180deg, #fff 30%, #cfc3f7); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.08em; }