/* ═══════════════════════════════════════════════════════════════════════════
   kunarqa.com — CALM FUTURISM / المستقبل الهادئ

   صفحة واحدة سينمائية من ستة مشاهد كاملة الشاشة. الابتسامة عنصر حي واحد
   (SVG في طبقة ثابتة) يرافق المشاهد: صغيرة تتنفس في الافتتاح، تنسحب في
   الفكرة، حضور خافت خلف المنتج، ضخمة شفافة في الوعد، توقيع في الهوية.
   السطح كانفس ضوئي يتنقل بين العاجي والبيج والنعناع ببطء.

   الالوان من الهوية الرسمية: Mint #C8FFE8 · Beige #F6D8A6 · عاجي دافئ
   للخلفيات · قريب الاسود للنصوص. العربي اولا، والانكليزي بنفس الحجم والوزن.

   الحركة: opacity + translateY + blur خفيف جدا، منحنى واحد هادئ، بلا
   bounce وبلا spring. prefers-reduced-motion يوقف كل شي.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── الخطوط: Mikhak للعلامة فقط · Tajawal للعربي · Outfit للاتيني ────────── */
@font-face {
  font-family: "Mikhak";
  src: url("../fonts/mikhak-black.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tajawal";
  src: url("../fonts/tajawal-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tajawal";
  src: url("../fonts/tajawal-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── التوكنات ────────────────────────────────────────────────────────────── */
:root {
  /* الهوية الرسمية */
  --ivory: #f8f2e4;        /* عاجي دافئ — الخلفية الام */
  --ivory-hi: #fdfaf2;     /* عاجي مضاء — قلب السطح */
  --mint: #c8ffe8;
  --beige: #f6d8a6;
  --ink: #191817;          /* قريب الاسود — النص والابتسامة */
  --ink-soft: #3a3733;
  --muted: #6f695c;

  --font-brand: "Mikhak", "Tajawal", system-ui, sans-serif;
  --font-ar: "Tajawal", system-ui, sans-serif;
  --font-en: "Outfit", system-ui, sans-serif;

  /* منحنى واحد هادئ لكل الحركة — بلا bounce */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --gutter: clamp(1.5rem, 6vw, 4.5rem);

  /* مقياس النص: العربي والانكليزي بنفس الحجم دائما */
  --fs-line: clamp(1.3rem, 3.4vw, 2.3rem);        /* سطر الافتتاح */
  --fs-statement: clamp(1.65rem, 4.6vw, 3.3rem);  /* عبارات الفكرة والوعد */
  --fs-wordmark: clamp(2.5rem, 7.5vw, 4.8rem);    /* كن ارقى / KUN ARQA */
  --fs-unit: clamp(1.35rem, 3vw, 2.05rem);        /* حماية/تركيز/خصوصية */
}

/* ── اساسيات ─────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-ar);
  font-weight: 500;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: 4px;
}

.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;
}

.skip-link {
  position: fixed;
  inset-inline-start: 50%;
  top: -100px;
  transform: translateX(50%);
  background: var(--ink);
  color: var(--ivory-hi);
  padding: 0.7rem 1.4rem;
  border-radius: 0 0 12px 12px;
  z-index: 60;
  text-decoration: none;
  font-weight: 700;
  transition: top 0.25s var(--ease);
}
.skip-link:focus {
  top: 0;
}

/* ── الطبقات ─────────────────────────────────────────────────────────────── */
/* السطح الضوئي — خلف كل شي */
#field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* الابتسامة الحية — فوق السطح، تحت المحتوى */
.smile-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: none; /* تظهر فقط في وضع الحركة الكاملة (html.live) */
}
html.live .smile-layer {
  display: block;
}
#smile {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 320px;
  height: auto;
  overflow: visible;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}
#smile path,
.smile-static path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* حبيبات المادة — فوق الابتسامة والسطح، تحت المحتوى */
.grain {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.032;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

main {
  position: relative;
  z-index: 3;
}

/* ── المشاهد ─────────────────────────────────────────────────────────────── */
.scene {
  min-height: 100svh;
  display: grid;
  place-items: center;
  position: relative;
  padding: clamp(5rem, 12vh, 8rem) var(--gutter);
}

.inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 62rem;
}

/* فاصل صمت بين العبارة وردّها */
.beat {
  height: clamp(2.2rem, 6vh, 4rem);
}

/* ── النصوص: العربي اولا، والانكليزي بنفس الحجم والوزن البصري ───────────── */
.line {
  font-size: var(--fs-line);
  font-weight: 700;
  line-height: 1.85;
  margin: 0;
  color: var(--ink);
}
.line-en {
  font-family: var(--font-en);
  font-weight: 440;
  direction: ltr;
  unicode-bidi: isolate;
  line-height: 1.6;
  margin-top: 0.4em;
  color: var(--ink-soft);
}

.statement {
  font-size: var(--fs-statement);
  font-weight: 700;
  line-height: 1.7;
  margin: 0;
  color: var(--ink);
  max-width: 24ch;
}
.statement.line-en {
  font-size: var(--fs-statement);
  max-width: 26ch;
}

.statement-2 {
  font-size: var(--fs-statement);
  font-weight: 700;
  line-height: 1.7;
  margin: 0;
  color: var(--ink);
  max-width: 36ch;
}
.statement-2.line-en {
  font-size: var(--fs-statement);
  max-width: 30ch;
}

/* «مو ضدك.» — الرد القاطع بوزن اثقل قليلا، نفس الحجم */
.counter {
  font-weight: 700;
}
.counter.line-en {
  font-weight: 540;
}

/* ── العلامة: كن ارقى / KUN ARQA — بنفس الحجم ───────────────────────────── */
.wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28em;
  margin: 0;
}
.wordmark-ar {
  font-family: var(--font-brand);
  font-weight: 900;
  font-size: var(--fs-wordmark);
  line-height: 1.15;
  color: var(--ink);
}
.wordmark-en {
  font-family: var(--font-en);
  font-weight: 580;
  font-size: var(--fs-wordmark);
  line-height: 1.05;
  letter-spacing: 0.05em;
  color: var(--ink);
  direction: ltr;
  unicode-bidi: isolate;
}

/* ── المشهد ١: الافتتاح ──────────────────────────────────────────────────── */
.smile-slot {
  width: min(46vw, 330px);
  margin-bottom: clamp(2.6rem, 7vh, 4.5rem);
}
.smile-slot svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
/* بوضع الحركة الكاملة الطبقة الحية تحل محل الساكنة — الفتحة تبقى كمرساة هندسية */
html.live .smile-slot .smile-static {
  visibility: hidden;
}

.scene-open .wordmark {
  margin-top: clamp(2.6rem, 7vh, 4.2rem);
}

/* تسلسل الافتتاح: صمت بصري ثم ظهور هادئ (يشتغل بلا JS ايضا) */
.intro {
  opacity: 0;
  animation: rise 1.4s var(--ease) forwards;
  animation-delay: var(--ad, 0ms);
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(26px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* مؤشر تمرير بالغ البساطة: شعرة تتنفس نزولا */
.scroll-hint {
  margin-top: clamp(3rem, 9vh, 5.5rem);
  width: 1px;
  height: 52px;
  background: linear-gradient(to bottom, var(--ink), transparent);
  opacity: 0.35;
}
html.live .scroll-hint {
  animation: rise 1.4s var(--ease) forwards, descend 3s var(--ease) 3.4s infinite;
}
@keyframes descend {
  0%,
  100% {
    transform: scaleY(0.35);
    transform-origin: top;
    opacity: 0.18;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
    opacity: 0.4;
  }
}

/* ── المشهد ٣: المنتج ────────────────────────────────────────────────────── */
.product {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 clamp(3.5rem, 9vh, 6rem);
}
.product-name {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(2.1rem, 5.6vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: var(--ink);
  direction: ltr;
  unicode-bidi: isolate;
}
.product-os {
  font-family: var(--font-en);
  font-weight: 430;
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--muted);
  direction: ltr;
  unicode-bidi: isolate;
}

/* ثلاث وحدات نصية متساوية — بلا ايقونات وبلا كروت */
.triad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: min(100%, 54rem);
}
.unit {
  padding: 0.6rem clamp(1rem, 3vw, 2.6rem);
  border-inline-start: 1px solid rgba(25, 24, 23, 0.14);
}
.unit:first-child {
  border-inline-start: 0;
}
.u-ar {
  font-size: var(--fs-unit);
  font-weight: 700;
  line-height: 1.6;
  margin: 0;
  color: var(--ink);
}
.u-en {
  font-family: var(--font-en);
  font-weight: 440;
  font-size: var(--fs-unit);
  line-height: 1.45;
  margin: 0.15em 0 0;
  color: var(--ink-soft);
  direction: ltr;
  unicode-bidi: isolate;
}

/* ── المشهد ٤: الوعد — الابتسامة الضخمة الخافتة ─────────────────────────── */
/* النسخة الساكنة تظهر فقط بلا حركة/بلا JS؛ في الوضع الحي الطبقة تتكفل بها */
.smile-bg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(150vw, 1900px);
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0.07;
  overflow: visible;
}
.smile-bg path {
  stroke-width: 4.4;
}
html.live .smile-bg {
  display: none;
}
/* المشهد يقص ابتسامته الساكنة العريضة (150vw) — بلا هذا يظهر تجاوز افقي
   في وضع تقليل الحركة. الطبقة الحية خارج المشهد فلا تتاثر بالقص. */
.scene-promise {
  overflow: hidden;
}
.scene-promise .inner {
  position: relative;
}

/* ── المشهد ٥: الهوية — توقيع بصري ──────────────────────────────────────── */
.slot-identity {
  width: min(34vw, 250px);
}
.scene-identity .wordmark {
  margin: 0;
}

/* ── المشهد الاخير: المؤسس ──────────────────────────────────────────────── */
.founder-role {
  font-size: clamp(1rem, 2.1vw, 1.2rem);
  font-weight: 500;
  color: var(--muted);
  margin: 0;
}
.founder-name {
  font-size: clamp(1.45rem, 3.4vw, 2.25rem);
  font-weight: 700;
  color: var(--ink);
  margin: 0.5rem 0 0;
}
.founder-name span {
  font-family: var(--font-en);
  font-weight: 560;
  unicode-bidi: isolate;
}

.social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: clamp(2.6rem, 6vh, 3.8rem);
}
.social a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-en);
  font-weight: 450;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 0.62rem 1.2rem;
  border-radius: 999px;
  border: 1px solid rgba(25, 24, 23, 0.16);
  background: rgba(255, 253, 247, 0.5);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease),
    background 0.4s var(--ease), transform 0.4s var(--ease);
}
.social a:hover {
  color: var(--ink);
  border-color: rgba(25, 24, 23, 0.4);
  background: rgba(255, 253, 247, 0.9);
  transform: translateY(-2px);
}
.social svg {
  width: 14px;
  height: 14px;
  flex: none;
  fill: currentColor;
}

