/* 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 (马善政楷书 Ma Shan Zheng, 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/mashanzheng-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.08;letter-spacing:0}
main.zh .hero-tagline,main.zh .closing-tagline,main.zh .footer-tagline{font-size:clamp(20px,2vw,28px);letter-spacing:.06em}

/* ---------- 6. Brand Story cards: 山/河/路 photos on the dark triptych ---------- */
.principle-triptych article{--story-pad:clamp(34px,5vw,72px);overflow:hidden}
.principle-triptych .story-photo{background:#1a1a17}
.principle-triptych .story-photo:after{background:linear-gradient(#24241f00 40%,#24241f66 72%,#24241f 100%)}
.principle-triptych .story-photo img{filter:grayscale(.6) sepia(.12) saturate(.7) contrast(.95) brightness(.9)}
.principle-triptych article:hover .story-photo img{filter:grayscale(.45) sepia(.1) saturate(.8) contrast(1) brightness(1);transform:scale(1.045)}
.principle-triptych article>span{margin-bottom:30px}

/* ---------- 7. Five-module cards: each module's ink painting fades into the card ---------- */
.identity-module-grid article{position:relative;overflow:hidden;isolation:isolate;min-height:360px}
.identity-module-grid article:before{content:"";position:absolute;inset:0 0 38% 0;z-index:-1;background:center/cover no-repeat;opacity:.85;
  -webkit-mask-image:linear-gradient(#000 35%,transparent);mask-image:linear-gradient(#000 35%,transparent);
  filter:saturate(.9);transition:transform 1.2s cubic-bezier(.2,.75,.25,1),opacity .6s}
.identity-module-grid article:hover:before{transform:scale(1.06);opacity:1}
.identity-module-grid article.works:before{background-image:url(/ink/works.webp)}
.identity-module-grid article.kitchen:before{background-image:url(/ink/kitchen.webp)}
.identity-module-grid article.journey:before{background-image:url(/ink/journey.webp)}
.identity-module-grid article.living:before{background-image:url(/ink/living.webp)}
.identity-module-grid article.studio:before{background-image:url(/ink/studio.webp)}
.identity-module-grid .module-dot{position:relative;z-index:1}

/* ---------- 8. Coming-soon cards and the contact email button ---------- */
.archive-card.is-soon{cursor:default}
.archive-card.is-soon .card-visual{filter:grayscale(.35) opacity(.8)}
.archive-card.is-soon .card-status{color:var(--muted);letter-spacing:.14em}
.archive-card.is-soon:hover{transform:none;box-shadow:none;background:var(--ink)}
.mos-mail{display:flex;flex-direction:column;justify-content:center;gap:28px}
.mos-mail-lead{font-size:clamp(20px,2vw,28px);line-height:1.45;margin:0;max-width:560px}
.mos-mail-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:40px;align-self:flex-start;min-width:260px;padding:20px 26px;
  background:var(--paper);color:var(--ink);border-radius:2px;font-family:var(--font-geist-mono),monospace;letter-spacing:.14em;font-size:14px;text-decoration:none;
  transition:background .3s,transform .3s}
.mos-mail-btn:hover{background:var(--gold);transform:translateY(-2px)}
.mos-mail-note{color:var(--muted);margin:0}
.mos-mail-note a{color:inherit}
.mos-404{min-height:60vh;display:grid;align-content:center;gap:26px;padding:120px 0}
.mos-404 h1{font-size:clamp(96px,18vw,260px);line-height:.8;margin:0;letter-spacing:-.06em}
.mos-404 p:not(.eyebrow){font-size:clamp(20px,2vw,28px);max-width:640px;margin:0}
.mos-404 .mos-404-links{display:flex;flex-wrap:wrap;gap:14px}
.mos-404 .mos-404-links a{border:1px solid var(--line);padding:12px 18px;font-family:var(--font-geist-mono),monospace;letter-spacing:.12em;font-size:13px}

/* ---------- 9. Personal lines ---------- */
.manifesto-copy .mos-line{margin-top:.2em}
.about-quote .mos-legacy{color:var(--muted);letter-spacing:.14em;margin-top:34px;font-size:13px}