/* ══ مكعب معماريون — معرض جامعة القصيم ═══════════════════════════════════
   الألوان مأخوذةٌ من ملفات هوية المكتب نفسها (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; }
#home .inner{
  min-height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(26px,5vh,58px);
  padding:clamp(56px,6vh,64px) clamp(18px,5vw,72px) clamp(28px,5vh,56px);
}
#home::before{                 /* توهّجٌ خافتٌ خلف الشعار — عمقٌ لا زخرفة */
  content:''; position:fixed; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 50% 30%, rgba(0,89,255,.10), transparent 70%);
}
.hero{ position:relative; flex:0 0 auto; }
.lockup{
  display:block; height:clamp(84px,16vh,168px); width:auto;
  animation:rise .7s var(--ease) both;
}
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.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:#111114; border:1px solid var(--line); border-radius:16px;
  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);
  animation:rise .7s var(--ease) both;
}
.tile .shot{
  position:relative; display:block; width:100%; aspect-ratio:16/10;
  background:#08080A; overflow:hidden;
}
.tile .shot img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.86; transition:opacity .22s var(--ease), transform .35s var(--ease);
}
.tile .body{ display:block; padding:14px 16px 16px; }
.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:var(--mute); 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(-4px); border-color:rgba(0,89,255,.75);
               background:#131318; box-shadow:0 14px 40px rgba(0,0,0,.55); }
  .tile:hover .shot img{ opacity:1; transform:scale(1.035); }
}
.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); }

/* ── العارض ──────────────────────────────────────────────────────────── */
#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:18px; }
.hint.next{ right:18px; }
@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; bottom:16px; left:50%; transform:translateX(-50%);
  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; bottom:56px; left:50%; transform:translateX(-50%);
  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; }

/* ── النقاط الثلاث ───────────────────────────────────────────────────── */
.dots{
  position:fixed; top:12px; left:12px; z-index:30;
  width:34px; height:34px; padding:0; border:0; border-radius:10px;
  background:transparent; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3.5px;
  transition:background .2s var(--ease);
}
.dots span{
  width:3.5px; height:3.5px; border-radius:50%; background:var(--ink);
  opacity:.38; transition:opacity .2s var(--ease), background .2s var(--ease);
}
.dots:hover span, .dots[aria-expanded="true"] span{ opacity:1; }
.dots[aria-expanded="true"] span{ background:var(--blue); }
.dots:hover{ background:rgba(241,242,242,.07); }
.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; top:52px; left:12px; z-index:31;
  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;
}
.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.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); }