/*
Theme Name: Obscura
Theme URI: https://example.com/obscura
Author: WP Topic Lab
Description: 一套暗黑 WebGL 影像馆风格的艺术主题 —— 作品图带实时着色器悬停扭曲与 RGB 色差撕裂、横向拖拽展厅、巨型动态字体与等宽目录标签，为摄影、艺术与创意作品集打造。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: obscura
*/

/* ============ Tokens ============ */
:root{
  --bg:#08080a;
  --bg2:#101014;
  --text:#ededed;
  --dim:#7c7c84;
  --line:rgba(255,255,255,.14);
  --line-strong:rgba(255,255,255,.28);
  --accent:#4b5bff;
  --accent-2:#ff3b30;
  --radius:2px;
  --ff-display:"Syne","Arial Black",system-ui,sans-serif;
  --ff-body:"Inter","Segoe UI",system-ui,sans-serif;
  --ff-mono:"Space Mono","SFMono-Regular",ui-monospace,monospace;
  --container:1440px;
  --gutter:clamp(20px,4vw,64px);
  color-scheme:dark;
}

/* ============ Reset ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{
  background:var(--bg);color:var(--text);font-family:var(--ff-body);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:800;line-height:.98;letter-spacing:-.02em}
::selection{background:var(--accent);color:#fff}

.wrap{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}
.mono{font-family:var(--ff-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ============ Custom cursor ============ */
.cursor{position:fixed;top:0;left:0;z-index:9600;pointer-events:none;mix-blend-mode:difference;transform:translate(-50%,-50%)}
.cursor-ring{width:36px;height:36px;border:1px solid #fff;border-radius:50%;transition:width .3s,height .3s,background .3s}
.cursor.is-view .cursor-ring{width:84px;height:84px;background:#fff}
.cursor-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--ff-mono);font-size:10px;letter-spacing:.15em;color:#000;opacity:0;transition:opacity .25s;text-transform:uppercase}
.cursor.is-view .cursor-label{opacity:1}
/* Chromatic trail — two ghost rings lagging behind the real cursor at
   different speeds, tinted red/cyan like a split colour channel. */
.cursor-ghost{
  position:fixed;top:0;left:0;z-index:9590;pointer-events:none;
  width:36px;height:36px;border-radius:50%;mix-blend-mode:screen;opacity:.5;
  transition:width .3s,height .3s,opacity .3s;
}
.ghost-r{border:1.5px solid rgba(255,60,60,.8)}
.ghost-b{border:1.5px solid rgba(60,200,255,.8)}
.cursor-ghost.is-view{width:84px;height:84px;opacity:.35}
@media (hover:none),(pointer:coarse){.cursor,.cursor-ghost{display:none}}

/* ============ Preloader ============ */
#pre{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:flex-end;justify-content:space-between;padding:var(--gutter)}
#pre.done{transform:translateY(-100%);transition:transform .9s cubic-bezier(.76,0,.24,1)}
#pre .pre-count{font-family:var(--ff-display);font-weight:800;font-size:clamp(4rem,16vw,13rem);line-height:.8}
#pre .pre-word{font-family:var(--ff-mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);padding-bottom:12px}

/* ============ Progress + grain ============ */
#progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:9000}
.grain{position:fixed;inset:-120px;z-index:350;pointer-events:none;opacity:.06;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(3) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(-2%,-2%)}}
body.motion-off .grain{animation:none}

