/* ══════════════════════════════════════════════════════════════════════════
   ورشة البشمهندس فهد — نظام التصميم المشترك
   الاتجاه: الغوص. من سطح الماء إلى القاع، والضوء الجليدي هو الدليل.
   الطباعة: خط ثمانية وحده — عربياً ولاتينياً، عناوينَ ونصوصاً وتسميات.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* عمق الماء */
  --abyss:#04090F;
  --deep:#071626;
  --mid:#0B2438;
  --surface:#103049;
  --line:#1B4463;
  --line-2:#2A6285;

  /* الضوء الجليدي */
  --ice:#6FE4FF;
  --ice-hi:#BDF4FF;
  --ice-dim:#2A93C6;
  --tide:#1E7FD6;
  --glow:rgba(111,228,255,.14);

  /* الحجر الدافئ — يُستعمل بخِسّة */
  --stone:#EEDFC0;
  --stone-dim:#B79C6D;

  --text:#EAF6FC;
  --mute:#9BBDD4;      /* رُفع تباينه — كان باهتاً */
  --faint:#6B93B0;

  --tape:repeating-linear-gradient(45deg,color-mix(in srgb,var(--stone) 12%,transparent) 0 10px,transparent 10px 20px);

  /* خط ثمانية وحده. لا خط آلة ولا خط لاتيني ثانٍ. */
  --d:'Thmanyah Display',Georgia,serif;
  --s:'Thmanyah Sans',system-ui,sans-serif;
  --m:'Thmanyah Sans',system-ui,sans-serif;   /* التسميات والأرقام */

  --gut:clamp(20px,4.5vw,64px);
  --max:1320px;
  --ease:cubic-bezier(.22,.8,.24,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--text);
  font-family:var(--s);font-weight:400;line-height:1.8;
  overflow-x:hidden;
  /* الخلفية تدرّج ثابت — لا وميض ولا أشعة متحركة */
  background:
    radial-gradient(ellipse 120% 70% at 50% -10%, color-mix(in srgb,var(--tide) 16%,transparent), transparent 60%),
    linear-gradient(180deg, var(--deep) 0%, var(--abyss) 55%, var(--abyss) 100%);
  background-attachment:fixed;
  transition:color .5s var(--ease);
}
img,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ice);color:var(--abyss)}
:focus-visible{outline:2px solid var(--stone);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}

/* العربية لا تُباعَد حروفها. اللاتيني يأخذ تباعداً طفيفاً في التسميات. */
.lbl{font-family:var(--s);font-size:11.5px;font-weight:500;letter-spacing:0}
html[dir=ltr] .lbl{letter-spacing:.09em;text-transform:uppercase}

/* ══════════════════════════════════════════════════════════════════════
   المؤشر — فقاعة تحت الماء
   ══════════════════════════════════════════════════════════════════════ */
.reticle{
  position:fixed;inset-block-start:0;inset-inline-start:0;z-index:999;pointer-events:none;
  width:22px;height:22px;margin:-11px 0 0 -11px;opacity:0;
  border:1px solid var(--ice);border-radius:50%;
  transition:opacity .3s,width .25s var(--ease),height .25s var(--ease),
             margin .25s var(--ease),border-color .25s,background .25s;
}
.reticle.on{opacity:.85}
.reticle.hot{width:44px;height:44px;margin:-22px 0 0 -22px;
  border-color:var(--stone);background:color-mix(in srgb,var(--stone) 12%,transparent)}
@media(pointer:coarse){.reticle{display:none}}

/* ══════════════════════════════════════════════════════════════════════
   الأزرار
   ══════════════════════════════════════════════════════════════════════ */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;border:1px solid var(--line-2);overflow:hidden;
  font-family:var(--s);font-size:14px;font-weight:500;
  transition:border-color .3s,color .3s;
}
html[dir=ltr] .btn{letter-spacing:.06em}
.btn > *{position:relative;z-index:1}
.btn::before{content:'';position:absolute;inset:0;background:var(--ice);
  transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease)}
.btn:hover{border-color:var(--ice);color:var(--abyss)}
.btn:hover::before{transform:scaleY(1)}
.btn.fill{background:var(--ice);border-color:var(--ice);color:var(--abyss);
  box-shadow:0 0 34px -8px var(--ice)}
.btn.fill::before{background:var(--ice-hi)}
.btn.fill:hover{color:var(--abyss)}
.btn.stone::before{background:var(--stone)}
.btn.stone:hover{border-color:var(--stone);color:var(--abyss)}

/* ══════════════════════════════════════════════════════════════════════
   الكشف عند التمرير — يظهر ويختفي في الاتجاهين
   ══════════════════════════════════════════════════════════════════════ */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

/* خانة فاضية — الورشة ما خلصت، وهذا جزء من الفكرة */
.slot{
  border:1px dashed var(--line-2);background:var(--tape);
  padding:14px 16px;font-family:var(--s);font-size:13px;
  color:var(--faint);display:flex;align-items:center;gap:10px;
}
.slot::before{content:'◇';color:var(--stone);font-size:12px}

/* ══════════════════════════════════════════════════════════════════════
   الشريط العلوي — مشترك
   ══════════════════════════════════════════════════════════════════════ */
.top{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px var(--gut);
  border-block-end:1px solid transparent;
  transition:background .4s,border-color .4s,backdrop-filter .4s;
}
.top.stuck{background:color-mix(in srgb,var(--abyss) 88%,transparent);
  backdrop-filter:blur(14px);border-block-end-color:var(--line)}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--s);font-size:13px;
  font-weight:500;color:var(--mute)}
.brand em{font-style:normal;color:var(--ice);font-size:13px}
.top-nav{display:flex;gap:24px;font-family:var(--s);font-size:13.5px;color:var(--mute)}
.top-nav a{padding-block:3px;border-block-end:1px solid transparent;transition:.28s}
.top-nav a:hover{color:var(--text);border-block-end-color:var(--ice)}
@media(max-width:1080px){.top-nav{display:none}}
.tools{display:flex;gap:8px;align-items:center}
.sw{display:flex;border:1px solid var(--line);font-family:var(--s);font-size:12px}
.sw button{padding:6px 12px;color:var(--mute);transition:.25s;line-height:1.5}
.sw button[aria-pressed=true]{background:var(--ice);color:var(--abyss)}
.sw button:hover{color:var(--text)}
.sw button[aria-pressed=true]:hover{color:var(--abyss)}

/* ══════════════════════════════════════════════════════════════════════
   تقليل الحركة
   ══════════════════════════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}