/* ══ ONECAST, scroll motion ═══════════════════════════════════════════
   Reveal-on-scroll, parallax, scroll progress and page-enter transitions.
   Everything keys off [data-reveal], which reveal.js applies automatically: you never have to add classes to your own markup.

   Elements are only hidden once JS has confirmed it's running (html.js),
   so with JavaScript off the whole site renders normally.              */

/* ── Reveal ─────────────────────────────────────────────────────────── */
.js [data-reveal]{
  opacity:0;
  transform:translateY(var(--rv-y,26px)) scale(var(--rv-s,1));
  transition:
    opacity .74s cubic-bezier(.22,1,.36,1),
    transform .74s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--rv-d,0ms);
  will-change:opacity,transform;
}
.js [data-reveal].in{opacity:1;transform:none}

/* Variants, reveal.js picks these per element type */
.js [data-reveal="up"]     {--rv-y:26px}
.js [data-reveal="rise"]   {--rv-y:40px}
.js [data-reveal="pop"]    {--rv-y:18px;--rv-s:.965}
.js [data-reveal="left"]   {--rv-y:0;transform:translateX(-26px)}
.js [data-reveal="right"]  {--rv-y:0;transform:translateX(26px)}
.js [data-reveal="fade"]   {--rv-y:0}
.js [data-reveal="left"].in.js [data-reveal="right"].in{transform:none}

/* Cards get a touch more travel and a hint of scale */
.js .card[data-reveal].js .cat-tile[data-reveal]{--rv-y:32px;--rv-s:.97}

/* Row lists slide in from the left, staggered */
.js .row-list li[data-reveal]{--rv-y:0;transform:translateX(-22px)}
.js .row-list li[data-reveal].in{transform:none}

/* ── Scroll progress bar ────────────────────────────────────────────── */
#scrollbar{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:70;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 40%,#fff));
  box-shadow:0 0 12px color-mix(in srgb,var(--accent) 70%,transparent);
  pointer-events:none;
}

/* ── Topbar reacts to scrolling ─────────────────────────────────────── */
.topbar{transition:height .3s cubic-bezier(.22,1,.36,1),background .3s,box-shadow .3s,border-color .3s,opacity .5s,transform .5s}
body.scrolled .topbar{
  height:54px;
  background:rgba(16,29,43,.94);
  box-shadow:0 8px 30px -18px rgba(5,20,35,.85);
  border-bottom-color:var(--line-2);
}

/* ── Parallax ───────────────────────────────────────────────────────── */
.js .hero-img.js .article-hero img{will-change:transform}

/* ── Page enter (every load, after the intro) ───────────────────────── */
.js .page-enter{
  animation:pg-in .7s cubic-bezier(.22,1,.36,1) both;
}
@keyframes pg-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── Page-to-page fade ──────────────────────────────────────────────────
   Clicking an internal link fades the page out before navigating, so the
   whole wiki feels continuous instead of blinking white between loads. */
html.page-out body{opacity:0;transition:opacity .19s ease}

/* ── Anchor landing flash ───────────────────────────────────────────── */
.rv-flash{animation:rv-flash 900ms ease-out}
@keyframes rv-flash{
  0%{background:var(--accent-dim);box-shadow:-14px 0 0 var(--accent-dim)}
  100%{background:transparent;box-shadow:none}
}

/* ── Back to top ────────────────────────────────────────────────────── */
#totop{
  position:fixed;right:22px;bottom:22px;z-index:65;
  width:42px;height:42px;display:grid;place-items:center;
  border-radius:12px;border:1px solid var(--line-2);background:var(--panel);
  color:var(--muted);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s,visibility .3s,transform .3s,border-color .2s,color .2s;
}
#totop.on{opacity:1;visibility:visible;transform:none}
#totop:hover{border-color:var(--accent);color:var(--accent)}
#totop svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── Link hover polish ──────────────────────────────────────────────── */
.card,.cat-tile,.chip{will-change:transform}
.prose h2.prose h3{scroll-margin-top:96px}

@media (max-width:620px){
  #totop{right:14px;bottom:14px;width:38px;height:38px}
}

/* ── Reduced motion: show everything, move nothing ──────────────────── */
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .js .page-enter{animation:none}
  html.page-out body{opacity:1;transition:none}
  .rv-flash{animation:none}
  #scrollbar{display:none}
  body.scrolled .topbar{height:62px}
}