/* ============ Header ============ */
.site-head{position:fixed;top:0;left:0;right:0;z-index:800;padding:22px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;mix-blend-mode:difference}
.site-head .brand{font-family:var(--ff-display);font-weight:800;font-size:20px;letter-spacing:-.02em}
.site-head nav ul{display:flex;gap:26px}
.site-head nav a{font-family:var(--ff-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;position:relative}
.site-head nav a::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.76,0,.24,1)}
.site-head nav a:hover::after,.site-head nav .current-menu-item>a::after{transform:scaleX(1);transform-origin:left}
.head-tools{display:flex;align-items:center;gap:18px}
.nav-toggle{display:none;flex-direction:column;gap:5px}
.nav-toggle span{width:24px;height:2px;background:currentColor;transition:.3s}
@media (max-width:820px){
  .site-head nav{position:fixed;inset:0;background:var(--bg);mix-blend-mode:normal;display:flex;align-items:center;justify-content:center;transform:translateY(-100%);transition:transform .5s cubic-bezier(.76,0,.24,1)}
  .site-head nav.open{transform:translateY(0)}
  .site-head nav ul{flex-direction:column;gap:22px;text-align:center}
  .site-head nav a{font-size:20px}
  .nav-toggle{display:flex;z-index:810}
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ============ WebGL-distorted media (shared by hero + single-post header) ============ */
.media-gl-host{position:relative}
.media-gl{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.media-fallback{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;filter:contrast(1.05)}

/* ============ Hero ============ */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,8,10,.35),transparent 30%,transparent 60%,rgba(8,8,10,.7));pointer-events:none}
.hero-inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--gutter) clamp(40px,7vw,90px)}
.hero-meta{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.hero-title{font-size:clamp(3rem,13vw,12rem);letter-spacing:-.04em;text-transform:uppercase}
.hero-sub{max-width:44ch;color:var(--dim);font-size:clamp(1rem,1.4vw,1.15rem);margin-top:22px}
.scroll-hint{position:absolute;bottom:26px;right:var(--gutter);z-index:2;writing-mode:vertical-rl;font-family:var(--ff-mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}

/* text scramble helper */
.scramble .char{display:inline-block}

/* ============ Section shell ============ */
.section{padding:clamp(90px,12vw,180px) 0;position:relative}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;border-top:1px solid var(--line);padding-top:24px;margin-bottom:60px}
.section-head .idx{font-family:var(--ff-mono);font-size:12px;color:var(--dim)}
.section-head h2{font-size:clamp(1.8rem,5vw,4rem);text-transform:uppercase}
.section-head .meta{font-family:var(--ff-mono);font-size:12px;color:var(--dim);text-align:right;max-width:30ch}

/* ============ Works — horizontal drag gallery ============ */
.works{position:relative}
.works-track{display:flex;gap:clamp(24px,4vw,72px);padding:0 var(--gutter);width:max-content;cursor:grab;will-change:transform}
.works-track.grabbing{cursor:grabbing}
.work{flex:0 0 auto;width:min(46vw,560px)}
.work-media{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--bg2)}
.work-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1);will-change:transform}
.work:hover .work-media img{transform:scale(1.05)}
.work-num{position:absolute;top:14px;left:16px;font-family:var(--ff-mono);font-size:11px;letter-spacing:.1em;color:#fff;mix-blend-mode:difference;z-index:2}

/* Shared WebGL hover canvas — one context that jumps to whichever tile/row
   is currently hovered, instead of a separate context per tile. */
#grid-gl{position:fixed;top:0;left:0;pointer-events:none;z-index:5;opacity:0;transition:opacity .25s ease}
#grid-gl.is-active{opacity:1}
.work-cap{display:flex;justify-content:space-between;gap:16px;margin-top:16px;align-items:baseline}
.work-cap h3{font-family:var(--ff-display);font-weight:700;font-size:clamp(1.1rem,2vw,1.5rem);text-transform:uppercase;letter-spacing:-.01em}
.work-cap h3 a:hover{color:var(--accent)}
.work-cap .yr{font-family:var(--ff-mono);font-size:12px;color:var(--dim);flex-shrink:0}
.works-hint{margin-top:40px;padding:0 var(--gutter);font-family:var(--ff-mono);font-size:12px;color:var(--dim);letter-spacing:.1em}

/* ============ Marquee ============ */
.marquee{border-block:1px solid var(--line);overflow:hidden;padding:26px 0}
.marquee-row{display:flex;gap:60px;width:max-content;will-change:transform}
.marquee-row span{font-family:var(--ff-display);font-weight:800;font-size:clamp(2.4rem,7vw,6rem);text-transform:uppercase;letter-spacing:-.02em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px var(--line-strong)}
.marquee-row span em{font-style:normal;color:var(--accent);-webkit-text-stroke:0}

/* ============ Index list (editorial rows) ============ */
.idx-list{border-top:1px solid var(--line)}
.idx-row{display:grid;grid-template-columns:70px 1fr auto;gap:24px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line);position:relative;transition:color .3s}
.idx-row .idx-n{font-family:var(--ff-mono);font-size:12px;color:var(--dim)}
.idx-row .idx-t{font-family:var(--ff-display);font-weight:700;font-size:clamp(1.4rem,4vw,3rem);text-transform:uppercase;letter-spacing:-.01em;transition:transform .4s cubic-bezier(.76,0,.24,1)}
.idx-row .idx-c{font-family:var(--ff-mono);font-size:12px;color:var(--dim);text-transform:uppercase}
.idx-row:hover .idx-t{transform:translateX(24px);color:var(--accent)}
.idx-row .idx-peek{position:absolute;right:12%;top:50%;transform:translateY(-50%) scale(.9);width:220px;aspect-ratio:4/5;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .3s,transform .5s cubic-bezier(.2,.7,.2,1);z-index:3}
.idx-row:hover .idx-peek{opacity:1;transform:translateY(-50%) scale(1)}
@media (max-width:700px){.idx-row .idx-peek{display:none}.idx-row{grid-template-columns:44px 1fr}.idx-row .idx-c{display:none}}

