/* Chatrionix extended motion library. The core sheet contains 67 motions; this file adds 91 more. */
.cf-fx-logo { animation: cfLogoBreath 1.8s ease-in-out both; }
.cf-fx-sidebar-in { animation: cfSidebarReveal .32s cubic-bezier(.2,.8,.2,1) both; }
.cf-fx-header-in { animation: cfHeaderDrop .28s ease-out both; }
.cf-fx-avatar { animation: cfAvatarBounce .4s cubic-bezier(.2,.9,.3,1.3) both; }
.cf-fx-search { animation: cfSearchFocus .26s ease both; }
.cf-fx-list-in { animation: cfListEnter .3s cubic-bezier(.2,.75,.2,1) both; }
.cf-fx-list-out { animation: cfListExit .2s ease both; }
.cf-fx-pin { animation: cfPinDrop .36s cubic-bezier(.2,.9,.25,1.3) both; }
.cf-fx-archive { animation: cfArchiveFold .35s ease both; }
.cf-fx-unarchive { animation: cfUnarchiveUnfold .35s ease both; }
.cf-fx-mute { animation: cfMuteBell .42s ease both; }
.cf-fx-panel-in { animation: cfPanelReveal .3s cubic-bezier(.2,.8,.2,1) both; }
.cf-fx-panel-out { animation: cfPanelDismiss .22s ease both; }
.cf-fx-composer { animation: cfComposerLift .28s ease both; }
.cf-fx-input { animation: cfInputGlow .48s ease both; }
.cf-fx-send { animation: cfSendLaunch .48s cubic-bezier(.2,.9,.3,1.2) both; }
.cf-fx-send-ripple { animation: cfSendRipple .5s ease-out both; }
.cf-fx-attach { animation: cfAttachSwing .42s ease both; }
.cf-fx-upload-done { animation: cfUploadComplete .55s ease both; }
.cf-fx-upload-cancel { animation: cfUploadCancel .28s ease both; }
.cf-fx-message { animation: cfBubblePop .32s cubic-bezier(.2,.8,.25,1.2) both; }
.cf-fx-message-highlight { animation: cfBubbleHighlight 1.15s ease both; }
.cf-fx-read { animation: cfReadTickTwo .4s ease both; }
.cf-fx-date { animation: cfDateAppear .28s ease both; }
.cf-fx-mention { animation: cfMentionGlow 1.3s ease both; }
.cf-fx-link { animation: cfLinkPreview .34s ease both; }
.cf-fx-media { animation: cfMediaReveal .3s ease both; }
.cf-fx-file { animation: cfFileSlide .3s ease both; }
.cf-fx-emoji { animation: cfEmojiBurst .4s cubic-bezier(.2,.9,.25,1.3) both; }
.cf-fx-reaction { animation: cfReactionAdd .35s cubic-bezier(.2,.9,.25,1.35) both; }
.cf-fx-typing-in { animation: cfTypingEnter .25s ease both; }
.cf-fx-typing-out { animation: cfTypingExit .2s ease both; }
.cf-fx-presence { animation: cfPresenceWake .5s ease both; }
.cf-fx-friend-accept { animation: cfFriendAccept .48s ease both; }
.cf-fx-friend-decline { animation: cfFriendDecline .35s ease both; }
.cf-fx-request { animation: cfRequestSlide .32s ease both; }
.cf-fx-group { animation: cfGroupCreate .5s cubic-bezier(.2,.9,.25,1.2) both; }
.cf-fx-notification { animation: cfNotificationRing .5s ease both; }
.cf-fx-count { animation: cfCountFlip .32s ease both; }
.cf-fx-theme-dark { animation: cfDarkReveal .5s ease both; }
.cf-fx-theme-light { animation: cfLightReveal .5s ease both; }
.cf-fx-button { animation: cfButtonPress .2s ease both; }
.cf-fx-danger { animation: cfDangerPulse .55s ease both; }
.cf-fx-success { animation: cfSuccessPulse .55s ease both; }
.cf-fx-warning { animation: cfWarningPulse .65s ease both; }
.cf-fx-error { animation: cfErrorSlide .35s ease both; }
.cf-fx-refresh { animation: cfRefreshSweep .55s ease both; }
.cf-fx-online { animation: cfNetworkOnline .42s ease both; }
.cf-fx-offline { animation: cfNetworkOffline .42s ease both; }
.cf-fx-mobile-push { animation: cfMobilePush .3s cubic-bezier(.2,.8,.2,1) both; }
.cf-fx-mobile-pop { animation: cfMobilePop .28s cubic-bezier(.2,.8,.2,1) both; }
.cf-fx-bottom-nav { animation: cfBottomNavLift .32s ease both; }
.cf-fx-info-card { animation: cfInfoCard .32s ease both; }
.cf-fx-modal { animation: cfModalSpring .4s cubic-bezier(.2,.9,.25,1.2) both; }
.cf-fx-tooltip { animation: cfTooltipIn .2s ease both; }
.cf-fx-menu { animation: cfMenuFan .32s ease both; }
.cf-fx-scroll-hint { animation: cfScrollHint 1.6s ease-in-out infinite; }
.cf-fx-unread { animation: cfUnreadBurst .45s cubic-bezier(.2,.9,.25,1.25) both; }

