/* ==========================================================================
   توانا حامد محمد — بطاقة انتظار مولودة
   نمط Claymorphism: أشكال منفوخة، حواف دائرية، ظلال ناعمة، ألوان باستيل.
   1. التوكنات
   2. الأساس والتخطيط
   3. الحركة (keyframes)
   4. عناصر مشتركة
   5. الافتتاحية والسماء
   6. العبارة الشعرية
   7. العدّ التنازلي
   8. إطار الصورة
   9. بطاقات "وهي الآن"
   10. رسالة لماما
   11. ملاحظات
   12. الختام والمشاركة
   13. الوصولية وتقليل الحركة
   ========================================================================== */

/* ---------- 1. التوكنات ---------- */
*, *::before, *::after { box-sizing: border-box; }

:root{
  color-scheme: light;

  --ground:#FFF6FA;
  --wash-a:rgba(255,205,226,.55);
  --wash-b:rgba(199,183,255,.42);
  --wash-c:rgba(150,226,207,.34);

  --card:#FFFFFF;
  --card-2:#FFF9FC;

  --ink:#3E2540;
  --ink-soft:#7A5A76;

  --pink:#F79CC2;      --pink-deep:#C33C78;
  --lilac:#BBA9F6;     --lilac-deep:#6C4AD0;
  --mint:#93DECD;      --mint-deep:#0F8A70;
  --gold:#FFCB7C;      --gold-deep:#9F6A15;

  --cloud:#FFFFFF;     --cloud-2:#F1ECFF;
  --moon:#FFE6A6;      --moon-line:#F0C476;  --moon-blush:#FFC3D8;

  --line:rgba(62,37,64,.12);
  --line-strong:rgba(62,37,64,.26);

  --dot-a:247,156,194;
  --dot-b:187,169,246;
  --dot-c:255,203,124;
  --dot-alpha:.55;

  /* ظلال الطين: خارجيّة ناعمة + لمعة داخلية علوية + عمق داخلي سفلي */
  --clay:
    0 22px 38px -22px rgba(88,48,92,.45),
    0 6px 14px -10px rgba(88,48,92,.30),
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -8px 16px -10px rgba(88,48,92,.22);
  --clay-lift:
    0 30px 48px -22px rgba(88,48,92,.48),
    0 8px 18px -10px rgba(88,48,92,.32),
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -8px 16px -10px rgba(88,48,92,.22);
  --clay-soft:
    0 14px 26px -18px rgba(88,48,92,.40),
    inset 0 2px 0 rgba(255,255,255,.9);
  --sheen:rgba(255,255,255,.8);
  --on-pastel:#2C1130;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --ground:#161130;
    --wash-a:rgba(158,72,116,.42); --wash-b:rgba(96,72,175,.40); --wash-c:rgba(30,110,105,.28);
    --card:#241C4C; --card-2:#2A2158;
    --ink:#F6EEFF; --ink-soft:#C0AFE4;
    --pink:#EF8CB6; --pink-deep:#FFAFCE;
    --lilac:#A493EE; --lilac-deep:#CBBBFF;
    --mint:#6BC8B4; --mint-deep:#8EE6D2;
    --gold:#F2C177; --gold-deep:#FFDCA0;
    --cloud:#2C2461; --cloud-2:#342A6E;
    --moon:#F7DC9C; --moon-line:#C9A55F; --moon-blush:#B7708F;
    --line:rgba(246,238,255,.14); --line-strong:rgba(246,238,255,.30);
    --dot-a:239,140,182; --dot-b:164,147,238; --dot-c:242,193,119;
    --dot-alpha:.42;
    --clay:
      0 24px 40px -22px rgba(0,0,0,.75),
      0 6px 14px -10px rgba(0,0,0,.55),
      inset 0 2px 0 rgba(255,255,255,.10),
      inset 0 -8px 16px -10px rgba(0,0,0,.55);
    --clay-lift:
      0 32px 50px -22px rgba(0,0,0,.80),
      0 8px 18px -10px rgba(0,0,0,.60),
      inset 0 2px 0 rgba(255,255,255,.10),
      inset 0 -8px 16px -10px rgba(0,0,0,.55);
    --clay-soft:
      0 16px 28px -18px rgba(0,0,0,.70),
      inset 0 2px 0 rgba(255,255,255,.08);
    --sheen:rgba(255,255,255,.18);
    --on-pastel:#241026;
  }
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --ground:#161130;
  --wash-a:rgba(158,72,116,.42); --wash-b:rgba(96,72,175,.40); --wash-c:rgba(30,110,105,.28);
  --card:#241C4C; --card-2:#2A2158;
  --ink:#F6EEFF; --ink-soft:#C0AFE4;
  --pink:#EF8CB6; --pink-deep:#FFAFCE;
  --lilac:#A493EE; --lilac-deep:#CBBBFF;
  --mint:#6BC8B4; --mint-deep:#8EE6D2;
  --gold:#F2C177; --gold-deep:#FFDCA0;
  --cloud:#2C2461; --cloud-2:#342A6E;
  --moon:#F7DC9C; --moon-line:#C9A55F; --moon-blush:#B7708F;
  --line:rgba(246,238,255,.14); --line-strong:rgba(246,238,255,.30);
  --dot-a:239,140,182; --dot-b:164,147,238; --dot-c:242,193,119;
  --dot-alpha:.42;
  --clay:
    0 24px 40px -22px rgba(0,0,0,.75),
    0 6px 14px -10px rgba(0,0,0,.55),
    inset 0 2px 0 rgba(255,255,255,.10),
    inset 0 -8px 16px -10px rgba(0,0,0,.55);
  --clay-lift:
    0 32px 50px -22px rgba(0,0,0,.80),
    0 8px 18px -10px rgba(0,0,0,.60),
    inset 0 2px 0 rgba(255,255,255,.10),
    inset 0 -8px 16px -10px rgba(0,0,0,.55);
  --clay-soft:
    0 16px 28px -18px rgba(0,0,0,.70),
    inset 0 2px 0 rgba(255,255,255,.08);
  --sheen:rgba(255,255,255,.18);
  --on-pastel:#241026;
}

/* ---------- 2. الأساس والتخطيط ---------- */
body{
  margin:0;
  direction:rtl;
  text-align:right;
  background:
    radial-gradient(120% 70% at 50% -8%, var(--wash-a), transparent 60%),
    radial-gradient(70% 50% at 8% 30%, var(--wash-b), transparent 68%),
    radial-gradient(66% 50% at 96% 72%, var(--wash-c), transparent 70%),
    var(--ground);
  background-attachment:fixed;
  color:var(--ink);
  font-family:"Tajawal","Segoe UI",system-ui,sans-serif;
  font-size:16.5px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;}
[hidden]{display:none !important;}
p{margin:0;}

#drift{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:0;}

.stage{
  position:relative; z-index:1;
  max-width:46rem; margin:0 auto;
  padding:clamp(1.75rem,6vw,3.5rem) clamp(1.1rem,5vw,2rem) 4rem;
  display:flex; flex-direction:column;
  gap:clamp(3rem,8vw,4.75rem);
}

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

/* ---------- 3. الحركة ---------- */
@keyframes rise{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;}}
@keyframes popIn{0%{opacity:0; transform:translateY(26px) scale(.94);} 70%{opacity:1; transform:translateY(-4px) scale(1.02);} 100%{opacity:1; transform:none;}}
@keyframes wordIn{from{opacity:0; transform:translateY(16px); filter:blur(6px);} to{opacity:1; transform:none; filter:blur(0);}}
@keyframes nameIn{0%{opacity:0; transform:scale(.7) translateY(24px);} 62%{opacity:1; transform:scale(1.06) translateY(0);} 100%{opacity:1; transform:none;}}
@keyframes float{0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);}}
/* تتركّب فوق سمة transform الخاصة بالـSVG بدل أن تلغيها */
@keyframes floatAttr{0%,100%{translate:0 0;} 50%{translate:0 -10px;}}
@keyframes bobAttr{0%,100%{translate:0 0; rotate:-2deg;} 50%{translate:0 -8px; rotate:2deg;}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg);} 50%{transform:translateY(-8px) rotate(2deg);}}
@keyframes drift{0%{transform:translateX(0);} 50%{transform:translateX(14px);} 100%{transform:translateX(0);}}
@keyframes twinkle{0%,100%{opacity:.25; transform:scale(.7);} 50%{opacity:1; transform:scale(1.15);}}
@keyframes heartbeat{0%,100%{transform:scale(1);} 14%{transform:scale(1.26);} 28%{transform:scale(1);} 42%{transform:scale(1.14);} 56%{transform:scale(1);}}
@keyframes widen{from{transform:scaleX(0);} to{transform:scaleX(1);}}
@keyframes sweep{0%{transform:translateX(120%);} 100%{transform:translateX(-320%);}}
@keyframes tick{0%{transform:translateY(0);} 40%{transform:translateY(-7px) scale(1.05);} 100%{transform:translateY(0);}}
@keyframes popInTilt{0%{opacity:0; transform:translateY(26px) scale(.94) rotate(-1.6deg);} 70%{opacity:1; transform:translateY(-4px) scale(1.02) rotate(-1.6deg);} 100%{opacity:1; transform:rotate(-1.6deg);}}
@keyframes swell{0%,100%{transform:scale(1); opacity:.55;} 50%{transform:scale(1.12); opacity:.85;}}

