/* ===========================================================================
   Base: reset, typography, RTL, keyframes, reduced-motion.
   =========================================================================== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Desktop: gentle scroll-snap so the phone story settles one slide at a time
   while scrolling stays fully native (no wheel hijack). Only .story__panel
   elements are snap points, so the rest of the page scrolls normally. Mobile
   (stacked, auto-height slides) keeps free scrolling — no snap. */
@media(min-width:921px){html{scroll-snap-type:y proximity}}
body{
  font-family:var(--font-latin);
  background:var(--forest);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
[dir=rtl] body,
body.rtl{font-family:var(--font-arabic)}

a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button{font-family:inherit}
::selection{background:var(--lime);color:var(--forest)}

h1,h2,h3,h4{letter-spacing:-.02em;line-height:1.04;color:var(--forest)}

/* Skip link for a11y */
.skip-link{position:absolute;inset-inline-start:0;top:-9999px;z-index:200;background:var(--lime);color:var(--forest);font-weight:800;padding:10px 16px;border-radius:0 0 10px 0}
.skip-link:focus{top:0}

/* Visually-hidden (screen-reader only) */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* Keyframes (from the reference) */
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes wob{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(2deg)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes floaty2{0%,100%{transform:translateY(0) rotate(6deg)}50%{transform:translateY(-13px) rotate(6deg)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(224,255,23,.5)}50%{box-shadow:0 0 0 10px rgba(224,255,23,0)}}

/* Reveal-on-scroll initial state (JS adds .is-in to animate; no-JS keeps content visible) */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js [data-reveal].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  .js [data-reveal]{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}