.cf-brand-mark:hover { animation: cfLogoOrbit .55s ease both; }
.cf-icon-button:active, .cf-person-actions button:active, .cf-info-actions button:active { animation: cfButtonPress .18s ease both; }
.cf-search:focus-within { animation: cfSearchFocus .32s ease both; }
.cf-composer:focus-within { animation: cfComposerLift .28s ease both; }
.cf-send-button:active { animation: cfSendLaunch .45s ease both; }
#cf-attach-button:active { animation: cfAttachSwing .4s ease both; }
.cf-sidebar__footer a:hover { animation: cfBottomNavLift .28s ease both; }
.cf-info-actions button:hover { animation: cfInfoCard .28s ease both; }

@keyframes cfLogoBreath { 0%,100%{transform:scale(1)}50%{transform:scale(1.06)} }
@keyframes cfLogoOrbit { 0%{transform:rotate(0) scale(1)}55%{transform:rotate(12deg) scale(1.08)}100%{transform:rotate(0) scale(1)} }
@keyframes cfSidebarReveal { from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none} }
@keyframes cfSidebarHide { from{opacity:1;transform:none}to{opacity:0;transform:translateX(-18px)} }
@keyframes cfHeaderDrop { from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none} }
@keyframes cfHeaderRise { from{opacity:1;transform:none}to{opacity:0;transform:translateY(-12px)} }
@keyframes cfAvatarRing { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--cf-accent) 35%,transparent)}100%{box-shadow:0 0 0 9px transparent} }
@keyframes cfAvatarBounce { 0%{transform:scale(.82)}65%{transform:scale(1.08)}100%{transform:scale(1)} }
@keyframes cfAvatarWiggle { 0%,100%{transform:rotate(0)}30%{transform:rotate(-5deg)}65%{transform:rotate(5deg)} }
@keyframes cfSearchFocus { 0%{transform:scale(.985)}60%{transform:scale(1.006)}100%{transform:scale(1)} }
@keyframes cfSearchClear { from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.75)} }
@keyframes cfListEnter { from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none} }
@keyframes cfListExit { from{opacity:1;transform:none}to{opacity:0;transform:translateX(-12px)} }
@keyframes cfActiveGlow { 0%{box-shadow:0 0 0 transparent}50%{box-shadow:0 8px 25px color-mix(in srgb,var(--cf-accent) 16%,transparent)}100%{box-shadow:0 8px 24px color-mix(in srgb,var(--cf-accent) 8%,transparent)} }
@keyframes cfActiveStripe { from{transform:scaleY(0)}to{transform:scaleY(1)} }
@keyframes cfPinDrop { 0%{transform:translateY(-7px) rotate(-12deg);opacity:0}70%{transform:translateY(1px) rotate(3deg);opacity:1}100%{transform:none} }
@keyframes cfPinRelease { from{transform:none;opacity:1}to{transform:translateY(-7px) rotate(12deg);opacity:0} }
@keyframes cfArchiveFold { 0%{transform:scaleY(1)}50%{transform:scaleY(.15)}100%{transform:scale(.94);opacity:.72} }
@keyframes cfUnarchiveUnfold { 0%{transform:scale(.94,.15);opacity:.72}65%{transform:scale(1,1.05)}100%{transform:scale(1);opacity:1} }
@keyframes cfMuteBell { 0%,100%{transform:rotate(0)}20%{transform:rotate(-13deg)}40%{transform:rotate(11deg)}60%{transform:rotate(-7deg)}80%{transform:rotate(4deg)} }
@keyframes cfUnmuteBell { 0%{transform:scale(.75);opacity:.4}65%{transform:scale(1.12);opacity:1}100%{transform:scale(1)} }
@keyframes cfPanelReveal { from{opacity:0;transform:translateX(25px) scale(.98)}to{opacity:1;transform:none} }
@keyframes cfPanelDismiss { from{opacity:1;transform:none}to{opacity:0;transform:translateX(25px) scale(.98)} }
@keyframes cfComposerLift { 0%{transform:translateY(2px)}60%{transform:translateY(-2px)}100%{transform:none} }
@keyframes cfComposerSettle { from{transform:translateY(-2px)}to{transform:none} }
@keyframes cfInputGlow { 0%,100%{box-shadow:0 0 0 transparent}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--cf-accent) 13%,transparent)} }
@keyframes cfSendLaunch { 0%{transform:none}42%{transform:translate(5px,-5px) rotate(-8deg) scale(1.08)}100%{transform:none} }
@keyframes cfSendReturn { from{transform:translate(5px,-5px) rotate(-8deg)}to{transform:none} }
@keyframes cfSendRipple { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--cf-accent) 38%,transparent)}100%{box-shadow:0 0 0 13px transparent} }
@keyframes cfAttachSwing { 0%,100%{transform:rotate(0)}30%{transform:rotate(-12deg)}65%{transform:rotate(9deg)} }
@keyframes cfAttachDrop { from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:none} }
@keyframes cfUploadComplete { 0%{transform:scaleX(.92);opacity:.7}55%{transform:scaleX(1.02);opacity:1}100%{transform:scaleX(1)} }
@keyframes cfUploadCancel { 0%{transform:none}35%{transform:translateX(-5px)}70%{transform:translateX(5px)}100%{transform:none;opacity:.45} }
@keyframes cfMessageFloat { from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none} }
@keyframes cfMessageLand { 0%{transform:translateY(-3px)}70%{transform:translateY(1px)}100%{transform:none} }
@keyframes cfBubblePop { 0%{opacity:0;transform:scale(.86) translateY(6px)}70%{opacity:1;transform:scale(1.025)}100%{transform:scale(1)} }
@keyframes cfBubbleNudge { 0%,100%{transform:none}50%{transform:translateX(4px)} }
@keyframes cfBubbleHighlight { 0%,100%{filter:none}45%{filter:brightness(1.07);box-shadow:0 0 0 5px color-mix(in srgb,var(--cf-accent) 12%,transparent)} }
@keyframes cfReadTickOne { from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:none} }
@keyframes cfReadTickTwo { 0%{letter-spacing:1px;opacity:.45}100%{letter-spacing:-3px;opacity:1} }
@keyframes cfDateAppear { from{opacity:0;transform:scaleX(.72)}to{opacity:1;transform:scaleX(1)} }
@keyframes cfMentionGlow { 0%,100%{background:transparent}50%{background:color-mix(in srgb,var(--cf-warning) 20%,transparent)} }
@keyframes cfMentionFade { from{background:color-mix(in srgb,var(--cf-warning) 20%,transparent)}to{background:transparent} }
@keyframes cfLinkPreview { from{opacity:0;transform:translateY(7px) scale(.98)}to{opacity:1;transform:none} }
@keyframes cfMediaReveal { from{opacity:0;transform:scale(.94);filter:blur(3px)}to{opacity:1;transform:scale(1);filter:none} }
@keyframes cfMediaDismiss { from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.94)} }
@keyframes cfFileSlide { from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none} }
@keyframes cfAudioWave2 { 0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)} }
@keyframes cfVideoPlayPulse { 0%,100%{transform:scale(1)}50%{transform:scale(1.1)} }
@keyframes cfEmojiWave { 0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)} }
@keyframes cfEmojiRotate { from{transform:rotate(-16deg) scale(.8)}to{transform:rotate(0) scale(1)} }
@keyframes cfEmojiBurst { 0%{opacity:0;transform:scale(.45)}70%{opacity:1;transform:scale(1.22)}100%{transform:scale(1)} }
@keyframes cfReactionAdd { 0%{opacity:0;transform:translateY(5px) scale(.55)}70%{opacity:1;transform:translateY(-1px) scale(1.12)}100%{transform:none} }
@keyframes cfReactionRemove { from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.45)} }
@keyframes cfTypingEnter { from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none} }
@keyframes cfTypingExit { from{opacity:1;transform:none}to{opacity:0;transform:translateY(6px)} }
@keyframes cfPresenceWake { 0%{transform:scale(.55);opacity:.3}70%{transform:scale(1.25);opacity:1}100%{transform:scale(1)} }
@keyframes cfPresenceSleep { from{opacity:1;transform:scale(1)}to{opacity:.55;transform:scale(.72)} }
@keyframes cfOfflineBlink { 0%,100%{opacity:.55}50%{opacity:1} }
@keyframes cfFriendAccept { 0%{transform:scale(.88);opacity:.5}55%{transform:scale(1.04);background:var(--cf-accent-soft)}100%{transform:scale(1);opacity:1} }
@keyframes cfFriendDecline { 0%{transform:none;opacity:1}40%{transform:translateX(-5px)}100%{transform:translateX(18px);opacity:0} }
@keyframes cfRequestSlide { from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none} }
@keyframes cfGroupCreate { 0%{opacity:0;transform:scale(.8) rotate(-2deg)}70%{opacity:1;transform:scale(1.04) rotate(1deg)}100%{transform:scale(1)} }
@keyframes cfGroupAvatarMerge { 0%{transform:translateX(-8px);opacity:.4}100%{transform:none;opacity:1} }
@keyframes cfMemberShuffle { 0%{transform:translateX(-5px)}50%{transform:translateX(5px)}100%{transform:none} }
@keyframes cfNotificationRing { 0%,100%{transform:rotate(0)}20%{transform:rotate(-10deg)}40%{transform:rotate(9deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(3deg)} }
@keyframes cfNotificationClear { from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.7)} }
@keyframes cfCountFlip { 0%{transform:rotateX(-90deg);opacity:0}100%{transform:rotateX(0);opacity:1} }
@keyframes cfCountReset { from{transform:scale(1.15)}to{transform:scale(1)} }
@keyframes cfDarkReveal { from{filter:brightness(1.35);opacity:.72}to{filter:none;opacity:1} }
@keyframes cfLightReveal { from{filter:brightness(.65);opacity:.75}to{filter:none;opacity:1} }
@keyframes cfButtonPress { 0%{transform:scale(1)}50%{transform:scale(.92)}100%{transform:scale(1)} }
@keyframes cfDangerPulse { 0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--cf-danger) 14%,transparent)} }
@keyframes cfSuccessPulse { 0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--cf-accent) 14%,transparent)} }
@keyframes cfWarningPulse { 0%,100%{filter:none}50%{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--cf-warning) 45%,transparent))} }
@keyframes cfErrorSlide { 0%{opacity:0;transform:translateX(16px)}65%{opacity:1;transform:translateX(-2px)}100%{transform:none} }
@keyframes cfRefreshSweep { 0%{opacity:.5;transform:rotate(-35deg)}100%{opacity:1;transform:rotate(0)} }
@keyframes cfNetworkOnline { from{opacity:.4;transform:translateY(-5px)}to{opacity:1;transform:none} }
@keyframes cfNetworkOffline { from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none} }
@keyframes cfMobilePush { from{transform:translateX(100%);opacity:.6}to{transform:none;opacity:1} }
@keyframes cfMobilePop { from{transform:translateX(-24%);opacity:.6}to{transform:none;opacity:1} }
@keyframes cfBottomNavLift { 0%{transform:none}55%{transform:translateY(-4px)}100%{transform:none} }
@keyframes cfInfoCard { 0%{transform:scale(.97);opacity:.75}65%{transform:scale(1.015);opacity:1}100%{transform:scale(1)} }
@keyframes cfModalSpring { 0%{opacity:0;transform:translateY(18px) scale(.9)}72%{opacity:1;transform:translateY(-2px) scale(1.02)}100%{transform:none} }
@keyframes cfModalSink { from{opacity:1;transform:none}to{opacity:0;transform:translateY(15px) scale(.94)} }
@keyframes cfTooltipIn { from{opacity:0;transform:translateY(4px) scale(.95)}to{opacity:1;transform:none} }
@keyframes cfTooltipOut { from{opacity:1;transform:none}to{opacity:0;transform:translateY(4px) scale(.95)} }
@keyframes cfMenuFan { 0%{opacity:0;transform:scale(.85) rotate(-3deg);transform-origin:top right}100%{opacity:1;transform:none} }
@keyframes cfMenuFold { from{opacity:1;transform:none}to{opacity:0;transform:scale(.85) rotate(-3deg);transform-origin:top right} }
@keyframes cfScrollHint { 0%,100%{transform:translateY(0)}50%{transform:translateY(4px)} }
@keyframes cfUnreadBurst { 0%{transform:scale(.45);opacity:0}65%{transform:scale(1.25);opacity:1}100%{transform:scale(1)} }

