/* ── RESET & BASE ──────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--text);font-family:'Plus Jakarta Sans',system-ui,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.55;text-rendering:optimizeLegibility}
/* Scroll lock, applied by lockScroll() in 04-utils.js while any overlay
   is open. The position:fixed / top offset comes from JS (it needs the
   live scroll position); these rules stop iOS rubber-band scrolling from
   chaining past the overlay and kill the smooth-scroll animation that
   would otherwise fire when we restore the offset on unlock. */
html:has(body.scroll-locked){overscroll-behavior:none;scroll-behavior:auto}
body.scroll-locked{overflow:hidden;overscroll-behavior:none}
#root{min-height:100vh}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit;word-spacing:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}
button{cursor:pointer;background:none;border:none;padding:0;line-height:inherit;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}
svg{display:block}

/* ── SCROLLBAR ─────────────────────────────────── */
/* Firefox */
html{scrollbar-width:thin;scrollbar-color:#1f1f2c var(--bg)}
/* Webkit / Blink */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#1f1f2c;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:#2a2a3a}

/* ── ANIMATIONS ────────────────────────────────── */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes drawerIn{from{opacity:0;transform:translateX(32px)}to{opacity:1;transform:translateX(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* ── REVEAL ANIMATION ──────────────────────────── */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.visible{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:.08s}
.reveal-d2{transition-delay:.16s}
.reveal-d3{transition-delay:.24s}

/* Per-word stagger inside .section-title — each word fades independently
   on top of the parent .section-head reveal. transition-delay is set
   inline on each span (see render_title_words in helpers.php). */
.section-title-word{
  display:inline-block;
  opacity:0;
  transform:translateY(.35em);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.js .reveal.visible .section-title-word,
.no-js .section-title-word{
  opacity:1;
  transform:translateY(0);
}
@media(prefers-reduced-motion:reduce){
  .section-title-word{transition:none;transform:none;opacity:1}
}