/* Fifty X — interaction layer (shared by all pages) */
.fx-progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:70;pointer-events:none;background:transparent}
.fx-progress b{display:block;height:100%;width:100%;background:var(--paper);transform-origin:0 50%;transform:scaleX(0)}

/* reveal on scroll — only active once fx.js has run (html.fx), so nothing is hidden without JS */
html.fx [data-rv]{opacity:0;transform:translate3d(0,22px,0);transition:opacity .75s ease,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms);will-change:opacity,transform}
html.fx [data-rv].in{opacity:1;transform:none}
html.fx [data-rv="x"]{transform:translate3d(-28px,0,0)}
@media (prefers-reduced-motion:reduce){html.fx [data-rv]{opacity:1;transform:none;transition:none}}

/* 3D tilt + cursor spotlight */
.fx-tilt{position:relative;transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;will-change:transform}
.fx-tilt.on{transition:transform .06s linear}
.fx-tilt::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.10),transparent 60%);z-index:3}
.light .fx-tilt::after,.fx-tilt.fx-light::after{background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(0,0,0,.06),transparent 60%)}
.fx-tilt:hover::after,.fx-tilt.on::after{opacity:1}
.fx-tilt>*{transform:translateZ(1px)}
a.fx-tilt,.fx-tilt a{backface-visibility:hidden}

/* image frames: scale on hover + a single sweeping plate line */
.fx-img{position:relative;overflow:hidden;display:block}
.fx-img img{display:block;transition:transform .9s cubic-bezier(.2,.8,.2,1),filter .6s}
.fx-img:hover img{transform:scale(1.045)}
.fx-img::before{content:"";position:absolute;left:0;right:0;top:-6%;height:3px;background:var(--paper);opacity:0;transform:translateY(-100%);pointer-events:none;z-index:2;mix-blend-mode:difference}
.fx-img:hover::before{animation:fx-scan 1.1s cubic-bezier(.4,0,.2,1) 1}
@keyframes fx-scan{0%{opacity:.9;transform:translateY(0)}100%{opacity:0;transform:translateY(calc(100% + 110vh))}}
.fx-img.fx-lb{cursor:zoom-in}

/* magnetic buttons */
.fx-mag{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.fx-mag.on{transition:transform .08s linear}

/* lightbox */
.fx-lbox{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;padding:clamp(16px,4vw,48px);opacity:0;pointer-events:none;transition:opacity .25s}
.fx-lbox.open{opacity:1;pointer-events:auto}
.fx-lbox img{max-width:min(100%,1400px);max-height:82vh;object-fit:contain;border:1px solid var(--hair-d);transform:scale(.97);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.fx-lbox.open img{transform:none}
.fx-lbox figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);text-align:center;max-width:70ch}
.fx-lbox button{position:absolute;top:18px;right:18px;background:none;border:1px solid var(--hair-d);color:var(--paper);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:10px 14px;cursor:pointer}
.fx-lbox button:hover{background:var(--paper);color:var(--ink)}

/* parts gallery (horizontal, snap) */
.fx-gallery{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:1px;background:var(--hair-d);border:1px solid var(--hair-d);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.fx-gallery::-webkit-scrollbar{display:none}
.fx-gallery figure{margin:0;background:var(--ink);scroll-snap-align:start;display:flex;flex-direction:column}
.fx-gallery .fx-img{aspect-ratio:3/4}
.fx-gallery .fx-img img{width:100%;height:100%;object-fit:cover}
.fx-gallery.wide .fx-img{aspect-ratio:4/3}
.fx-gallery figcaption{padding:14px 16px 16px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--hair-d)}
.fx-gallery figcaption b{color:var(--paper);font-weight:500}
.light .fx-gallery{background:var(--hair-l);border-color:var(--hair-l)}
.light .fx-gallery figure{background:var(--paper)}
.light .fx-gallery figcaption{border-color:var(--hair-l);color:var(--slate)}
.light .fx-gallery figcaption b{color:var(--ink)}

/* diptych: raw material → finished parts */
.fx-diptych{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair-d);border:1px solid var(--hair-d);margin-top:clamp(40px,5vw,64px)}
.fx-diptych figure{margin:0;background:var(--ink);position:relative}
.fx-diptych .fx-img{aspect-ratio:16/10}
.fx-diptych .fx-img img{width:100%;height:100%;object-fit:cover}
.fx-diptych figcaption{padding:16px 18px 18px;border-top:1px solid var(--hair-d)}
.fx-diptych .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-2)}
.fx-diptych .v{margin-top:6px;font-size:14.5px;line-height:1.55;color:var(--steel);max-width:48ch}
.fx-diptych .v b{color:var(--paper);font-weight:600}
.fx-diptych .arrow{position:absolute;left:-1px;top:50%;z-index:4;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--paper);color:var(--ink);display:grid;place-items:center;border:1px solid var(--hair-d)}
.fx-diptych .arrow svg{width:16px;height:16px}
.light .fx-diptych{background:var(--hair-l);border-color:var(--hair-l)}
.light .fx-diptych figure{background:var(--paper)}
.light .fx-diptych figcaption{border-color:var(--hair-l)}
.light .fx-diptych .k{color:var(--slate)}
.light .fx-diptych .v{color:var(--slate)}
.light .fx-diptych .v b{color:var(--ink)}
.light .fx-diptych .arrow{background:var(--ink);color:var(--paper)}
@media (max-width:760px){.fx-diptych{grid-template-columns:1fr}.fx-diptych .arrow{left:50%;top:-1px;transform:translate(-50%,-50%) rotate(90deg)}}

/* hero mark: plates separate under the cursor */
.hero-mark .plate{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.hero-mark.live .plate{transition:transform .18s ease-out}

/* ghost words drift with scroll */
.ghost{will-change:transform}

/* stat tick-up */
.fx-count{font-variant-numeric:tabular-nums}

/* FXT watermark on every photo */
.fx-wm{position:absolute;right:12px;bottom:10px;z-index:3;pointer-events:none;display:inline-flex;align-items:center;gap:6px;opacity:.55;color:#fff;mix-blend-mode:screen;font-family:var(--display);font-stretch:112.5%;font-weight:700;font-size:11px;letter-spacing:.22em;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.6);filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));transition:opacity .3s}
.fx-wm svg{width:14px;height:14px;fill:#fff;flex:none}
.fx-img:hover .fx-wm{opacity:.9}
.wallshot .fx-wm{display:none}
.hero-photo .fx-wm{bottom:auto;top:14px}
.mosaic>figure:first-child .fx-img,.trio figure:first-child .fx-img{flex:1;min-height:0}
.mosaic>figure:first-child .fx-img img,.trio figure:first-child .fx-img img{height:100%;width:100%;object-fit:cover}