/* Release polish motion set. These classes are intentionally composable and respect reduced-motion settings below. */
.cf-fx-loader-card { animation: cfLoaderCardIn .36s cubic-bezier(.2,.85,.25,1) both; }
.cf-fx-nav-open { animation: cfNavOpen .28s cubic-bezier(.2,.8,.2,1) both; }
.cf-fx-page-ready { animation: cfPageReady .44s ease both; }
.cf-fx-card-hover { animation: cfCardHover .32s ease both; }
.cf-fx-avatar-ring { animation: cfAvatarHalo .7s ease both; }
.cf-fx-search-pulse { animation: cfSearchPulse .44s ease both; }
.cf-fx-tab-switch { animation: cfTabSwitch .3s ease both; }
.cf-fx-badge-update { animation: cfBadgeUpdate .4s cubic-bezier(.2,.9,.25,1.2) both; }
.cf-fx-new-chat { animation: cfNewChat .4s cubic-bezier(.2,.9,.25,1.08) both; }
.cf-fx-chat-in { animation: cfChatSwitchIn .32s ease both; }
.cf-fx-action-menu { animation: cfActionMenuIn .22s ease both; }
.cf-fx-reaction-sync { animation: cfReactionSync .4s ease both; }
.cf-fx-file-settle { animation: cfFileSettle .38s ease both; }
.cf-fx-modal-list { animation: cfModalListIn .32s ease both; }
.cf-fx-toast-settle { animation: cfToastSettle .42s ease both; }
.cf-fx-composer-ready { animation: cfComposerReady .34s ease both; }
.cf-fx-status-change { animation: cfStatusChange .4s ease both; }
.cf-fx-invite-arrive { animation: cfInviteArrive .42s cubic-bezier(.2,.9,.25,1.1) both; }

