/* Liquid motion for the onboarding wizard (Pages/Onboarding/Onboarding.razor) - web AND the mobile
   app (Web's wwwroot/css is linked into the mobile project). Presentation only.

   Screens (language, welcome, questions) swap inside .onb-overlay and already carry a plain
   onb-fade; these replace it with a spring slide. Steps inside the question screen are patched in
   place, so js/onboarding-liquid.js replays .onb-liq-step on .onb-body. Opacity/transform only;
   inert under prefers-reduced-motion. */

:root {
    --onb-liq-ease: cubic-bezier(.22, .9, .28, 1.04);   /* where linear() is unsupported */
    --onb-liq-dir: 1;
}
[dir="rtl"] { --onb-liq-dir: -1; }
@supports (transition-timing-function: linear(0, 1)) {
    :root {
        --onb-liq-ease: linear(0, .2 4%, .58 10%, .86 16%, 1.03 23%, 1.045 28%, 1.025 35%, 1 44%, .994 56%, 1.001 72%, 1);
    }
}

@media (prefers-reduced-motion: no-preference) {
    /* The screens' own onb-fade must be switched off once the script is running: it would play
       again the moment the liquid class is removed (the screen blinks out and fades in twice). */
    .onb-liq-on .onb-overlay > :is(.onb-lang-screen, .onb-welcome, .onb-step) { animation: none; }
    .onb-liq-on .onb-overlay > .onb-liq      { animation: onb-liq-in .5s var(--onb-liq-ease) both; will-change: transform, opacity; }
    .onb-liq-on .onb-overlay > .onb-liq-back { animation: onb-liq-in-back .46s var(--onb-liq-ease) both; will-change: transform, opacity; }

    @keyframes onb-liq-in {
        0%   { opacity: 0; transform: translate3d(calc(26px * var(--onb-liq-dir)), 0, 0) scale(.992); }
        35%  { opacity: 1; }
        100% { opacity: 1; transform: none; }
    }
    @keyframes onb-liq-in-back {
        0%   { opacity: 0; transform: translate3d(calc(-18px * var(--onb-liq-dir)), 0, 0) scale(.992); }
        35%  { opacity: 1; }
        100% { opacity: 1; transform: none; }
    }

    .onb-liq-step > *, .onb-liq-step-back > * { animation: onb-liq-rise .52s var(--onb-liq-ease) both; }
    .onb-liq-step > :nth-child(2), .onb-liq-step-back > :nth-child(2) { animation-delay: 40ms; }
    .onb-liq-step > :nth-child(3), .onb-liq-step-back > :nth-child(3) { animation-delay: 80ms; }
    .onb-liq-step > :nth-child(n+4), .onb-liq-step-back > :nth-child(n+4) { animation-delay: 120ms; }
    .onb-liq-step .onb-option, .onb-liq-step-back .onb-option { animation: onb-liq-rise .5s var(--onb-liq-ease) both; }
    .onb-liq-step .onb-option:nth-child(2), .onb-liq-step-back .onb-option:nth-child(2) { animation-delay: 70ms; }
    .onb-liq-step .onb-option:nth-child(3), .onb-liq-step-back .onb-option:nth-child(3) { animation-delay: 110ms; }
    .onb-liq-step .onb-option:nth-child(4), .onb-liq-step-back .onb-option:nth-child(4) { animation-delay: 150ms; }
    .onb-liq-step .onb-option:nth-child(n+5), .onb-liq-step-back .onb-option:nth-child(n+5) { animation-delay: 190ms; }
    .onb-liq-step-back > *, .onb-liq-step-back .onb-option { animation-name: onb-liq-rise-back; }

    @keyframes onb-liq-rise {
        from { opacity: 0; transform: translate3d(calc(22px * var(--onb-liq-dir)), 0, 0) scale(.985); }
        40%  { opacity: 1; }
        to   { opacity: 1; transform: none; }
    }
    @keyframes onb-liq-rise-back {
        from { opacity: 0; transform: translate3d(calc(-22px * var(--onb-liq-dir)), 0, 0) scale(.985); }
        40%  { opacity: 1; }
        to   { opacity: 1; transform: none; }
    }

    /* Springy progress bar, choice rows and buttons */
    .onb-overlay .onb-progress-fill { transition: width .6s var(--onb-liq-ease); }
    .onb-overlay .onb-option { transition: transform .4s var(--onb-liq-ease), border-color .2s, background-color .2s; }
    .onb-overlay .onb-option:active { transform: scale(.972); transition-duration: .1s, .2s, .2s; }
    .onb-overlay .onb-btn { transition: transform .4s var(--onb-liq-ease), background-color .2s, opacity .2s; }
    .onb-overlay .onb-btn:active:not(:disabled) { transform: scale(.965); transition-duration: .1s, .2s, .2s; }
    .onb-overlay .onb-option.selected .onb-option-icon,
    .onb-overlay .onb-lang-option.selected { animation: onb-liq-select .45s var(--onb-liq-ease); }
    @keyframes onb-liq-select { 0% { transform: scale(.96); } 100% { transform: none; } }
}