/* ============ Reveal ============ */
[data-reveal]{opacity:0;transform:translateY(40px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}
.clip-reveal{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.76,0,.24,1)}
.clip-reveal.in{clip-path:inset(0 0 0 0)}

/* ============ Statement ============ */
.statement{padding:clamp(100px,16vw,220px) 0}
.statement p{font-family:var(--ff-display);font-weight:700;font-size:clamp(1.8rem,5vw,4.4rem);line-height:1.05;letter-spacing:-.02em;max-width:20ch}
.statement p em{font-style:italic;color:var(--accent)}

/* ============ CTA / footer ============ */
.cta{padding:clamp(90px,14vw,200px) 0;text-align:center;border-top:1px solid var(--line)}
.cta h2{font-size:clamp(2.4rem,10vw,9rem);text-transform:uppercase;letter-spacing:-.03em}
.cta .big-link{display:inline-block;margin-top:30px;font-family:var(--ff-mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line-strong);border-radius:999px;padding:16px 34px;transition:background .3s,color .3s}
.cta .big-link:hover{background:var(--text);color:var(--bg)}

.site-foot{padding:60px var(--gutter) 40px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-end}
.site-foot .foot-brand{font-family:var(--ff-display);font-weight:800;font-size:clamp(1.6rem,4vw,2.4rem);text-transform:uppercase}
.site-foot .foot-col h4{font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.site-foot .foot-col a{display:block;font-size:14px;padding:3px 0;color:var(--dim);transition:color .25s}
.site-foot .foot-col a:hover{color:var(--text)}
.foot-cols{display:flex;gap:60px;flex-wrap:wrap}
.foot-bottom{width:100%;display:flex;justify-content:space-between;gap:20px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line);font-family:var(--ff-mono);font-size:11px;color:var(--dim);letter-spacing:.05em;text-transform:uppercase}