@keyframes cfLoaderCardIn { from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none} }
@keyframes cfNavOpen { from{opacity:0;transform:translateY(-10px) scaleY(.94)}to{opacity:1;transform:none} }
@keyframes cfPageReady { from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none} }
@keyframes cfCardHover { 0%{transform:translateY(0)}55%{transform:translateY(-5px)}100%{transform:translateY(-3px)} }
@keyframes cfAvatarHalo { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--cf-accent) 30%,transparent)}100%{box-shadow:0 0 0 10px transparent} }
@keyframes cfSearchPulse { 0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--cf-accent) 12%,transparent)} }
@keyframes cfTabSwitch { from{opacity:.55;transform:translateY(4px)}to{opacity:1;transform:none} }
@keyframes cfBadgeUpdate { 0%{opacity:.45;transform:scale(.55)}70%{opacity:1;transform:scale(1.18)}100%{transform:scale(1)} }
@keyframes cfNewChat { from{opacity:0;transform:translateX(-10px) scale(.97)}to{opacity:1;transform:none} }
@keyframes cfChatSwitchIn { from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none} }
@keyframes cfActionMenuIn { from{opacity:0;transform:translateY(-4px) scale(.94)}to{opacity:1;transform:none} }
@keyframes cfReactionSync { 0%{filter:brightness(1);transform:scale(.92)}55%{filter:brightness(1.08);transform:scale(1.08)}100%{filter:none;transform:scale(1)} }
@keyframes cfFileSettle { from{opacity:0;transform:translateY(7px) scale(.97)}to{opacity:1;transform:none} }
@keyframes cfModalListIn { from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none} }
@keyframes cfToastSettle { 0%{opacity:0;transform:translateY(10px) scale(.96)}70%{opacity:1;transform:translateY(-2px) scale(1.01)}100%{transform:none} }
@keyframes cfComposerReady { from{opacity:.45;transform:translateY(5px)}to{opacity:1;transform:none} }
@keyframes cfStatusChange { 0%{opacity:.45;transform:scale(.88)}65%{opacity:1;transform:scale(1.08)}100%{transform:scale(1)} }
@keyframes cfInviteArrive { from{opacity:0;transform:translateX(14px) scale(.96)}to{opacity:1;transform:none} }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media (min-width: 768px) {
  .cf-fx-mobile-push, .cf-fx-mobile-pop { animation: none; }
}
.cf-no-motion *, .cf-no-motion *::before, .cf-no-motion *::after { animation: none !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }