/* «ذكرى» في الصفحة الرئيسية (T11، اعتمدها بدر 2026-10-13؛ النموذج في mockups2/thikra).
   تحت شريط «تعلم تفاعلي» على يسار الصفحة، وتطفو طفوًا هادئًا. فقاعة على شكل سحابة فوق سحابة مبتسمة.
   زر الإيقاف يوقف التبديل والطفو معًا، ولكل حركة بديل ثابت عند prefers-reduced-motion. */
.thk,.thk *{box-sizing:border-box}
.thk-anchor{background:var(--mist-2,#F7F7F5);padding:18px 16px 10px;overflow:hidden}
/* يسار الصفحة في العربية والإنجليزية */
.thk{position:relative;width:380px;max-width:100%;margin-left:clamp(0px,4vw,64px);margin-right:auto;font-family:'Thmanyah Sans',sans-serif;animation:thk-hover 4.5s ease-in-out infinite}
.thk.paused,.thk.paused *{animation-play-state:paused!important}
@keyframes thk-hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* فقاعة النص على شكل سحابة: جسم مستدير وفوقه انتفاخات، وظل واحد يجمعها */
.thk-bubble{position:relative;margin-top:20px;transform-origin:bottom left;filter:drop-shadow(0 10px 22px rgba(20,27,42,.18)) drop-shadow(0 0 1px rgba(20,27,42,.22))}
.thk-puffs{position:absolute;inset-inline:0;top:-20px;height:46px;pointer-events:none}
.thk-puffs i{position:absolute;bottom:0;border-radius:50%;background:#fff}
.thk-puffs i:nth-child(1){left:10%;width:58px;height:40px}
.thk-puffs i:nth-child(2){left:28%;width:84px;height:46px;bottom:-3px}
.thk-puffs i:nth-child(3){left:54%;width:70px;height:42px}
.thk-puffs i:nth-child(4){left:74%;width:52px;height:34px}
.thk-card{position:relative;background:#fff;border-radius:30px;padding:10px 18px 12px;text-align:center;display:flex;flex-direction:column;align-items:center}
.thk-kind{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;color:var(--gold-text,#9A6700)}
.thk-kind b{color:var(--ink,#141B2A)}
.thk-lead{margin:2px 0 0;font-size:12.5px;color:#5B6170;font-weight:700}
.thk-text{margin:0;font-family:'Thmanyah Serif Display',serif;font-weight:900;font-size:17px;line-height:1.65;color:var(--ink,#141B2A);text-wrap:balance}
.thk-text .q{color:#9A6700;font-weight:700}
/* أقواس الآية ﴿ ﴾ غير موجودة في خط ثمانية، فتُعرض بخط نظام يدعمها */
.thk .q{font-family:'Traditional Arabic','Arial','Geeza Pro','Noto Naskh Arabic',serif}
.thk-meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 10px;margin:2px 0 0;font-size:11.5px;color:#5B6170}
.thk-meta b{color:var(--ink,#141B2A);font-weight:800}
.thk-meta a{display:inline-flex;align-items:center;gap:3px;padding:7px 4px;margin:-7px -4px;color:var(--gold-text,#9A6700);font-weight:800;text-decoration:none}
.thk-meta a:hover{text-decoration:underline}
.thk-meta a svg{width:11px;height:11px}
.thk-kid{display:flex;align-items:center;justify-content:center;gap:6px;margin:6px 0 0;padding:3px 10px;border-radius:99px;background:#FBF4DF;font-size:12.5px;font-weight:800;color:var(--ink,#141B2A)}
.thk-kid svg{width:15px;height:15px;flex:none;color:var(--gold,#B07F0B)}
.thk[lang=en] .thk-kid{direction:ltr}
.thk-tools{position:absolute;top:6px;right:10px;z-index:2;display:flex;gap:2px}
.thk-tools button{all:unset;position:relative;cursor:pointer;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#7A7F8A}
.thk-tools button:hover{background:#F1EFE9;color:var(--ink,#141B2A)}
.thk-tools button:focus-visible,.thk-meta a:focus-visible{outline:3px solid var(--gold-2,#D9A91A);outline-offset:2px}
.thk-tools svg{width:12px;height:12px}
/* T19: مساحة لمس لا تقل عن 24px (WCAG 2.5.8) دون تغيير الشكل، ولو صغّرت البطاقة على الجوال */
.thk-tools button::after{content:"";position:absolute;inset:-7px}

/* السحابة المبتسمة في الزاوية، وبينها وبين الفقاعة فقاعتان صغيرتان */
.thk-foot{display:flex;align-items:flex-end;gap:4px;margin-top:2px;margin-left:6px}
.thk-mascot{position:relative;display:block}
.thk-cloud{display:block;width:70px;height:auto;overflow:visible;filter:drop-shadow(0 6px 10px rgba(20,27,42,.18))}
.thk-cloud .body{fill:#fff;stroke:var(--ink,#141B2A);stroke-width:2.6;stroke-linejoin:round}
.thk-cloud .eye{fill:var(--ink,#141B2A);transform-box:fill-box;transform-origin:center}
.thk-cloud .smile{fill:none;stroke:var(--ink,#141B2A);stroke-width:2.4;stroke-linecap:round}
.thk-cloud .cheek{fill:#F4D35E}
.thk-cloud .drop{fill:var(--gold-2,#D9A91A);opacity:0}
.thk-cloud .spark{fill:var(--gold-2,#D9A91A);opacity:0;transform-box:fill-box;transform-origin:center}
.thk-dots{display:flex;align-items:flex-end;gap:4px;margin-bottom:46px}
.thk-dots i{display:block;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(20,27,42,.18)}
.thk-dots i:first-child{width:8px;height:8px}.thk-dots i:last-child{width:12px;height:12px;margin-bottom:8px}


/* الحركة عند الظهور وعند كل تبديل (play): كلها تنتهي خلال 5 ثوانٍ */
.thk.play .thk-cloud{animation:thk-float 1.6s ease-in-out 2}
.thk.play .thk-cloud .eye{animation:thk-blink .35s ease-in-out 1.4s 1}
.thk.play .thk-cloud .drop{animation:thk-drop 1.1s ease-in .4s 2}
.thk.play .thk-cloud .spark{animation:thk-spark .9s ease-out .2s 1}
.thk.play .thk-bubble{animation:thk-pop .55s cubic-bezier(.2,.9,.3,1.3) both}
.thk.first .thk-cloud .body{stroke-dasharray:300;stroke-dashoffset:300;animation:thk-draw 1.1s ease-out forwards}
.thk-body.out{opacity:0;transition:opacity .3s ease}
@keyframes thk-float{50%{transform:translateY(-6px) rotate(-3deg)}}
@keyframes thk-blink{50%{transform:scaleY(.1)}}
@keyframes thk-drop{0%{opacity:0;transform:translateY(-4px)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
@keyframes thk-spark{0%{opacity:0;transform:scale(.2)}40%{opacity:1}100%{opacity:0;transform:scale(1.4)}}
@keyframes thk-pop{from{opacity:0;transform:scale(.85) translateY(8px)}}
@keyframes thk-draw{to{stroke-dashoffset:0}}

@media (max-width:760px){
  .thk-anchor{padding:14px 12px 8px}
  .thk{width:100%;max-width:360px;margin:0 auto}
  .thk-text{font-size:15.5px}
  .thk-cloud{width:58px}
  .thk-dots{margin-bottom:38px}
}
@media (prefers-reduced-motion:reduce){.thk,.thk *{animation:none!important;transition:none!important}.thk.first .thk-cloud .body{stroke-dashoffset:0}}