/* Cyclonity landing motion. Pairs with motion.js; link before the page stylesheet.
   Everything below applies only under html.js / html.motion, so the page is complete without JS. */

[data-parallax], [data-drift], [data-zoom] { will-change: transform; }
html.motion [data-expand] { will-change: clip-path; }

@keyframes cy-rise {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes cy-settle {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}

html.motion [data-settle] { animation: cy-settle 1600ms cubic-bezier(0.22, 1, 0.36, 1) both; }
html.motion [data-intro] { animation: cy-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) both; }
html.motion [data-intro="2"] { animation-delay: 120ms; }
html.motion [data-intro="3"] { animation-delay: 240ms; }
html.motion [data-intro="4"] { animation-delay: 360ms; }

html.motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
html.motion [data-reveal].is-in { opacity: 1; transform: translate3d(0, 0, 0); }

html.motion [data-words] .w { opacity: 0.28; transition: opacity 450ms cubic-bezier(0.22, 1, 0.36, 1); }
html.motion [data-words] .w.on { opacity: 1; }

/* Step screens: without JS only the first is shown. */
[data-step-screen] ~ [data-step-screen] { opacity: 0; }
html.js [data-step-screen] { opacity: 0; transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1); }
html.js [data-step-screen].is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  [data-parallax], [data-drift], [data-zoom] { will-change: auto; }
}