/* ══════════════════════════════════════════════════
   زويا ✦  —  ورقة التنسيق
   ══════════════════════════════════════════════════ */

:root{
  --bg:        #08060f;
  --bg-2:      #0d0a1a;
  --ink:       #f4f0e8;
  --ink-soft:  #cfc6dd;
  --ink-mute:  #8d84a3;

  --gold:      #e9b44c;
  --gold-2:    #ffd98a;
  --rose:      #ef7d8e;
  --violet:    #9b7fe8;
  --aqua:      #6fe3d2;

  --line:      rgba(255,255,255,.10);
  --line-warm: rgba(233,180,76,.28);
  --glass:     rgba(255,255,255,.035);

  --f-disp: 'Cairo', 'Tajawal', system-ui, sans-serif;
  --f-body: 'Tajawal', 'Cairo', system-ui, sans-serif;
  --f-ser:  'Amiri', 'Tajawal', serif;

  --pad: clamp(20px, 5vw, 56px);
  --ease: cubic-bezier(.22,.9,.28,1);
}

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

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

body{
  margin:0;
  min-height:100svh;
  background:
    radial-gradient(120% 90% at 50% -10%, #1a1330 0%, transparent 60%),
    radial-gradient(90% 70% at 100% 100%, #17102b 0%, transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(16px,1.05rem + .1vw,18px);
  line-height:1.95;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:rgba(233,180,76,.28); color:#fff; }

/* ─────────── الخلفيات المتحركة ─────────── */

#sky{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:.9;
}

.aurora{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.blob{
  position:absolute; display:block; border-radius:50%;
  filter:blur(90px); opacity:.30; will-change:transform;
}
.b1{ width:46vmax; height:46vmax; top:-14vmax; right:-10vmax;
     background:radial-gradient(circle,#7b4ecc,transparent 66%);
     animation:drift1 34s var(--ease) infinite alternate; }
.b2{ width:38vmax; height:38vmax; bottom:-12vmax; left:-8vmax;
     background:radial-gradient(circle,#c9584f,transparent 66%);
     animation:drift2 41s var(--ease) infinite alternate; }
.b3{ width:30vmax; height:30vmax; top:42%; left:34%;
     background:radial-gradient(circle,#b98b2e,transparent 68%); opacity:.18;
     animation:drift3 47s var(--ease) infinite alternate; }

@keyframes drift1{ to{ transform:translate3d(-10vw, 8vh, 0) scale(1.18); } }
@keyframes drift2{ to{ transform:translate3d(12vw,-9vh, 0) scale(1.12); } }
@keyframes drift3{ to{ transform:translate3d(-8vw,-12vh,0) scale(1.25); } }

.grain{
  position:fixed; inset:-50%; z-index:1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-4%)} 60%{transform:translate(-3%,-3%)} 80%{transform:translate(4%,2%)}
}

.glow{
  position:fixed; z-index:1; width:520px; height:520px; margin:-260px 0 0 -260px;
  border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(circle, rgba(233,180,76,.13), transparent 62%);
  transition:opacity .6s ease;
}
@media (hover:hover) and (pointer:fine){ .glow{ opacity:1; } }

/* ─────────── شريط التقدّم ─────────── */

.progress{
  position:fixed; inset-block-start:0; inset-inline:0; height:2px;
  z-index:60; background:rgba(255,255,255,.06);
}
.progress i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--rose),var(--gold),var(--violet));
  box-shadow:0 0 14px rgba(233,180,76,.6);
  transition:width .12s linear;
}

/* ─────────── التخطيط العام ─────────── */

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

.sec{
  min-height:100svh;
  display:flex; align-items:center;
  padding:clamp(80px,12vh,140px) var(--pad);
}
.wrap{ width:100%; max-width:1080px; margin-inline:auto; }
.wrap.narrow{ max-width:720px; }
.center{ text-align:center; }

.tag{
  font-family:var(--f-disp); font-weight:700; font-size:.78rem; letter-spacing:.14em;
  color:var(--gold); margin:0 0 18px;
  display:inline-flex; align-items:center; gap:12px;
}
.tag::after{
  content:''; width:clamp(40px,10vw,90px); height:1px;
  background:linear-gradient(to left,var(--line-warm),transparent);
}
.center .tag{ display:inline-flex; }

.h2{
  font-family:var(--f-disp); font-weight:800;
  font-size:clamp(1.75rem,4.6vw,2.9rem);
  line-height:1.45; margin:0 0 28px; letter-spacing:-.01em;
  background:linear-gradient(160deg,#fff 20%,var(--ink-soft) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.h2.center{ margin-inline:auto; max-width:22ch; }

.prose p{ margin:0 0 22px; color:var(--ink-soft); }
.prose p:last-child{ margin-bottom:0; }
.prose .em{ color:var(--ink); font-weight:500; }

.quote-line{
  font-family:var(--f-ser); font-size:1.22em; line-height:1.85;
  color:var(--gold-2) !important; padding-inline-start:22px;
  border-inline-start:2px solid var(--line-warm);
}

/* ─────────── ١ · المدخل ─────────── */

.hero{ text-align:center; }
.hero .wrap{ display:flex; flex-direction:column; align-items:center; }

.eyebrow{
  font-size:.8rem; letter-spacing:.24em; color:var(--ink-mute);
  margin:0 0 clamp(22px,4vh,40px); font-weight:400;
}

/* ── لوغو الاسم: زويا | Zoya على سطر واحد ──
   تلت ملاحظات:
   ١) الاسم العربي لازم يضل نص واحد — تقطيعه لحروف بيكسر وصل الأحرف.
   ٢) مع background-clip:text، أي جزء من الحرف بينزل برّا صندوق العنصر
      بيضل بلا تدرّج يعني بيختفي. لهيك line-height واسع + padding تحت.
   ٣) القياسات كلها بالـ em نسبةً لـ .name — هيك النسبة بين العربي
      واللاتيني بتضل مظبوطة على كل الشاشات. */

.name{
  /* baseline مشان خط الأساس العربي واللاتيني ينزبطوا سوا */
  margin:0; display:flex; align-items:baseline; justify-content:center;
  gap:clamp(14px,3.2vw,34px);
  font-size:clamp(4.6rem,19vw,10rem);      /* القياس الأساسي للوغو كله */
  animation:float 7s var(--ease) infinite alternate;
}
@keyframes float{ to{ transform:translateY(-12px); } }

/* التدرّج «العجيب»: ذهبي ← وردي ← بنفسجي ← فيروزي، وعم يتحرّك بهدوء */
.name-ar, .name-en{
  background:linear-gradient(100deg,
    var(--gold-2) 0%, var(--rose) 20%, var(--violet) 40%,
    var(--aqua) 56%, var(--gold-2) 76%, var(--rose) 100%);
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 14s linear infinite;
  filter:drop-shadow(0 0 38px rgba(233,180,76,.34))
         drop-shadow(0 0 72px rgba(155,127,232,.28));
}
@keyframes shimmer{ to{ background-position:300% 50%; } }

.name-ar{
  font-family:'Aref Ruqaa', var(--f-disp), serif; font-weight:700;
  font-size:1em;
  line-height:1.4;                 /* خط الرقعة إله نزول عميق */
  padding:.08em .12em .26em;       /* مساحة لذيول الحروف */
}

.name-en{
  direction:ltr;                   /* لتضل الحروف اللاتينية بمحلها */
  font-family:'Cinzel', var(--f-ser), serif; font-weight:600;
  font-size:.34em; line-height:1.35;
  letter-spacing:.10em; padding-inline-start:.10em;   /* تعويض فراغ آخر حرف */
  padding-block-end:.12em;
}

/* الفاصل | */
.name-sep{
  align-self:center;               /* الفاصل ما إله خط أساس فبنوسّطه بإيدنا */
  display:block; width:2px; height:.62em; border-radius:2px; flex:0 0 auto;
  background:linear-gradient(180deg,
    transparent, var(--gold-2) 22%, var(--rose) 55%, var(--violet) 82%, transparent);
  opacity:.85;
}

.hero-sub{
  margin:clamp(22px,3.6vh,34px) 0 0; max-width:52ch;
  color:var(--ink-soft); font-weight:300; font-size:1.05rem; text-wrap:balance;
}

.hero-line{
  width:1px; height:clamp(40px,8vh,80px); margin:clamp(28px,5vh,48px) 0 0;
  background:linear-gradient(to bottom,var(--line-warm),transparent);
}

.scroll-cue{
  margin-top:clamp(18px,3vh,30px);
  display:inline-flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--ink-mute); text-decoration:none; font-size:.82rem; letter-spacing:.1em;
  transition:color .3s ease;
}
.scroll-cue:hover{ color:var(--gold); }
.scroll-cue svg{ animation:bob 2.4s ease-in-out infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0);opacity:.5} 50%{transform:translateY(7px);opacity:1} }

