/* ==========================================================================
   Step scenes — ui/js/step_scenes.js (مشاهد بالضغط خطوة خطوة)
   .ui-steps               : المشهد (بحجم الشاشة)
   [data-step-in]          : مخفي لين توصله الخطوة (is-in) — يظهر بتلاشي ناعم؛ الحركة الخاصة من CSS الصفحة
   [data-step-hint]        : تلميح "اضغط" يختفي بعد آخر خطوة
   ========================================================================== */
.ui-steps { position: relative; min-block-size: 100vh; min-block-size: 100svh; overflow: hidden; cursor: pointer; }
.ui-steps.is-done { cursor: auto; }
/* قبل آخر خطوة: الصفحة ما تسكرل (العجلة/السحب = الخطوة التالية) */
.ui-steps-locked, .ui-steps-locked body { overscroll-behavior: none; }

[data-step-in] { opacity: 0; transition: opacity .8s ease-out, transform .8s ease-out; }
[data-step-in].is-in { opacity: 1; }
[data-step-hint] { transition: opacity .4s ease; }
.ui-steps.is-done [data-step-hint] { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  [data-step-in], [data-step-hint] { transition: none; }
}