.js .reveal{opacity:0;}
.js .reveal.in{
  opacity:1;
  /* backwards لا forwards: بعد انتهاء الحركة يرجع العنصر لقيمه المعلنة فيشتغل hover */
  animation:popIn .8s backwards cubic-bezier(.22,.9,.28,1.08);
  animation-delay:calc(var(--i,0) * .1s);
}
.w{display:inline-block; animation:wordIn .7s both cubic-bezier(.2,.8,.25,1); animation-delay:calc(var(--base,0s) + var(--i) * .075s);}

/* ---------- 4. عناصر مشتركة ---------- */
.chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem 1rem .5rem;
  border-radius:999px;
  background:var(--card); color:var(--pink-deep);
  font-size:.88rem; font-weight:700; line-height:1.7;
  box-shadow:var(--clay-soft);
  align-self:center;
}
.chip svg{width:1.05rem; height:1.05rem; flex:none;}
.chip.soft{color:var(--lilac-deep);}
.chip.ghost{background:transparent; box-shadow:none; color:var(--gold-deep); padding-inline:0; align-self:flex-start;}

.section-title{
  font-family:"Baloo Bhaijaan 2","Tajawal",sans-serif; font-weight:700;
  font-size:clamp(1.5rem,4.6vw,2.15rem); line-height:1.75;
  margin:0; color:var(--ink); text-wrap:balance;
}

.card-surface{
  background:var(--card);
  border-radius:28px;
  box-shadow:var(--clay);
}

/* ---------- 5. الافتتاحية والسماء ---------- */
.hero{display:flex; flex-direction:column; align-items:center; gap:.9rem; text-align:center;}

.sky{width:min(100%,30rem); height:auto; margin-bottom:-.5rem;}
.sky .cloud{animation:drift 14s ease-in-out infinite;}
.sky .c2{animation-duration:18s; animation-delay:-4s;}
.sky .c3{animation-duration:22s; animation-delay:-9s;}
.sky .moon{transform-box:fill-box; transform-origin:center; animation:bobAttr 9s ease-in-out infinite;}
.sky .balloon{animation:floatAttr 6.5s ease-in-out infinite;}
.sky .b2{animation-duration:8s; animation-delay:-2s;}
.sky .b3{animation-duration:7.4s; animation-delay:-4s;}
.sky .hang{animation:float 8.5s ease-in-out infinite;}
.sky .tw{transform-box:fill-box; transform-origin:center; animation:twinkle 3.4s ease-in-out infinite;}
.sky .t2{animation-delay:.7s;} .sky .t3{animation-delay:1.3s;}
.sky .t4{animation-delay:1.9s;} .sky .t5{animation-delay:2.4s;} .sky .t6{animation-delay:.4s;}

.hero .chip{animation:rise .8s .1s both cubic-bezier(.2,.8,.25,1);}

