/* Scroll-reveal + entrance effects (js/motion.js). Content is only hidden when JS has opted in via html.js,
   so nothing disappears without scripting. Everything is ease-out and short; reduced-motion users get none of it. */
:root { --ease-out: cubic-bezier(.19, 1, .22, 1); }

html.js [data-reveal]:not(.is-in) { opacity: 0; }
html.js [data-reveal].is-in { animation: reveal-up .9s var(--ease-out) var(--d, 0s) backwards; }
html.js [data-reveal="fade"].is-in   { animation-name: reveal-fade; }
html.js [data-reveal="scale"].is-in  { animation-name: reveal-scale; }
html.js [data-reveal="left"].is-in   { animation-name: reveal-left; }
html.js [data-reveal="right"].is-in  { animation-name: reveal-right; }

@keyframes reveal-up    { from { opacity: 0; transform: translate3d(0, 28px, 0); } }
@keyframes reveal-fade  { from { opacity: 0; } }
@keyframes reveal-scale { from { opacity: 0; transform: scale(.94) translate3d(0, 16px, 0); } }
@keyframes reveal-left  { from { opacity: 0; transform: translate3d(-32px, 0, 0); } }
@keyframes reveal-right { from { opacity: 0; transform: translate3d(32px, 0, 0); } }

/* headline text reveal: every word rises out of a mask, staggered (js/motion.js adds the spans) */
html.js [data-reveal="split"] { opacity: 1 !important; animation: none !important; }
.w-mask { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em .06em .16em; margin: -.08em -.06em -.16em; }
.w-in { display: inline-block; transform: translate3d(0, 115%, 0); transition: transform 1s var(--ease-out) calc(var(--i, 0) * 55ms); }
.is-in .w-in { transform: none; }

/* feature photos drift slightly inside their frame while scrolling (--py is set from JS, -1…1) */
.feature__photo { transform: translate3d(0, calc(var(--py, 0) * -3%), 0) scale(1.1); will-change: transform; }

/* thin progress bar under the nav */
.scroll-progress {
  position: fixed; left: 0; top: 0; z-index: 60; height: 2px; width: 100%;
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
  background: var(--color-primary); pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal]:not(.is-in) { opacity: 1; }
  html.js [data-reveal].is-in { animation: none; }
  .w-in { transform: none; transition: none; }
  .feature__photo { transform: none; }
  .scroll-progress { display: none; }
}