/* ==========================================================================
   MOEDATECH  ·  home-v4 hero backgrounds            v4-hero.css   2026-09-10

   Replaces the collage on slides 2 and 3 with the two treatments the company
   approved: the bid-stream radar behind Moedatech APP, and the assembling
   machine field behind Moedatech OS.

   The old collage is hidden only once JS has actually built the replacement
   (it adds .v4hs-on). If the script fails to load, the previous slide is still
   there — nothing is ever left empty.
   ========================================================================== */

#showreel-hero .showreel-slide.v4hs-on .fragments,
#showreel-hero .showreel-slide.v4hs-on .osw,
#showreel-hero .showreel-slide.v4hs-on .os-video,
#showreel-hero .showreel-slide.v4hs-on .frag-bidflow { display: none !important; }

#showreel-hero .showreel-slide.v4hs-on .collage-plane::before,
#showreel-hero .showreel-slide.v4hs-on .collage-plane::after { display: none !important; }

/* the dotted grid and scattered tool glyphs are the plane's OWN background
   image (collage-grid.jpg), not a pseudo-element - hiding ::before is not
   enough, the image itself has to go. */
#showreel-hero .showreel-slide.v4hs-on .collage-plane { background-image: none !important; }

/* the OS slide is approved on cream, not on the terrain grey the map needed */
#showreel-hero .showreel-slide.v4hs-on[data-tone="light"] .collage-plane {
  background: #f3efea !important;
}

/* the scene host. container-type makes cqw resolve against the slide, which is
   what every measurement in the approved design is written in. */
.v4hs {
  position: absolute; inset: 0;
  container-type: inline-size;
  overflow: hidden;
}
.v4hs .scene { position: absolute; inset: 0; }
.v4hs > .scene > canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}

/* ==========================================================================
   THE HANDSET — iPhone 17 Pro, built to Apple's own numbers

   Every dimension below is a real iOS point, taken from the Apple iOS 27 UI
   Kit rather than eyeballed:

     screen            402 x 874 pt, 62 pt corner radius
     status bar        62 pt tall, contents 13 pt
     Dynamic Island    125 x 37 pt
     tab bar           a FLOATING 346 x 62 capsule, not a full-width bar —
                       this is the iOS 26/27 change, and content runs under it
     home indicator    140 x 5 pt, 8 pt from the bottom
     type              SF Pro: Title1 28, Subheadline 15, Footnote 13,
                       Caption1 12, Caption2 11
     colour            Backgrounds Dark #000 / #1C1C1E, Labels Dark
                       #FFF / #EBEBF5 60% / 30%, Separator #FFF 12%,
                       Fill Tertiary #767680 24%

   --pt converts one iOS point into stage units. The phone is 16cqw wide and
   the screen sits .47cqw inside it, so the screen is 15.06cqw across:
   15.06 / 402 = .037463. Change the phone width and this number changes too.

   The one deliberate departure from stock iOS is the tint: our orange
   replaces systemBlue, and it appears exactly twice.
   ========================================================================== */

