/* =============================================================
   MICRO-MOTION LAYER — precision micro-interactions
   One physics language: pointer-aware tilt + glare, unified
   press spring, icon gestures, drawn checkmarks, soft springs.
   Driven by final_micro.js (sets --mx/--my/--gx/--gy).
   ============================================================= */

/* ---------- 1. Pointer-aware tilt (only with fine pointer) ---------- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

  /* focused wallet pass — follows the cursor in 3D */
  .hub-pass.is-focus .hub-pass__card {
    transform:
      perspective(900px)
      rotateX(calc(var(--my, 0) * -3.2deg))
      rotateY(calc(var(--mx, 0) * 4.2deg))
      translateZ(0px);
    transition: transform var(--f-dur-md) var(--f-spring);
  }
  .hub-pass.is-focus .hub-pass__card.is-tilting {
    transition: transform var(--f-dur-fast) cubic-bezier(0.2, 0, 0.4, 1);
    transform:
      perspective(900px)
      rotateX(calc(var(--my, 0) * -3.2deg))
      rotateY(calc(var(--mx, 0) * 4.2deg))
      translateZ(6px);
  }

  /* department stacks — gentler */
  .hub-stack__card.is-tilting {
    transform:
      translateY(-3px)
      perspective(700px)
      rotateX(calc(var(--my, 0) * -2.4deg))
      rotateY(calc(var(--mx, 0) * 3deg)) !important;
    transition: transform var(--f-dur-fast) cubic-bezier(0.2, 0, 0.4, 1) !important;
  }

  /* open deck panel on dashboard */
  .f-deck__panel.is-open.is-tilting {
    transform:
      perspective(1100px)
      rotateX(calc(var(--my, 0) * -1.6deg))
      rotateY(calc(var(--mx, 0) * 2deg));
    transition: flex var(--f-dur-md) var(--f-spring),
                transform var(--f-dur-fast) cubic-bezier(0.2, 0, 0.4, 1),
                border-color var(--f-dur) var(--f-ease),
                box-shadow var(--f-dur) var(--f-ease),
                background var(--f-dur) var(--f-ease);
  }

  /* glare sheen that tracks the pointer */
  .hub-pass__card::after,
  .hub-stack__card::after,
  .f-deck__panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(
      300px circle at var(--gx, 50%) var(--gy, 50%),
      rgba(255, 255, 255, 0.16),
      transparent 55%);
    opacity: 0;
    transition: opacity var(--f-dur) var(--f-ease);
  }
  .f-body.dark .hub-pass__card::after,
  .f-body.dark .hub-stack__card::after,
  .f-body.dark .f-deck__panel::after {
    background: radial-gradient(
      300px circle at var(--gx, 50%) var(--gy, 50%),
      rgba(255, 255, 255, 0.07),
      transparent 55%);
  }
  .hub-pass__card.is-tilting::after,
  .hub-stack__card.is-tilting::after,
  .f-deck__panel.is-open.is-tilting::after { opacity: 1; }
}

/* ---------- 2. Unified press physics ---------- */
.f-btn, .fp-back, .fc-chip, .ff-seg__opt, .ff-tab,
.hub-mode__btn, .hub-scrub__arrow, .f-deck__dot,
.fs-card, .f-exp, .hub-stack, .fa-folder, .f-nav__btn {
  -webkit-tap-highlight-color: transparent;
}
.f-btn:active, .fp-back:active, .fc-chip:active,
.ff-seg__opt:active, .ff-tab:active { transform: scale(0.96); }
.fs-card:active { transform: translateY(-1px) scale(0.985); }
.f-exp:active { transform: scale(0.97); }