.name{
  margin:0;
  font-family:"Baloo Bhaijaan 2","Tajawal",sans-serif; font-weight:800;
  font-size:clamp(4rem,19vw,8rem); line-height:1.3;
  color:var(--pink-deep);
  text-shadow:0 8px 0 var(--card), 0 14px 24px rgba(88,48,92,.22);
  animation:nameIn 1.15s .22s both cubic-bezier(.22,.9,.28,1.12);
  padding-inline:.1em;
}
.lineage{
  font-family:"Amiri",serif; font-size:clamp(1.1rem,4vw,1.45rem);
  color:var(--ink-soft); word-spacing:.35em;
  animation:rise .9s .85s both cubic-bezier(.2,.8,.25,1);
}
.hero-line{
  font-family:"Amiri",serif; font-size:clamp(1.15rem,3.6vw,1.45rem);
  line-height:2.1; color:var(--ink); max-width:28rem; text-wrap:balance;
  margin-top:.35rem;
}

/* ---------- 6. العبارة الشعرية ---------- */
.verse{
  position:relative; overflow:hidden;
  background:var(--card);
  border-radius:36px;
  box-shadow:var(--clay);
  padding:clamp(2rem,6vw,3rem) clamp(1.5rem,5vw,3rem);
  display:flex; flex-direction:column; align-items:center; gap:.7rem; text-align:center;
}
.verse::before{
  content:""; position:absolute; inset-inline-start:-3rem; top:-3rem;
  width:9rem; height:9rem; border-radius:50%;
  background:var(--wash-b); opacity:.6; animation:swell 9s ease-in-out infinite;
}
.verse::after{
  content:""; position:absolute; inset-inline-end:-2.5rem; bottom:-3.5rem;
  width:9rem; height:9rem; border-radius:50%;
  background:var(--wash-a); opacity:.55; animation:swell 11s ease-in-out infinite reverse;
}
.verse > *{position:relative; z-index:1;}
.quote-mark{
  font-family:"Amiri",serif; font-size:2.6rem; line-height:1;
  color:var(--gold); opacity:.85;
}
.verse-line{
  font-family:"Amiri",serif; font-weight:700;
  font-size:clamp(1.5rem,5.6vw,2.6rem); line-height:1.75;
  color:var(--ink); letter-spacing:.01em; text-wrap:balance;
}
.verse-note{font-size:.98rem; color:var(--ink-soft);}

/* ---------- 7. العدّ التنازلي ---------- */
.count{display:flex; flex-direction:column; align-items:center; gap:1rem; text-align:center;}
.clock{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(.5rem,2.2vw,1rem); width:100%; margin-top:.5rem;
}
.unit{
  background:var(--card); border-radius:24px;
  box-shadow:var(--clay);
  padding:clamp(.9rem,3vw,1.35rem) .35rem clamp(.7rem,2.4vw,1rem);
  display:flex; flex-direction:column; align-items:center; gap:.15rem;
  transition:transform .35s cubic-bezier(.22,.9,.28,1.1), box-shadow .35s;
}
.unit:hover{transform:translateY(-5px); box-shadow:var(--clay-lift);}
.unit:nth-child(1){color:var(--pink-deep);}
.unit:nth-child(2){color:var(--lilac-deep);}
.unit:nth-child(3){color:var(--mint-deep);}
.unit:nth-child(4){color:var(--gold-deep);}
.digits{
  font-family:"Baloo Bhaijaan 2","Tajawal",sans-serif; font-weight:800;
  font-size:clamp(1.7rem,7.5vw,2.7rem); line-height:1.25;
  color:currentColor; font-variant-numeric:tabular-nums;
}
.digits.pop{animation:tick .5s cubic-bezier(.22,.9,.28,1.15);}
.unit .label{font-size:.82rem; font-weight:700; color:var(--ink-soft);}

.due{font-size:1rem; color:var(--ink-soft); margin-top:.35rem;}
.due strong{color:var(--ink); font-weight:700;}

.weeks{width:min(100%,26rem); display:flex; flex-direction:column; align-items:center; gap:.6rem;}
.track{
  position:relative; width:100%; height:14px; border-radius:999px;
  background:var(--card-2);
  box-shadow:inset 0 3px 6px -2px rgba(88,48,92,.28), inset 0 -1px 0 rgba(255,255,255,.7);
}
.fill{
  position:absolute; inset-block:0; inset-inline-start:0; width:0; border-radius:999px;
  background:linear-gradient(-90deg, var(--pink), var(--lilac) 60%, var(--mint));
  transition:width 1.4s cubic-bezier(.25,.9,.3,1);
}
.pin{
  position:absolute; top:50%; inset-inline-start:0; width:22px; height:22px; border-radius:50%;
  background:var(--card); box-shadow:0 6px 12px -6px rgba(88,48,92,.6), inset 0 2px 0 rgba(255,255,255,.9);
  transform:translate(50%,-50%);
  transition:inset-inline-start 1.4s cubic-bezier(.25,.9,.3,1);
  display:grid; place-items:center;
}
.pin::after{content:""; width:8px; height:8px; border-radius:50%; background:var(--pink-deep);}
.weeks-note{font-size:.92rem; color:var(--ink-soft);}
.weeks-note strong{color:var(--ink);}

