/* ==========================================================================
   إسناد للاعتمادات والخدمات الإدارية — Coming Soon
   Mobile-first · RTL · no dependencies
   ========================================================================== */

@font-face {
  font-family: "Cairo";
  src: url("../Cairo.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #16284d;
  --navy-soft: #3a4a6b;
  --gold: #b8923a;
  --gold-light: #dcc27a;
  --gold-text: #86651a;      /* darker gold for small text: AA contrast on white */
  --white: #ffffff;
  --offwhite: #faf6ee;
  --line: rgba(184, 146, 58, 0.45);

  --font: "Cairo", "Segoe UI", Tahoma, "Geeza Pro", "Noto Naskh Arabic",
          "Noto Sans Arabic", Arial, sans-serif;

  --logo-h: clamp(116px, 32vw, 188px);
  --inset: 12px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--white);
  color: var(--navy);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.8;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Page shell ---------- */

.page {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--inset);
  overflow: hidden;
  isolation: isolate;
}

/* Fine gold frame */
.frame {
  position: absolute;
  inset: var(--inset);
  border: 1px solid var(--line);
  pointer-events: none;
  z-index: 1;
}
.frame i {
  position: absolute;
  width: 9px; height: 9px;
  background: var(--white);
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}
.frame i:nth-child(1) { top: -5px;    right: -5px; }
.frame i:nth-child(2) { top: -5px;    left: -5px; }
.frame i:nth-child(3) { bottom: -5px; right: -5px; }
.frame i:nth-child(4) { bottom: -5px; left: -5px; }

/* Corner geometry */
.corner {
  position: absolute;
  width: clamp(92px, 22vw, 300px);
  height: auto;
  color: var(--gold);
  --corner-o: 0.6;
  opacity: var(--corner-o);
  pointer-events: none;
  z-index: 0;
}
.corner--tr { top: var(--inset);    right: var(--inset); }
.corner--bl { display: none; bottom: var(--inset); left: var(--inset); transform: rotate(180deg); }

/* Soft warm wash behind the lower half */
.page::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  background: linear-gradient(to top, var(--offwhite), rgba(250, 246, 238, 0));
  z-index: -1;
}

/* ---------- Content ---------- */

.stage {
  position: relative;
  z-index: 2;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 112px 22px 36px;
  max-width: 880px;
  width: 100%;
  margin: 0 auto;
}

/* Logo lockup — kept in the original left/right arrangement */
.lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 4vw, 40px);
  margin: 0 0 clamp(28px, 6vw, 52px);
  direction: ltr;
}
.lockup img { height: var(--logo-h); width: auto; }
.lockup .rule {
  width: 1px;
  height: calc(var(--logo-h) * 0.86);
  background: linear-gradient(to bottom, transparent, var(--gold) 18%, var(--gold) 82%, transparent);
  opacity: 0.7;
}

/* "قريباً" */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  color: var(--gold-text);
  font-size: clamp(1.05rem, 3.6vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0;
}
.eyebrow::before,
.eyebrow::after {
  content: "";
  width: clamp(26px, 8vw, 56px);
  height: 1px;
  background: var(--gold);
}
.eyebrow span {
  position: relative;
  padding: 0 2px;
}

/* Headline */
h1 {
  margin: 0 0 18px;
  color: var(--navy);
  font-size: clamp(1.9rem, 7.4vw, 4rem);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0;
  text-wrap: balance;
}

.divider {
  display: block;
  width: 72px;
  height: 3px;
  margin: 0 auto 22px;
  background: linear-gradient(to left, var(--gold), var(--gold-light));
  border-radius: 2px;
  transform-origin: center;
}

.lead {
  margin: 0 0 26px;
  max-width: 31em;
  color: var(--navy-soft);
  font-size: clamp(1rem, 3.5vw, 1.25rem);
  font-weight: 400;
  line-height: 2;
  text-wrap: balance;
}

.en {
  margin: 0;
  color: var(--gold-text);
  font-size: clamp(0.68rem, 2.4vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  direction: ltr;
  padding-left: 0.38em; /* optical centering for tracked text */
}

/* ---------- Footer ---------- */

.foot {
  position: relative;
  z-index: 2;
  padding: 14px 18px 22px;
  text-align: center;
  color: var(--navy-soft);
  font-size: 0.82rem;
  line-height: 1.7;
}
.foot::before {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  margin: 0 auto 12px;
  background: var(--gold);
}
.foot bdi { white-space: nowrap; }

/* ---------- Entrance animation (lightweight) ---------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes grow {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}
@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeCorner {
  from { opacity: 0; }
  to   { opacity: var(--corner-o, 0.6); }
}

.lockup   { animation: rise 0.9s cubic-bezier(.2,.7,.2,1) both; }
.eyebrow  { animation: rise 0.8s 0.25s cubic-bezier(.2,.7,.2,1) both; }
h1        { animation: rise 0.9s 0.38s cubic-bezier(.2,.7,.2,1) both; }
.divider  { animation: grow 0.8s 0.6s cubic-bezier(.2,.7,.2,1) both; }
.lead     { animation: rise 0.9s 0.7s cubic-bezier(.2,.7,.2,1) both; }
.en       { animation: rise 0.9s 0.85s cubic-bezier(.2,.7,.2,1) both; }
.foot     { animation: fade 1s 1s ease both; }
.corner   { animation: fadeCorner 1.6s 0.3s ease both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Larger screens ---------- */

@media (min-width: 640px) {
  :root { --inset: 20px; }
  .corner--bl { display: block; }
  .stage { padding: 112px 40px 100px; }
  .divider { width: 88px; }
}

@media (min-width: 1024px) {
  :root { --inset: 28px; --logo-h: 200px; }
  .stage { padding: 72px 56px 72px; }
  .corner { --corner-o: 0.75; }
}

@media (min-width: 1024px) and (max-height: 960px) {
  :root { --logo-h: 160px; }
  .stage { padding-top: 40px; padding-bottom: 48px; }
  .lockup { margin-bottom: 30px; }
  h1 { font-size: clamp(2.4rem, 4.6vw, 3.4rem); }
}

@media (min-width: 1600px) {
  :root { --logo-h: 220px; }
  .stage { max-width: 980px; }
}

/* Short landscape phones */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --logo-h: 84px; }
  .corner { display: none; }
  .stage { padding-top: 40px; padding-bottom: 20px; }
  .lockup { margin-bottom: 18px; }
  h1 { font-size: clamp(1.5rem, 4.5vw, 2.2rem); }
  .lead { margin-bottom: 14px; line-height: 1.8; }
}

/* Print: clean white */
@media print {
  .corner, .frame, .page::before { display: none; }
}