/* راسل · صفحة «قريبا» — بلا نص برمجي، والحركة بالـCSS وحده (وتتوقف لمن يطلب تقليل الحركة) */
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/tajawal-500-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EEFF}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/tajawal-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/tajawal-700-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EEFF}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/tajawal-800-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EEFF}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/tajawal-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --night:#10240c; --deep:#1c3d15; --brand:#326B26; --leaf:#5c9a45; --mint:#A9C59F;
  --paper:#FAF7F0; --beige:#E9DFCB; --ink:#242A23; --copper:#C98A35; --gold:#E3B86A;
  --white:#fff; --soft:rgba(255,255,255,.74);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:'Tajawal',system-ui,'Segoe UI',Tahoma,sans-serif;color:var(--white);
  background:radial-gradient(1200px 700px at 85% -10%,#2f6a24 0%,transparent 60%),
             radial-gradient(900px 600px at -10% 110%,#3d2f14 0%,transparent 55%),
             linear-gradient(160deg,var(--deep) 0%,var(--night) 70%);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}

/* ── السماء: نقاط، وهج، طريق خطاب وطائرة ورقية، واظرف تطفو ── */
.sky{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.grid{position:absolute;inset:-2px;background-image:radial-gradient(rgba(255,255,255,.11) 1px,transparent 1.2px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse at 60% 40%,#000 0%,transparent 75%);mask-image:radial-gradient(ellipse at 60% 40%,#000 0%,transparent 75%)}
.orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55}
.o1{width:420px;height:420px;background:#4f8f38;top:-120px;left:-80px;animation:drift 18s ease-in-out infinite alternate}
.o2{width:360px;height:360px;background:#b07a2c;bottom:-140px;right:12%;opacity:.28;animation:drift 22s ease-in-out infinite alternate-reverse}
@keyframes drift{to{transform:translate(60px,40px) scale(1.12)}}
.route{position:absolute;inset:0;width:100%;height:100%}
.route path{fill:none;stroke:rgba(227,184,106,.45);stroke-width:2;stroke-dasharray:2 12;stroke-linecap:round;
  animation:dash 3s linear infinite}
@keyframes dash{to{stroke-dashoffset:-56}}
.plane{position:absolute;left:0;top:0;width:34px;height:34px;color:var(--gold);
  offset-path:path("M-40 690 C 220 560, 300 760, 520 600 S 880 300, 1240 150");offset-rotate:auto;
  animation:fly 14s linear infinite;opacity:.9;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.plane svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round;transform:rotate(45deg)}
@keyframes fly{0%{offset-distance:0%;opacity:0}8%{opacity:.9}92%{opacity:.9}100%{offset-distance:100%;opacity:0}}
.env{position:absolute;width:46px;height:32px;border-radius:5px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  animation:float 11s ease-in-out infinite}
.env::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom right,transparent 49%,rgba(255,255,255,.14) 50%,transparent 51%),
  linear-gradient(to bottom left,transparent 49%,rgba(255,255,255,.14) 50%,transparent 51%);background-size:100% 70%;background-repeat:no-repeat}
.e1{top:18%;right:8%;transform:rotate(-12deg)}
.e2{top:72%;left:6%;width:38px;height:26px;animation-delay:-4s}
.e3{top:12%;left:42%;width:30px;height:21px;opacity:.7;animation-delay:-7s}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -18px}}

/* ── الهيكل ── */
.wrap{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  max-width:1180px;margin:0 auto;padding:22px 20px calc(18px + env(safe-area-inset-bottom))}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{display:inline-flex;color:var(--white);width:112px;height:53px;border-radius:10px;outline-offset:6px}
.logo svg{width:100%;height:100%}
.pill{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;color:var(--beige);
  padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px)}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(227,184,106,.6);animation:ping 2s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(227,184,106,.6)}100%{box-shadow:0 0 0 12px rgba(227,184,106,0)}}

