/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   DEVICE FRAMES — pure CSS, no third-party mockup images (no licence to clear, sharp at any size).
   Owner, 2026-10-04: show the products the way Apple does, real screenshots inside a MacBook or a window.
   Screenshots live in assets/shots/ and are captured at 2x (scratchpad shoot.mjs / cdp.mjs).

   .mbp   a MacBook, dark finish to sit on the site's dark ground. The screen is 16:10.
   .osx   a macOS window: traffic lights, 12px corners.
   .w11   a Windows 11 window: caption buttons on the right, 8px corners.
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */

.mbp{position:relative;width:min(86%,1000px);margin:0 auto}
.mbp-lid{position:relative;padding:2% 2% 2.4%;border-radius:22px 22px 0 0;background:#0a0a0b;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 0 0 1.5px #4a4b51,0 0 0 3px #1a1b1e,0 60px 140px -50px rgba(0,0,0,.9)}
/* a faint diagonal sheen across the glass, the cue that reads as a real screen rather than a flat inset */
.mbp-screen::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 38%)}
.mbp-lid::before{content:"";position:absolute;z-index:2;top:2%;left:50%;transform:translateX(-50%);
  width:12%;height:3%;background:#0a0a0b;border-radius:0 0 9px 9px}
.mbp-screen{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:5px;background:#000}
.mbp-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.mbp-base{position:relative;height:clamp(10px,1.7vw,19px);margin:0 -7%;border-radius:2px 2px 50% 50% / 2px 2px 100% 100%;
  background:linear-gradient(#55575d 0,#2c2d31 40%,#17181b 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.mbp-base::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:14%;height:42%;
  border-radius:0 0 10px 10px;background:linear-gradient(#1f2023,#3b3c41)}

.osx,.w11{position:relative;overflow:hidden;background:#161618;
  box-shadow:0 0 0 1px rgba(255,255,255,.09),0 50px 130px -45px rgba(0,0,0,.9)}
.osx{border-radius:12px}
.w11{border-radius:8px}
.osx img,.w11 img{display:block;width:100%;height:auto}

.osx-bar{display:flex;align-items:center;gap:8px;height:30px;padding:0 13px;background:#202023;
  border-bottom:1px solid rgba(255,255,255,.05)}
.osx-bar i{width:12px;height:12px;border-radius:50%;background:#ff5f57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.25)}
.osx-bar i:nth-child(2){background:#febc2e}
.osx-bar i:nth-child(3){background:#28c840}
.osx-bar b{flex:1;text-align:center;margin-right:52px;font-size:12px;font-weight:500;color:#9a9aa0}

.w11-bar{display:flex;align-items:center;height:32px;background:#1d1d1f;border-bottom:1px solid rgba(255,255,255,.05)}
.w11-bar b{flex:1;padding-left:14px;font-size:12px;font-weight:400;color:#b8b8bd}
.w11-bar span{display:grid;place-items:center;width:46px;height:32px;color:#d8d8dc}
.w11-bar svg{width:10px;height:10px}

/* A window with NO title bar (owner: «у нас нет рамки под светофором»). SyncLab and the hub draw their own
   content up to the top edge and the macOS traffic lights sit over it, so the frame must not add a strip. */
/* The lights scale with the window (macOS draws them 12pt in a window 1280pt wide), so on a phone, where the
   screenshot shrinks to a third, they shrink with it instead of sitting on it like buttons. */
.osx.frameless{border-radius:12px;container-type:inline-size}
.osx-lights{position:absolute;z-index:2;top:max(5px,1.1cqw);left:max(6px,1.25cqw);display:flex;gap:max(3px,.62cqw)}
.osx-lights i{width:max(5px,.94cqw);height:max(5px,.94cqw);border-radius:50%;background:#ff5f57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.25)}
.osx-lights i:nth-child(2){background:#febc2e}
.osx-lights i:nth-child(3){background:#28c840}

/* ══ HERO MACBOOK — opens on load, wakes to a macOS desktop, then the CT Lab hub opens in a window ══════════
   Owner, 2026-10-04: «анимацию открывания макбука … на нём запускался хаб, хаб должен быть не на весь экран,
   надо добавить интерфейс макбучный, пару папок на рабочий стол». Second pass the same day: «по масштабированию
   сделай получше», «не надо прилепливать хаб к доку», «док поменьше … стандартных приложений макбуковских,
   премьер, давинчи … оставь хаб рядом с монтажками».
   Everything inside the screen is sized in container-query units (cqw = 1% of the screen width) and taken from a
   real 14-inch MacBook Pro, whose screen is 1512 points wide: menu bar 33pt = 2.2cqw, menu text 13pt = .86cqw,
   desktop icons 64pt = 4.2cqw, dock icons 44pt = 2.9cqw. The UI then reads at the size a person knows it at,
   and the whole desktop scales as one picture at any page width.
   States, added in order by the inline script on index.html: is-open → is-on → is-bounce → is-launched.

   Third pass («крышка вначале анимации вывернута вниз», «побыть 0,5 секунд закрытым», «изи ин изи аут»,
   «макбук про потолще»): the eye now sits level with the hinge, so the closed lid lies flat and shows only its
   front edge on top of the base, a closed laptop seen from the front, instead of folding down past the base as
   it did when the eye was above the machine. The perspective is a fixed multiple of the laptop's own width
   (the figure is the size container, --mbw below), chosen so the closed lid's front edge comes out exactly as wide as the
   base's front edge, which is where it physically sits. Every move eases in and out. */
.ap-shot-hub{container-type:inline-size}
/* The whole laptop has to be on the first screen, or the opening happens below the fold where nobody sees it:
   the width follows the window's height as well as its width (440px is what the nav, headline and lead take). */
.hmbp{--mbw:clamp(min(86cqw,560px),calc((100svh - 440px) * 1.5),min(86cqw,1000px));
  position:relative;width:var(--mbw);margin:0 auto;perspective:calc(var(--mbw) * 5.2);perspective-origin:50% 96%}
.hmbp-lid{position:relative;transform-style:preserve-3d;transform-origin:50% 100%;transform:rotateX(-90deg);
  transition:transform 2s cubic-bezier(.65,0,.35,1)}
.hmbp.is-open .hmbp-lid{transform:rotateX(0)}
/* The lid's top edge, perpendicular to it, which is what a closed lid shows from the front. It faces outward only
   (rotateY flips it, backface-visibility hides the inside), so once the lid rises above the eye it disappears the
   way a real edge does. It runs the lid's full width and the lid's corners are only slightly rounded, so while
   the lid rises the edge and the screen meet with nothing missing at the corners (owner, twice: «рисочки по
   сторонам», then «когда крышка закрыта то видно что кусков не хватает»). */
.hmbp-top{position:absolute;left:0;right:0;top:0;height:1.6%;transform-origin:50% 0;transform:rotateX(-90deg) rotateY(180deg);
  backface-visibility:hidden;border-radius:999px;background:linear-gradient(#6a6c72,#3a3b40 55%,#2a2b2f);transition:opacity .6s ease .7s}
.hmbp.is-open .hmbp-top{opacity:0}
.hmbp-face{position:relative;padding:1.6% 1.6% 2%;border-radius:.9% .9% 0 0 / 1.4% 1.4% 0 0;background:#0a0a0b;backface-visibility:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 0 0 1.5px #4a4b51,0 0 0 3px #1a1b1e,0 60px 140px -50px rgba(0,0,0,.9)}
.hmbp-back{position:absolute;inset:0;border-radius:.9% .9% 0 0 / 1.4% 1.4% 0 0;transform:rotateX(180deg);backface-visibility:hidden;
  background:linear-gradient(160deg,#4a4c52,#26272b 55%,#1b1c1f);box-shadow:0 0 0 1.5px #55575d;display:grid;place-items:center}
.hmbp-back span{font:600 clamp(18px,4vw,44px)/1 var(--font);letter-spacing:-.04em;color:rgba(255,255,255,.16)}
.hmbp .mbp-base{height:auto;aspect-ratio:36/1;margin:0 -7%;border-radius:.4% .4% 1.8% 1.8% / 8% 8% 62% 62%;
  background:linear-gradient(#64666c 0,#3a3b40 9%,#2b2c30 45%,#1d1e21 80%,#121315 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 26px 40px -24px rgba(0,0,0,.85)}
/* no thumb scoop on the hero laptop: from the front it read as a piece missing from the body */
.hmbp .mbp-base::before{display:none}

.hmbp-screen{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:6px;background:#000;container-type:inline-size}
/* the camera housing sits in the menu bar, as on every MacBook since 2021 */
.mac-notch{position:absolute;z-index:6;top:0;left:50%;width:12.5cqw;height:2.2cqw;transform:translateX(-50%);
  border-radius:0 0 .9cqw .9cqw;background:#000}
.hmbp-screen::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:7;
  background:linear-gradient(115deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 38%)}

.mac-desk{position:absolute;inset:0;opacity:0;transition:opacity 1.6s cubic-bezier(.45,0,.55,1);
  background:
    radial-gradient(60% 70% at 18% 92%,rgba(79,124,255,.55),transparent 70%),
    radial-gradient(55% 60% at 88% 20%,rgba(45,212,191,.38),transparent 70%),
    radial-gradient(50% 55% at 62% 78%,rgba(196,77,255,.32),transparent 72%),
    linear-gradient(160deg,#0c1024,#0a0b14 55%,#120b1c)}
.hmbp.is-on .mac-desk{opacity:1}

.mac-menubar{position:absolute;z-index:4;top:0;left:0;right:0;height:2.2cqw;display:flex;align-items:center;gap:1.35cqw;
  padding:0 1.1cqw 0 1.4cqw;background:rgba(18,20,30,.38);backdrop-filter:blur(14px);color:#f2f2f5;font:500 .86cqw/1 var(--font)}
.mac-menubar b{font-weight:700}
.mac-menubar svg{width:.95cqw;height:.95cqw;fill:currentColor;flex:none}
.mac-menubar .mb-right{margin-left:auto;display:flex;align-items:center;gap:1.05cqw}
/* the menu bar names the frontmost app: Finder until the hub opens, then CT Lab */
.mb-app{display:grid}
.mb-app > span{grid-area:1/1;transition:opacity .5s cubic-bezier(.45,0,.55,1)}
.mb-app .mb-ct{opacity:0}
.hmbp.is-launched .mb-app .mb-ct{opacity:1}
.hmbp.is-launched .mb-app .mb-finder{opacity:0}

.mac-icons{position:absolute;top:3.4cqw;right:1.3cqw;display:flex;flex-direction:column;gap:1.3cqw;align-items:center}
.mac-folder{display:flex;flex-direction:column;align-items:center;gap:.35cqw;width:6.6cqw}
.mac-folder i{position:relative;width:4.2cqw;height:3.2cqw;border-radius:.35cqw;margin-top:.5cqw;
  background:linear-gradient(#80c4ff,#4392ea);box-shadow:0 .2cqw .6cqw rgba(0,0,0,.3)}
.mac-folder i::before{content:"";position:absolute;left:0;top:-.5cqw;width:1.8cqw;height:.75cqw;border-radius:.3cqw .3cqw 0 0;background:#5fa9f3}
.mac-folder span{font:500 .8cqw/1.25 var(--font);color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.75)}

/* The hub opens as an ordinary window in the upper middle of the desktop, clear of the dock, the way a launched
   app appears: a short fade and settle in place, not a stretch out of the dock icon. */
.mac-win{position:absolute;z-index:3;left:50%;top:6.6cqw;width:64cqw;border-radius:.8cqw;overflow:hidden;
  background:#0b0b0b;padding-top:2cqw;
  box-shadow:0 0 0 1px rgba(255,255,255,.13),0 1.6cqw 4.5cqw rgba(0,0,0,.55);
  transform:translate(-50%,1.4cqw) scale(.95);opacity:0;
  transition:transform .95s cubic-bezier(.65,0,.35,1),opacity .75s cubic-bezier(.45,0,.55,1)}
.hmbp.is-launched .mac-win{transform:translate(-50%,0) scale(1);opacity:1}
.mac-win img{display:block;width:100%;height:auto}
.mac-win .mac-lights{position:absolute;top:.62cqw;left:.85cqw;display:flex;gap:.5cqw}
.mac-win .mac-lights i{width:.78cqw;height:.78cqw;border-radius:50%;background:#ff5f57}
.mac-win .mac-lights i:nth-child(2){background:#febc2e}
.mac-win .mac-lights i:nth-child(3){background:#28c840}

.mac-dock{position:absolute;z-index:4;left:50%;bottom:.4cqw;transform:translateX(-50%);display:flex;align-items:flex-end;gap:.32cqw;
  padding:.4cqw .45cqw;border-radius:1.15cqw;background:rgba(255,255,255,.13);backdrop-filter:blur(16px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.mac-dock > span{position:relative;display:block;width:2.9cqw;height:2.9cqw}
.mac-dock img,.mac-dock svg{display:block;width:100%;height:100%;border-radius:.65cqw}
.mac-dock .sep{width:1px;height:2.9cqw;background:rgba(255,255,255,.25);margin:0 .2cqw}
/* running-app dot under the icon: Finder always, the hub once it has opened */
.mac-dock .run::after,.mac-dock .dock-hub::after{content:"";position:absolute;left:50%;bottom:-.33cqw;width:.24cqw;height:.24cqw;
  border-radius:50%;transform:translateX(-50%);background:rgba(255,255,255,.85)}
.mac-dock .dock-hub::after{opacity:0;transition:opacity .5s cubic-bezier(.45,0,.55,1)}
.hmbp.is-launched .mac-dock .dock-hub::after{opacity:1}
.hmbp.is-bounce .mac-dock .dock-hub{animation:dockBounce .7s 1}
@keyframes dockBounce{0%,100%{transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}50%{transform:translateY(-1.1cqw);animation-timing-function:cubic-bezier(.45,0,.55,1)}}

/* Drawn interfaces are pictures, not text: a press-and-drag on the Mac, its windows or a drawn app selected their
   labels like a paragraph (owner, 2026-10-11: «можно выделять текст а в окошке синклаба … надо убрать»). */
.hmbp,.mbp,.osx,.w11,.ap-shot{-webkit-user-select:none;user-select:none}