/* ─────────── ٣ · الرسالة ─────────── */

.letter-card{
  position:relative; margin-top:8px;
  padding:clamp(30px,4.5vw,54px);
  border-radius:26px; border:1px solid var(--line);
  background:
    linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.014));
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}
.letter-card::before{
  content:''; position:absolute; inset-block-start:0; inset-inline:clamp(30px,10%,90px);
  height:1px; background:linear-gradient(90deg,transparent,var(--line-warm),transparent);
}
.letter-body p{ font-size:1.03rem; }
.sign{
  margin-top:26px; text-align:start; color:var(--gold);
  font-size:1.4rem; opacity:.75; letter-spacing:.3em;
}

/* ─────────── ٤ · السؤالين ─────────── */

.ask-note{ color:var(--ink-mute); margin:0 0 clamp(34px,5vh,50px); max-width:46ch; font-size:.97rem; }

#askForm{ display:flex; flex-direction:column; gap:clamp(22px,3.4vh,34px); }

.q{ border:0; margin:0; padding:0; }
.q legend{
  font-family:var(--f-disp); font-weight:700;
  font-size:clamp(1.18rem,3.4vw,1.5rem); color:var(--ink);
  margin-bottom:18px; padding:0;
  display:flex; align-items:center; gap:14px;
}
.q-num{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  font-size:.9rem; color:var(--gold);
  background:rgba(233,180,76,.10); border:1px solid var(--line-warm);
}

