/* 64 — Everything it makes (builder B3). A typographic list on the left, one composed 3D still life on the right:
   the 4K frame, thumbnail options, the 9:16 Short and the publishing kit, layered in depth. Hover / focus / tap an item
   and its layer comes forward. Calm: the only motion is the layers settling in once. */
.mk{padding-block:clamp(72px,8vw,120px)}
.mk-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,80px);align-items:center}
.mk-list{margin-top:clamp(28px,3.5vw,44px);border-top:1px solid var(--line)}
.mk-item{position:relative;display:grid;gap:4px;padding:18px 0 18px 22px;border-bottom:1px solid var(--line);cursor:default;outline:none;
  transition:color .2s}
.mk-item::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:2px;border-radius:2px;background:var(--blue);
  transform:scaleY(0);transform-origin:50% 0;transition:transform .35s var(--e-out)}
.mk-item.is-on::before{transform:scaleY(1)}
.mk-item__t{font-size:clamp(20px,.7vw + 15px,25px);font-weight:600;letter-spacing:-.015em;line-height:1.25;color:var(--fg-2);transition:color .2s}
.mk-item__d{font-size:var(--t-small);color:var(--fg-3);line-height:1.5}
.mk-item.is-on .mk-item__t{color:var(--fg)}
.mk-item.is-on .mk-item__d{color:var(--fg-2)}
.mk-item:focus-visible{box-shadow:none}
.mk-item:focus-visible .mk-item__t{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;text-decoration-color:var(--blue-2)}

/* stage: everything sized in container units so the still life scales as one picture */
.mk-stage{position:relative;isolation:isolate;container-type:inline-size;aspect-ratio:1.12;perspective:2000px}
.mk-glow{position:absolute;inset:-10% -12%;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 46% at 52% 50%,rgba(59,99,255,.24),rgba(59,99,255,.06) 50%,transparent 72%)}
.mk-scene{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(-14deg) rotateX(7deg);transition:transform .9s var(--e-out)}
.mk-layer{position:absolute;transform-style:preserve-3d;
  transition:transform .7s var(--e-out),opacity .35s var(--e-io),filter .35s var(--e-io)}
.mk-stage.is-dim .mk-layer:not(.is-focus){opacity:.38;filter:saturate(.6)}
.mk-stage.is-dim .mk-layer.is-focus{--lift:46px}

.mk-video{left:2cqw;top:15cqw;width:70cqw;aspect-ratio:16/9;border-radius:2cqw;overflow:hidden;background:var(--bg-1);
  transform:translateZ(calc(0px + var(--lift,0px)));
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.2)}
.mk-video img{width:100%;height:100%;object-fit:cover}
.mk-video__ui{position:absolute;left:0;right:0;bottom:0;padding:5cqw 3cqw 2.4cqw;display:grid;gap:1.6cqw;
  background:linear-gradient(to top,rgba(5,6,10,.72),rgba(5,6,10,0))}
.mk-video__meta{font-size:clamp(11px,2.3cqw,15px);font-weight:600;color:var(--fg);letter-spacing:-.005em;text-shadow:0 1px 10px rgba(0,0,0,.4)}
.mk-video__bar{position:relative;height:2px;border-radius:2px;background:rgba(255,255,255,.22)}
.mk-video__bar i{position:absolute;left:0;top:0;bottom:0;width:62%;border-radius:2px;background:var(--blue);box-shadow:0 0 10px rgba(59,99,255,.8)}
.mk-video__bar i::after{content:"";position:absolute;right:-5px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#fff;
  box-shadow:0 0 10px rgba(120,150,255,.9)}

.mk-kit{left:31cqw;top:0;width:46cqw;padding:2.6cqw 2.8cqw;border-radius:2.4cqw;background-color:rgba(5,6,10,.38);display:grid;gap:1.8cqw;
  transform:translateZ(calc(70px + var(--lift,0px)))}
