/* Projects page upgrade: 3D project explorer, unified project grid, mechanism spotlight.
   Loaded only by projects.html. Shared tokens come from theme.css / home.css. */
.projects{--px-ease:cubic-bezier(.22,.8,.24,1);--px-navy:#0B1622;--px-sky:#9BEBFF}
#films:empty{display:none}

/* ---------- Filter pills (dark + light variants) ---------- */
.px-filter{margin:0 0 30px}
.px-x .px-filter button{background:#ffffff0d;border-color:#ffffff2e;color:#e6eef6}
.px-x .px-filter button:hover{border-color:#4EAEFC;color:#fff;background:#4eaefc1f}
.px-x .px-filter button[aria-pressed=true]{color:#fff}

/* ---------- 3D project explorer ---------- */
.px-x{position:relative;background:var(--px-navy);color:#fff;overflow:hidden;isolation:isolate}
.px-x-glow{position:absolute;inset:-20% -10% auto;height:120%;z-index:-1;pointer-events:none;
  background:radial-gradient(48% 40% at 30% 42%,#016fc059,transparent 70%),radial-gradient(36% 30% at 82% 70%,#4eaefc2b,transparent 70%)}
.px-x::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent);mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent)}
.px-x .sec-head h2{color:#fff}
.px-x .sec-head h2 .accent{color:#4EAEFC}
.px-x .sec-head p{color:#a9bbcd}
.px-x .label{color:var(--px-sky)!important}

.px-x-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:stretch}
.px-stage{position:relative;min-height:540px;border-radius:28px;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  background:radial-gradient(70% 70% at 50% 38%,#fff 0%,#f1f6fb 48%,#d7e4f0 100%);
  box-shadow:0 50px 120px #000000a0,0 0 0 1px #ffffff26 inset;perspective:1500px;perspective-origin:50% 42%;outline:none}
.px-stage:focus-visible{box-shadow:0 50px 120px #000000a0,0 0 0 3px #4EAEFC}
.px-stage.is-drag{cursor:grabbing}
.px-floor{position:absolute;left:-30%;right:-30%;bottom:-6%;height:58%;pointer-events:none;transform:perspective(700px) rotateX(64deg);transform-origin:50% 100%;
  background-image:linear-gradient(#016fc01c 1px,transparent 1px),linear-gradient(90deg,#016fc01c 1px,transparent 1px);background-size:46px 46px;
  -webkit-mask-image:linear-gradient(transparent,#000 55%);mask-image:linear-gradient(transparent,#000 55%)}
.px-floor::after{content:"";position:absolute;left:50%;top:34%;width:44%;height:36%;margin-left:-22%;border-radius:50%;
  background:radial-gradient(closest-side,#0b16224d,#0b16221a 60%,transparent);transform:translateX(var(--shx,0px)) scaleX(var(--shs,1));transition:transform .5s var(--px-ease)}
.px-rig{position:absolute;inset:9% 9% 15%;transform-style:preserve-3d;transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg))}
.px-view{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none;backface-visibility:hidden;
  filter:drop-shadow(0 26px 26px #0b16222e) drop-shadow(0 4px 6px #0b16221f);opacity:0;transform-origin:50% 60%}
.px-view.is-on{opacity:1}
.js .px-view{will-change:transform,opacity}
.px-rig.is-swap .px-view{transition:opacity .35s,transform .45s var(--px-ease)!important}
.px-rig.is-swap{animation:pxSwap .7s var(--px-ease)}
@keyframes pxSwap{0%{opacity:0;transform:rotateX(var(--tx,0deg)) rotateY(calc(var(--ty,0deg) - 26deg)) scale(.9)}}
.px-hud{position:absolute;left:18px;right:18px;top:16px;display:flex;justify-content:space-between;align-items:center;pointer-events:none;font:600 12px Inter,sans-serif;letter-spacing:.06em;color:#0b1622}
.px-count{background:#ffffffd9;border:1px solid #0b16221a;border-radius:999px;padding:6px 12px;font-variant-numeric:tabular-nums;box-shadow:0 6px 18px #0b162214}
.px-hint{display:flex;align-items:center;gap:8px;background:#0b1622;color:#fff;border-radius:999px;padding:6px 12px 6px 8px;transition:opacity .4s}
.px-hint i{position:relative;width:26px;height:12px;border-radius:6px;background:#ffffff26}
.px-hint i::after{content:"";position:absolute;top:2px;left:2px;width:8px;height:8px;border-radius:50%;background:#4EAEFC;animation:pxHint 1.8s var(--px-ease) infinite}
@keyframes pxHint{50%{transform:translateX(14px)}}
.px-stage.is-touched .px-hint{opacity:0}
.px-scrub{position:absolute;left:50%;bottom:18px;width:min(260px,50%);height:4px;margin-left:min(-130px,-25%);border-radius:4px;background:#0b16221a;overflow:hidden}
.px-scrub span{position:absolute;inset:0 auto 0 0;width:var(--seg,100%);transform:translateX(var(--pos,0%));border-radius:4px;background:linear-gradient(90deg,#4EAEFC,#016FC0)}

.px-panel{display:flex;flex-direction:column;gap:14px;min-width:0;padding:30px;border-radius:28px;background:linear-gradient(180deg,#ffffff12,#ffffff06);border:1px solid #ffffff1f}
.px-panel>*{margin:0}
.px-cat{font:700 12px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--px-sky)}
.px-name{font-size:clamp(23px,2.1vw,30px);line-height:1.15;color:#fff;letter-spacing:-.01em}
.px-name small{display:block;margin-top:8px;font-size:15px;font-weight:500;color:#a9bbcd;letter-spacing:0}
.px-client{color:#cfe0ee;font-size:15px}
.px-client:empty,.px-desc:empty{display:none}
.px-client b{color:#fff}
.px-desc{color:#b9c8d6;font-size:15.5px;line-height:1.6}
.px-x .px-spec{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.px-x .px-spec div{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;padding:10px 12px}
.px-x .px-spec div:last-child:nth-child(odd){grid-column:1/-1}
.px-x .px-spec dt{color:#93a6ba;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.px-x .px-spec dd{color:#fff;margin:2px 0 0;font-weight:600;font-size:14px}
.px-panel.is-swap>.px-cat,.px-panel.is-swap>.px-name,.px-panel.is-swap>.px-client,.px-panel.is-swap>.px-desc,.px-panel.is-swap>.px-spec{animation:pxText .6s var(--px-ease) both}
.px-panel.is-swap>.px-name{animation-delay:50ms}.px-panel.is-swap>.px-desc,.px-panel.is-swap>.px-spec{animation-delay:100ms}
@keyframes pxText{from{opacity:0;transform:translateY(12px)}}
.px-views{display:flex;flex-wrap:wrap;gap:8px}
.px-views:empty{display:none}
.px-views button{width:58px;height:46px;padding:4px;border-radius:10px;border:1px solid #ffffff26;background:#eef4fa;cursor:pointer;transition:transform .3s var(--px-ease),box-shadow .3s,border-color .3s}
.px-views button img{width:100%;height:100%;object-fit:contain;display:block}
.px-views button:hover{transform:translateY(-3px)}
.px-views button[aria-current=true]{border-color:#4EAEFC;box-shadow:0 0 0 2px #4EAEFC,0 8px 20px #016fc066}
.px-ctrl{display:flex;align-items:center;gap:12px;margin-top:auto!important}
.px-ctrl button{width:44px;height:44px;border-radius:50%;border:1px solid #ffffff38;background:transparent;color:#fff;font-size:18px;cursor:pointer;transition:background .25s,border-color .25s,transform .25s}
.px-ctrl button:hover{background:#016FC0;border-color:#016FC0;transform:scale(1.06)}
.px-pos{font:600 13px Inter,sans-serif;color:#a9bbcd;font-variant-numeric:tabular-nums;letter-spacing:.06em}
.px-cta{align-self:flex-start}

.px-list{display:flex;gap:10px;overflow-x:auto;margin-top:22px;padding:4px 2px 12px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#ffffff33 transparent}
.px-list button{flex:0 0 196px;display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:14px;border:1px solid #ffffff1c;background:#ffffff08;color:#dfe8f1;text-align:left;cursor:pointer;scroll-snap-align:start;transition:border-color .3s,background .3s,transform .3s var(--px-ease)}
.px-list button:hover{border-color:#4eaefc80;transform:translateY(-2px)}
.px-list button[aria-current=true]{border-color:#4EAEFC;background:#016fc033;color:#fff}
.px-list button.is-hidden{display:none}
.px-list img{flex:none;width:52px;height:42px;object-fit:contain;border-radius:8px;background:#eef4fa;padding:3px}
.px-list span{font:600 12.5px/1.3 Inter,sans-serif;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- Unified project grid ---------- */
.px-card .px-fig{margin:0;aspect-ratio:4/3;display:grid;place-items:center;background:radial-gradient(80% 80% at 50% 40%,#fff,#eef3f8);border-bottom:1px solid var(--line);overflow:hidden}
.px-card .px-fig img{width:84%;height:84%;object-fit:contain}
.px-card .pj-top h3{font-size:16px;line-height:1.3}
.px-sub{margin:4px 0 0;color:var(--blue,#016FC0);font-size:13px;font-weight:600;line-height:1.35}
.px-card .pj-client{margin-top:6px}
.px-note{margin:10px 0 14px;color:var(--muted);font-size:13.5px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.px-card .pj-more{margin-top:auto}
.px-card .pj-body{display:flex;flex-direction:column;flex:1}
.projects .pj-grid .pj-card a{position:relative;transform-style:flat}
.projects .pj-grid .pj-card a::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),#4eaefc1f,transparent 45%)}
.projects .pj-grid .pj-card a.is-tilt{transition:transform .15s linear,box-shadow .4s,border-color .4s;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px)}
.projects .pj-grid .pj-card a.is-tilt::after{opacity:1}
.projects .pj-grid .pj-card a.is-tilt figure img{transform:translate(var(--mx,0px),var(--my,0px)) scale(1.07)}
.pj-card.px-pop{animation:pxPop .55s var(--px-ease) both;animation-delay:calc(var(--i,0)*35ms)}
@keyframes pxPop{from{opacity:0;transform:translateY(22px) scale(.96)}}
.px-flash a{box-shadow:0 0 0 3px #4EAEFC,0 22px 50px #016fc033!important}

/* ---------- Mechanism spotlight ---------- */
.px-mech{position:relative;background:linear-gradient(180deg,#0e1d2e,#0B1622);color:#fff;overflow:hidden}
.px-mech .sec-head h2{color:#fff}
.px-mech .sec-head h2 .accent{color:#4EAEFC}
.px-mech .sec-head p{color:#a9bbcd}
.px-mech .label{color:var(--px-sky)!important}
.px-mech-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;perspective:1400px}
.px-mc:first-child{grid-column:span 2}
.px-mc a{display:flex;flex-direction:column;height:100%;padding:14px 14px 20px;border-radius:22px;background:linear-gradient(180deg,#ffffff10,#ffffff05);border:1px solid #ffffff1a;color:#fff;text-decoration:none;transition:border-color .4s,transform .45s var(--px-ease),background .4s}
.px-mc a:hover{border-color:#4eaefc8c;background:linear-gradient(180deg,#016fc033,#ffffff05);transform:translateY(-6px)}
.px-mc-fig{position:relative;aspect-ratio:4/3;border-radius:16px;background:radial-gradient(80% 80% at 50% 40%,#fff,#dde8f2);display:grid;place-items:center;overflow:hidden;margin-bottom:16px}
.px-mc:first-child .px-mc-fig{aspect-ratio:16/9}
.px-mc-fig img{width:82%;height:82%;object-fit:contain;transition:transform .7s var(--px-ease)}
.px-mc a:hover .px-mc-fig img{transform:scale(1.07) rotate(-1.5deg)}
.px-ico{position:absolute;right:10px;bottom:10px;width:52px;height:52px;padding:8px;border-radius:50%;background:#016FC0;color:#fff;box-shadow:0 10px 24px #016fc066}
.px-mc-tag{font:700 11px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--px-sky);margin:0 4px}
.px-mc h3{color:#fff;font-size:19px;line-height:1.25;margin:8px 4px 6px}
.px-mc p{color:#a9bbcd;font-size:14px;line-height:1.55;margin:0 4px 14px}
.px-mc .pj-more{margin:auto 4px 0;color:#4EAEFC;font-weight:600;font-size:14px}
.px-mc .pj-more span{display:inline-block;transition:transform .3s}
.px-mc a:hover .pj-more span{transform:translateX(5px)}
.js .px-mc{opacity:0;transform:translateY(46px) rotateX(14deg);clip-path:inset(0 0 35% 0 round 22px);
  transition:opacity .8s var(--px-ease),transform .9s var(--px-ease),clip-path 1s var(--px-ease);transition-delay:calc(var(--k)*90ms)}
.js .px-mech-strip.is-in .px-mc{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 22px)}
/* icon motion (runs once the strip is in view) */
.px-ico *{transform-box:fill-box;transform-origin:center}
.is-in .px-ico .i-spin{animation:pxSpin 5s linear infinite}
.is-in .px-ico .i-slow{animation-duration:12s}
.is-in .px-ico .i-slide{animation:pxSlide 2.4s var(--px-ease) infinite alternate}
.is-in .px-ico .i-dash{stroke-dasharray:9 5;animation:pxDash 1.4s linear infinite}
.px-ico .i-swing{transform-box:view-box;transform-origin:62px 62px}
.is-in .px-ico .i-swing{animation:pxSwing 2.6s var(--px-ease) infinite alternate}
.is-in .px-ico .i-up{animation:pxUp 2.6s var(--px-ease) infinite alternate}
.is-in .px-ico .i-down{animation:pxDown 2.6s var(--px-ease) infinite alternate}
@keyframes pxSpin{to{transform:rotate(360deg)}}
@keyframes pxSlide{to{transform:translateX(-6px)}}
@keyframes pxDash{to{stroke-dashoffset:-28}}
@keyframes pxSwing{to{transform:rotate(-38deg)}}
@keyframes pxUp{to{transform:translateY(32px)}}
@keyframes pxDown{to{transform:translateY(-32px)}}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .px-x-grid{grid-template-columns:minmax(0,1fr) 330px}
  .px-mech-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .px-mc:first-child{grid-column:1/-1}
}
@media (max-width:860px){
  .px-x-grid{grid-template-columns:minmax(0,1fr)}
  .px-stage{min-height:0;aspect-ratio:1/1;max-height:72vh;width:100%}
  .px-panel{padding:22px}
  .px-ctrl{margin-top:4px!important}
}
@media (max-width:600px){
  .px-x .px-filter,.px-filter{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;margin:0 -24px 20px;padding:4px 24px;scrollbar-width:none}
  .px-filter::-webkit-scrollbar{display:none}
  .px-filter button{flex:none}
  .px-stage{aspect-ratio:1/1.02;border-radius:20px}
  .px-rig{inset:13% 4% 13%}
  .px-hud{left:12px;right:12px;top:12px;font-size:11px}
  .px-scrub{bottom:12px}
  .px-panel{border-radius:20px;padding:20px;gap:12px}
  .px-desc{font-size:14.5px}
  .px-views button{width:50px;height:40px}
  .px-cta{align-self:stretch;justify-content:center;text-align:center}
  .px-list{margin:16px -24px 0;padding:4px 24px 10px;scroll-padding-inline:24px;scrollbar-width:none}
  .px-list::-webkit-scrollbar{display:none}
  .px-list button{flex-basis:160px}
  .px-card .pj-top{flex-direction:column;align-items:flex-start;gap:6px}
  .px-card .pj-top h3{font-size:14px}
  .px-sub{font-size:11.5px}
  .px-note{font-size:12px;-webkit-line-clamp:3;margin:8px 0 10px}
  .px-card .pj-more{font-size:12px}
  .px-mech-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -24px;padding:6px 24px 18px;scroll-padding-inline:24px;scrollbar-width:none}
  .px-mech-strip::-webkit-scrollbar{display:none}
  .px-mc{flex:0 0 78%;scroll-snap-align:center}
  .px-mc:first-child .px-mc-fig{aspect-ratio:4/3}
  .js .px-mc{transform:translateY(30px);clip-path:none}
}
@media (prefers-reduced-motion:reduce){
  .px-rig.is-swap,.px-panel.is-swap>*,.pj-card.px-pop{animation:none!important}
  .px-view,.px-rig.is-swap .px-view{transition:none!important}
  .js .px-mc{opacity:1;transform:none;clip-path:none;transition:none}
  .px-ico *,.px-hint i::after{animation:none!important}
  .projects .pj-grid .pj-card a.is-tilt{transform:none}
}

/* ---------- Project films: poster marquee moving left to right, hover preview, player dialog ---------- */
.fm{overflow:hidden}
.fm-marquee{position:relative}
.fm-viewport{overflow:hidden;padding:18px 0 26px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.fm-track{display:flex;width:max-content;animation:fmRight var(--fm-dur,70s) linear infinite}
.fm-marquee:hover .fm-track,.fm-marquee:focus-within .fm-track,.fm-marquee.is-paused .fm-track{animation-play-state:paused}
.fm-set{display:flex;align-items:flex-start;gap:26px;margin:0;padding:0 26px 0 0;list-style:none;flex:none}
@keyframes fmRight{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
.fm-card{display:flex;flex-direction:column;width:340px;padding:0;border:0;background:none;font:inherit;text-align:left;color:inherit;cursor:pointer}
.fm-card.is-tall{width:272px}
.fm-media{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:16px;background:#0B1622;box-shadow:0 18px 40px -20px #0b162280;transition:transform .45s var(--px-ease),box-shadow .45s}
.fm-card.is-tall .fm-media{aspect-ratio:4/5}
.fm-media img,.fm-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fm-media video{opacity:0;transition:opacity .35s}
.fm-media.is-live video{opacity:1}
.fm-play{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:999px;background:#0b1622b3;color:#fff;font-size:13px;font-weight:600;backdrop-filter:blur(6px);transition:background .3s}
.fm-play svg{width:18px;height:18px;fill:#E5B85C}
.fm-card:hover .fm-media,.fm-card:focus-visible .fm-media{transform:translateY(-6px) scale(1.015);box-shadow:0 28px 54px -22px #016fc080}
.fm-card:hover .fm-play{background:#016FC0}
.fm-card:focus-visible{outline:none}
.fm-card:focus-visible .fm-media{outline:3px solid #016FC0;outline-offset:4px}
.fm-cap{display:block;margin-top:14px;padding:0 4px}
.fm-cap b{display:block;font-size:16px;color:#0B1622}
.fm-cap small{display:block;margin-top:4px;font-size:13px;line-height:1.45;color:#4b5563}
.fm-ctrl{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.fm-note{margin:0;font-size:13px;color:#6b7280}
.fm-dlg{width:min(92vw,560px);max-height:92vh;padding:0;border:0;border-radius:18px;background:#0B1622;color:#fff;overflow:hidden}
.fm-dlg::backdrop{background:#050b12d9;backdrop-filter:blur(4px)}
.fm-dlg video{display:block;width:100%;max-height:calc(92vh - 52px);background:#000}
.fm-dlg-t{margin:0;padding:14px 18px;font-weight:600;font-size:15px}
.fm-x{position:absolute;top:10px;right:10px;z-index:2;width:44px;height:44px;border:0;border-radius:50%;background:#0b1622b3;color:#fff;font-size:26px;line-height:1;cursor:pointer}
.fm-x:focus-visible{outline:3px solid #E5B85C}
@media (max-width:640px){.fm-card{width:260px}.fm-card.is-tall{width:208px}.fm-set{gap:16px;padding-right:16px}}
@media (prefers-reduced-motion:reduce){.fm-track{animation:none}.fm-viewport{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.fm-set[aria-hidden]{display:none}.fm-pause{display:none}}
.fm-pause{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:1px solid #016fc040;border-radius:999px;background:#fff;color:#0b4f86;font:600 13px/1 Inter,sans-serif;cursor:pointer;transition:background .25s,color .25s}
.fm-pause:hover{background:#016FC0;color:#fff}
.fm-pause:focus-visible{outline:3px solid #016FC0;outline-offset:3px}
.fm-pause svg{width:14px;height:14px;fill:currentColor}
.fm-pause .ic-play,.fm-marquee.is-paused .fm-pause .ic-pause{display:none}
.fm-marquee.is-paused .fm-pause .ic-play{display:block}