/* ---------- 8. إطار الصورة ---------- */
.frame{
  margin:0; align-self:center; width:min(22rem,86%);
  background:var(--card); border-radius:26px;
  box-shadow:var(--clay);
  padding:.9rem .9rem 1.4rem;
  display:flex; flex-direction:column; gap:.9rem;
  transform:rotate(-1.6deg);
  transition:transform .5s cubic-bezier(.22,.9,.28,1.1), box-shadow .5s;
  position:relative;
}
.js .frame.reveal.in{animation-name:popInTilt;}
.frame:hover{transform:rotate(0deg) translateY(-6px); box-shadow:var(--clay-lift);}
.tape{
  position:absolute; top:-.85rem; left:50%; transform:translateX(-50%) rotate(-3deg);
  width:6.5rem; height:1.7rem; border-radius:4px;
  background:linear-gradient(180deg, rgba(255,255,255,.55), var(--gold));
  opacity:.75;
}
.photo{
  aspect-ratio:4/5; border-radius:18px;
  background:linear-gradient(165deg, var(--card-2), var(--wash-b));
  box-shadow:inset 0 4px 10px -4px rgba(88,48,92,.35);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.75rem;
  padding:1.5rem; text-align:center;
}
.photo .ripple{width:74px; height:74px; color:var(--pink-deep); animation:heartbeat 3.2s ease-in-out infinite;}
.photo-note{font-size:.86rem; font-weight:700; color:var(--ink-soft); line-height:2;}
.frame figcaption{
  font-family:"Amiri",serif; font-size:1.02rem; line-height:1.95;
  color:var(--ink-soft); text-align:center; padding-inline:.5rem; text-wrap:balance;
}

/* ---------- 9. بطاقات "وهي الآن" ---------- */
.now{display:flex; flex-direction:column; gap:1.6rem;}
.now .head{display:flex; flex-direction:column; align-items:center; gap:.55rem; text-align:center;}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr)); gap:1.1rem;}
.card{
  background:var(--card); border-radius:26px; box-shadow:var(--clay);
  padding:1.5rem 1.35rem 1.6rem;
  display:flex; flex-direction:column; gap:.55rem;
  transition:transform .4s cubic-bezier(.22,.9,.28,1.1), box-shadow .4s;
}
.card:hover{transform:translateY(-7px); box-shadow:var(--clay-lift);}
.card h3{margin:0; font-family:"Baloo Bhaijaan 2","Tajawal",sans-serif; font-weight:700; font-size:1.2rem; color:var(--ink);}
.card p{font-size:.98rem; color:var(--ink-soft); line-height:1.95;}
.icon{
  width:3rem; height:3rem; border-radius:20px; display:grid; place-items:center;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.55), 0 10px 18px -12px rgba(88,48,92,.7);
  margin-bottom:.35rem;
}
.icon svg{width:1.6rem; height:1.6rem;}
.icon{color:var(--on-pastel);}
.icon.pink{background:var(--pink);}
.icon.lilac{background:var(--lilac);}
.icon.mint{background:var(--mint);}

