/* Motion for SoEasy's customer pages: /start, /login, /account, /billing. One set of curves and durations (the same tokens as the consoles'
   motion.css), loaded from the pages' own HTML after ui.css, so these rules win. Only transform and opacity move; the exceptions are the
   height/width of a card easing between steps and a collapsing row (one element, once). Behaviour lives in motion-pages.js; without it the
   CSS here still gives press states, focus easing, the dialogs, the check draw and the page-to-page crossfade. See docs/console-motion.md. */

:root{
  --mo-out:cubic-bezier(.2,.8,.2,1);          /* things arriving */
  --mo-expo:cubic-bezier(.16,1,.3,1);         /* arriving, with a longer tail (dialogs, tab rise) */
  --mo-sheet:cubic-bezier(.32,.72,0,1);       /* iOS sheets and pushes */
  --mo-in:cubic-bezier(.4,0,1,1);             /* things leaving */
  --mo-spring:cubic-bezier(.34,1.45,.64,1);   /* fallback for the real spring below */
  --dur-1:90ms;   /* a press */
  --dur-2:180ms;  /* a fade, a control */
  --dur-3:280ms;  /* a screen, a dialog, a toast */
  --dur-4:420ms;  /* a sheet */
  --dur-out-2:110ms; --dur-out-3:170ms; --dur-out-4:250ms;   /* leaving takes about 60% of arriving */
}
@supports (transition-timing-function:linear(0,1)){
  :root{--mo-spring:linear(0, 0.019 2.8%, 0.068 5.6%, 0.138 8.3%, 0.223 11.1%, 0.314 13.9%, 0.408 16.7%, 0.501 19.4%, 0.589 22.2%, 0.671 25%, 0.744 27.8%, 0.809 30.6%, 0.866 33.3%, 0.913 36.1%, 0.952 38.9%, 0.984 41.7%, 1.008 44.4%, 1.026 47.2%, 1.039 50%, 1.048 52.8%, 1.053 55.6%, 1.054 58.3%, 1.054 61.1%, 1.051 63.9%, 1.048 66.7%, 1.043 69.4%, 1.038 72.2%, 1.033 75%, 1.028 77.8%, 1.023 80.6%, 1.019 83.3%, 1.015 86.1%, 1.011 88.9%, 1.008 91.7%, 1.005 94.4%, 1.003 97.2%, 1)}
}
@media (prefers-reduced-motion:reduce){:root{--dur-1:.01ms;--dur-2:.01ms;--dur-3:.01ms;--dur-4:.01ms;--dur-out-2:.01ms;--dur-out-3:.01ms;--dur-out-4:.01ms}}

/* ---------- page to page: a short crossfade, the header stays put (CSS only; both pages must load this file) ---------- */
@view-transition{navigation:auto}
.top{view-transition-name:mo-top}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--dur-2);animation-timing-function:var(--mo-out)}
::view-transition-old(mo-top){display:none}
::view-transition-new(mo-top){animation:none}
::view-transition-group(mo-top){animation-duration:1ms}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation-duration:120ms}}

/* ---------- first paint: the card fades, what is inside rises 25 ms apart (about 280 ms in all). motion-pages.js sets data-mo-load for the first 600 ms ---------- */
@keyframes mo-fade{from{opacity:0}}
@keyframes mo-rise{from{opacity:0;transform:translateY(8px)}}
html[data-mo-load] .card{animation:mo-fade var(--dur-2) linear backwards}
html[data-mo-load] .card>.step:not([hidden])>*,
html[data-mo-load] .card>.head,html[data-mo-load] .card>.row,html[data-mo-load] .page>*{animation:mo-rise var(--dur-2) var(--mo-out) backwards}
html[data-mo-load] .card>.step:not([hidden])>:nth-child(2),html[data-mo-load] .page>:nth-child(2){animation-delay:25ms}
html[data-mo-load] .card>.step:not([hidden])>:nth-child(3),html[data-mo-load] .page>:nth-child(3){animation-delay:50ms}
html[data-mo-load] .card>.step:not([hidden])>:nth-child(4){animation-delay:75ms}
html[data-mo-load] .card>.step:not([hidden])>:nth-child(5){animation-delay:100ms}
html[data-mo-load] .card>.step:not([hidden])>:nth-child(n+6){animation-delay:100ms}
/* the old per-step rise in ui.css is replaced by the directional swap below */
.step{animation:none}

/* ---------- steps inside one card: the leaving one is lifted out of the flow and fades while the card eases to the new height ---------- */
.card{position:relative}
.step.mo-leave{position:absolute;pointer-events:none;margin:0}
.steps i{position:relative;overflow:hidden}
.steps i.on{background:var(--line)}
.steps i::before{content:"";position:absolute;inset:0;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-3) var(--mo-sheet)}
.steps i.on::before{transform:none}

