/* Shared motion (driven by js/lib/motion.js). One curve everywhere: --ease-out.
   Content is only hidden when scripts run (html.js), so without JS the page shows as is. Reduced motion is handled at the end. */

/* page fades in when it opens */
@keyframes page-in{from{opacity:0}to{opacity:1}}
body{animation:page-in var(--page-in) var(--ease-out) both}

/* headline words: each word rises out of its own line (motion.js wraps them as .w > .i, --i = word index) */
.js [data-words] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-block:.12em;margin-block:-.12em}
.js [data-words] .i{display:inline-block;transform:translateY(116%);transition:transform var(--word-t) var(--ease-out);transition-delay:calc(var(--i,0) * var(--word-step) + 40ms)}
.js [data-words].in .i{transform:none}

/* rise: hero lines under the headline, and anything else that comes in on load (--i for the order) */
.js .rise{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:calc(var(--i,0) * 90ms + var(--rise-after,0ms))}
.js .rise.in{opacity:1;transform:none}

/* wipe: a line is uncovered from right to left (Arabic reading order), after --wipe-after */
.js .wipe{clip-path:inset(-30% -30% -30% 100%);translate:24px 0;transition:clip-path 1s var(--ease-out),translate 1s var(--ease-out);transition-delay:var(--wipe-after,0ms)}
.js .wipe.in{clip-path:inset(-30% -30% -30% -30%);translate:0 0}

/* reveal: comes in once, the first time it scrolls into view. Items of one group follow each other by --reveal-step. */
.js .reveal{opacity:0;transform:translateY(var(--reveal-y));transition:opacity var(--reveal-t) var(--ease-out),transform var(--reveal-t) var(--ease-out);transition-delay:calc(var(--i,0) * var(--reveal-step))}
.js .reveal.is-card{transform:translateY(28px) scale(.985)}
.js .reveal.is-media{transform:translateY(30px) scale(.98)}
.js .reveal.in{opacity:1;transform:none}

/* reading progress: a thin brand line along the top of the window (--sp = 0..1) */
.progress{position:fixed;top:0;inset-inline:0;height:var(--progress-h);z-index:40;pointer-events:none}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--red-on-dark),var(--red));transform-origin:right;transform:scaleX(var(--sp,0))}

@media (prefers-reduced-motion:reduce){
  body{animation:none}
  .js [data-words] .i,.js .rise,.js .reveal{transform:none!important;opacity:1!important;transition:none!important}
  .js .wipe{clip-path:none!important;translate:none!important;transition:none!important}
  .progress{display:none}
  .btn{translate:none!important}
}