/* Motion layer (19 Oct 2026): scroll index, progress line, focus/zoom reveal, hero ash canvas.
   Ideas borrowed as TECHNIQUES from scrolltide-style sites; nothing copied. Turn off: ?motion=off, the FX button, or reduced motion. */

/* ---- scroll index: numbered navigation, current section highlighted ---- */
#main-nav{counter-reset:ix}
#main-nav a{counter-increment:ix;transition:color .3s var(--ease)}
#main-nav a::before{content:counter(ix,decimal-leading-zero);display:inline-block;min-width:2.4em;font-size:9px;letter-spacing:.08em;opacity:.45;transition:opacity .3s,color .3s}
#main-nav a[aria-current=true]{color:var(--accent)}
#main-nav a[aria-current=true]::before{opacity:1;color:var(--accent)}
.scroll-progress{position:fixed;left:0;top:0;width:100%;height:2px;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--p,0));z-index:55;pointer-events:none;opacity:.85}

/* ---- focus reveal (headings) and zoom reveal (release covers); merch and posters are left alone on purpose ---- */
@media(prefers-reduced-motion:no-preference){
  body:not(.effects-off) :is(.section-heading,.merch-heading,.poster-heading,.contact-heading).reveal{filter:blur(9px);transform:translateY(22px) scale(1.015);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease)}
  body:not(.effects-off) :is(.section-heading,.merch-heading,.poster-heading,.contact-heading).reveal.seen{filter:blur(0);transform:none}
  body:not(.effects-off) .release.reveal :has(> img){overflow:hidden}
  body:not(.effects-off) .release.reveal img{transform:scale(1.18);transition:transform 1.7s var(--ease)}
  body:not(.effects-off) .release.reveal.seen img{transform:none}
}

/* ---- hero ash: one small WebGL canvas behind the hero content ---- */
.hero-ash{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;mix-blend-mode:screen}
body.effects-off .hero-ash{display:none}
@media(prefers-reduced-motion:reduce){.hero-ash{display:none}}

/* ---- the Library: a numbered typographic list, a small picture sits beside each title ---- */
.library-dialog .library-grid{display:block;counter-reset:hl;border-top:1px solid #46514a;margin-top:8px}
.library-dialog .library-story{counter-increment:hl;display:grid;grid-template-columns:40px 88px minmax(0,1fr);align-items:center;column-gap:22px;width:100%;margin:0!important;padding:16px 6px;border-bottom:1px solid #2c3731;background:none;color:#e1e5da;text-align:left;transition:padding-left .5s var(--ease),opacity .3s,color .3s}
.library-dialog .library-story::before{content:counter(hl,decimal-leading-zero);grid-column:1;grid-row:1;font:9px/1 var(--mono);letter-spacing:.1em;color:#7d8a82;transition:color .3s}
.library-dialog .library-story .art-picture{grid-column:2;grid-row:1;display:block;width:88px;height:88px;aspect-ratio:1;overflow:hidden;background:#0c1010;border:1px solid #3a463f}
.library-dialog .library-story .art-picture img{display:block;width:100%;height:100%;aspect-ratio:1;object-fit:cover}
.library-dialog .library-story .art-caption{grid-column:3;grid-row:1;display:flex;align-items:baseline;justify-content:flex-start;gap:16px;margin:0;font-size:clamp(24px,3.9vw,60px);line-height:1.06;letter-spacing:-.035em}
.library-dialog .library-story .art-caption>span{font-size:inherit;color:inherit}
@media (hover:hover) and (pointer:fine){
  .library-dialog .library-grid:hover .library-story{opacity:.32}
  .library-dialog .library-grid .library-story:hover,.library-dialog .library-grid .library-story:focus-visible{opacity:1;padding-left:30px;color:#fff}
  .library-dialog .library-story:hover::before,.library-dialog .library-story:focus-visible::before{color:var(--accent)}
  body.effects-off .library-dialog .library-story{transition:none}
}
@media (max-width:700px){
  .library-dialog .library-story{grid-template-columns:26px 64px minmax(0,1fr);column-gap:14px;padding:12px 2px}
  .library-dialog .library-story .art-picture{width:64px;height:64px}
  .library-dialog .library-story .art-caption{font-size:21px;gap:10px}
}
@media (prefers-reduced-motion:reduce){.library-dialog .library-story{transition:none!important}}
/* the story header: the reading-time line is gone, so the title carries its own spacing */
.reader-article h2{margin-bottom:34px}
@media(max-width:767px){.reader-article h2{margin-bottom:24px}}