/* ---------- buttons: press, release with a little spring, a busy arc that fades in ---------- */
.btn{transition:transform var(--dur-2) var(--mo-spring),background var(--dur-2) var(--mo-out),border-color var(--dur-2) var(--mo-out),opacity var(--dur-2) var(--mo-out),filter var(--dur-2) var(--mo-out),color var(--dur-2) var(--mo-out)}
.btn:active{transform:scale(.97);transition-duration:var(--dur-1),var(--dur-2),var(--dur-2),var(--dur-2),var(--dur-2),var(--dur-2);transition-timing-function:var(--mo-out)}
.btn.busy:active{transform:none}
.btn.busy::after{width:17px;height:17px;margin:0;animation:spin .7s linear infinite,mo-fade var(--dur-2) var(--mo-out) backwards}
.link,.pill-dark,.pw button{transition:color var(--dur-2) var(--mo-out),opacity var(--dur-2) var(--mo-out),transform var(--dur-1) var(--mo-out)}
.link:active,.pw button:active{opacity:.6}

/* ---------- fields: the focus ring eases in and out ---------- */
.input,.field input,select.input,.addr{transition:border-color var(--dur-2) var(--mo-out),box-shadow var(--dur-2) var(--mo-out),background-color var(--dur-2) var(--mo-out)}
.field .hint{transition:color var(--dur-2) var(--mo-out)}
.code input{caret-color:var(--accent)}
.err{will-change:auto}

/* ---------- the password checklist: each rule's ring turns to a tick that draws itself ---------- */
.pwrules .rule .tk circle{transition:stroke var(--dur-2) var(--mo-out),fill var(--dur-2) var(--mo-out)}
.pwrules .rule .tk path{transition:stroke-dashoffset var(--dur-3) var(--mo-out) 40ms}
.pwrules .rule .tk{transition:transform var(--dur-3) var(--mo-spring)}
.pwrules .rule.met .tk{transform:scale(1.12)}
.pwrules .rule.met .tk{animation:mo-tick var(--dur-3) var(--mo-spring)}
@keyframes mo-tick{from{transform:scale(.7)}to{transform:scale(1.12)}}
.pwrules .rule{transition:color var(--dur-2) var(--mo-out)}
.pwrules.mo-in .rule{animation:mo-rise var(--dur-2) var(--mo-out) backwards}
.pwrules.mo-in .rule:nth-child(2){animation-delay:20ms}.pwrules.mo-in .rule:nth-child(3){animation-delay:40ms}.pwrules.mo-in .rule:nth-child(4){animation-delay:60ms}.pwrules.mo-in .rule:nth-child(5){animation-delay:80ms}

/* ---------- choosing: the ring around the picked card, and the check that draws ---------- */
.plan{transition:box-shadow var(--dur-2) var(--mo-out),border-color var(--dur-2) var(--mo-out),transform var(--dur-2) var(--mo-spring)}
.plan:active,.theme:active{transform:scale(.985);transition-duration:var(--dur-1);transition-timing-function:var(--mo-out)}
.theme{transition:border-color var(--dur-2) var(--mo-out),box-shadow var(--dur-2) var(--mo-out),transform var(--dur-3) var(--mo-spring)}
.plan:has(input:checked),.theme:has(input:checked){animation:mo-select var(--dur-3) var(--mo-spring)}
@keyframes mo-select{from{transform:scale(.982)}to{transform:none}}
.theme .tick{position:relative}
.tick{transition:border-color var(--dur-2) var(--mo-out)}
.theme:has(input:checked) .tick,.plan:has(input:checked) .tick{background:none}
.tick::before{content:"";position:absolute;inset:-1.5px;border-radius:50%;background:var(--grad);transform:scale(0);transition:transform var(--dur-3) var(--mo-spring)}
.theme:has(input:checked) .tick::before,.plan:has(input:checked) .tick::before{transform:none}
.tick::after,.theme:has(input:checked) .tick::after,.plan:has(input:checked) .tick::after{content:"";position:relative;width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px);clip-path:inset(0 100% 0 0);transition:clip-path var(--dur-2) var(--mo-out)}
.theme:has(input:checked) .tick::after,.plan:has(input:checked) .tick::after{clip-path:inset(0);transition-delay:70ms}
/* the ring that slides between a group's cards (added by motion-pages.js; without it each card keeps its own ring) */
.plans.mo-ringed{position:relative}
.plans.mo-ringed .plan:has(input:checked){box-shadow:var(--shadow)}
.mo-ring{position:absolute;left:0;top:0;border-radius:var(--r);box-shadow:0 0 0 2px var(--accent);pointer-events:none;opacity:0}
.mo-ring.on{opacity:1}
.mo-ring.anim{transition:transform var(--dur-3) var(--mo-sheet),width var(--dur-3) var(--mo-sheet),height var(--dur-3) var(--mo-sheet)}

/* ---------- your sites ---------- */
.sites .site.mo-stag,.mo-stag{animation:mo-rise var(--dur-3) var(--mo-out) backwards;animation-delay:calc(var(--i,0) * 24ms)}
.site{transition:transform var(--dur-2) var(--mo-spring),box-shadow var(--dur-2) var(--mo-out)}
.site:not(:has(.btn:active,button:active,a:active)):active{transform:scale(.992);transition-duration:var(--dur-1);transition-timing-function:var(--mo-out)}
.site.skel{min-height:78px;position:relative;overflow:hidden}
.site.skel::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--ink) 6%,transparent) 50%,transparent 70%) 0 0/200% 100%;animation:shimmer 1.4s linear infinite}
.chip{transition:background-color var(--dur-2) var(--mo-out),color var(--dur-2) var(--mo-out)}