.hero{flex:1;display:grid;grid-template-columns:1fr;gap:34px;align-items:center;padding:34px 0 20px}
.eyebrow{margin:0 0 12px;font-size:14px;font-weight:700;color:var(--mint);letter-spacing:.01em}
h1{margin:0;font-weight:800;font-size:clamp(34px,8.6vw,66px);line-height:1.18;letter-spacing:-.01em}
h1 em{font-style:normal;display:inline-block;padding:.08em 0 .2em;margin:-.08em 0 -.2em;background:linear-gradient(90deg,var(--gold),#f3d9a4 45%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 100%;animation:sheen 6s ease-in-out infinite}
@keyframes sheen{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
.lead{margin:18px 0 0;max-width:560px;font-size:clamp(16px,2.6vw,19px);line-height:1.95;color:var(--soft);font-weight:500}

/* رحلة الخطاب: اربع خطوات تضيء واحدة بعد الاخرى */
.journey{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:560px}
.journey li{position:relative;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-weight:700;font-size:15px;color:#eef3ea;
  animation:step 8s ease-in-out infinite}
.journey li:nth-child(2){animation-delay:2s}.journey li:nth-child(3){animation-delay:4s}.journey li:nth-child(4){animation-delay:6s}
.journey b{flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:15px;
  background:rgba(169,197,159,.16);color:var(--mint)}
@keyframes step{0%,100%{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);transform:none}
  6%,22%{background:rgba(227,184,106,.16);border-color:rgba(227,184,106,.55);transform:translateY(-2px)}
  30%{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);transform:none}}

.soon{margin:30px 0 0;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px}
.soon-word{font-size:clamp(40px,9vw,72px);font-weight:800;line-height:1.25;color:var(--white);
  text-shadow:0 10px 40px rgba(227,184,106,.35)}
.soon-line{font-size:15px;font-weight:700;color:var(--beige)}
.soon-line::after{content:"";display:inline-block;width:1.4em;text-align:start;animation:dots 1.6s steps(4,end) infinite;overflow:hidden;vertical-align:bottom}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%,100%{content:"..."}}

/* ── المسرح: خطاب رسمي يختم امامك ── */
.stage{position:relative;justify-self:center;width:min(100%,400px);aspect-ratio:4/5;perspective:1200px}
.letter{position:absolute;inset:0;border-radius:18px;background:var(--paper);color:var(--ink);padding:22px 22px 18px;overflow:hidden;
  box-shadow:0 40px 80px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.4) inset;transform:rotate(-3deg) rotateY(-6deg);
  animation:hover 9s ease-in-out infinite}
