/* MATCH/OS atmosphere: moving ink wash, gold sparks, section colour, scroll reveals.
   Everything here is decorative; the site reads the same with this file removed. */

/* Let the ink layer sit between the page background and the content. */
html{background:radial-gradient(circle at 20% 18%,#ffffff70,transparent 28%),radial-gradient(circle at 82% 62%,#8f7c5b09,transparent 34%),var(--ink)}
body{background:transparent!important}
/* stop the page from scrolling sideways (a few decorative shapes poke past the edge) */
html,body{overflow-x:clip}

/* ---------- 1. Moving ink wash ---------- */
#mos-atmos{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;--acc:#bd9958}
#mos-atmos i{position:absolute;display:block;border-radius:50%;will-change:transform}
#mos-atmos .b1{width:70vmax;height:70vmax;left:-22vmax;top:-26vmax;
  background:radial-gradient(closest-side,rgba(36,36,31,.10),rgba(36,36,31,.045) 45%,transparent 72%);
  animation:mos-drift1 46s ease-in-out infinite alternate}
#mos-atmos .b2{width:62vmax;height:62vmax;right:-20vmax;top:18vh;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 26%,transparent),color-mix(in srgb,var(--acc) 9%,transparent) 50%,transparent 74%);
  animation:mos-drift2 58s ease-in-out infinite alternate}
#mos-atmos .b3{width:54vmax;height:54vmax;left:12vw;bottom:-30vmax;
  background:radial-gradient(closest-side,rgba(189,153,88,.20),rgba(189,153,88,.07) 48%,transparent 74%);
  animation:mos-drift3 52s ease-in-out infinite alternate}
#mos-atmos .b4{width:36vmax;height:36vmax;left:48vw;top:-12vmax;
  background:radial-gradient(closest-side,rgba(36,36,31,.08),transparent 70%);
  animation:mos-drift4 64s ease-in-out infinite alternate}
/* fine paper grain */
#mos-atmos .grain{inset:-50%;width:auto;height:auto;border-radius:0;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .14  0 0 0 0 .14  0 0 0 0 .12  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:mos-grain 9s steps(6) infinite}
@keyframes mos-drift1{to{transform:translate(14vw,10vh) scale(1.12) rotate(8deg)}}
@keyframes mos-drift2{to{transform:translate(-16vw,-8vh) scale(.9) rotate(-10deg)}}
@keyframes mos-drift3{to{transform:translate(18vw,-14vh) scale(1.15)}}
@keyframes mos-drift4{to{transform:translate(-20vw,22vh) scale(1.25)}}
@keyframes mos-grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}}

/* ---------- 2. Gold sparks (canvas drawn by enhance.js) ---------- */
#mos-sparks{position:fixed;inset:0;width:100vw;height:100vh;z-index:4;pointer-events:none}
/* warm glow behind the home logo */
.home-intro .hero-lockup{position:relative}
.home-intro .hero-lockup:before{content:"";position:absolute;z-index:-1;left:-6%;top:50%;width:46%;aspect-ratio:1;translate:0 -50%;
  background:radial-gradient(closest-side,rgba(189,153,88,.28),rgba(189,153,88,.08) 55%,transparent 75%);
  filter:blur(8px);animation:mos-breathe 7s ease-in-out infinite}
@keyframes mos-breathe{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}

/* ---------- 3. A colour for each section ---------- */
.module-hero h1,.entry-hero h1{position:relative}
.module-hero h1:after,.entry-hero h1:after{content:"";position:absolute;left:.04em;bottom:-.12em;height:.07em;min-height:5px;width:min(2.4em,40%);border-radius:99px;
  background:linear-gradient(90deg,var(--module-accent,var(--gold)),transparent);transform-origin:left;animation:mos-stroke 1.4s .5s cubic-bezier(.2,.75,.25,1) both}
@keyframes mos-stroke{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
.module-kicker span:first-child,.entry-kicker span:last-child{color:var(--module-accent,var(--gold))}
.archive-card{transition:background .3s,transform .45s cubic-bezier(.2,.75,.25,1),box-shadow .45s}
.archive-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px -22px var(--module-accent,var(--gold)),0 2px 0 var(--module-accent,var(--gold))}
.card-visual{transition:filter .5s}
.archive-card:hover .card-visual{filter:saturate(1.15) brightness(1.04)}
.module-row{transition:background .3s,padding .35s cubic-bezier(.2,.75,.25,1)}
.module-row:hover{padding-left:14px}
.module-ink-panel>img{transition:transform 1.6s cubic-bezier(.2,.75,.25,1)}
.module-ink-panel:hover>img{transform:scale(1.035)}

/* ---------- 4. Scroll reveals (only when enhance.js is running) ---------- */
html.mos-js .mos-rise{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.75,.25,1),transform .9s cubic-bezier(.2,.75,.25,1);transition-delay:var(--mos-d,0ms)}
html.mos-js .mos-rise.mos-in{opacity:1;transform:none}
html.mos-js .archive-card.mos-rise.mos-in:hover{transform:translateY(-6px);transition-delay:0ms}

@media (prefers-reduced-motion:reduce){
  #mos-atmos i,.home-intro .hero-lockup:before,.module-hero h1:after,.entry-hero h1:after{animation:none!important}
  #mos-sparks{display:none}
  html.mos-js .mos-rise{opacity:1;transform:none;transition:none}
}
@media print{#mos-atmos,#mos-sparks{display:none}}

/* ---------- 5. Chinese brush headlines (志莽行书 Zhi Mang Xing, SIL OFL 1.1) ----------
   Self-hosted subset: only the characters these headlines use. Latin letters keep Geist. */
@font-face{font-family:"MOS Brush";src:url(/fonts/zhimangxing-subset.woff2?v=1) format("woff2");font-display:swap;unicode-range:U+3000-303F,U+3400-9FFF,U+F900-FAFF,U+FF00-FFEF}
main.zh h1:not(.wordmark),main.zh h2,main.zh .hero-tagline,
main.zh .module-name,main.zh .entry-lead,main.zh .closing-tagline,main.zh .footer-tagline,main.zh .next-module a{
  font-family:var(--font-geist-sans),"MOS Brush","PingFang SC","Microsoft YaHei",sans-serif;font-weight:400;font-synthesis:none;letter-spacing:.01em}
main.zh h1:not(.wordmark){line-height:1.02;letter-spacing:-.01em}
main.zh .hero-tagline,main.zh .closing-tagline,main.zh .footer-tagline{font-size:clamp(20px,2vw,28px);letter-spacing:.06em}