/* WorldPCI animated logo: the website's approved motion, reused unchanged (exact original raster, isolated by its transparent
   separator). Rules marked ORIGINAL are the worldpci.com logo-motion.css verbatim; the rest only fits it to the CRM/Desk/login pages. */

/* ORIGINAL */
.wpci-logo-animation{position:relative;display:block;isolation:isolate}
.wpci-logo-animation>.wpci-logo-symbol{position:absolute;inset:0;display:block;width:100%!important;height:100%!important;max-width:none;object-fit:contain;clip-path:inset(0 67.7083333333% 0 0);pointer-events:none;opacity:0}
.wpci-logo-animation.wpci-logo-ready>.wpci-logo-wordmark{clip-path:inset(0 0 0 32.2916666667%)}
.wpci-logo-animation.wpci-logo-ready>.wpci-logo-symbol{opacity:1}
.wpci-logo-rotor{transform-origin:17.7777777778% 50%;animation:wpci-original-globe-turn 10s linear infinite;animation-play-state:paused;will-change:transform}
.wpci-logo-ready:not(.wpci-logo-stopped) .wpci-logo-rotor{animation-play-state:running}
.wpci-logo-animation:hover .wpci-logo-rotor,.wpci-motion-paused .wpci-logo-rotor{animation-play-state:paused}
@keyframes wpci-original-globe-turn{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.wpci-logo-rotor{animation:none!important;transform:none!important;will-change:auto}}

/* ADAPTATION: wrapper sized to the image (login page, Control Center) */
.wpci-logo-animation.wpci-fit{display:inline-block;line-height:0;vertical-align:middle}
.wpci-logo-animation.wpci-fit>.wpci-logo-wordmark{display:block}

/* ADAPTATION: CRM sidebar brand box (Vue owns the <img>; we only add a sibling layer and a class).
   The box is exactly 3:1 so the original percentages map onto the artwork. */
div.h-8.wpci-logo-overlay{position:relative;width:102px!important;max-width:102px!important;height:34px!important;flex:0 0 102px!important}
div.h-8.wpci-logo-overlay>img.wpci-logo-wordmark{width:100%!important;height:100%!important;object-fit:contain!important}
/* collapsed sidebar: a 34px window onto the globe only (the rotating layer stays 102x34, the window clips the rest) */
button:has(.opacity-0) div.h-8.wpci-logo-overlay{width:34px!important;max-width:34px!important;flex-basis:34px!important;overflow:hidden}
button:has(.opacity-0) div.h-8.wpci-logo-overlay.wpci-logo-ready>img.wpci-logo-wordmark{visibility:hidden}
button:has(.opacity-0) div.h-8.wpci-logo-overlay>.wpci-logo-symbol{width:102px!important;height:34px!important;inset:0 auto auto 0!important}