:root{
  --aw-ease-signature: cubic-bezier(0.65, 0, 0.25, 1);
  --aw-ease-enter: cubic-bezier(0.2, 0.8, 0.2, 1);
  --aw-ease-exit: cubic-bezier(0.6, 0, 0.8, 0.4);
  --aw-ease-bounce: cubic-bezier(0.3, 1.45, 0.5, 1);
  --aw-dur-label: 120ms;
  --aw-dur-icon: 200ms;
  --aw-dur-row: 320ms;
  --aw-dur-card: 480ms;
  --aw-dur-symbol: 700ms;
  --aw-dur-screen: 380ms;
  --aw-dur-number: 360ms;
  --aw-dur-badge-in: 550ms;
  --aw-dur-badge-out: 350ms;
  --aw-dur-notification-in: 450ms;
  --aw-dur-notification-hold: 2500ms;
  --aw-dur-notification-out: 400ms;
  --aw-dur-loading-hourglass: 1000ms;
  --aw-dur-success: 900ms;
  --aw-dur-press: 120ms;
  --aw-dur-press-release: 200ms;
  --aw-dur-marketing-phone: 800ms;
  --aw-dur-pattern-surface-flip: 700ms;
  --aw-dur-pattern-step: 550ms;
  --aw-dur-logo-reveal: 900ms;
  --aw-dur-pattern-loop: 9000ms;
  --aw-stagger-symbol: 100ms;
  --aw-stagger-number: 30ms;
  --aw-stagger-card: 120ms;
}

/* AlWatan Bank motion: ready-made classes. Set --i on each item (0, 1, 2 ...) for the stagger. */
@keyframes aw-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes aw-fade-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes aw-pop{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:none}}
@keyframes aw-drop{0%{opacity:0;transform:translateY(-1.2em) scale(.6,1.6)}60%{opacity:1;transform:translateY(.08em) scale(1.15,.8)}80%{transform:translateY(-.04em) scale(.95,1.05)}100%{opacity:1;transform:none}}
@keyframes aw-screen-in{from{transform:translateX(-100%)}to{transform:none}}
@keyframes aw-screen-out{to{transform:translateX(30%);opacity:.6}}
@keyframes aw-notify{0%{opacity:0;transform:translateY(-110%)}100%{opacity:1;transform:none}}
@keyframes aw-flip{0%,100%{transform:rotate(0)}50%{transform:rotate(180deg)}}
.aw-card{animation:aw-rise var(--aw-dur-card) var(--aw-ease-enter) both;animation-delay:calc(var(--i,0) * var(--aw-stagger-card))}
.aw-row{animation:aw-rise var(--aw-dur-row) var(--aw-ease-enter) both;animation-delay:calc(var(--i,0) * 60ms)}
.aw-quick{animation:aw-pop var(--aw-dur-row) var(--aw-ease-bounce) both}
.aw-badge{animation:aw-drop var(--aw-dur-badge-in) var(--aw-ease-enter) both}
.aw-exit{animation:aw-fade-out var(--aw-dur-row) var(--aw-ease-exit) both}
.aw-screen-in{animation:aw-screen-in var(--aw-dur-screen) var(--aw-ease-signature) both}
.aw-screen-out{animation:aw-screen-out var(--aw-dur-screen) var(--aw-ease-signature) both}
.aw-notify{animation:aw-notify var(--aw-dur-notification-in) var(--aw-ease-bounce) both}
.aw-loading{display:inline-block;animation:aw-flip var(--aw-dur-loading-hourglass) var(--aw-ease-signature) infinite}
.aw-press{transition:transform var(--aw-dur-press-release) var(--aw-ease-bounce)}
.aw-press:active{transform:scale(.96);transition-duration:var(--aw-dur-press)}
@media (prefers-reduced-motion:reduce){[class*="aw-"]{animation:none!important;transition:none!important}}