/* ══ مكعب معماريون — معرض جامعة القصيم ═══════════════════════════════════
   الألوان مأخوذةٌ من ملفات هوية المكتب نفسها (LOGO VARIABLES/SVG):
   الأزرق #0059FF · الأبيض المكسور #F1F2F2 · الأسود #221F1F — لا لونَ مخترع.
   ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ */

@font-face { font-family:PX; font-weight:300; font-style:normal; font-display:swap;
  src:url(assets/fonts/PlexAr-Light.ttf) format('truetype'); }
@font-face { font-family:PX; font-weight:400; font-style:normal; font-display:swap;
  src:url(assets/fonts/PlexAr-Regular.ttf) format('truetype'); }
@font-face { font-family:PX; font-weight:600; font-style:normal; font-display:swap;
  src:url(assets/fonts/PlexAr-SemiBold.ttf) format('truetype'); }

:root{
  --blue:#0059FF;
  --ink:#F1F2F2;
  --bg:#0B0B0C;
  --panel:#141417;
  --line:rgba(241,242,242,.10);
  --mute:rgba(241,242,242,.42);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:PX,system-ui,'Segoe UI',Tahoma,sans-serif;
  font-weight:400; -webkit-font-smoothing:antialiased;
  overflow:hidden; overscroll-behavior:none;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
img{ -webkit-user-drag:none; user-drag:none; }

.screen{ position:fixed; inset:0; }
.screen[hidden]{ display:none; }

/* ── الشاشة الرئيسية ─────────────────────────────────────────────────── */
/* الحاوي يتمرّر، والتوسيطُ داخلَ طبقةٍ ثانيةٍ ترتفع بمحتواها.
   لو وُضع justify-content:center على الحاوي المتمرِّر نفسه ضاع ما يفيض
   من أعلاه ولم يُدرَك بالتمرير — بطاقاتٌ لا تُنقَر على الجوّال. مُثبَتٌ بالفحص. */
#home{
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  color:#221F1F; background:#F4F4F1; isolation:isolate;
}
#home .inner{
  position:relative; z-index:2; min-height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(30px,4.6vh,52px);
  padding:clamp(56px,6vh,68px) clamp(18px,5vw,76px) clamp(30px,5vh,58px);
}
.ambient{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.ambient-wash{
  position:absolute; inset:-24%;
  background:
    radial-gradient(circle at 24% 22%,rgba(91,149,255,.15),transparent 30%),
    radial-gradient(circle at 76% 78%,rgba(0,89,255,.12),transparent 32%);
  filter:blur(34px); opacity:.82; will-change:transform;
  animation:washDrift 18s ease-in-out infinite alternate;
}
.ambient-band{
  position:absolute; pointer-events:none; background:transparent;
  border-style:solid; box-shadow:inset 0 0 0 2px rgba(0,89,255,.045);
  will-change:transform,border-radius;
}
.ambient-band-a{
  width:150vw; height:82vh; left:-25vw; top:-57vh;
  border-width:clamp(72px,8.5vw,158px);
  border-color:rgba(0,89,255,.075);
  border-radius:48% 52% 46% 54% / 55% 47% 53% 45%;
  animation:bandDriftA 10s ease-in-out infinite alternate;
}
.ambient-band-b{
  width:156vw; height:96vh; left:-29vw; bottom:-61vh;
  border-width:clamp(68px,7.5vw,142px);
  border-color:rgba(75,133,242,.065);
  border-radius:54% 46% 51% 49% / 47% 56% 44% 53%;
  animation:bandDriftB 13s ease-in-out infinite alternate-reverse;
}
.hero{
  position:relative; flex:0 0 auto; width:100%;
  display:grid; place-items:center; padding-block:clamp(24px,3.8vh,42px);
}
.lockup{
  display:block; width:clamp(176px,16vw,248px); max-width:72vw; height:auto;
  animation:rise .7s var(--ease) both;
}
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes bandDriftA{
  from{
    transform:translate3d(-3.5vw,-1.5vh,0) rotate(-1.4deg) scaleX(.98);
    border-radius:48% 52% 46% 54% / 55% 47% 53% 45%;
  }
  to{
    transform:translate3d(4.5vw,5vh,0) rotate(1deg) scaleX(1.035);
    border-radius:55% 45% 53% 47% / 46% 57% 43% 54%;
  }
}
@keyframes bandDriftB{
  from{
    transform:translate3d(4vw,2vh,0) rotate(1.2deg) scaleX(1.025);
    border-radius:54% 46% 51% 49% / 47% 56% 44% 53%;
  }
  to{
    transform:translate3d(-4.5vw,-4.5vh,0) rotate(-1deg) scaleX(.975);
    border-radius:46% 54% 44% 56% / 57% 45% 55% 43%;
  }
}
@keyframes washDrift{
  from{ transform:translate3d(-2.5%,-1%,0) scale(.98); }
  to{ transform:translate3d(3%,2.5%,0) scale(1.04); }
}

.tiles{
  position:relative; width:100%; max-width:1160px;
  display:grid; gap:clamp(14px,1.5vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
}
@media (min-width:1040px){ .tiles{ grid-template-columns:repeat(3,1fr); } }

.tile{
  display:block; text-align:start; cursor:pointer; color:inherit;
  background:rgba(255,255,255,.84); border:1px solid rgba(34,31,31,.075); border-radius:22px;
  padding:0; overflow:hidden; font:inherit;
  transition:transform .22s var(--ease), border-color .22s var(--ease),
             box-shadow .22s var(--ease), background .22s var(--ease);
  box-shadow:0 10px 32px rgba(34,31,31,.055),0 2px 7px rgba(34,31,31,.035);
  animation:rise .7s var(--ease) both;
}
.tile .shot{
  position:relative; display:block; width:100%; aspect-ratio:16/10;
  background:#E9E9E5; overflow:hidden;
}
.tile .shot img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.96; transition:opacity .22s var(--ease), transform .35s var(--ease);
}
.tile .body{ display:block; padding:15px 17px 17px; }
.tile .t{
  display:block; direction:ltr; text-align:right;
  font-size:clamp(14px,1.05vw,16px); font-weight:600;
  letter-spacing:.2px; line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tile .m{
  margin-top:6px; font-size:12px; color:rgba(34,31,31,.45); font-weight:300;
  display:flex; align-items:center; gap:7px; min-width:0;
}
.tile .m span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tile .m .dot{ width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.7; }
.tile .m .code{ direction:ltr; }

/* التغذية الراجعة — أن يكون واضحاً أنك أشرت ثم أنك نقرت */
@media (hover:hover){
  .tile:hover{ transform:translateY(-3px); border-color:rgba(0,89,255,.26);
               background:#fff; box-shadow:0 16px 40px rgba(34,31,31,.10); }
  .tile:hover .shot img{ opacity:1; transform:scale(1.018); }
}
.tile:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
.tile.press{ transform:scale(.965) translateY(0); border-color:var(--blue);
             box-shadow:0 0 0 3px rgba(0,89,255,.30); }

@media (prefers-reduced-motion:reduce){
  .ambient-band,.ambient-wash{ animation:none; }
  .lockup,.tile{ animation-duration:.001ms; }
}

/* ── العارض ──────────────────────────────────────────────────────────── */
#viewer{ background:var(--bg); }
.stage{ position:absolute; inset:0; overflow:hidden; touch-action:none; cursor:grab; }
.stage.dragging{ cursor:grabbing; }
.stage.zoomed{ cursor:zoom-out; }
.track{ position:absolute; inset:0; will-change:transform; }
.track.anim{ transition:transform .34s var(--ease); }
/* flex لا grid: النسبةُ المئويةُ في max-height تُحلُّ على ارتفاعٍ محدَّدٍ في flex،
   أمّا في grid فمسارُ auto يُقاس بالمحتوى فتصير الحلقةُ دائريةً ولا تُقيَّد
   الصورة — فتطفح الصفحةُ الطوليّة خارج الشاشة. أُثبت باللقطة قبل التصحيح. */
.slot{ position:absolute; top:0; width:100%; height:100%;
       display:flex; align-items:center; justify-content:center; }
.slot[data-i="-1"]{ left:calc(-100% - 26px); }
.slot[data-i="0"] { left:0; }
.slot[data-i="1"] { left:calc(100% + 26px); }
.slot img{
  display:block; max-width:100%; max-height:100%; width:auto; height:auto;
  opacity:0; transition:opacity .25s linear; will-change:transform;
}
.slot img.ready{ opacity:1; }

/* إشارتا الحافّتين — لا تظهران إلا لمن معه فأرة، وتخفتان مع الخمول.
   المحتوى إنجليزيّ الاتجاه: التالي يميناً والسابق يساراً — كتقليب الكتاب. */
.hint{
  position:fixed; top:50%; transform:translateY(-50%); z-index:5;
  width:34px; height:34px; opacity:0; pointer-events:none;
  transition:opacity .3s linear;
}
.hint svg{ width:100%; height:100%; fill:none; stroke:var(--ink);
           stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.hint.prev{ left:calc(var(--safe) + env(safe-area-inset-left,0px)); }
.hint.next{ right:calc(var(--safe) + env(safe-area-inset-right,0px)); }
@media (hover:hover){ .stage:hover ~ .hint{ opacity:.22; } }
#viewer.idle .hint, #viewer.zoom .hint{ opacity:0 !important; }

/* شريطُ تحميلٍ رفيع — يظهر فقط إن تأخّرت الصورة */
.bar{ position:fixed; top:0; right:0; left:0; height:2px; z-index:6;
      background:var(--blue); transform:scaleX(0); transform-origin:right;
      opacity:0; transition:transform .3s linear, opacity .3s linear; }
.bar.on{ opacity:1; transform:scaleX(.75); }

.counter{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--safe) + env(safe-area-inset-bottom,0px));
  z-index:5; font-size:12px; font-weight:300; letter-spacing:1px;
  color:var(--mute); background:rgba(11,11,12,.62); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:999px; padding:5px 13px;
  transition:opacity .4s linear; pointer-events:none;
}
#viewer.idle .counter{ opacity:0; }

/* تلميحُ الإدارة — يظهر ثوانيَ على جوّالٍ طوليّ وملفٍّ عرضيّ، ثم يزول */
.rot{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--safe) + 46px + env(safe-area-inset-bottom,0px));
  z-index:7; max-width:86vw; text-align:center;
  font-size:12.5px; font-weight:300; line-height:1.6; color:var(--ink);
  background:rgba(20,20,23,.92); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:12px; padding:9px 15px;
  pointer-events:none; animation:pop .25s var(--ease) both;
}
.rot[hidden]{ display:none; }