.copyright {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--muted);
  margin: clamp(3rem, 8vh, 5rem) 0 0;
  direction: ltr;
  unicode-bidi: isolate;
}

/* ── الكشف عند التمرير: opacity + translateY + blur خفيف جدا ───────────── */
.rv {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition: opacity 1.2s var(--ease) var(--d, 0ms),
    transform 1.2s var(--ease) var(--d, 0ms),
    filter 1.2s var(--ease) var(--d, 0ms);
}
.scene.shown .rv {
  opacity: 1;
  transform: none;
  filter: none;
}

/* بلا JS: كل شي ظاهر وثابت — المحتوى لا يُحتجز خلف سكربت */
html:not(.js) .rv,
html:not(.js) .intro {
  opacity: 1;
  transform: none;
  filter: none;
  animation: none;
  transition: none;
}
html:not(.js) .scroll-hint {
  opacity: 0.35;
}

/* ── الموبايل: ايقاع خاص، مو تصغير ديسكتوب ─────────────────────────────── */
@media (max-width: 700px) {
  :root {
    --fs-line: clamp(1.2rem, 5.4vw, 1.55rem);
    --fs-statement: clamp(1.5rem, 6.8vw, 2.1rem);
    --fs-wordmark: clamp(2.3rem, 11vw, 3.2rem);
    --fs-unit: clamp(1.3rem, 5.6vw, 1.7rem);
  }
  .scene {
    padding-block: clamp(4.5rem, 11vh, 6rem);
  }
  .smile-slot {
    width: min(58vw, 260px);
    margin-bottom: clamp(2.2rem, 6vh, 3.2rem);
  }
  .slot-identity {
    width: min(44vw, 200px);
  }
  /* الوحدات الثلاث تنعمد بفواصل افقية بدل الاعمدة */
  .triad {
    grid-template-columns: 1fr;
    gap: 0;
    width: min(100%, 22rem);
  }
  .unit {
    border-inline-start: 0;
    border-top: 1px solid rgba(25, 24, 23, 0.14);
    padding: clamp(1.2rem, 4vw, 1.6rem) 0;
  }
  .unit:first-child {
    border-top: 0;
  }
  .smile-bg {
    width: 220vw;
  }
  .beat {
    height: clamp(1.8rem, 5vh, 2.6rem);
  }
}

/* ── تقليل الحركة: سكون تام مع بقاء كل المحتوى ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rv,
  .intro {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}
/* html.static يضبطها السكربت عند تقليل الحركة — الطبقة الحية لا تظهر اصلا
   لان html.live لا يُضاف، والسواكن تبقى ظاهرة */
html.static .rv,
html.static .intro {
  opacity: 1;
  transform: none;
  filter: none;
  animation: none;
  transition: none;
}