/* ---------- 2ب · زمنُ الضغط — قانونٌ واحد، لا رتبةٌ تاسعة (٢ أغسطس ٢٠٢٦)
   -------------------------------------------------------------------
   المقيسُ قبل هذه الكتلة: **٦١ قاعدةَ `:active`** تُغيّر `transform` ثم
   **تركبُ مدّةَ العنصر الأساسي** — و`.f-btn` أساسُه
   `transform var(--f-dur) var(--f-spring)`، وعشراتٌ غيرُه على
   `--f-dur-md` (360ms) **مع سبرنغ**. أي أن الضغطة تُجيب بعد ثلث ثانيةٍ
   **ثم ترتدّ**.

   وهذا يخالف ثلاثة معايير معاً:
     · `apple-design § ١`: التغذيةُ تقع عند **الضغط** لا عند الإفلات، وأيُّ
       تأخيرٍ يُسقط الإحساسَ بالمباشَرة «من حافّة الجرف».
     · `review-animations` معيار ٤: ضغطُ الزرّ **100–160ms**.
     · `review-animations` معيار ١٠ و`apple-design § ٤`: أداةُ عملٍ يومية
       **حادّةٌ سريعة لا مرتدّة**؛ والسبرنغُ يُحفظ لما حمَل زخماً من إيماءة،
       والضغطةُ ليست كذلك.

   ولم يُكتب هذا **٦١ مرّة**، ولا رُفعت رتبةُ زرٍّ تاسعة: القانونُ واحدٌ
   يسري على كل ما يُضغَط — القائمِ منه وما يُكتب غداً. والمنقولُ من أبل
   هو **الزمن**، لا لغتُها البصرية.

   وثلاثةُ قيودٍ في صياغته، كلٌّ منها قِيس لا فُرض:

   ١) `!important` **ضرورةُ نوعيّةٍ لا تراخٍ**: أساساتُ الأزرار مكتوبةٌ
      بسلاسل `:not()` — `.f3d .f-btn:not(.f-btn--primary):not(.f-btn--ghost)`
      نوعيّتُها (0,4,0)، وأيُّ صياغةٍ معقولةٍ لقانونٍ عامٍّ تبقى تحتها.
      وهذه نفسُ ضرورةِ حلقة التركيز في آخر الشلال — والسببُ واحد: طبقةٌ
      تزيينيةٌ عاليةُ النوعية لا يجوز أن تدهس قانوناً انضباطياً.

   ٢) **الحرسُ بـ`no-preference` لا بـ`reduce`**: لو كُتب `!important`
      طليقاً لغلبَ الحرسَ الشاملَ في `final_board.css § ٢١` — فذاك على `*`
      أي نوعيّتُه (0,0,0) وهذه (0,2,0)، وبين `!important`ين تحكمُ النوعية.
      فالكتلةُ **لا توجد أصلاً** عند طلب تقليل الحركة.

   ٣) **المدّة على الدخول وحده — توقيتٌ غير متماثل** (`review-animations`
      معيار ٩): الضغطةُ تخطف في 140ms، والإفلاتُ يعود بمدّة العنصر
      الأساسي (220ms) لأن `:active` يسقط فتسقط معه هذه القاعدة. وهذا هو
      المطلوب: استجابةُ النظام تخطف، والعودةُ تهدأ.
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  button:active, [role="button"]:active, summary:active,
  .f-btn:active, .fp-back:active, .fc-chip:active, .ff-seg__opt:active,
  .ff-tab:active, .f-tab:active, .f-iconbtn:active, .f-nav__btn:active,
  .hub-mode__btn:active, .hub-scrub__arrow:active,
  .fs-card:active, .f-exp:active, .fa-folder:active {
    transition-duration: var(--f-dur-fast) !important;
    transition-timing-function: var(--f-ease-out) !important;
  }
}

/* ---------- 3. Icon micro-gestures ---------- */
/* quick-service icon: pendulum settle on hover */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .f-exp:hover .f-exp__ico {
    animation: mm-pendulum 700ms var(--f-spring);
  }
  @keyframes mm-pendulum {
    0%   { transform: rotate(0) scale(1); }
    30%  { transform: rotate(-7deg) scale(1.1); }
    60%  { transform: rotate(4deg) scale(1.06); }
    100% { transform: rotate(0) scale(1.06); }
  }

  /* wallet pass icon: lifts and tips toward reading direction on focus */
  .hub-pass.is-focus .hub-pass__ico {
    animation: mm-tip-in 640ms var(--f-spring);
  }
  @keyframes mm-tip-in {
    0%   { transform: scale(0.92) rotate(0); }
    45%  { transform: scale(1.08) rotate(-5deg); }
    100% { transform: scale(1) rotate(0); }
  }

  /* dept stack icon: coin-flip shimmer when its stack activates */
  .hub-stack.is-on .hub-stack__ico .material-symbols-outlined {
    animation: mm-coin 560ms var(--f-spring);
  }
  @keyframes mm-coin {
    0%   { transform: rotateY(0); }
    50%  { transform: rotateY(150deg); }
    100% { transform: rotateY(360deg); }
  }

  /* back pill arrow nudges on hover */
  .fp-back:hover .material-symbols-outlined {
    animation: mm-nudge 520ms var(--f-spring);
  }
  @keyframes mm-nudge {
    0% { transform: translateX(0); }
    40% { transform: translateX(3px); }
    100% { transform: translateX(0); }
  }
}