@keyframes hover{0%,100%{transform:rotate(-3deg) rotateY(-6deg) translateY(0)}50%{transform:rotate(-2deg) rotateY(-3deg) translateY(-10px)}}
.letter::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 27px,rgba(50,107,38,.035) 27px 28px);pointer-events:none}
.lh{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:2px solid #e7dfcf}
.lh-logo{width:78px;height:30px;border-radius:8px;background:linear-gradient(90deg,var(--brand),var(--leaf))}
.lh-meta{display:grid;gap:6px;justify-items:start}
.lh-meta i{display:block;height:7px;border-radius:4px;background:#d9cfbb;width:74px}
.lh-meta i+i{width:52px}
.l-ref{margin:14px 0 12px;display:flex;align-items:center;gap:8px;font-size:12px;color:#6d705f}
.l-ref b{font-weight:800;color:var(--brand);font-size:13px;direction:rtl;unicode-bidi:isolate}
.lines{display:grid;gap:11px}
.lines i{display:block;height:8px;border-radius:5px;background:#e4dccb;transform-origin:right;animation:write 9s ease-in-out infinite}
.lines i:nth-child(1){width:62%}.lines i:nth-child(2){width:92%;animation-delay:.25s}.lines i:nth-child(3){width:86%;animation-delay:.5s}
.lines i:nth-child(4){width:95%;animation-delay:.75s}.lines i:nth-child(5){width:70%;animation-delay:1s}.lines i:nth-child(6){width:88%;animation-delay:1.25s}
.lines i:nth-child(7){width:54%;animation-delay:1.5s}
@keyframes write{0%{transform:scaleX(0)}12%,100%{transform:scaleX(1)}}
.l-foot{position:absolute;left:22px;right:22px;bottom:18px;display:flex;align-items:flex-end;justify-content:space-between}
.qr{width:64px;height:64px;border-radius:9px;padding:6px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.qr span{display:block;width:100%;height:100%;
  background:
    linear-gradient(var(--ink),var(--ink)) 0 0/14px 14px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 100% 0/14px 14px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 0 100%/14px 14px no-repeat,
    repeating-conic-gradient(var(--ink) 0 25%,transparent 0 50%) 50% 50%/8px 8px;
  opacity:.85}
.sign svg{width:132px;height:50px;fill:none;stroke:#1d4d8a;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:420;stroke-dashoffset:420;animation:sign 9s ease-in-out infinite}
@keyframes sign{0%,22%{stroke-dashoffset:420}40%,100%{stroke-dashoffset:0}}

/* الختم: ينزل بقوة ثم يثبت بحبره */
.seal{position:absolute;width:128px;height:128px;left:38px;bottom:92px;color:#b3261e;opacity:0;
  animation:stamp 9s cubic-bezier(.2,.9,.25,1.2) infinite}
/* الختم صورة: العربي على مسار منحن يتقطع او ينعكس في سفاري، فرسم مرة بخط صحيح (Tajawal) في كروم وحفظ صورة */
.seal img{display:block;width:100%;height:100%}
.seal .ring{fill:none;stroke:currentColor;stroke-width:4}
.seal .ring.thin{stroke-width:1.6}
/* نص الختم مستقيم: العربي على مسار منحن يتقطع او ينعكس في بعض المتصفحات (سفاري) */
.seal .sm{font:800 11px 'Tajawal',sans-serif;fill:currentColor;text-anchor:middle;direction:rtl;unicode-bidi:plaintext}
.seal .stars circle{fill:currentColor}
.seal .mid{font:800 22px 'Tajawal',sans-serif;fill:currentColor;text-anchor:middle;direction:rtl;unicode-bidi:plaintext}
@keyframes stamp{0%,44%{opacity:0;transform:scale(2.2) rotate(-28deg)}
  52%{opacity:.95;transform:scale(.92) rotate(-14deg)}
  56%{transform:scale(1.03) rotate(-15deg)}
  60%,92%{opacity:.88;transform:scale(1) rotate(-15deg)}
  100%{opacity:0;transform:scale(1) rotate(-15deg)}}
.shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
  transform:translateX(-120%);animation:shine 9s ease-in-out infinite;pointer-events:none}
@keyframes shine{0%,62%{transform:translateX(-120%)}74%,100%{transform:translateX(120%)}}

.chip{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;font-size:13.5px;font-weight:800;
  background:rgba(255,255,255,.96);color:var(--ink);box-shadow:0 18px 40px rgba(0,0,0,.35);white-space:nowrap;opacity:0}
.chip .dot{width:9px;height:9px;border-radius:50%;background:var(--copper)}
.chip .ok{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff;font-size:12px}
.c1{top:14%;left:-6%;animation:pop 9s ease-out infinite;animation-delay:3.2s}
.c2{bottom:-3%;right:-9%;animation:pop 9s ease-out infinite;animation-delay:5.6s}
@keyframes pop{0%{opacity:0;transform:translateY(10px) scale(.95)}6%,40%{opacity:1;transform:none}48%,100%{opacity:0;transform:translateY(-6px)}}

.foot{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding-top:18px;font-size:13px;color:rgba(255,255,255,.62);font-weight:500}
.foot .sep{opacity:.5}

@media (min-width:900px){
  .wrap{padding:30px 32px 24px}
  .hero{grid-template-columns:1.1fr .9fr;gap:56px;padding:20px 0}
  .stage{width:min(100%,420px)}
  .journey{grid-template-columns:repeat(4,minmax(0,1fr))}
  .journey li{flex-direction:column;align-items:flex-start;gap:8px;padding:14px}
}
@media (max-width:420px){
  .c1{left:3%}.c2{right:3%}
  .seal{width:110px;height:110px;left:26px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .seal,.chip{opacity:1}
  .seal{transform:rotate(-15deg);opacity:.88}
  .sign svg{stroke-dashoffset:0}
  .plane{display:none}
}