/* ── النقاط الثلاث ─────────────────────────────────────────────────────
   ⚠ شاشاتُ العرض والتلفزيونات تقتطع حواف الصورة (overscan) بنسبةٍ تصل ٣–٥٪،
   فزرٌّ على ‎12px من الحافّة يختفي أو يظهر نصفُه — وقع فعلاً مع فهد على شاشة
   المعرض (٩ سبتمبر ٢٠٢٦). فالإزاحةُ صارت **نسبةً من أصغر بُعدٍ للشاشة** لا رقماً
   ثابتاً، ومعها خلفيةٌ ظاهرةٌ دائماً ومساحةُ نقرٍ أكبر — فلا يضيع مهما كان المقاس. */
:root{ --safe:clamp(16px,3.6vmin,72px); }

.dots{
  position:fixed; z-index:30;
  top:calc(var(--safe) + env(safe-area-inset-top,0px));
  left:calc(var(--safe) + env(safe-area-inset-left,0px));
  width:50px; height:50px; padding:11px; border:0; border-radius:15px;
  background:rgba(255,255,255,.84); backdrop-filter:blur(12px) saturate(130%);
  border:1px solid rgba(0,89,255,.14);
  box-shadow:0 6px 22px rgba(34,31,31,.12); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.dots img{ display:block; width:100%; height:100%; object-fit:contain; }
.dots:hover,.dots[aria-expanded="true"]{ background:#fff; transform:scale(1.04); box-shadow:0 9px 28px rgba(0,89,255,.16); }
.dots:active{ transform:scale(.94); }
.dots:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

.scrim{ position:fixed; inset:0; z-index:20; background:transparent; }
.scrim[hidden]{ display:none; }

.menu{
  position:fixed; z-index:31;
  top:calc(var(--safe) + 56px + env(safe-area-inset-top,0px));
  left:calc(var(--safe) + env(safe-area-inset-left,0px));
  width:min(300px,78vw); padding:7px;
  background:rgba(20,20,23,.94); backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--line); border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  animation:pop .18s var(--ease) both; transform-origin:top left;
  max-height:calc(100dvh - (var(--safe) * 2) - 56px);
  overflow-y:auto; overscroll-behavior:contain;
}
.menu[hidden]{ display:none; }
@keyframes pop{ from{ opacity:0; transform:scale(.94) translateY(-6px); } to{ opacity:1; transform:none; } }

.menu .row{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 11px; border:0; border-radius:9px; background:transparent;
  color:var(--ink); font:inherit; font-size:13.5px; cursor:pointer; text-align:start;
  transition:background .15s linear;
}
.menu .row:hover{ background:rgba(241,242,242,.08); }
.menu .row:focus-visible{ outline:2px solid var(--blue); outline-offset:-2px; }
.menu .row .lbl{ flex:1; min-width:0; direction:ltr; text-align:right;
                 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.menu .row .lbl.ar{ direction:rtl; text-align:right; }
.menu .row .n{ font-size:11px; color:var(--mute); font-weight:300; flex:0 0 auto; }
.menu .row .mk{ flex:0 0 auto; width:14px; height:14px; opacity:.5; }
.menu .row .mk svg{ display:block; width:100%; height:100%; fill:currentColor; }
.menu .row .project-mark{ color:inherit; opacity:1; }
.menu .row.on{ color:var(--blue); background:rgba(0,89,255,.10); }
.menu .row.on .mk{ opacity:1; }
.menu .sep{ height:1px; margin:6px 9px; background:var(--line); }