.mk-kit>*{position:relative;z-index:2}
.mk-kit__head{display:flex;justify-content:space-between;align-items:baseline;font-size:clamp(11px,2.2cqw,15px);font-weight:600;color:var(--fg)}
.mk-kit__ok{font-size:clamp(10px,1.9cqw,13px);font-weight:600;color:var(--blue-2)}
.mk-kit__title{display:grid;gap:.5cqw;padding:1.6cqw 0;border-block:1px solid var(--line-2)}
.mk-kit__l{font-size:clamp(10px,1.8cqw,12px);color:var(--fg-3)}
.mk-kit__v{font-size:clamp(12px,2.5cqw,17px);font-weight:600;letter-spacing:-.01em;line-height:1.25;color:var(--fg)}
.mk-kit__rows{display:flex;flex-wrap:wrap;gap:.6cqw 2.4cqw}
.mk-kit__row{display:inline-flex;align-items:center;gap:.8cqw;font-size:clamp(10px,2cqw,13px);color:var(--fg-2);white-space:nowrap}
.mk-kit__row svg{width:clamp(10px,2cqw,13px);height:auto;fill:none;stroke:var(--blue-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.mk-thumbs{left:3cqw;top:58cqw;width:60cqw;height:30cqw;transform:translateZ(calc(110px + var(--lift,0px)))}
.mk-thumb{position:absolute;width:31cqw;aspect-ratio:16/9;height:auto;object-fit:cover;border-radius:1.4cqw;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.14)}
.mk-thumb--a{left:0;top:3cqw;transform:rotate(-5deg)}
.mk-thumb--c{left:28cqw;top:3.4cqw;transform:rotate(4deg)}
.mk-thumb--b{left:14cqw;top:0;z-index:2;
  box-shadow:0 22px 50px -12px rgba(0,0,0,.8),0 0 0 1.5px var(--blue),0 0 24px rgba(59,99,255,.55)}

.mk-short{left:72cqw;top:27cqw;width:25cqw;aspect-ratio:9/16;border-radius:2.6cqw;overflow:hidden;background:#000;
  transform:translateZ(calc(150px + var(--lift,0px)));
  box-shadow:0 30px 70px -16px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.25)}
.mk-short video{width:100%;height:100%;object-fit:cover}

/* entrance: layers start gathered and settle into depth once (JS adds .is-in) */
.js-motion .mk-stage:not(.is-in) .mk-layer{transform:translate3d(0,14px,0) scale(.97)}
.js-motion .mk-stage:not(.is-in) .mk-scene{transform:rotateY(-4deg) rotateX(2deg)}
.mk-stage.is-in .mk-layer:nth-child(2){transition-delay:.06s}
.mk-stage.is-in .mk-layer:nth-child(3){transition-delay:.12s}
.mk-stage.is-in .mk-layer:nth-child(4){transition-delay:.18s}
.mk-stage.is-settled .mk-layer{transition-delay:0s}

@media (max-width:900px){
  .mk-grid{grid-template-columns:1fr;gap:0}
  .mk-copy{display:contents}
  .mk-title{order:2}
  .mk-stage{order:3;width:min(100%,560px);margin:clamp(36px,6vw,56px) auto 8px}
  .mk-list{order:4}
  .mk-scene{transform:rotateY(-10deg) rotateX(6deg)}
}
@media (max-width:733px){
  .mk-stage{aspect-ratio:1.1;perspective:1400px}
  .mk-list{margin-top:0}
  .mk-video{left:0;top:17cqw;width:76cqw}
  .mk-kit{left:30cqw;top:0;width:58cqw;padding:3.4cqw}
  .mk-short{left:70cqw;top:30cqw;width:29cqw}
  .mk-thumbs{left:5cqw;top:64cqw}
  .mk-scene{transform:rotateY(-8deg) rotateX(6deg)}
  .mk-thumb{width:38cqw}
  .mk-thumb--a{display:none}
  .mk-thumb--b{left:0}.mk-thumb--c{left:22cqw}
  .mk-kit{padding:3cqw 3.4cqw}
  .mk-kit__head,.mk-kit__v{font-size:14px}
  .mk-kit__l,.mk-kit__ok,.mk-kit__row,.mk-video__meta{font-size:12px}
  .mk-kit__row svg{width:12px}
  .mk-kit__rows{display:none}
  .mk-short{top:33cqw}
}

/* phones: cheaper to scroll — no filter transitions, single shadows, solid kit (no backdrop blur over the 3D stack) */
@media (max-width:733px){
  .mk-layer{transition:transform .6s var(--e-out),opacity .3s var(--e-io)}
  .mk-stage.is-dim .mk-layer:not(.is-focus){filter:none;opacity:.45}
  .mk-video{box-shadow:0 0 0 1px rgba(255,255,255,.12),0 24px 50px -24px rgba(0,0,0,.8)}
  .mk-short{box-shadow:0 0 0 1px rgba(255,255,255,.16),0 24px 50px -20px rgba(0,0,0,.8)}
  .mk-thumb{box-shadow:0 0 0 1px rgba(255,255,255,.14)}
  .mk-thumb--b{box-shadow:0 0 0 1.5px var(--blue)}
  .mk-kit{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(16,18,26,.94)!important}
  .mk-glow{inset:-6% 0}
}