/* ══════════════════════════════════════════════════════════════════════════
   /domains — on the shared landing system (2026-10-05, owner: «إبداع أكتر»).
   Loaded after home.css + about.css (ab-* components). Only what this page
   alone has: the live browser, the two-links bridge, the nameserver rows.
   Scoped to .dmx. Gold leads in both themes, no glows, logical properties,
   everything stops under reduced motion. Motion: domains.js.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── hero: the live browser ── */
.dmx-live{ margin:0; border-radius:var(--hm-r); background:var(--hm-card); border:1px solid var(--hm-line); overflow:hidden;
    animation:ab-in .9s .25s cubic-bezier(.2,.8,.2,1) both; }
.dmx-live__bar{ display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--hm-card-2); border-block-end:1px solid var(--hm-line); }
.dmx-live__dots{ display:flex; gap:6px; } .dmx-live__dots i{ width:10px; height:10px; border-radius:50%; background:var(--hm-line); }
.dmx-live__url{ flex:1; min-width:0; display:flex; align-items:center; gap:10px; padding:9px 14px; border-radius:12px; background:var(--hm-card); border:1px solid var(--hm-line);
    transition:border-color .4s; }
.dmx-live.is-3 .dmx-live__url{ border-color:color-mix(in srgb,var(--hm-good) 55%,var(--hm-line)); }
.dmx-live__ico{ position:relative; width:18px; height:18px; flex:none; }
.dmx-live__ico svg{ position:absolute; inset:0; width:18px; height:18px; transition:opacity .35s, transform .45s cubic-bezier(.2,.9,.3,1.5); }
.dmx-live__globe{ color:var(--em-muted); }
.dmx-live__lock{ color:var(--hm-good); opacity:0; transform:scale(.4); }
.dmx-live.is-3 .dmx-live__globe{ opacity:0; transform:scale(.4); }
.dmx-live.is-3 .dmx-live__lock{ opacity:1; transform:none; }
.dmx-live__txt{ flex:1; min-width:0; display:flex; align-items:center; font-size:clamp(13.5px,1.08vw,14.5px); font-weight:800; white-space:nowrap; overflow:hidden; }
[dir=rtl] .dmx-live__txt{ justify-content:flex-end; }
.dmx-live__caret{ width:2px; height:1.15em; margin-inline-start:2px; background:var(--hm-gold); animation:dmx-caret 1s steps(1) infinite; }
@keyframes dmx-caret{ 50%{ opacity:0; } }
.dmx-live__page{ position:relative; display:grid; gap:12px; padding:18px; }
.dmx-sk{ display:block; border-radius:10px; background:var(--hm-card-2); border:1px solid var(--hm-line); }
.dmx-sk--nav{ height:14px; width:55%; }
.dmx-sk--hero{ height:clamp(90px,10vw,130px); border-radius:14px;
    background:linear-gradient(120deg, var(--hm-card-2) 30%, color-mix(in srgb,var(--hm-gold) 12%,var(--hm-card-2)) 50%, var(--hm-card-2) 70%) 0 0/250% 100%;
    animation:dmx-shine 3.2s ease-in-out infinite; }
@keyframes dmx-shine{ 0%{ background-position:100% 0; } 100%{ background-position:-50% 0; } }
.dmx-live__tiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.dmx-live__tiles .dmx-sk{ height:60px; }
.dmx-live__ssl{ position:absolute; inset-block-start:26px; inset-inline-end:28px; display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:99px;
    font-size:12.5px; font-weight:800; color:var(--success-foreground); background:var(--hm-good); opacity:0; transform:translateY(-6px) scale(.9);
    transition:opacity .4s, transform .5s cubic-bezier(.2,.9,.3,1.5); }