/* ---------- 10. رسالة لماما ---------- */
.letter{
  position:relative; overflow:hidden;
  background:linear-gradient(170deg, var(--card), var(--card-2));
  border-radius:32px; border-end-end-radius:64px;
  box-shadow:var(--clay);
  padding:clamp(1.8rem,5.5vw,2.9rem);
  display:flex; flex-direction:column; gap:1.1rem;
  transition:transform .5s cubic-bezier(.22,.9,.28,1.05), box-shadow .5s;
}
.letter:hover{transform:translateY(-5px); box-shadow:var(--clay-lift);}
.letter::before{
  content:""; position:absolute; inset-inline-start:0; top:2.5rem; bottom:2.5rem; width:6px;
  border-radius:999px;
  background:linear-gradient(var(--pink), var(--lilac), var(--mint));
}
.letter::after{
  content:""; position:absolute; top:0; bottom:0; inset-inline-end:0; width:38%;
  background:linear-gradient(100deg, transparent, var(--sheen), transparent);
  transform:translateX(120%); pointer-events:none;
  animation:sweep 9s 3s ease-in-out infinite;
}
.letter p{font-family:"Amiri",serif; font-size:clamp(1.18rem,3.4vw,1.4rem); line-height:2.15; color:var(--ink);}
.letter .em{color:var(--pink-deep); font-weight:700;}
.sign{font-family:"Amiri",serif; font-size:1.15rem; color:var(--ink-soft);}

/* ---------- 11. ملاحظات ---------- */
.notes{display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:1.6rem;}
.note{display:flex; flex-direction:column; gap:.45rem;}
.note h3{margin:0; font-size:1rem; font-weight:700; color:var(--pink-deep);}
.note .stem{width:2.6rem; height:3px; border-radius:999px; background:var(--gold); transform-origin:right; animation:widen .8s .3s both ease-out;}
.note p{font-size:.99rem; color:var(--ink-soft); line-height:1.95;}
.note strong{color:var(--ink); font-weight:700;}

/* ---------- 12. الختام والمشاركة ---------- */
.closing{display:flex; flex-direction:column; align-items:center; gap:1.1rem; text-align:center;}
.rule{position:relative; width:100%; max-width:15rem; height:3px; border-radius:999px; overflow:hidden;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);}
.rule span{position:absolute; inset:0; width:30%; background:linear-gradient(90deg,transparent,var(--sheen),transparent); animation:sweep 6s ease-in-out infinite;}
.dua{
  font-family:"Amiri",serif; font-size:clamp(1.15rem,3.6vw,1.5rem);
  line-height:2.35; color:var(--ink); max-width:29rem; text-wrap:balance;
}
.welcome{font-family:"Baloo Bhaijaan 2","Tajawal",sans-serif; font-weight:600; font-size:clamp(1.05rem,3.2vw,1.25rem); color:var(--ink-soft); max-width:26rem; text-wrap:balance;}
.heart{width:20px; color:var(--pink-deep); animation:heartbeat 2.4s infinite ease-in-out;}

.share{
  display:inline-flex; align-items:center; gap:.55rem;
  min-height:46px; padding:.65rem 1.5rem;
  border:0; border-radius:999px; cursor:pointer;
  font-family:"Baloo Bhaijaan 2","Tajawal",sans-serif; font-size:1rem; font-weight:700;
  color:var(--pink-deep); background:var(--card);
  box-shadow:var(--clay);
  transition:transform .18s cubic-bezier(.22,.9,.28,1.1), box-shadow .18s, color .18s;
}
.share svg{width:1.15rem; height:1.15rem;}
.share:hover{transform:translateY(-3px); box-shadow:var(--clay-lift);}
.share:active{transform:translateY(1px) scale(.98); box-shadow:var(--clay-soft);}
.closing small{font-size:.85rem; color:var(--ink-soft);}

.toast{
  position:fixed; inset-inline:0; bottom:1.5rem; z-index:5;
  margin:0 auto; width:max-content; max-width:calc(100% - 2rem);
  padding:.7rem 1.4rem; border-radius:999px;
  background:var(--card); color:var(--ink); font-size:.94rem; font-weight:700;
  box-shadow:var(--clay);
  animation:rise .4s both cubic-bezier(.2,.8,.25,1);
}

/* ---------- 13. الوصولية وتقليل الحركة ---------- */
:focus-visible{outline:3px solid var(--pink-deep); outline-offset:3px; border-radius:6px;}

@media (max-width:26rem){
  .clock{grid-template-columns:repeat(2,1fr);}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important;}
  .js .reveal{opacity:1 !important;}
  .w,.note .stem,.sky .tw{opacity:1 !important; transform:none !important; filter:none !important;}
  .sky .moon,.sky .balloon{translate:none !important; rotate:none !important;}
  /* طبقات اللمعان بلا حركة = حافة ثابتة ظاهرة، فتُخفى */
  .letter::after,.rule span{display:none !important;}
  .fill,.pin{transition:none !important;}
}