.opts{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.opt{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:20px 18px; border-radius:18px; cursor:pointer;
  border:1px solid var(--line); background:var(--glass);
  color:var(--ink-soft); font-family:var(--f-disp); font-weight:700; font-size:1.24rem;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform .35s var(--ease), border-color .35s ease, color .35s ease, background .35s ease;
  -webkit-tap-highlight-color:transparent;
}
.opt::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(140deg,var(--c1),var(--c2));
  opacity:0; transition:opacity .4s ease;
}
.opt.yes{ --c1:rgba(233,180,76,.20); --c2:rgba(255,217,138,.06); }
.opt.no { --c1:rgba(155,127,232,.20); --c2:rgba(239,125,142,.06); }

.opt:hover{ transform:translateY(-3px); color:var(--ink); border-color:rgba(255,255,255,.22); }
.opt:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.opt-mark{
  width:20px; height:20px; border-radius:50%; flex:0 0 auto;
  border:1.5px solid rgba(255,255,255,.28);
  display:grid; place-items:center;
  transition:border-color .3s ease, background .3s ease;
}
.opt-mark::after{
  content:''; width:9px; height:9px; border-radius:50%;
  background:currentColor; transform:scale(0); transition:transform .3s var(--ease);
}

.opt[aria-checked="true"]{ color:#fff; border-color:transparent; transform:translateY(-2px); }
.opt[aria-checked="true"]::before{ opacity:1; }
.opt[aria-checked="true"] .opt-mark{ border-color:currentColor; }
.opt[aria-checked="true"] .opt-mark::after{ transform:scale(1); }
.opt.yes[aria-checked="true"]{ box-shadow:0 14px 40px -18px rgba(233,180,76,.75); border-color:var(--line-warm); }
.opt.no [aria-checked="true"]{ box-shadow:0 14px 40px -18px rgba(155,127,232,.75); }
.opt.no[aria-checked="true"]{ box-shadow:0 14px 40px -18px rgba(155,127,232,.75); border-color:rgba(155,127,232,.35); }

/* حقل الملاحظة */
.note-field{ display:flex; flex-direction:column; gap:12px; }
.note-field label{ font-size:.92rem; color:var(--ink-mute); }
.note-field textarea{
  width:100%; resize:vertical; min-height:110px;
  padding:18px 20px; border-radius:18px;
  border:1px solid var(--line); background:rgba(255,255,255,.03);
  color:var(--ink); font-family:var(--f-body); font-size:1rem; line-height:1.85;
  transition:border-color .3s ease, background .3s ease;
}
.note-field textarea::placeholder{ color:rgba(141,132,163,.7); }
.note-field textarea:focus{
  outline:none; border-color:var(--line-warm); background:rgba(255,255,255,.05);
}

/* زر الإرسال */
.submit-row{ display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:6px; }

.send{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; gap:12px;
  padding:17px 40px; border-radius:100px; border:0; cursor:pointer;
  font-family:var(--f-disp); font-weight:800; font-size:1.05rem; color:#1a1206;
  background:linear-gradient(120deg,var(--gold-2),var(--gold));
  box-shadow:0 18px 48px -20px rgba(233,180,76,.85);
  transition:transform .35s var(--ease), box-shadow .35s ease, opacity .35s ease, filter .35s ease;
  -webkit-tap-highlight-color:transparent;
}
.send::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.55),transparent 80%);
  transform:translateX(-120%); transition:transform .8s var(--ease);
}
.send:hover:not(:disabled){ transform:translateY(-3px); box-shadow:0 24px 60px -22px rgba(233,180,76,1); }
.send:hover:not(:disabled)::after{ transform:translateX(120%); }
.send:active:not(:disabled){ transform:translateY(-1px) scale(.985); }
.send:disabled{ opacity:.34; cursor:not-allowed; filter:grayscale(.5); box-shadow:none; }
.send.sending{ pointer-events:none; opacity:.7; }