/* ---------- 4. Drawn checkmark (forms) ---------- */
.ff-check__box .material-symbols-outlined,
.ff-feerow .ff-check__box .material-symbols-outlined {
  animation: mm-check-pop 380ms var(--f-spring);
}
@keyframes mm-check-pop {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  60%  { transform: scale(1.25) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.ff-check.is-on {
  animation: mm-check-row 420ms var(--f-spring);
}
@keyframes mm-check-row {
  0% { transform: scale(1); }
  35% { transform: scale(1.012); }
  100% { transform: scale(1); }
}

/* ---------- 5. Segmented options: snap pulse ---------- */
.ff-seg__opt.is-on {
  animation: mm-seg 360ms var(--f-spring);
}
@keyframes mm-seg {
  0% { transform: scale(0.94); }
  60% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* ---------- 4+5 · تغطية تقليل الحركة ----------
   هذه الطبقة صارت المالك الوحيد لنبض مربّع الاختيار والخيار المُقسَّم
   (أُزيلت نظيرتاهما من `final_polish.css` — تصادمٌ مقيس على العنصر نفسه).
   والتغطية تُكتب هنا لأن القياس أظهر أن الحاجز «العام» الذي يذكره
   DESIGN.md في `ds/tokens/base.css` **غير محمَّل**: لا `index.html` ولا
   `ds2/styles.css` يشير إليه. فلا يُبنى على ما لا يُحمَّل، والتغطية
   محليّةٌ كعُرف بقيّة الطبقات. */
@media (prefers-reduced-motion: reduce) {
  .ff-check__box .material-symbols-outlined,
  .ff-feerow .ff-check__box .material-symbols-outlined,
  .ff-check.is-on,
  .ff-seg__opt.is-on { animation: none; }
}

/* ---------- 6. Page transitions: blur-rise ---------- */
@media (prefers-reduced-motion: no-preference) {
  .fp-enter {
    animation: mm-page-in 520ms var(--f-ease) both;
  }
  @keyframes mm-page-in {
    from { opacity: 0; transform: translateY(12px); filter: blur(5px); }
    60%  { filter: blur(0); }
    to   { opacity: 1; transform: none; filter: blur(0); }
  }
}

/* ---------- 7. Scrubber fill: liquid glide ---------- */
.hub-scrub__fill {
  transition: width var(--f-dur-md) var(--f-spring), background var(--f-dur) var(--f-ease);
}
.hub-scrub__count { transition: color var(--f-dur) var(--f-ease); }

/* ---------- 8. Focus rings — THE canonical recipe ----------
   iOS double ring (approved): 3px bg gap + 5.5px tinted halo.
   ONE system only — the apple (.f3d) and chroma (Vercel outline)
   variants were removed in its favor. Ring color follows the
   element's own accent var when present, else navy. */
:where(.f-btn, .fp-back, .fc-chip, .ff-seg__opt, .ff-tab, .hub-mode__btn,
       .hub-scrub__arrow, .hub-stack, .hub-pass__go, .hub-pass__alt,
       .fs-card, .f-exp, .f-deck__cta, .f-deck__panel, .f-spot__cta, .f-spot__alt,
       .f-search, .f-iconbtn, .f-quick, .sp-row, .fs-pill input,
       .fdk__folder, .fdk__svc, .fdk__cta, .f-linklike):focus-visible {
  outline: none;
  /* نسخةٌ ثانيةٌ من «الوصفة القانونية» — الأولى في
     ds2/css/final_board.css. كانت الحلقةُ 55% على الشفافية في
     الاثنتين، فتقرأ 2.28 على الأقسام الفاتحة والعتبةُ 3. رُفعت هنا
     كما هناك. والازدواجُ نفسُه دَينٌ: وصفةٌ واحدةٌ في ملفّين تُصلَح
     مرّتين أو تُنسى مرّة. */
  box-shadow:
    0 0 0 3px var(--f-bg),
    0 0 0 5.5px var(--d-c, var(--s-c, var(--q-c, var(--st-c, var(--ab-c, var(--f-navy))))));
  transition: box-shadow var(--f-dur-fast) var(--f-ease);
}
.f-body.dark :where(.f-btn, .fp-back, .fc-chip, .ff-seg__opt, .ff-tab,
       .hub-mode__btn, .hub-scrub__arrow, .hub-stack, .hub-pass__go,
       .hub-pass__alt, .fs-card, .f-exp, .f-deck__cta, .f-deck__panel,
       .f-spot__cta, .f-spot__alt, .f-search, .f-iconbtn, .f-quick, .sp-row,
       .fs-pill input, .fdk__folder, .fdk__svc, .fdk__cta, .f-linklike):focus-visible {
  box-shadow:
    0 0 0 3px var(--f-bg),
    0 0 0 5.5px color-mix(in srgb,
      var(--d-c, var(--s-c, var(--q-c, var(--st-c, var(--ab-c, var(--f-cs)))))) 65%, transparent);
}

/* needed for glare positioning */
.hub-pass__card, .hub-stack__card, .f-deck__panel { position: relative; }