/* F1SCPS — one motion language: fast out-expo entrances, short mechanical state changes.
   Only transform / opacity / clip-path are animated. */
:root{
  --bg:#09090b; --bg2:#101014; --panel:#14141a; --line:#26262e; --line2:#34343f;
  --text:#f2f2f4; --muted:#9a9aa6; --accent:#1f6bff; --accent2:#4d94ff;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --d-fast:140ms; --d-med:380ms; --d-slow:800ms;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace;
  --sans:"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --gutter:clamp(16px,4vw,48px); --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.55 var(--sans);overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}
main{flex:1;outline:none}
a{color:inherit;text-decoration:none}
button,select,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent2);outline-offset:3px;border-radius:4px}
.skip{position:fixed;left:12px;top:-60px;background:var(--accent);color:#fff;padding:8px 14px;z-index:100;border-radius:6px;transition:transform var(--d-fast)}
.skip:focus{transform:translateY(72px)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* scroll progress (real page scroll position) + route wipe */
.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:60;pointer-events:none}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transform:scaleX(0);transform-origin:0 50%}
.wipe{position:fixed;inset:0;z-index:70;pointer-events:none;background:linear-gradient(100deg,#09090b 0 78%,var(--accent) 78% 82%,#09090b 82%);transform:translate3d(-105%,0,0);will-change:transform}
.wipe.in{transform:translate3d(0,0,0);transition:transform 240ms var(--ease-io)}
.wipe.out{transform:translate3d(105%,0,0);transition:transform 300ms var(--ease-io)}

/* header */
.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px var(--gutter);background:rgba(9,9,11,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.04em;font-size:1.15rem;font-style:italic}
.brand b{color:var(--accent)}
.brand-mark{width:22px;height:22px;background:var(--accent);clip-path:polygon(0 100%,38% 0,100% 0,72% 46%,52% 46%,44% 62%,76% 62%,64% 100%);transition:transform var(--d-med) var(--ease-out)}
.brand:hover .brand-mark{transform:translateX(3px) skewX(-8deg)}
nav{display:flex;gap:6px}
nav a{position:relative;padding:8px 12px;font-size:.9rem;color:var(--muted);transition:color var(--d-fast)}
nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--d-med) var(--ease-out)}
nav a:hover,nav a[aria-current=page]{color:var(--text)}
nav a:hover::after,nav a[aria-current=page]::after{transform:scaleX(1)}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;font-size:.72rem;color:var(--muted)}

/* technical separator with one-shot highlight */
.sep{position:relative;height:1px;background:var(--line);overflow:hidden;margin:0 auto;max-width:var(--max)}
.sep::after{content:"";position:absolute;inset:0;width:18%;background:linear-gradient(90deg,transparent,var(--accent),transparent);transform:translateX(-120%)}
.sep.in::after,[data-reveal].in .sep::after{transform:translateX(620%);transition:transform 1.4s var(--ease-io)}

