/* ---------- My account: how a page opens (same motion as the booking plugin) ----------
   Every block in the content card drops in from slightly above, one after another (70 ms apart),
   exactly like the "Bookings" tab. Dashboard shortcut boxes drop in like the booking time boxes
   (small bounce, 50 ms apart). Rows in the orders / downloads lists come one by one.
   How it works: each block gets its place number (--kl-i), each item inside a group (--kl-j),
   and the delay is worked out from those. Turned off for people who chose reduced motion. */

@keyframes kl-drop-block{0%{opacity:0;transform:translateY(-20px) scale(.96);}65%{opacity:1;transform:translateY(3px) scale(1.005);}100%{opacity:1;transform:none;}}
@keyframes kl-drop{0%{opacity:0;transform:translateY(-16px) scale(.6);}60%{opacity:1;transform:translateY(2px) scale(1.06);}100%{opacity:1;transform:none;}}

/* 1. blocks in the content card */
html body .kl-acc .kl-acc-content > *{animation:kl-drop-block .62s cubic-bezier(.34,1.3,.5,1) backwards;animation-delay:calc(var(--kl-i,0) * 70ms);}
html body .kl-acc .kl-acc-content > :nth-child(2){--kl-i:1;}
html body .kl-acc .kl-acc-content > :nth-child(3){--kl-i:2;}
html body .kl-acc .kl-acc-content > :nth-child(4){--kl-i:3;}
html body .kl-acc .kl-acc-content > :nth-child(5){--kl-i:4;}
html body .kl-acc .kl-acc-content > :nth-child(6){--kl-i:5;}
html body .kl-acc .kl-acc-content > :nth-child(7){--kl-i:6;}
html body .kl-acc .kl-acc-content > :nth-child(8){--kl-i:7;}
html body .kl-acc .kl-acc-content > :nth-child(9){--kl-i:8;}
html body .kl-acc .kl-acc-content > :nth-child(10){--kl-i:9;}
html body .kl-acc .kl-acc-content > :nth-child(n+11){--kl-i:10;}

/* 2. groups: the group itself stays put, its items come one by one */
html body .kl-acc .kl-acc-content > :is(.kl-shortcuts,.kl-list,form.woocommerce-EditAccountForm){animation:none;}
html body .kl-acc .kl-acc-content > :is(.kl-shortcuts,.kl-list,form.woocommerce-EditAccountForm) > :nth-child(2){--kl-j:1;}
html body .kl-acc .kl-acc-content > :is(.kl-shortcuts,.kl-list,form.woocommerce-EditAccountForm) > :nth-child(3){--kl-j:2;}
html body .kl-acc .kl-acc-content > :is(.kl-shortcuts,.kl-list,form.woocommerce-EditAccountForm) > :nth-child(4){--kl-j:3;}
html body .kl-acc .kl-acc-content > :is(.kl-shortcuts,.kl-list,form.woocommerce-EditAccountForm) > :nth-child(5){--kl-j:4;}
html body .kl-acc .kl-acc-content > :is(.kl-shortcuts,.kl-list,form.woocommerce-EditAccountForm) > :nth-child(6){--kl-j:5;}
html body .kl-acc .kl-acc-content > :is(.kl-shortcuts,.kl-list,form.woocommerce-EditAccountForm) > :nth-child(7){--kl-j:6;}
html body .kl-acc .kl-acc-content > :is(.kl-shortcuts,.kl-list,form.woocommerce-EditAccountForm) > :nth-child(8){--kl-j:7;}
html body .kl-acc .kl-acc-content > :is(.kl-shortcuts,.kl-list,form.woocommerce-EditAccountForm) > :nth-child(9){--kl-j:8;}
html body .kl-acc .kl-acc-content > :is(.kl-shortcuts,.kl-list,form.woocommerce-EditAccountForm) > :nth-child(n+10){--kl-j:9;}

/* rows and form fields: the same gentle drop as the blocks, 70 ms apart */
html body .kl-acc .kl-acc-content > :is(.kl-list,form.woocommerce-EditAccountForm) > *{animation:kl-drop-block .62s cubic-bezier(.34,1.3,.5,1) backwards;animation-delay:calc(var(--kl-i,0) * 70ms + var(--kl-j,0) * 70ms);}
/* shortcut boxes: like the booking time boxes, a small bounce, 50 ms apart */
html body .kl-acc .kl-acc-content > .kl-shortcuts > *{animation:kl-drop .62s cubic-bezier(.34,1.4,.5,1) backwards;animation-delay:calc(var(--kl-i,0) * 70ms + var(--kl-j,0) * 50ms);}

/* 3. "Bookings" tab: the booking plugin runs its own drop-in, don't animate it twice */
html body .kl-acc .kl-acc-content > .kb-acct{animation:none;}