/* ============================================================
   Dar Al Qiyas — the build film inside the v8.1 page (2026-10-07)
   ------------------------------------------------------------
   The owner: «اعتماد تصميم v8.1 على v10 · neon و v10 و v10 · 3D …
   الفيلم كاملاً بتنسيق v8.1». The page is v8.1 (css/site.css);
   its hero is the v10 scroll film (js/build.js, or the 3D page's
   js/build3d.min.js), dressed in v8.1's language: glass panels,
   round corners, Cairo, the night palette and v8.1's buttons.

   Loaded after tokens.css and site.css. Only v8.1 tokens are used.
   Two stages:
   - night (default): the Blender films, under a night header
   - .build--day: the 3D page's pale scene, under the light header
     (needs --b-bg from that page's own tokens.css)

   Sections: 0 roles · 1 stage · 2 hero · 3 overlay · 4 states ·
             5 phone · 6 the page around the film
   ============================================================ */

/* ---------------------------------------------------- 0 · roles */
.build{
  --fx-bg:var(--night);
  --fx-ink:var(--on-night);
  --fx-ink-2:var(--on-night-2);
  --fx-panel:var(--glass-shade);
  --fx-edge:var(--glass-edge);
  --fx-chip:var(--glass-night-2);
  --fx-signal:var(--accent);
  --fx-signal-ink:var(--accent-2);
  --fx-ring:var(--on-night);
  --fx-shadow:none;
  --fx-start:max(var(--gutter),calc((100% - var(--wrap)) / 2)); /* the wrap's reading edge */
  --build-len:13; /* matches the film's own length (0.7 + 11 stages + 1.3) */
  --build-step:48svh;
  position:relative;background:var(--fx-bg);color:var(--fx-ink);
}
.build--day{
  --fx-bg:var(--b-bg);
  --fx-ink:var(--ink);
  --fx-ink-2:var(--ink-2);
  --fx-panel:var(--glass-light);
  --fx-edge:var(--line);
  --fx-chip:var(--wash);
  --fx-signal-ink:var(--accent-ink);
  --fx-ring:var(--sheet);
  --fx-shadow:var(--shadow-1);
}
.film-data{display:none}

/* ---------------------------------------------------- 1 · stage */
/* the v8.1 header floats, so the stage takes the whole screen */
.build__track{position:relative}
.build__stage{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--fx-bg)}
canvas.build__canvas{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .5s var(--ease)}
/* the film's first and last frames as stills, cropped the way the film is */
.build__poster{position:absolute;inset:0;width:100%;height:100%}
.build__poster img,img.build__poster{width:100%;height:100%;object-fit:cover;object-position:30% 50%}
.build__poster--hero{display:none}                 /* no JS: the finished building */
.js .build__poster--final{display:none}            /* JS: the opening frame until the film draws */
.js .build__poster--hero{display:block}
.build--drawn .build__canvas{opacity:1}
.build--drawn .build__poster--hero{opacity:0;transition:opacity .5s var(--ease) .1s}
.build--still:not(.build--ready) .build__poster--final{display:block}
.build--still:not(.build--ready) .build__poster--hero{display:none}
/* the long, pinned track; the <head> script sets html.b-live */
.b-live .build__track{height:calc(var(--build-len) * var(--build-step) + 100svh)}
.b-live .build__stage{position:sticky;top:0}

/* ---------------------------------------------------- 2 · hero */
/* v8.1's hero (css/site.css §4) laid over the film's opening frame.
   The section is not .hero: that class clips overflow and would
   unpin the stage. */
