/* Naija Tales motion kit: pair with motion-kit.js */

/* A. Headline word reveal: wrap each word as <span class="w" style="--i:N">word</span> */
.w{display:inline-block;opacity:0;transform:translateY(.55em) rotate(2deg);
   animation:wup .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*55ms + .1s)}
@keyframes wup{to{opacity:1;transform:none}}

/* B. Scroll reveal. Hidden only when JS is running (html.js), so no-JS pages stay readable */
.js [data-r]{opacity:0;transform:translateY(26px);
   transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);
   transition-delay:calc(var(--i,0)*70ms)}
.js [data-r].in{opacity:1;transform:none}

/* C. Scroll progress bar, driven by --p from the JS */
.prog{position:fixed;left:0;top:0;width:100%;height:6px;z-index:99;background:#FF5A1F;
   transform-origin:0 50%;transform:scaleX(var(--p,0))}

/* D. Marquee: duplicate the content inside the inner div */
.mq{overflow:hidden;white-space:nowrap}
.mq>div{display:inline-block;animation:mq 38s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}

/* E. Spinning sticker / ring */
.spin{animation:spin 18s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}

/* F. Stacking cards: pure CSS. Give each card a bigger --t (10px, 24px, 38px...) */
.sc{position:sticky;top:calc(80px + var(--t,0px))}

/* G. Full-screen menu wipe (use inside <details>) */
.wipe{animation:wipe .5s cubic-bezier(.7,0,.2,1)}@keyframes wipe{from{clip-path:inset(0 0 100% 0)}}

/* H. Hard-shadow lift on hover/press */
.lift{box-shadow:6px 6px 0 #101010;transition:transform .3s,box-shadow .3s}
.lift:hover,.lift:active{transform:translate(-3px,-3px);box-shadow:10px 10px 0 #101010}

/* I. Draggable block: JS sets touch-action:pan-y so vertical scroll still works */
[data-drag]{user-select:none;-webkit-user-select:none}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .w{opacity:1;transform:none}.js [data-r]{opacity:1;transform:none}.mq{overflow-x:auto}}