.hint{ margin:0; font-size:.85rem; color:var(--ink-mute); transition:opacity .3s ease; }
.hint.ready{ opacity:0; }

/* النتيجة */
.result{ margin-top:clamp(28px,4vh,44px); }
.result-inner{
  text-align:center; padding:clamp(30px,4.5vw,46px);
  border-radius:26px; border:1px solid var(--line-warm);
  background:linear-gradient(165deg,rgba(233,180,76,.09),rgba(255,255,255,.014));
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  animation:pop .7s var(--ease) both;
}
@keyframes pop{ from{ opacity:0; transform:translateY(22px) scale(.97);} to{ opacity:1; transform:none;} }

.result-check{
  width:56px; height:56px; margin:0 auto 20px; border-radius:50%;
  display:grid; place-items:center; color:var(--gold);
  background:rgba(233,180,76,.12); border:1px solid var(--line-warm);
}
.result-check svg{ width:28px; height:28px; }
.result-check svg path{ stroke-dasharray:26; stroke-dashoffset:26; animation:draw .7s .25s var(--ease) forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

.result h3{
  font-family:var(--f-disp); font-weight:800; font-size:clamp(1.3rem,3.6vw,1.7rem);
  margin:0 0 14px; color:var(--ink);
}
.result p{ margin:0 auto 22px; max-width:40ch; color:var(--ink-soft); line-height:1.95; }

.ghost{
  background:none; border:1px solid var(--line); color:var(--ink-mute);
  padding:11px 24px; border-radius:100px; cursor:pointer;
  font-family:var(--f-body); font-size:.9rem;
  transition:color .3s ease, border-color .3s ease;
}
.ghost:hover{ color:var(--ink); border-color:var(--line-warm); }

/* ─────────── ٥ · الختام ─────────── */

.end .wrap{ display:flex; flex-direction:column; align-items:center; }
.end-star{
  font-size:1.8rem; color:var(--gold); margin:0 0 26px;
  animation:twinkle 3.6s ease-in-out infinite;
}
@keyframes twinkle{ 0%,100%{opacity:.35; transform:scale(.9)} 50%{opacity:1; transform:scale(1.12)} }
.end-text{ max-width:36ch; color:var(--ink-soft); margin:0; }
.end-sign{
  margin:clamp(34px,6vh,54px) 0 0; font-family:var(--f-ser);
  font-size:1.1rem; color:var(--gold-2); letter-spacing:.06em;
}

/* ─────────── حركة الظهور ─────────── */

.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .95s var(--ease), transform .95s var(--ease);
  transition-delay:calc(var(--i,0) * 120ms);
}
.reveal.in{ opacity:1; transform:none; }

/* ─────────── شاشات صغيرة ─────────── */

@media (max-width:560px){
  body{ line-height:1.85; }
  .sec{ min-height:auto; padding:clamp(70px,14vh,110px) var(--pad); }
  .hero{ min-height:100svh; }
  .end { min-height:80svh; }
  .opts{ gap:10px; }
  .opt{ padding:18px 12px; font-size:1.15rem; }
  .q legend{ gap:10px; }
  .letter-card{ border-radius:20px; }
}

/* ─────────── تقليل الحركة ─────────── */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  #sky,.grain{ display:none; }
}