/* ---------- dialogs: a bottom sheet on phones, a card that scales from the button on larger screens. Leaving is quicker. ---------- */
dialog{opacity:0;transform:scale(.96);transform-origin:var(--mo-dx,50%) var(--mo-dy,50%);transition:opacity var(--dur-out-3) var(--mo-in),transform var(--dur-out-3) var(--mo-in),overlay var(--dur-out-3) allow-discrete,display var(--dur-out-3) allow-discrete}
dialog[open]{opacity:1;transform:none;transition:opacity var(--dur-3) var(--mo-out),transform var(--dur-3) var(--mo-expo),overlay var(--dur-3) allow-discrete,display var(--dur-3) allow-discrete}
@starting-style{dialog[open]{opacity:0;transform:scale(.96)}}
dialog::backdrop{opacity:0;transition:opacity var(--dur-out-3) linear,overlay var(--dur-out-3) allow-discrete,display var(--dur-out-3) allow-discrete}
dialog[open]::backdrop{opacity:1;transition:opacity var(--dur-3) linear,overlay var(--dur-3) allow-discrete,display var(--dur-3) allow-discrete}
@starting-style{dialog[open]::backdrop{opacity:0}}
@supports not (transition-behavior:allow-discrete){
  dialog{opacity:1;transform:none;transition:none}
  dialog[open]{animation:mo-dlg-in var(--dur-3) var(--mo-expo) backwards}
  dialog[open]::backdrop{animation:mo-fade var(--dur-3) linear backwards}
  @keyframes mo-dlg-in{from{opacity:0;transform:scale(.96)}}
}
@media (max-width:640px){
  dialog{width:100%;max-width:100%;margin:auto 0 0;border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:0;padding-bottom:calc(var(--pad,24px) + env(safe-area-inset-bottom));position:fixed;opacity:1;transform:translateY(100%);transition:transform var(--dur-out-4) var(--mo-in),overlay var(--dur-out-4) allow-discrete,display var(--dur-out-4) allow-discrete}
  dialog[open]{transform:none;transition:transform var(--dur-4) var(--mo-sheet),overlay var(--dur-4) allow-discrete,display var(--dur-4) allow-discrete}
  @starting-style{dialog[open]{opacity:1;transform:translateY(100%)}}
  dialog::before{content:"";display:block;width:36px;height:5px;margin:-10px auto 14px;border-radius:3px;background:var(--faint,#999);opacity:.4}
  dialog::backdrop,dialog[open]::backdrop{transition-duration:var(--dur-out-4),var(--dur-out-4),var(--dur-out-4)}
  dialog[open]::backdrop{transition-duration:var(--dur-4),var(--dur-4),var(--dur-4)}
}
@media (prefers-reduced-motion:reduce){
  dialog,dialog[open]{transform:none;transition-duration:140ms,140ms,140ms,140ms}
  dialog{opacity:0}dialog[open]{opacity:1}
  @starting-style{dialog[open]{opacity:0;transform:none}}
  dialog::backdrop,dialog[open]::backdrop{transition-duration:140ms,140ms,140ms}
}

/* ---------- toasts: spring in from the top, leave quicker ---------- */
.mo-toasts{position:fixed;inset:0 0 auto 0;display:grid;justify-items:center;gap:8px;padding:calc(12px + env(safe-area-inset-top)) 16px 0;pointer-events:none;z-index:1000}
.mo-toast{max-width:min(92vw,420px);padding:12px 18px;border-radius:var(--r-pill);background:var(--inv-bg);color:#fff;font-size:var(--fs-md);font-weight:500;text-align:center;box-shadow:var(--shadow);opacity:0;transform:translateY(-140%) scale(.96);transition:transform var(--dur-out-3) var(--mo-in),opacity var(--dur-out-3) linear}
.mo-toast.on{opacity:1;transform:none;transition:transform var(--dur-3) var(--mo-spring),opacity var(--dur-2) linear}
@media (prefers-reduced-motion:reduce){.mo-toast,.mo-toast.on{transform:none;transition:opacity 140ms linear}}

/* ---------- reduced motion: nothing travels; presses and the page crossfade stay ---------- */
@media (prefers-reduced-motion:reduce){
  .btn:active,.plan:active,.theme:active,.site:active{transform:none}
  .plan:has(input:checked),.theme:has(input:checked),.pwrules .rule.met .tk{animation:none}
  .pwrules .rule.met .tk{transform:none}
  html[data-mo-load] .card>.step:not([hidden])>*,html[data-mo-load] .card>.head,html[data-mo-load] .card>.row,html[data-mo-load] .page>*,.mo-stag{animation:mo-fade 140ms linear backwards;animation-delay:0s!important}
  html[data-mo-load] .card{animation:none}
}