/* ---------- reveal system ---------- */
[data-reveal]{opacity:0;will-change:opacity,transform}
[data-reveal="up"]{transform:translate3d(0,22px,0)}
[data-reveal="left"]{transform:translate3d(-28px,0,0)}
[data-reveal="mask"]{opacity:1;clip-path:inset(0 100% 0 0)}
[data-reveal].in{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform .8s var(--ease-out)}
[data-reveal="mask"].in{clip-path:inset(0 0 0 0);transition:clip-path .9s var(--ease-out)}
[data-reveal="grid"]{opacity:1}
[data-reveal="grid"]>*{opacity:0;translate:0 16px}
[data-reveal="grid"].in>*{opacity:1;translate:none;transition:opacity .6s var(--ease-out) calc(var(--i,0)*70ms),translate .7s var(--ease-out) calc(var(--i,0)*70ms),transform var(--d-med) var(--ease-out),border-color var(--d-fast)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(86vh,760px);display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-bg{position:absolute;inset:0;opacity:0;background:
  radial-gradient(60% 70% at 78% 30%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%),
  radial-gradient(50% 60% at 10% 100%,color-mix(in srgb,var(--accent2) 10%,transparent),transparent 70%),var(--bg)}
.hero-grid{position:absolute;inset:0;opacity:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(70% 80% at 70% 40%,#000,transparent 75%);mask-image:radial-gradient(70% 80% at 70% 40%,#000,transparent 75%)}
.hero-light{position:absolute;top:-20%;bottom:-20%;left:0;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.07),transparent);transform:translate3d(-120%,0,0) skewX(-18deg);pointer-events:none}
.circuit{position:absolute;right:-4%;top:6%;width:min(62vw,760px);height:auto;opacity:.9;pointer-events:none}
.circuit path{fill:none;stroke:var(--line2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.circuit path.hot{stroke:var(--accent);stroke-width:2.5}
.hero-inner{position:relative;padding:72px var(--gutter);max-width:var(--max);margin:0 auto;width:100%}
.hero h1{margin:14px 0 18px;font-size:clamp(2.6rem,8.4vw,6.4rem);line-height:1;font-weight:800;font-style:italic;letter-spacing:-.02em}
.line{display:block;overflow:hidden;padding:.06em .1em .12em 0;margin:-.06em 0 -.12em}
.line>span{display:block;transform:translate3d(0,108%,0)}
.line.accent>span{color:var(--accent)}
.hero .lede{max-width:52ch;color:var(--muted);font-size:clamp(1rem,1.6vw,1.2rem);opacity:0;transform:translate3d(0,14px,0)}
.hero .mono.top{opacity:0}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;opacity:0;transform:translate3d(0,14px,0)}
.stats{display:flex;flex-wrap:wrap;gap:28px;margin-top:44px;opacity:0;transform:translate3d(0,14px,0)}
.stats b{display:block;font-size:1.9rem;font-family:var(--mono);color:var(--text);letter-spacing:0}
/* entrance timeline: ~1.1s total, page is interactive from the first frame */
.is-loaded .hero-bg{opacity:1;transition:opacity 1s var(--ease-out)}
.is-loaded .hero-grid{opacity:1;transition:opacity 1.2s var(--ease-out) .1s}
.is-loaded .hero-light{transform:translate3d(520%,0,0) skewX(-18deg);transition:transform 1.5s var(--ease-io) .25s}
.is-loaded .circuit path{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--ease-io) .2s}
.is-loaded .circuit path.hot{transition-delay:.5s;transition-duration:1.4s}
.is-loaded .line>span{transform:none;transition:transform .9s var(--ease-out) calc(.18s + var(--i)*90ms)}
.is-loaded .hero .mono.top{opacity:1;transition:opacity .6s var(--ease-out) .1s}
.is-loaded .hero .lede{opacity:1;transform:none;transition:opacity .8s var(--ease-out) .65s,transform .8s var(--ease-out) .65s}
.is-loaded .cta{opacity:1;transform:none;transition:opacity .8s var(--ease-out) .78s,transform .8s var(--ease-out) .78s}
.is-loaded .stats{opacity:1;transform:none;transition:opacity .8s var(--ease-out) .9s,transform .8s var(--ease-out) .9s}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:12px 22px;font-weight:700;letter-spacing:.02em;border:1px solid var(--line2);background:var(--panel);cursor:pointer;overflow:hidden;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);transition:transform var(--d-fast) var(--ease-out),border-color var(--d-fast),background var(--d-fast)}
.btn::before{content:"";position:absolute;inset:0;background:var(--accent);transform:translate3d(-101%,0,0);transition:transform var(--d-med) var(--ease-out);z-index:0}
.btn>*{position:relative;z-index:1}
.btn:hover{border-color:var(--accent)}
.btn:hover::before{transform:none}
.btn:active{transform:translate3d(0,1px,0) scale(.985)}
.btn.primary{background:var(--accent);border-color:var(--accent)}
.btn.primary::before{background:#fff}
.btn.primary:hover{color:#09090b}
.btn .arr{transition:transform var(--d-med) var(--ease-out)}
.btn:hover .arr{transform:translateX(4px)}

/* ---------- sections ---------- */
section.block{padding:clamp(56px,9vw,110px) 0}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:28px;flex-wrap:wrap}
.sec-head h2{margin:6px 0 0;font-size:clamp(1.7rem,4vw,2.8rem);line-height:1.05;font-style:italic;font-weight:800}
.link-arrow{color:var(--muted);transition:color var(--d-fast)}
.link-arrow:hover{color:var(--text)}

/* tiles (slanted speed mask) */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.tile{position:relative;display:block;padding:24px 22px 22px;background:var(--panel);border:1px solid var(--line);clip-path:polygon(0 0,100% 0,calc(100% - 18px) 100%,0 100%);overflow:hidden;transition:border-color var(--d-fast),transform var(--d-med) var(--ease-out)}
.tile::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--d-med) var(--ease-out)}
.tile:hover{transform:translate3d(0,-3px,0);border-color:var(--line2)}
.tile:hover::after{transform:scaleX(1)}
.tile b{display:block;font-size:2rem;font-family:var(--mono);line-height:1.1}
.tile span{color:var(--muted);font-size:.9rem}

