/* HireQuanta motion system (17 Oct 2026, docs/product-audit/18_MOTION_SYSTEM.md). Every rule here sits under one switch,
   <html data-motion="on">, which web/motion.js sets only when the feature is on and the person has not asked for reduced
   motion. With the switch off this file changes nothing. Every movement has a job; work screens get feedback only. */
:root{--m-90:90ms;--m-160:160ms;--m-240:240ms;--m-400:400ms;--m-700:700ms;
 --m-standard:cubic-bezier(.2,0,0,1);--m-enter:cubic-bezier(0,0,.2,1);--m-exit:cubic-bezier(.4,0,1,1);
 --m-spring:linear(0,.5 7%,.86 14%,1.03 22%,1.06 28%,1.02 38%,.995 50%,1)}

@keyframes m-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes m-rise-sm{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes m-fade{from{opacity:0}to{opacity:1}}
@keyframes m-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes m-pop{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes m-panel{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes m-moment{0%{opacity:0;transform:translateY(10px) scale(.92)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes m-drift{0%{opacity:0;transform:translate(0,0) scale(.6)}30%{opacity:1}100%{opacity:0;transform:translate(var(--dx,0),var(--dy,-28px)) scale(1)}}

/* Entrances: a page's title (the page title, the home hero, the Notifications and account headings) rises, then its items
   stagger in, 60 ms apart (the first eight; the rest arrive together). A page whose switch came on late (after first paint)
   skips entrances, so nothing visible ever blinks out and back. */
html[data-motion=on]:not([data-motion-late]) body.product main .page-title>*,
html[data-motion=on]:not([data-motion-late]) body.product .hero-copy>*,
html[data-motion=on]:not([data-motion-late]) body.product :is(.ops-hero>div,.account-story)>*{animation:m-rise var(--m-400) var(--m-enter) both}
html[data-motion=on]:not([data-motion-late]) body.product main .page-title>:nth-child(2),
html[data-motion=on]:not([data-motion-late]) body.product .hero-copy>:nth-child(2),
html[data-motion=on]:not([data-motion-late]) body.product :is(.ops-hero>div,.account-story)>:nth-child(2){animation-delay:60ms}
html[data-motion=on]:not([data-motion-late]) body.product main .page-title>:nth-child(n+3),
html[data-motion=on]:not([data-motion-late]) body.product .hero-copy>:nth-child(n+3),
html[data-motion=on]:not([data-motion-late]) body.product :is(.ops-hero>div,.account-story)>:nth-child(n+3){animation-delay:120ms}
html[data-motion=on]:not([data-motion-late]) body.product :is(.how-steps,.care-grid,.billing-grid,.original-gallery,.studio-steps,.choice-grid,.interview-choice-cards)>*{animation:m-rise-sm var(--m-240) var(--m-enter) both;animation-delay:calc(160ms + var(--m-i,8) * 60ms)}
html[data-motion=on] body.product :is(.how-steps,.care-grid,.billing-grid,.original-gallery,.studio-steps,.choice-grid,.interview-choice-cards)>:nth-child(1){--m-i:0}
html[data-motion=on] body.product :is(.how-steps,.care-grid,.billing-grid,.original-gallery,.studio-steps,.choice-grid,.interview-choice-cards)>:nth-child(2){--m-i:1}
html[data-motion=on] body.product :is(.how-steps,.care-grid,.billing-grid,.original-gallery,.studio-steps,.choice-grid,.interview-choice-cards)>:nth-child(3){--m-i:2}
html[data-motion=on] body.product :is(.how-steps,.care-grid,.billing-grid,.original-gallery,.studio-steps,.choice-grid,.interview-choice-cards)>:nth-child(4){--m-i:3}
html[data-motion=on] body.product :is(.how-steps,.care-grid,.billing-grid,.original-gallery,.studio-steps,.choice-grid,.interview-choice-cards)>:nth-child(5){--m-i:4}
html[data-motion=on] body.product :is(.how-steps,.care-grid,.billing-grid,.original-gallery,.studio-steps,.choice-grid,.interview-choice-cards)>:nth-child(6){--m-i:5}
html[data-motion=on] body.product :is(.how-steps,.care-grid,.billing-grid,.original-gallery,.studio-steps,.choice-grid,.interview-choice-cards)>:nth-child(7){--m-i:6}
html[data-motion=on] body.product :is(.how-steps,.care-grid,.billing-grid,.original-gallery,.studio-steps,.choice-grid,.interview-choice-cards)>:nth-child(8){--m-i:7}

/* Feedback: a button presses, a chip or switch settles. Feedback only, never decoration. */
html[data-motion=on] body.product :is(button,.button,a.primary,a.secondary,.studio-term,.secondary,.primary){transition:transform var(--m-90) var(--m-standard),background-color var(--m-160) var(--m-standard),border-color var(--m-160) var(--m-standard),box-shadow var(--m-160) var(--m-standard)}
html[data-motion=on] body.product :is(button,.button,a.primary,a.secondary,.studio-term):not(:disabled):active{transform:translateY(1px)}
html[data-motion=on] body.product input[type=checkbox],html[data-motion=on] body.product input[type=radio]{transition:transform var(--m-240) var(--m-spring)}
html[data-motion=on] body.product input[type=checkbox]:checked,html[data-motion=on] body.product input[type=radio]:checked{animation:m-pop var(--m-240) var(--m-spring)}
html[data-motion=on] body.product .m-pop{animation:m-pop var(--m-240) var(--m-spring)}

/* Continuity: the studio's step panel slides in when it changes (Candidate Intelligence). */
html[data-motion=on] body.product .studio-panel.m-enter{animation:m-panel var(--m-240) var(--m-enter) both}

/* Idle: hero art floats slowly. Never bounces, never on a work screen. */
html[data-motion=on] body.product :is(.hero-art,.interview-art,.choice-card img,.home-hero-art) img,
html[data-motion=on] body.product :is(.hero-visual,.interview-mark){animation:m-float 6s ease-in-out infinite}

/* States and moments: Folio's pose fades in above its line; a moment scales in with a soft settle and a few marks drift once. */
html[data-motion=on] body.product [data-folio-state]::before{animation:m-fade var(--m-240) var(--m-enter) both}
html[data-motion=on] body.product .folio-moment{animation:m-moment var(--m-700) var(--m-spring) both}
html[data-motion=on] body.product .folio-moment .folio-mark{animation:m-drift var(--m-700) var(--m-enter) both}

/* Reduced motion wins over everything, even if the switch were on. */
@media (prefers-reduced-motion:reduce){
 html[data-motion=on] *,html[data-motion=on] *::before,html[data-motion=on] *::after{animation:none!important;transition:none!important}
}

/* Folio's pictures are part of the page whether or not anything moves. A state's pose is drawn above the element's own line
   (an empty list, a loading line, an error), so no component is forked; working states use a smaller picture. */
html[data-folio=on] body.product [data-folio-state]::before{content:"";display:block;width:96px;height:96px;margin:0 0 10px;background:var(--folio) left center/contain no-repeat}
html[data-folio=on] body.product [data-folio-state]:not([data-folio-state^=empty])::before{width:64px;height:64px;margin-bottom:8px}
/* Art in its place, drawn here rather than inserted by script, so it is in the page from the first paint (no layout shift):
   Home's three steps, Getting started's step cards and each sign-in panel's scene. Decorative backgrounds, as with the states. */
html[data-folio=on] body.product .how-steps>li::before,
html[data-folio=on] body.product main .care-grid:not(#care-items):not(#care-requests)>.care-card:has(>.eyebrow)::before,
html[data-folio=on] body.product :is(#studio-signin,#int-signin,#signin)::before{content:"";display:block;width:var(--fs);height:var(--fs);margin:0 0 10px;background:var(--art) left center/contain no-repeat}
html[data-folio=on] body.product .how-steps>li{--fs:72px}
html[data-folio=on] body.product .how-steps>li:nth-child(1){--art:url(/assets/brand/motion/onboard-resume.webp)}
html[data-folio=on] body.product .how-steps>li:nth-child(2){--art:url(/assets/brand/motion/scene-fit.webp)}
html[data-folio=on] body.product .how-steps>li:nth-child(3){--art:url(/assets/brand/motion/onboard-practise.webp)}
html[data-folio=on] body.product main .care-grid:not(#care-items):not(#care-requests)>.care-card:has(>.eyebrow){--fs:56px}
html[data-folio=on] body.product main .care-grid:not(#care-items):not(#care-requests)>.care-card:has(>.eyebrow):nth-child(1){--art:url(/assets/brand/motion/icon-resume.webp)}
html[data-folio=on] body.product main .care-grid:not(#care-items):not(#care-requests)>.care-card:has(>.eyebrow):nth-child(2){--art:url(/assets/brand/motion/icon-score.webp)}
html[data-folio=on] body.product main .care-grid:not(#care-items):not(#care-requests)>.care-card:has(>.eyebrow):nth-child(3){--art:url(/assets/brand/motion/icon-interview.webp)}
html[data-folio=on] body.product #studio-signin{--fs:140px;--art:url(/assets/brand/motion/scene-fit.webp)}
html[data-folio=on] body.product #int-signin{--fs:140px;--art:url(/assets/brand/motion/scene-rehearse.webp)}
html[data-folio=on] body.product:not(.workspace-page) #signin{--fs:112px;--art:url(/assets/brand/motion/onboard-welcome.webp)}
html[data-folio=on] body.workspace-page #signin{--fs:140px;--art:url(/assets/brand/motion/scene-gather.webp)}
html[data-folio=on] body.workspace-page #signin::before{margin:0 auto 16px;background-position:center}
html[data-folio=on] body.workspace-page #signin>.file-tile{display:none}
/* An empty-state panel (My resumes) shows Folio, centred and larger, in place of its small file icon. */
html[data-folio=on] body.product .empty-state[data-folio-state]::before{width:120px;height:120px;margin:0 auto 16px;background-position:center}
html[data-folio=on] body.product .empty-state>.folio-art{margin:0 auto 16px}
html[data-folio=on] body.product .empty-state:is([data-folio-state],:has(>.folio-art))>.file-tile{display:none}
/* An act's scene fills the empty space beside a page's title (wide screens only). */
@media (min-width:761px){html[data-folio=on] body.product .page-title[data-folio-scene]{background:var(--folio) right center/150px no-repeat;padding-right:182px;min-height:150px}}
.folio-moment{position:fixed;z-index:60;right:24px;bottom:96px;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:16px;background:var(--surface,#fff);border:1px solid var(--line,#e3e8f1);box-shadow:0 12px 32px rgba(7,18,41,.14);pointer-events:none;max-width:min(360px,calc(100vw - 48px))}
.folio-moment img{width:72px;height:72px;object-fit:contain;flex:none}
.folio-moment p{margin:0;font-weight:600;color:var(--text,#101a2e)}
.folio-moment .folio-mark{position:absolute;width:10px;height:10px;border-radius:999px;background:#18c8d0;left:52px;top:18px}
@media (max-width:760px){.folio-moment{right:16px;left:16px;bottom:88px}}
.folio-art{display:block;width:var(--fs,72px);height:var(--fs,72px);object-fit:contain;margin:0 0 10px}