/* =====================================================================
   دربني · motion — one language for every screen (v2)
   Loaded after components.css on all screens. Driven by js/motion.js.

   PRINCIPLES
   1. Purposeful: motion explains (where did this come from, what changed)
      or confirms (the app heard you). If it only decorates, it is not here.
   2. Frequency-aware: things people do 100x a day (tab switch, scroll,
      typing) stay near-instant. Celebration is reserved for rare moments
      (booking confirmed, certificate earned).
   3. transform + opacity only. UI motion < 320ms. Ease-out for anything
      entering or reacting; ease-in is never used.
   4. Direction follows reading direction: "forward" moves toward the end
      edge in BOTH languages (left in Arabic, right in English).
   5. Respects prefers-reduced-motion (movement removed, fades kept) and the
      hub's static thumbnails (?static=1 → html.no-motion).

   TOKENS (variables.css): --ease --ease-io --ease-drawer --spring
                           --dur-1 120 · --dur-2 200 · --dur-3 320 · --dur-4 480
                           --stagger 45ms
   ===================================================================== */

/* ---------- 1 · screen enter ---------- */
@keyframes m-fade{from{opacity:0}}
@keyframes m-rise{from{opacity:0;transform:translateY(12px)}}
@keyframes m-slide{from{opacity:0;transform:translateX(calc(var(--m-x,1) * 22px))}}
@keyframes m-pop{0%{transform:scale(.7)}55%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes m-in{from{opacity:0;transform:scale(.96)}}

/* direction: fwd moves toward the END edge. RTL end = left (x -1), LTR end = right (x +1) */
html[dir="rtl"]{--m-x:-1}
html[dir="ltr"]{--m-x:1}
html[data-nav="back"][dir="rtl"]{--m-x:1}
html[data-nav="back"][dir="ltr"]{--m-x:-1}

html:not(.no-motion) .phone>.ph-body{animation:m-slide var(--dur-3) var(--ease) both}
html:not(.no-motion)[data-nav="tab"] .phone>.ph-body,
html:not(.no-motion)[data-nav="init"] .phone>.ph-body{animation:m-fade var(--dur-2) var(--ease) both}
html:not(.no-motion) .phone>.ph-top,
html:not(.no-motion) .phone>.appbar,
html:not(.no-motion) .phone>.hello{animation:m-fade var(--dur-2) var(--ease) both}

/* list reveal: first 9 direct children rise in sequence (never block input, never wait) */
html:not(.no-motion):not([data-nav="back"]) .phone>.ph-body>*:not([hidden]){animation:m-rise var(--dur-3) var(--ease) both}
html:not(.no-motion) .phone>.ph-body>*:nth-child(2){animation-delay:calc(var(--stagger) * 1)}
html:not(.no-motion) .phone>.ph-body>*:nth-child(3){animation-delay:calc(var(--stagger) * 2)}
html:not(.no-motion) .phone>.ph-body>*:nth-child(4){animation-delay:calc(var(--stagger) * 3)}
html:not(.no-motion) .phone>.ph-body>*:nth-child(5){animation-delay:calc(var(--stagger) * 4)}
html:not(.no-motion) .phone>.ph-body>*:nth-child(6){animation-delay:calc(var(--stagger) * 5)}
html:not(.no-motion) .phone>.ph-body>*:nth-child(7){animation-delay:calc(var(--stagger) * 6)}
html:not(.no-motion) .phone>.ph-body>*:nth-child(8){animation-delay:calc(var(--stagger) * 7)}
html:not(.no-motion) .phone>.ph-body>*:nth-child(n+9){animation-delay:calc(var(--stagger) * 8)}
/* the slide on the container already covers back-navigation; children stay still */
html:not(.no-motion)[data-nav="back"] .phone>.ph-body>*{animation:none}

/* screen-state swap (loading → content, empty ↔ default): the revealed block fades in */
html:not(.no-motion) .m-enter{animation:m-in var(--dur-3) var(--ease) both}

/* ---------- 2 · press feedback ---------- */
.tc,.sc,.cat,.pv,.fchip,.pill-opt,.cmp,.opt,.daystrip button,.card.link-card{transition:transform var(--dur-1) var(--ease),background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.fchip:active,.pill-opt:active,.cmp:active,.opt:active,.daystrip button:active,.cat:active,.pv:active,.sc:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .tc:hover,.sc:hover,.cat:hover,.pv:hover{border-color:var(--line-2)}
  .fchip:hover,.pill-opt:hover,.cmp:hover{border-color:var(--line-2)}
}

/* ---------- 3 · state confirmation ---------- */
/* a toggle that just turned ON gets one spring (class added by motion.js) */
.m-popped svg,.m-popped .radio,.m-popped i{animation:m-pop var(--dur-4) var(--spring) both}
.fav.m-popped svg{animation-duration:var(--dur-4)}

/* ---------- 4 · sliding indicators (segments · tabs), positioned by motion.js ---------- */
.seg{position:relative;isolation:isolate}
.seg>.m-ind{position:absolute;z-index:-1;top:4px;bottom:4px;inset-inline-start:0;width:var(--w,0);transform:translateX(var(--x,0));background:var(--surface);border-radius:var(--r-pill);box-shadow:var(--sh-2);transition:transform var(--dur-3) var(--ease),width var(--dur-3) var(--ease)}
.seg.m-has-ind [aria-selected="true"],.seg.m-has-ind [aria-pressed="true"]{background:transparent;box-shadow:none}
.seg.m-has-ind [role="tab"],.seg.m-has-ind button{position:relative;z-index:1}
.seg.m-no-anim>.m-ind{transition:none}
.tabs{position:relative}
.tabs>.m-ind{position:absolute;bottom:-1px;inset-inline-start:0;height:3px;width:var(--w,0);transform:translateX(var(--x,0));border-radius:3px 3px 0 0;background:var(--pri);transition:transform var(--dur-3) var(--ease),width var(--dur-3) var(--ease)}
.tabs.m-has-ind [role="tab"][aria-selected="true"]::after{display:none}
.tabs.m-no-anim>.m-ind{transition:none}
/* RTL: the container's start edge is the right edge, so mirror the translation */
[dir="rtl"] .seg>.m-ind,[dir="rtl"] .tabs>.m-ind{transform:translateX(calc(var(--x,0) * -1))}

/* ---------- 5 · progress ---------- */
.prog>i{transform-origin:left center}
[dir="rtl"] .prog>i{transform-origin:right center}
html:not(.no-motion) .prog>i.m-grow{animation:m-grow var(--dur-4) var(--ease) both}
@keyframes m-grow{from{transform:scaleX(0)}}

/* ---------- 6 · skeleton: one calm shimmer, synchronised across the screen ---------- */
.skel{background-attachment:fixed}

/* ---------- 7 · overlays ---------- */
.sheet{transition-timing-function:var(--ease-drawer)}
.toast{transition-timing-function:var(--ease)}

/* ---------- 8 · reduced motion: keep fades, drop movement ---------- */
@media (prefers-reduced-motion:reduce){
  html:not(.no-motion) .phone>.ph-body{animation:m-fade .01ms both}
  html:not(.no-motion) .phone>.ph-body>*:not([hidden]){animation:none}
  .m-popped svg,.m-popped .radio,.m-popped i{animation:none}
  .seg>.m-ind,.tabs>.m-ind{transition:none}
}