/* Duck Mockups · מסגרת מחשב נייד (יחס 16:10) ופלאפון גנרי.
   ── הסקין: כל הצבעים, המעברים, הקווים והצללים — כאן בלבד. הגיאומטריה למטה לא נוגעת בצבע.
   "בלי קו" = 0 0 0 0 transparent (לא none — הם מצטרפים לרשימת צללים). */
.duck-mockup {
  --dev-body: linear-gradient(#e4e6e7, #cfd2d4);      /* מכסה המחשב */
  --dev-ring: 0 0 0 1px #c2c5c8;                      /* קו מתאר דק סביב המכסה והפלאפון */
  --dev-bezel: #1c1d1f;                               /* המסגרת סביב המסך */
  --dev-screen: #fff;                                 /* רקע המסך לפני שהתמונה נטענת */
  --dev-hinge: linear-gradient(#9a9ea2, #b9bdc0);
  --dev-base: linear-gradient(#eef0f1, #d6d9db 55%, #b7bbbe);
  --dev-base-edge: 0 1px 0 #a9adb1;                   /* קו תחתון של הבסיס */
  --dev-shadow: 0 20px 24px -14px rgba(0, 0, 0, .28); /* צל המחשב */
  --dev-phone-body: #1c1d1f;                          /* גוף ומסגרת הפלאפון */
  --dev-phone-shadow: 0 24px 30px -14px rgba(0, 0, 0, .35);
  --dev-cam: #000;
}

.duck-mockup {
  display: block;
  position: relative;
  inline-size: 100%;
  aspect-ratio: 10 / 7.4;
  container-type: size;
  box-sizing: border-box;
}
.duck-mockup[data-device="phone"] { aspect-ratio: 9 / 16; }
.duck-mockup *, .duck-mockup *::before, .duck-mockup *::after { box-sizing: border-box; }

.dm-fit {
  inline-size: 100%;
  block-size: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* המסך — משותף */
.dm-scr { position: relative; overflow: hidden; background: var(--dev-screen); }
/* מצב שקפים: כל השקפים זה על זה, ומתחלפים בשקיפות */
.dm-scr[data-slides] .dm-track { inset: 0; }
.dm-track img.dm-slide { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; background: #111; }
/* אזור קבוע מהעמוד (תפריט צד): הקואורדינטות פיזיות כי הן מתוך צילום המקור */
.dm-sticky { position: absolute; z-index: 1; display: block; pointer-events: none; }
.dm-track {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transform-origin: 50% 0;
}
.dm-track img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-inline-size: none;
  user-select: none;
}

/* המחשב — גיאומטריה סימטרית, נעולה */
.dm-lap {
  --w: min(88cqw, 84cqh * 1.42);
  inline-size: var(--w);
  flex: none;
  direction: ltr;
}
.dm-lid {
  background: var(--dev-body);
  padding: calc(var(--w) * .005);
  border-start-start-radius: calc(var(--w) * .013);
  border-start-end-radius: calc(var(--w) * .013);
  border-end-start-radius: 2px;
  border-end-end-radius: 2px;
  box-shadow: var(--dev-ring);
}
.dm-bez {
  background: var(--dev-bezel);
  padding-block: calc(var(--w) * .03) calc(var(--w) * .05);
  padding-inline: calc(var(--w) * .03);
  border-start-start-radius: calc(var(--w) * .01);
  border-start-end-radius: calc(var(--w) * .01);
  border-end-start-radius: 1px;
  border-end-end-radius: 1px;
}
.dm-lap .dm-scr { aspect-ratio: 16 / 10; }
.dm-hinge {
  block-size: calc(var(--w) * .007);
  margin-inline: 2px;
  background: var(--dev-hinge);
}
.dm-base {
  block-size: calc(var(--w) * .02);
  margin-inline: calc(var(--w) * -.047);
  background: var(--dev-base);
  border-start-start-radius: 1px;
  border-start-end-radius: 1px;
  border-end-start-radius: calc(var(--w) * .012);
  border-end-end-radius: calc(var(--w) * .012);
  box-shadow: var(--dev-base-edge), var(--dev-shadow);
}

/* הפלאפון — אנדרואיד גנרי. כל המידות לפי הגובה ‎--h: מסגרת 1.8%, פינות 7.5%, מצלמה עגולה */
.dm-phone {
  --h: min(88cqh, 86cqw / .48145);
  position: relative;
  block-size: var(--h);
  inline-size: calc(var(--h) * .48145);
  flex: none;
  direction: ltr;
  padding: calc(var(--h) * .018);
  background: var(--dev-phone-body);
  border-radius: calc(var(--h) * .075);
  box-shadow: var(--dev-ring), var(--dev-phone-shadow);
}
.dm-phone .dm-scr { inline-size: 100%; aspect-ratio: 390 / 844; border-radius: calc(var(--h) * .058); }
.dm-cam {
  position: absolute;
  z-index: 2;
  inset-block-start: calc(var(--h) * .035);
  inset-inline: 0;
  margin-inline: auto;
  inline-size: calc(var(--h) * .022);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--dev-cam);
}

/* קומבו — הפלאפון חופף לפינה השמאלית-תחתונה של המחשב. ‎--w הוא רוחב המחשב */
.duck-mockup[data-device="combo"] { aspect-ratio: 16 / 10.4; }
.dm-combo {
  --w: min(88cqw / 1.162, 86cqh / .7205);
  position: relative;
  inline-size: calc(var(--w) * 1.162);
  block-size: calc(var(--w) * .7205);
  flex: none;
  direction: ltr;
}
.dm-combo .dm-lap {
  --w: inherit;
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: calc(var(--w) * .047);
}
.dm-combo .dm-phone {
  --h: calc(var(--w) * .597);
  position: absolute;
  z-index: 2;
  inset-block-start: calc(var(--w) * .1235);
  inset-inline-start: 0;
}