/* ============ Article ============ */
.page-hero{padding:clamp(140px,20vh,220px) 0 40px}
.page-hero .kick{font-family:var(--ff-mono);font-size:12px;color:var(--accent);letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:20px}
.page-hero h1{font-size:clamp(2.2rem,7vw,6rem);text-transform:uppercase;letter-spacing:-.03em}
.page-hero .meta{font-family:var(--ff-mono);font-size:12px;color:var(--dim);margin-top:24px;display:flex;gap:20px;flex-wrap:wrap;text-transform:uppercase}
.single-media{aspect-ratio:16/9;overflow:hidden;margin:40px 0}
.single-media img{width:100%;height:100%;object-fit:cover}
.entry{max-width:760px;margin:0 auto;padding:40px 0 90px;font-size:1.12rem;line-height:1.8}
.entry>*{margin-bottom:1.5em}
.entry h2{font-size:1.9rem;text-transform:uppercase;margin-top:1.6em}
.entry h3{font-size:1.4rem;margin-top:1.3em}
.entry blockquote{border-left:2px solid var(--accent);padding-left:24px;font-family:var(--ff-display);font-weight:700;font-size:1.5rem;line-height:1.3}
.entry a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.entry img{margin:1.5em 0}
.entry code{font-family:var(--ff-mono);background:var(--bg2);padding:2px 6px;font-size:.9em}
.entry ul,.entry ol{padding-left:1.4em}
.entry li{margin-bottom:.5em}

.post-nav{max-width:760px;margin:0 auto 80px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.post-nav a{background:var(--bg);padding:28px 24px;transition:background .3s}
.post-nav a:hover{background:var(--bg2)}
.post-nav .dir{font-family:var(--ff-mono);font-size:11px;color:var(--dim);text-transform:uppercase;display:block;margin-bottom:10px}
.post-nav .t{font-family:var(--ff-display);font-weight:700;font-size:1.1rem;text-transform:uppercase}
.post-nav .next{text-align:right}
@media (max-width:600px){.post-nav{grid-template-columns:1fr}}

/* comments */
.comments{max-width:760px;margin:0 auto;padding-bottom:100px}
.comments-title{font-family:var(--ff-display);font-weight:800;font-size:1.6rem;text-transform:uppercase;margin-bottom:30px}
.comment-list{display:flex;flex-direction:column;gap:1px;background:var(--line)}
.comment-body{background:var(--bg);padding:24px}
.comment-author{font-family:var(--ff-display);font-weight:700;text-transform:uppercase}
.comment-meta{font-family:var(--ff-mono);font-size:11px;color:var(--dim);margin-bottom:10px;text-transform:uppercase}
.comment-list .children{margin-left:30px;margin-top:1px;display:flex;flex-direction:column;gap:1px;background:var(--line)}
.comment-respond{margin-top:40px}
.comment-respond input:not([type=submit]):not([type=checkbox]),.comment-respond textarea{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--text);padding:14px;margin-bottom:14px;font-family:inherit}
.comment-respond textarea{min-height:130px}
.comment-respond label{font-family:var(--ff-mono);font-size:12px;color:var(--dim);display:block;margin-bottom:6px}

/* pagination */
.pagination{display:flex;gap:8px;justify-content:center;margin-top:70px}
.pagination a,.pagination span{width:46px;height:46px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);font-family:var(--ff-mono);font-size:13px}
.pagination .current{background:var(--text);color:var(--bg)}

/* forms / search */
.search-form{display:flex;gap:0;max-width:460px;border:1px solid var(--line-strong)}
.search-form input[type=search]{flex:1;background:transparent;border:none;color:var(--text);padding:15px 18px;font-family:var(--ff-mono)}
.search-form button{padding:0 24px;background:var(--text);color:var(--bg);font-family:var(--ff-mono);font-size:12px;text-transform:uppercase}

/* 404 */
.err{min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:24px}
.err .big{font-family:var(--ff-display);font-weight:800;font-size:clamp(6rem,26vw,20rem);line-height:.8;-webkit-text-stroke:1px var(--line-strong);color:transparent}

/* widgets */
.widget{margin-bottom:0}
.widget ul li{padding:5px 0;color:var(--dim);font-size:14px}

/* utilities */
.btn-line{display:inline-flex;align-items:center;gap:10px;font-family:var(--ff-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding-bottom:5px;border-bottom:1px solid currentColor}

/* Page transition wipe */
.page-wipe{position:fixed;inset:0;z-index:9800;background:var(--bg);display:flex;align-items:center;justify-content:center}
.page-wipe span{font-family:var(--ff-display);font-weight:800;font-size:14px;letter-spacing:.4em;color:var(--dim);text-transform:uppercase}

@media (max-width:820px){.work{width:78vw}}