.build__hero{position:relative;z-index:4;isolation:isolate;color:var(--fx-ink)}
.build__veil{position:absolute;inset:0;z-index:-1;pointer-events:none}
.build__hero .hero__copy{max-width:min(780px,56vw)}
@media (min-width:1024px){
  .build__hero{
    position:absolute;inset-block-start:0;inset-inline:0;min-height:100svh;
    display:flex;flex-direction:column;justify-content:flex-end;
    padding-block:calc(112px + 3vh) clamp(44px,7vh,80px);
  }
  .build__veil{background:var(--veil-top),var(--veil-hero)}
  .build__hero.is-gone{visibility:hidden}
}
/* a short laptop: the opening tightens to the screen */
@media (min-width:1024px) and (max-height:760px){
  .build__hero{padding-block:calc(92px + 2vh) 28px}
  .build__hero .hero__inner{gap:22px}
  .build__hero .hero__title{margin-block:12px 8px;font-size:clamp(40px,9.4vh,70px)}
  .build__hero .hero__lead{font-size:16px;line-height:1.8}
  .build__hero .hero__cta{margin-top:16px}
  .build__hero .stat{padding:14px 18px 12px}
  .build__hero .stat b{font-size:clamp(34px,6vh,50px)}
  .build__hero .stat span{margin-top:6px}
  .build__hero .stat .gauge{top:14px;inset-inline-end:14px;width:18px;height:18px}
}
/* the pale stage: v8.1's light surfaces */
.build--day .build__veil{
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--ground) 80%,transparent) 0%,transparent 24%),
    linear-gradient(270deg,color-mix(in srgb,var(--ground) 94%,transparent) 0%,color-mix(in srgb,var(--ground) 72%,transparent) 44%,transparent 80%);
}
.build--day .hero__title{color:var(--ink)}
.build--day .hero__lead{color:var(--ink-2)}
.build--day .stat{background:var(--glass-light);border-color:var(--line);box-shadow:var(--shadow-1)}
.build--day .stat b{color:var(--ink)}
.build--day .stat span{color:var(--mut)}
.build--day .stat .gauge{color:var(--accent)}
.build--day .motion-toggle{background:var(--glass-light);border-color:var(--line);color:var(--ink)}