.dmx-live__ssl svg{ width:13px; height:13px; }
.dmx-live.is-3 .dmx-live__ssl{ opacity:1; transform:none; }
/* the real status journey: بانتظار التحقق → جاري التفعيل → نشط */
.dmx-live__status{ position:relative; list-style:none; margin:0; padding:14px 18px 20px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-block-start:1px dashed var(--hm-line); }
.dmx-live__track{ position:absolute; inset-inline:calc(100% / 6 + 18px); inset-block-start:30px; height:3px; border-radius:3px; background:var(--hm-line); }
.dmx-live__track i{ position:absolute; inset-block:0; inset-inline-start:0; width:var(--dmx-p,0%); border-radius:3px; background:var(--hm-gold); transition:width .6s cubic-bezier(.2,.8,.2,1), background-color .4s; }
.dmx-live.is-3 .dmx-live__track i{ background:var(--hm-good); }
.dmx-live__st{ position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.dmx-live__node{ width:34px; height:34px; display:grid; place-items:center; border-radius:50%; font-size:13px; font-weight:800; color:var(--em-muted);
    background:var(--hm-card); border:2px solid var(--hm-line); transition:color .3s, background-color .3s, border-color .3s, transform .45s cubic-bezier(.2,.9,.3,1.5); }
.dmx-live__st small{ font-size:12.5px; font-weight:700; color:var(--em-muted); transition:color .3s; }
.dmx-live.is-1 .dmx-live__st--wait .dmx-live__node,
.dmx-live.is-2 .dmx-live__st--wait .dmx-live__node, .dmx-live.is-2 .dmx-live__st--work .dmx-live__node,
.dmx-live.is-3 .dmx-live__st .dmx-live__node{ color:var(--em-gold-ink); background:var(--hm-gold); border-color:var(--hm-gold); }
.dmx-live.is-1 .dmx-live__st--wait .dmx-live__node, .dmx-live.is-2 .dmx-live__st--work .dmx-live__node{ transform:scale(1.12); }
.dmx-live.is-3 .dmx-live__st--live .dmx-live__node{ color:#fff; background:var(--hm-good); border-color:var(--hm-good); transform:scale(1.12); }
.dmx-live.is-1 .dmx-live__st--wait small, .dmx-live.is-2 .dmx-live__st--work small{ color:var(--em-text); }
.dmx-live.is-3 .dmx-live__st--live small{ color:var(--hm-good); }

/* ── two links + the bridge between them ── */
.dmx-two{ display:grid; grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr); align-items:stretch; gap:0; }
@media (max-width:900px){ .dmx-two{ grid-template-columns:minmax(0,1fr); gap:8px; max-width:560px; margin-inline:auto; } }
.dmx-card{ position:relative; display:flex; flex-direction:column; gap:12px; padding:clamp(24px,3vw,34px); border-radius:var(--hm-r); background:var(--hm-card);
    border:1px solid var(--hm-line); transition:transform .45s cubic-bezier(.2,.8,.2,1), border-color .3s; }
.dmx-card:hover{ transform:translateY(-6px); border-color:color-mix(in srgb,var(--hm-gold) 45%,var(--hm-line)); }
.dmx-card--own{ border-color:color-mix(in srgb,var(--hm-gold) 40%,var(--hm-line)); background:linear-gradient(160deg, color-mix(in srgb,var(--hm-gold) 8%,var(--hm-card)), var(--hm-card) 55%); }
.dmx-card__tag{ position:absolute; inset-block-start:22px; inset-inline-end:22px; padding:4px 12px; border-radius:99px; font-size:12px; font-weight:800;
    color:var(--hm-gold); background:color-mix(in srgb,var(--hm-gold) 12%,transparent); }
.dmx-card__ico{ width:54px; height:54px; display:grid; place-items:center; border-radius:17px; color:var(--hm-gold); background:color-mix(in srgb,var(--hm-gold) 13%,transparent); }
.dmx-card--own .dmx-card__ico{ color:var(--em-gold-ink); background:var(--hm-gold); }
.dmx-card__ico svg{ width:25px; height:25px; }
.dmx-card h3{ margin:4px 0 0; font-size:18.5px; font-weight:800; }
.dmx-urlbox{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-radius:14px; font-size:14.5px; font-weight:800; background:var(--hm-card-2); border:1px solid var(--hm-line); }
.dmx-urlbox svg{ width:16px; height:16px; flex:none; color:var(--hm-good); }
.dmx-urlbox span{ min-width:0; overflow-wrap:anywhere; }
.dmx-ticks{ list-style:none; margin:4px 0 0; padding:0; display:grid; gap:10px; }
.dmx-ticks li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.75; color:var(--em-text-2, var(--em-muted)); }
.dmx-ticks svg{ width:17px; height:17px; flex:none; margin-top:4px; padding:2px; border-radius:50%; color:var(--hm-good); background:color-mix(in srgb,var(--hm-good) 14%,transparent); }
.dmx-bridge{ position:relative; align-self:center; display:grid; place-items:center; gap:4px; }
.dmx-bridge svg{ width:100%; height:40px; overflow:visible; }
[dir=rtl] .dmx-bridge svg{ transform:scaleX(-1); }
.dmx-bridge path{ fill:none; stroke:color-mix(in srgb,var(--hm-gold) 55%,var(--hm-line)); stroke-width:2; stroke-dasharray:5 6; vector-effect:non-scaling-stroke; animation:ab-dash 1.2s linear infinite; }
.dmx-bridge circle{ fill:var(--hm-gold); }
.dmx-bridge span{ font-size:12.5px; font-weight:800; color:var(--hm-gold); white-space:nowrap; }
@media (max-width:900px){ .dmx-bridge{ height:64px; } .dmx-bridge svg{ width:64px; transform:rotate(90deg); } [dir=rtl] .dmx-bridge svg{ transform:rotate(90deg); } .dmx-bridge span{ display:none; } }

/* ── steps: the nameservers, ready to copy ── */
.dmx-steps .ab-st__it p{ max-width:34ch; }
.dmx-ns{ display:grid; gap:8px; width:min(100%,320px); margin-top:6px; }
.dmx-ns__row{ display:flex; align-items:center; gap:8px; padding:6px 6px 6px 12px; border-radius:12px; background:var(--hm-card); border:1px solid var(--hm-line); }
[dir=rtl] .dmx-ns__row{ padding:6px 12px 6px 6px; }
.dmx-ns__row small{ font-size:11px; font-weight:800; color:var(--em-muted); }
.dmx-ns__row code{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:13.5px; font-weight:700;
    color:var(--em-text); background:none; border:0; padding:0; text-align:start; }
.dmx-ns__copy{ flex:none; padding:6px 12px; border:0; border-radius:9px; font:inherit; font-size:12.5px; font-weight:800; cursor:pointer;
    color:var(--em-gold-ink); background:var(--hm-gold); transition:transform .2s, background-color .3s; }
.dmx-ns__copy:hover{ transform:translateY(-1px); }
.dmx-ns__copy.is-done{ color:#fff; background:var(--hm-good); }
.dmx-note{ display:flex; align-items:flex-start; justify-content:center; gap:10px; max-width:70ch; margin:clamp(28px,4vw,44px) auto 0; padding:14px 18px; border-radius:16px;
    font-size:14px; line-height:1.8; color:var(--em-muted); background:var(--hm-card); border:1px dashed var(--hm-line); }
.dmx-note svg{ width:18px; height:18px; flex:none; margin-top:4px; color:var(--hm-gold); }

@media (max-width:480px){ .dmx-live__st small{ font-size:11px; } .dmx-live__ssl{ inset-inline-end:22px; } }
@media (prefers-reduced-motion: reduce){
    .dmx *, .dmx *::before, .dmx *::after{ animation:none !important; transition:none !important; }
}