.ghost-phone {
  position: absolute;
  border-radius: calc(2.79cqw * var(--k, 1));
  background: linear-gradient(148deg,
    #7d8085 0%, #eaedf0 11%, #6a6d71 26%, #d0d5da 45%,
    #5b5e62 62%, #e3e7eb 81%, #73767a 100%);
  box-shadow: 0 calc(2.8cqw * var(--k, 1)) calc(7.5cqw * var(--k, 1)) rgba(0,0,0,.66), 0 calc(.5cqw * var(--k, 1)) calc(1.6cqw * var(--k, 1)) rgba(0,0,0,.45);
}
.ghost-phone::before {
  content: ""; position: absolute; inset: calc(.30cqw * var(--k, 1));
  border-radius: calc(2.49cqw * var(--k, 1)); background: #060708;
}

/* Action + volume left, power and Camera Control right */
.pbtn {
  position: absolute; width: calc(.24cqw * var(--k, 1)); border-radius: calc(.10cqw * var(--k, 1));
  background: linear-gradient(90deg, #626569, #c9ced3 46%, #6d7074);
}
.pbtn.l { left: calc(-.11cqw * var(--k, 1)); }
.pbtn.r { right: calc(-.11cqw * var(--k, 1)); }
.pbtn.act { top: 15.5%; height: 4.2%; }
.pbtn.vup { top: 23.4%; height: 6.6%; }
.pbtn.vdn { top: 32.0%; height: 6.6%; }
.pbtn.pwr { top: 25.0%; height: 9.4%; }
.pbtn.cam { top: 39.6%; height: 5.4%; width: calc(.28cqw * var(--k, 1)); }

.pscr {
  --pt: calc(.037463cqw * var(--k, 1));
  --label:  #ffffff;
  --label2: rgba(235,235,245,.60);
  --label3: rgba(235,235,245,.30);
  --sep:    rgba(255,255,255,.12);
  --fill3:  rgba(118,118,128,.24);
  --card:   #1c1c1e;
  --tint:   #e65d00;

  position: absolute; inset: calc(.47cqw * var(--k, 1));
  border-radius: calc(var(--pt) * 62);
  /* Apple dark base is #000; lifted two points so the Island still reads */
  background: #0a0a0c;
  color: var(--label);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
               system-ui, sans-serif;
  overflow: hidden;
}
/* one light raking across the glass */
.pscr::after {
  content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(122deg,
    rgba(255,255,255,.055) 0%, rgba(255,255,255,.022) 17%, rgba(255,255,255,0) 33%);
}

.island {
  position: absolute; z-index: 6;
  top: calc(var(--pt) * 11); left: 50%; transform: translateX(-50%);
  width: calc(var(--pt) * 125); height: calc(var(--pt) * 37);
  border-radius: 999px; background: #000;
}

/* ---- status bar: 402 x 62 ------------------------------------------------ */
.pbar {
  height: calc(var(--pt) * 62);
  padding: 0 calc(var(--pt) * 24);
  display: flex; align-items: center; justify-content: space-between;
  font-size: calc(var(--pt) * 15); font-weight: 600; letter-spacing: -.01em;
}
.pbar .batt {
  width: calc(var(--pt) * 27); height: calc(var(--pt) * 13);
  border-radius: calc(var(--pt) * 4);
  border: 1px solid var(--label3); position: relative;
}
.pbar .batt::after {
  content: ""; position: absolute; inset: calc(var(--pt) * 2);
  width: 62%; border-radius: calc(var(--pt) * 2); background: var(--label);
}

/* ---- the role picker, 2026-09-13 -----------------------------------------
   The app's real first screen: Rentee or Supplier. Colours are sampled from
   the company's own screenshots (EN + AR). Those are 1078 px across a 402 pt
   screen, so every measured px figure below was divided by 2.68.

   Layout is the app's own zig-zag: the first card has its icon at the START,
   the second at the END. Written in logical order, so dir="rtl" on the screen
   produces the Arabic screenshot with no extra rules.

   The gap between the logo and the first card is shortened from ~132 pt to
   26 pt so both cards sit in the part of the handset that shows above the
   fold. Nothing else is moved.                                              */

.pscr.roles {
  -webkit-text-size-adjust: none; text-size-adjust: none;
  --navy:   #1d3551;
  --card2:  #22374c;
  --line:   #3e526a;
  --muted:  #889bac;
  --blue:   #3a76f0;
  --green:  #11936d;
  background:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px) 0 0 / calc(var(--pt) * 28) calc(var(--pt) * 28),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px) 0 0 / calc(var(--pt) * 28) calc(var(--pt) * 28),
    var(--navy);
}
.pscr.roles[dir="rtl"] {
  font-family: "SF Arabic", "Geeza Pro", -apple-system, "Segoe UI", Tahoma, sans-serif;
}
/* Arabic letterforms read about a size smaller than Latin at the same px */
.pscr.roles[dir="rtl"] .prole-txt b { font-size: calc(var(--pt) * 24); }
.pscr.roles[dir="rtl"] .prole-txt i { font-size: calc(var(--pt) * 15.5); }
.pscr.roles[dir="rtl"] .prole-txt u { font-size: calc(var(--pt) * 15); }
.pscr.roles[dir="rtl"] .prole-or   { font-size: calc(var(--pt) * 13.5); }

/* ---- iOS status bar, 402 x 62 pt ---------------------------------------
   Apple's layout: the Dynamic Island (125 pt) sits in the middle and splits
   the bar into two "ears"; the time is centred in one, the cellular bars,
   network label and battery in the other, all on the Island's midline.
   Glyph sizes from the iOS UI Kit: time 17 pt semibold, signal 18 x 12,
   battery 27 x 13 with its outline at 35% white. */
