/* =========================================================
   BASE / FULL HEIGHT PAGE
   ========================================================= */

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

html {
  height: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;

  display: flex;
  flex-direction: column;

  background-color: #09090b;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.03) 0.1em,
      transparent 0.1em
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.03) 0.1em,
      transparent 0.1em
    );
  background-size: 2em 2em;
}

/* Page shell always fills viewport */
.page-shell {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;

  display: flex;
  flex-direction: column;
}

/* Main consumes all space above footer */
.page-shell > main {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

/* Footer always stays at bottom */
.page-shell > footer {
  width: 100%;
  flex: 0 0 auto;
  margin-top: auto;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

html[lang="en"] {
  font-family:
    "Space Grotesk",
    ui-sans-serif,
    system-ui,
    sans-serif;
}

html[lang="ar"] {
  font-family:
    "IBM Plex Sans Arabic",
    ui-sans-serif,
    system-ui,
    sans-serif;
}


/* ---------- Arabic corrections ---------- */

html[lang="ar"] .heading {
  letter-spacing: 0;
  line-height: 1.5;
}

html[lang="ar"] .body-copy {
  line-height: 2.05;
}

html[lang="ar"] .badge {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8125rem;
}


/* ---------- Language switcher fonts ---------- */

.font-en {
  font-family:
    "Space Grotesk",
    ui-sans-serif,
    system-ui,
    sans-serif;
}

.font-ar {
  font-family:
    "IBM Plex Sans Arabic",
    ui-sans-serif,
    system-ui,
    sans-serif;
}


/* =========================================================
   LANGUAGE VISIBILITY
   ========================================================= */

html[lang="en"] .lang-ar-only {
  display: none;
}

html[lang="ar"] .lang-en-only {
  display: none;
}


/* =========================================================
   LOGO
   ========================================================= */

.logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* =========================================================
   ANIMATED LOGO
   ========================================================= */

.kp-image {
  --blur-space: 30px;

  position: relative;

  width: 7cm;

  padding: var(--blur-space);
  margin: calc(var(--blur-space) * -1);

  overflow: hidden;

  /* Keep animation LTR even when page becomes RTL */
  direction: ltr;
}


/* ---------- Logo image ---------- */

.kp-image img {
  display: block;

  width: 100%;
  height: auto;
}


/* ---------- Blur mask ---------- */

.kp-mask {
  position: absolute;
  inset: 0;

  z-index: 2;

  direction: ltr;
  pointer-events: none;
}

.kp-mask div {
  position: absolute;
  inset: 0;
}


/* Blur 1 */

.kp-mask div:nth-child(1) {
  --mask: linear-gradient(
    90deg,
    transparent 12.5%,
    #000 25%,
    #000 37.5%,
    transparent 50%
  );

  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);

  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}


/* Blur 2 */

.kp-mask div:nth-child(2) {
  --mask: linear-gradient(
    90deg,
    transparent 25%,
    #000 37.5%,
    #000 50%,
    transparent 62.5%
  );

  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);

  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}


/* Blur 4 */

.kp-mask div:nth-child(3) {
  --mask: linear-gradient(
    90deg,
    transparent 37.5%,
    #000 50%,
    #000 62.5%,
    transparent 75%
  );

  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);

  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}


/* Blur 6 */

.kp-mask div:nth-child(4) {
  --mask: linear-gradient(
    90deg,
    transparent 50%,
    #000 62.5%,
    #000 75%,
    transparent 87.5%
  );

  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);

  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}


/* Blur 10 */

.kp-mask div:nth-child(5) {
  --mask: linear-gradient(
    90deg,
    transparent 62.5%,
    #000 75%,
    #000 87.5%,
    transparent 100%
  );

  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}


/* Blur 16 */

.kp-mask div:nth-child(6) {
  --mask: linear-gradient(
    90deg,
    transparent 75%,
    #000 87.5%,
    #000 100%
  );

  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);

  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}


/* Blur 32 */

.kp-mask div:nth-child(7) {
  width: 200%;

  --mask: linear-gradient(
    90deg,
    transparent 40%,
    #000 50%,
    #000 100%
  );

  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);

  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
}


/* ---------- Logo reveal overlay ---------- */

.kp-overlay {
  position: absolute;

  inset: 0 0 0 auto;

  z-index: 3;

  width: 200%;

  background: #09090b;

  --mask: linear-gradient(
    90deg,
    transparent 0%,
    #000 50%,
    #000 100%
  );

  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);

  direction: ltr;
  pointer-events: none;
}


/* =========================================================
   AMBIENT GRID
   ========================================================= */

.grid-bg {
  background-image:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0.04) 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.04) 1px,
      transparent 1px
    );

  background-size: 72px 72px;

  -webkit-mask-image:
    radial-gradient(
      ellipse 70% 55% at 50% 35%,
      #000 10%,
      transparent 72%
    );

  mask-image:
    radial-gradient(
      ellipse 70% 55% at 50% 35%,
      #000 10%,
      transparent 72%
    );
}


/* =========================================================
   STATUS DOT
   ========================================================= */

@keyframes status-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.35;
    transform: scale(0.78);
  }
}

.status-dot {
  animation:
    status-pulse
    2.5s
    ease-in-out
    infinite;
}


/* =========================================================
   PROGRESS TRACK
   ========================================================= */

/* ---------- Progress Track ---------- */

@keyframes dash-ltr {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(300%);
  }
}

@keyframes dash-rtl {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-300%);
  }
}

.track-runner {
  animation: dash-ltr 3.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* Reverse animation direction in Arabic / RTL */
html[dir="rtl"] .track-runner {
  animation-name: dash-rtl;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .status-dot,
  .track-runner {
    animation: none;
  }
}