/* ---------- cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:16px;perspective:1100px}
.card{--mx:50%;--my:50%;--rx:0deg;--ry:0deg;position:relative;display:flex;flex-direction:column;gap:0;padding:0;min-height:236px;background:var(--panel);border:1px solid var(--line);border-radius:4px;transform:rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0,0,0);transform-style:preserve-3d;transition:transform var(--d-med) var(--ease-out),border-color var(--d-fast),box-shadow var(--d-med) var(--ease-out);contain:layout paint}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(260px circle at var(--mx) var(--my),color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%);transition:opacity var(--d-med)}
.card::after{content:"";position:absolute;left:-1px;top:-1px;width:34px;height:2px;background:var(--accent);transition:width var(--d-med) var(--ease-out)}
.card.lit::before{opacity:1}
.card:hover,.card:focus-within{border-color:var(--line2);box-shadow:0 14px 34px -18px rgba(0,0,0,.9)}
.card:hover::after,.card:focus-within::after{width:calc(100% + 2px)}
.card.enter{animation:cardIn .6s var(--ease-out) both;animation-delay:calc(var(--i,0)*28ms)}
@keyframes cardIn{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
.card-top{display:flex;justify-content:space-between;gap:8px;align-items:center}
.tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--line2);color:var(--muted)}
.tag.res{color:var(--accent2);border-color:color-mix(in srgb,var(--accent2) 40%,transparent)}
.card h3{margin:2px 0 0;font-size:1.12rem;line-height:1.25}
.card h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.card h3 a:focus-visible{outline:none}
.card:has(h3 a:focus-visible){outline:2px solid var(--accent2);outline-offset:3px}
.meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--mono);font-size:.76rem;color:var(--muted)}
.card p{margin:0;color:var(--muted);font-size:.88rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px;position:relative;z-index:2;padding-top:6px}
.dl{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-size:.82rem;font-weight:600;border:1px solid var(--line2);background:var(--bg2);transition:background var(--d-fast),border-color var(--d-fast),transform var(--d-fast) var(--ease-out)}
.dl:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.dl:active{transform:scale(.97)}
.dl.ghost{border-style:dashed;color:var(--muted)}
.dl.ghost:hover{background:transparent;border-color:var(--text);color:var(--text)}

/* ---------- library toolbar ---------- */
.lib-head{padding:clamp(40px,7vw,80px) 0 22px}
.lib-head h1{margin:6px 0 0;font-size:clamp(2rem,5.4vw,3.8rem);font-style:italic;font-weight:800;line-height:1.02}
.toolbar{position:sticky;top:57px;z-index:20;background:rgba(9,9,11,.94);backdrop-filter:blur(8px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0}
.tb-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tb-row+.tb-row{margin-top:10px}
.search{position:relative;flex:1 1 240px;min-width:0}
.search input{width:100%;padding:11px 14px 11px 38px;background:var(--panel);border:1px solid var(--line2);border-radius:2px;outline:none;transition:border-color var(--d-fast),box-shadow var(--d-fast)}
.search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.search svg{position:absolute;left:12px;top:50%;width:16px;height:16px;transform:translateY(-50%);stroke:var(--muted);fill:none;stroke-width:2}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;background:var(--panel);border:1px solid var(--line2);cursor:pointer;font-size:.84rem;position:relative;overflow:hidden;transition:border-color var(--d-fast),color var(--d-fast),transform var(--d-fast) var(--ease-out)}
.chip::before{content:"";position:absolute;inset:0;background:var(--accent);transform:translate3d(-101%,0,0) skewX(-14deg);transform-origin:0 0;transition:transform var(--d-med) var(--ease-out)}
.chip>*{position:relative}
.chip:hover{border-color:var(--text)}
.chip:active{transform:scale(.97)}
.chip[aria-pressed=true]{border-color:var(--accent);color:#fff}
.chip[aria-pressed=true]::before{transform:translate3d(0,0,0) skewX(-14deg) scaleX(1.3)}
.chip i{font-style:normal;font-family:var(--mono);font-size:.7rem;opacity:.7}
.chip.active-chip{animation:chipIn .35s var(--ease-out) both;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.chip.active-chip::before{display:none}
@keyframes chipIn{from{opacity:0;transform:translate3d(-8px,0,0) scale(.94)}to{opacity:1;transform:none}}
.chip.clear{border-style:dashed;color:var(--muted)}

/* dropdown */
.dd{position:relative}
.dd-btn{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;min-width:150px;justify-content:space-between;background:var(--panel);border:1px solid var(--line2);cursor:pointer;transition:border-color var(--d-fast)}
.dd-btn:hover,.dd-btn[aria-expanded=true]{border-color:var(--text)}
.dd-btn small{color:var(--muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:.66rem}
.dd-btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;transition:transform var(--d-med) var(--ease-out)}
.dd-btn[aria-expanded=true] svg{transform:rotate(180deg)}
.dd-list{position:absolute;left:0;top:calc(100% + 6px);min-width:100%;z-index:30;margin:0;padding:6px;list-style:none;background:var(--bg2);border:1px solid var(--line2);box-shadow:0 20px 40px -12px #000;opacity:0;transform:translate3d(0,-8px,0);clip-path:inset(0 0 100% 0);visibility:hidden;transition:opacity var(--d-fast),transform var(--d-med) var(--ease-out),clip-path var(--d-med) var(--ease-out),visibility 0s linear var(--d-med)}
.dd.open .dd-list{opacity:1;transform:none;clip-path:inset(0 0 0 0);visibility:visible;transition-delay:0s}
.dd-list li{padding:9px 12px;cursor:pointer;font-size:.9rem;white-space:nowrap;border-left:2px solid transparent;transition:background var(--d-fast),border-color var(--d-fast)}
.dd-list li:hover,.dd-list li.focus{background:var(--panel);border-color:var(--accent)}
.dd-list li[aria-selected=true]{color:var(--accent2)}

/* mechanical switch */
.switch{display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:6px 2px;cursor:pointer}
.switch .track{position:relative;width:46px;height:24px;background:var(--panel);border:1px solid var(--line2);clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);transition:background var(--d-med) var(--ease-out),border-color var(--d-fast)}
.switch .knob{position:absolute;left:3px;top:3px;width:20px;height:16px;background:var(--text);clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);transition:transform var(--d-med) var(--ease-out),background var(--d-fast)}
.switch[aria-checked=true] .track{background:color-mix(in srgb,var(--accent) 28%,transparent);border-color:var(--accent)}
.switch[aria-checked=true] .knob{transform:translate3d(20px,0,0);background:var(--accent)}
.switch:active .knob{width:24px}
.switch[aria-checked=true]:active .knob{transform:translate3d(16px,0,0)}

/* result bar */
.results-bar{display:flex;align-items:center;gap:16px;padding:18px 0 14px;flex-wrap:wrap}
.results-bar .count{font-family:var(--mono);font-size:.9rem}
.meter{flex:1 1 120px;max-width:340px;height:4px;background:var(--line);position:relative;overflow:hidden}
.meter i{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--d-med) var(--ease-out)}
.list-area{min-height:70vh;padding-bottom:80px}
.grid.swap{animation:swap .28s var(--ease-out)}
@keyframes swap{from{opacity:.35}to{opacity:1}}

.empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:60px 16px;gap:10px;color:var(--muted)}
.empty svg{width:200px;height:auto}
.empty path{fill:none;stroke:var(--line2);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.1s var(--ease-io) forwards}
.empty path.hot{stroke:var(--accent);animation-delay:.25s}
.empty h2{margin:0;color:var(--text)}
@keyframes draw{to{stroke-dashoffset:0}}

/* detail + about */
.detail{padding:clamp(36px,6vw,72px) 0 90px}
.back{display:inline-flex;gap:8px;color:var(--muted);margin-bottom:22px;transition:color var(--d-fast),transform var(--d-med) var(--ease-out)}
.back:hover{color:var(--text);transform:translateX(-4px)}
.detail h1{margin:10px 0 12px;font-size:clamp(1.9rem,5vw,3.4rem);line-height:1.05;font-style:italic;font-weight:800;max-width:20ch}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:26px 0}
.facts div{background:var(--panel);padding:16px}
.facts dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:4px 0 0;font-weight:600}
.links{display:flex;flex-wrap:wrap;gap:12px}
.prose{max-width:68ch;color:var(--muted)}
.prose h2{color:var(--text);font-style:italic;margin:2em 0 .4em}
.site-footer{padding:0 var(--gutter) 40px}
.site-footer p{max-width:var(--max);margin:22px auto 0;color:var(--muted);font-size:.82rem}

@media (max-width:640px){
  nav a{padding:8px 8px}
  .toolbar{top:53px}
  .circuit{opacity:.5;width:110vw;right:-30%}
  .dd-btn{min-width:130px}
}
/* touch: no pointer-follow lighting, no tilt */
@media (hover:none),(pointer:coarse){.card::before{display:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  [data-reveal],[data-reveal]>*,.line>span,.hero .lede,.cta,.stats,.hero-bg,.hero-grid,.hero .mono.top{opacity:1!important;transform:none!important;clip-path:none!important}
  .circuit path,.empty path{stroke-dashoffset:0!important}
  .hero-light,.wipe{display:none}
}