.sbar {
  position: relative; z-index: 5;
  height: calc(var(--pt) * 62);
  display: grid; grid-template-columns: 1fr calc(var(--pt) * 125) 1fr;
  align-items: start;
  padding-top: calc(var(--pt) * 18.5);
  box-sizing: border-box;
  color: #fff;
}
.sb-ear {
  height: calc(var(--pt) * 22);
  display: flex; align-items: center; justify-content: center;
}
.sb-time {
  font-family: -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif;
  font-size: calc(var(--pt) * 17); font-weight: 600; letter-spacing: -.02em;
  direction: ltr;
  padding-inline-start: calc(var(--pt) * 10);
}
.sb-right { gap: calc(var(--pt) * 5.5); direction: ltr; padding-inline-end: calc(var(--pt) * 8); }
.sb-signal { width: calc(var(--pt) * 18); height: calc(var(--pt) * 12); fill: #fff; display: block; flex: none; }
.sb-5g {
  font-family: -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif;
  font-size: calc(var(--pt) * 15); font-weight: 600; letter-spacing: -.01em;
  line-height: 1;
}
.sb-batt { width: calc(var(--pt) * 27); height: calc(var(--pt) * 13); display: block; flex: none; }
.sb-batt .sb-shell { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 1; }
.sb-batt .sb-level { fill: #fff; }
.sb-batt .sb-cap   { fill: rgba(255,255,255,.4); }

.prole { position: relative; padding: 0 calc(var(--pt) * 25); }

.prole-top {
  position: relative; height: calc(var(--pt) * 68);
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: calc(var(--pt) * 2);
}
.prole-logo {
  width: calc(var(--pt) * 64); height: calc(var(--pt) * 64);
  border-radius: calc(var(--pt) * 16);
  background: #2a4057; border: 1px solid rgba(255,255,255,.09);
  display: grid; place-items: center;
}
.prole-logo svg { width: calc(var(--pt) * 40); height: auto; display: block; }
.prole-globe {
  position: absolute; top: calc(var(--pt) * 6); inset-inline-end: 0;
  width: calc(var(--pt) * 21); height: calc(var(--pt) * 21); color: #6d8faa;
}

.prole-card {
  margin-top: calc(var(--pt) * 26);
  height: calc(var(--pt) * 142);
  box-sizing: border-box;
  border-radius: calc(var(--pt) * 22);
  background: var(--card2); border: 1px solid var(--line);
  padding: 0 calc(var(--pt) * 20);
  display: flex; align-items: center; gap: calc(var(--pt) * 14);
}
.prole-card + .prole-or + .prole-card { margin-top: 0; }

.prole-tile {
  flex: none; width: calc(var(--pt) * 70); height: calc(var(--pt) * 70);
  border-radius: calc(var(--pt) * 17);
  display: grid; place-items: center; color: #fff;
}
.prole-tile svg { width: calc(var(--pt) * 26); height: calc(var(--pt) * 26); display: block; }
.prole-tile.blue  { background: #244081; border: 1px solid #2d55b0; }
.prole-tile.green { background: #1f4351; border: 1px solid #1d6a5a; }

.prole-txt {
  flex: 1; min-width: 0; align-self: flex-start;
  padding-top: calc(var(--pt) * 17);
}
.prole-card.end .prole-txt { text-align: end; }
.prole-txt b {
  display: block; font-size: calc(var(--pt) * 22); font-weight: 700;
  letter-spacing: -.01em; line-height: 1.2; color: #fff;
}
.prole-txt i {
  display: block; font-style: normal; margin-top: calc(var(--pt) * 6);
  font-size: calc(var(--pt) * 14); line-height: 1.45; color: var(--muted);
}
.prole-txt u {
  display: inline-flex; align-items: center; gap: calc(var(--pt) * 7);
  margin-top: calc(var(--pt) * 9);
  font-size: calc(var(--pt) * 13.5); font-weight: 600; color: #4a86e8;
  text-decoration: underline; text-underline-offset: .18em;
}
.prole-txt u svg { width: calc(var(--pt) * 16); height: calc(var(--pt) * 16); flex: none; }

.prole-go {
  flex: none; width: calc(var(--pt) * 35); height: calc(var(--pt) * 35);
  border-radius: 50%; display: grid; place-items: center; color: #fff;
}
.prole-go svg { width: calc(var(--pt) * 15); height: calc(var(--pt) * 15); display: block; }
.prole-go.blue  { background: var(--blue); }
.prole-go.green { background: var(--green); }
.pscr.roles[dir="rtl"] .prole-go svg { transform: scaleX(-1); }

.prole-or {
  display: flex; align-items: center; gap: calc(var(--pt) * 12);
  height: calc(var(--pt) * 46);
  font-size: calc(var(--pt) * 12); color: #7f93a8;
}
.prole-or::before, .prole-or::after { content: ""; flex: 1; height: 1px; background: #3d526f; }

.pscr.roles .phome {
  position: absolute; z-index: 7;
  bottom: calc(var(--pt) * 8); left: 50%; transform: translateX(-50%);
  width: calc(var(--pt) * 140); height: calc(var(--pt) * 5);
  border-radius: 999px; background: #fff;
}