/* ---------------------------------------------------- 3 · overlay */
/* the card that writes each stage in: a v8.1 glass panel */
.build__cards{position:absolute;inset:0;pointer-events:none;z-index:3}
.bcard{
  position:absolute;inset-inline-start:var(--fx-start);top:50%;translate:0 -50%;
  width:min(32rem,40vw);padding:26px 30px 26px;display:flex;flex-direction:column;
  border-radius:var(--r-lg);background:var(--fx-panel);border:1px solid var(--fx-edge);box-shadow:var(--fx-shadow);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  opacity:0;visibility:hidden;
}
.bcard.is-on{visibility:visible}
/* the service group closes the card as a v8.1 eyebrow (gauge + label) */
.bcard__group{
  align-self:flex-start;align-items:center;gap:8px;margin-top:16px;
  padding:4px 14px 4px 12px;border-radius:var(--r-pill);background:var(--fx-chip);border:1px solid var(--fx-edge);
  font-size:13px;font-weight:700;line-height:1.7;color:var(--fx-ink);
}
.bcard__group::before{
  content:"";width:14px;height:14px;flex:none;background:var(--fx-signal-ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.8 0V22.3H4.5V24H19.52V0Z'/%3E%3Cpath d='M4.5 16.92L6.2 15.68V20.95H4.5Z'/%3E%3Cpath d='M7.82 13.22L9.52 11.99V20.95H7.82Z'/%3E%3Cpath d='M11.14 8.91L12.85 7.67V20.95H11.14Z'/%3E%3Cpath d='M14.51 3.74L16.22 2.5V20.95H14.51Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.8 0V22.3H4.5V24H19.52V0Z'/%3E%3Cpath d='M4.5 16.92L6.2 15.68V20.95H4.5Z'/%3E%3Cpath d='M7.82 13.22L9.52 11.99V20.95H7.82Z'/%3E%3Cpath d='M11.14 8.91L12.85 7.67V20.95H11.14Z'/%3E%3Cpath d='M14.51 3.74L16.22 2.5V20.95H14.51Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.bcard__title{font-size:clamp(1.5rem,2.1vw,1.95rem);line-height:1.35;font-weight:800;color:var(--fx-ink)}
.bcard__intro{margin-top:12px;font-size:15.5px;line-height:1.85;color:var(--fx-ink-2)} /* build.js keeps it short; never cut mid-word */
.bcard__items{margin-top:16px;padding-top:16px;border-top:1px solid var(--fx-edge);display:grid;gap:8px}
.bcard__items li{position:relative;padding-inline-start:20px;font-size:15px;font-weight:600;line-height:1.6;color:var(--fx-ink)}
.bcard__items li::before{content:"";position:absolute;inset-inline-start:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--fx-signal-ink)}
/* written in from the reading start; the clip reaches past the line box so Arabic marks are never cut */
.bcard .w{display:block;clip-path:inset(-.6em -.2em -.6em calc((1 - var(--p,0)) * 100%))}
.bcard__title .w{display:inline-block}
.bcard .bcard__group.w{display:inline-flex}

/* the elbow leader from the card to the place the service lives */
.bleader{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;opacity:0;overflow:visible}
.bleader path{fill:none;stroke:var(--fx-ink);stroke-width:1.5;stroke-dasharray:1 1;stroke-dashoffset:1}
.bleader circle{fill:var(--fx-signal);stroke:var(--fx-ring);stroke-width:2}

/* one tick per stage at the outer edge */
.brail{position:absolute;z-index:3;inset-inline-end:var(--gutter);top:50%;translate:0 -50%;display:grid;gap:9px;margin-top:24px}
.brail li{width:28px;height:3px;border-radius:3px;background:var(--fx-edge);scale:.55 1;transform-origin:100% 50%;transition:background-color .3s var(--ease),scale .3s var(--ease)}
.brail li.is-done{background:var(--fx-ink-2)}
.brail li.is-on{scale:1 1;background:var(--fx-signal)}
.build:not(.build--live) .brail{display:none}

/* the completion seal at the handover */
.bstamp{
  position:absolute;inset:0 auto auto 0;z-index:2;display:grid;justify-items:center;gap:8px;padding:14px 20px;
  border-radius:var(--r-md);background:var(--fx-panel);border:1px solid var(--fx-edge);box-shadow:var(--fx-shadow);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  font-size:13.5px;font-weight:800;line-height:1.4;color:var(--fx-ink);white-space:nowrap;opacity:0;pointer-events:none;
}
.bstamp .ico{width:30px;height:30px;padding:5px;border-radius:50%;background:var(--fx-signal);color:var(--on-night);stroke-width:2.4}

/* the finished building's closing line */
.bend{position:absolute;z-index:3;inset-inline-start:var(--fx-start);top:50%;translate:0 -50%;width:min(32rem,40vw);display:grid;gap:26px;justify-items:start;opacity:0;visibility:hidden}
.bend.is-on{visibility:visible}
.bend__cap{font-family:var(--f-disp);font-size:clamp(30px,3.2vw,48px);font-weight:800;line-height:1.3;color:var(--fx-ink);text-wrap:balance}

/* ---------------------------------------------------- 4 · states */
/* the still building: no pinning, no overlay, the opening stays */
.build--still .build__cards,.build--still .bleader,.build--still .bstamp,.build--still .bend,.build--still .brail{display:none}
.build--still .build__hero{opacity:1!important;transform:none!important;visibility:visible!important}

/* ---------------------------------------------------- 5 · phone */
@media (max-width:1023.98px){
  /* the opening is a v8.1 hero block above the pinned stage */
  .build__hero{padding-block:118px 40px;background:var(--fx-bg)}
  .build__hero .hero__copy{max-width:none}
  .build__veil{display:none}
  .build__poster img{object-position:50% 34%} /* the phone frames keep the tower high and centred */
  /* the card docks at the foot of the stage */
  .bcard{inset-inline:12px;top:auto;bottom:12px;translate:none;width:auto;padding:16px 18px;border-radius:var(--r-md)}
  .bcard__title{font-size:1.2rem}
  .bcard__en{display:none}
  .bcard__group{margin-top:10px;font-size:12px}
  .bcard__intro{font-size:14.5px;line-height:1.7;margin-top:6px}
  .bcard__s1{display:none} /* a phone keeps the line that leads into the list */
  .bcard__items{margin-top:10px;padding-top:10px;gap:4px}
  .bcard__items li{font-size:14px}
  .brail{display:none}
  .bend{
    inset-inline:12px;top:auto;bottom:12px;translate:none;width:auto;padding:20px;border-radius:var(--r-lg);
    background:var(--fx-panel);border:1px solid var(--fx-edge);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  }
  .bend__cap{font-size:1.4rem}
}
@media (max-width:1023.98px) and (max-height:520px){
  .bcard__intro{display:none} /* a phone on its side keeps the title and the items */
}

/* ---------------------------------------------------- 6 · the page around the film */
/* over a bright frame (the sunset film) the night header keeps a deeper glass */
.over-film .nav:not(.is-light) .nav__bar{background:var(--glass-shade)}
/* on a phone the docked card sits where the floats are: they step aside while the stage is pinned */
.floats{transition:opacity .3s var(--ease),visibility 0s}
.floats.is-film-aside{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--ease),visibility 0s .3s}