.pearl-color-visual{margin:1.5rem 0}.pearl-visual__title{font-size:1rem;font-weight:700;margin-bottom:1rem;color:rgb(var(--color-foreground))}.pearl-visual__container{position:relative;width:100%;height:200px;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,#1a1a2e,#16213e);box-shadow:0 4px 12px #00000026,inset 0 1px #ffffff1a}@media screen and (min-width: 750px){.pearl-visual__container{height:240px}}.pearl-visual__description{margin-top:1rem;font-size:.9rem;line-height:1.5;color:rgba(var(--color-foreground),.85);font-style:italic}.pearl-visual--liquid{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.pearl-visual__gradient-wave{will-change:transform,border-radius;pointer-events:none}@keyframes liquidFlow1{0%,to{transform:translateY(0) scaleY(1);border-radius:40% 50% 0 0}25%{transform:translateY(-5%) scaleY(1.05);border-radius:50% 40% 0 0}50%{transform:translateY(-3%) scaleY(1);border-radius:45% 55% 0 0}75%{transform:translateY(3%) scaleY(.98);border-radius:55% 45% 0 0}}@keyframes liquidFlow2{0%,to{transform:translateY(0) scaleY(1) scaleX(1);border-radius:50% 60% 0 0}33%{transform:translateY(-4%) scaleY(1.03) scaleX(1.02);border-radius:60% 50% 0 0}66%{transform:translateY(4%) scaleY(.97) scaleX(.98);border-radius:55% 65% 0 0}}@keyframes liquidFlow3{0%,to{transform:translateY(0) scaleY(1);border-radius:60% 70% 0 0}40%{transform:translateY(-6%) scaleY(1.08);border-radius:70% 60% 0 0}80%{transform:translateY(5%) scaleY(.95);border-radius:65% 75% 0 0}}.pearl-visual__shimmer{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);animation:shimmer 3s ease-in-out infinite}@keyframes shimmer{0%{left:-100%}to{left:100%}}.pearl-visual--orbs{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.pearl-visual__orbit-container{position:relative;width:180px;height:180px;margin:0 auto}@media screen and (min-width: 750px){.pearl-visual__orbit-container{width:200px;height:200px}}.pearl-visual__orb{position:absolute;width:60px;height:60px;border-radius:50%;box-shadow:0 8px 24px #0006,inset -5px -5px 10px #0000004d,inset 5px 5px 10px #ffffff4d;animation:orbit var(--orbit-duration, 6s) linear infinite;animation-delay:var(--orbit-delay, 0s);z-index:10}@media screen and (min-width: 750px){.pearl-visual__orb{width:70px;height:70px;transform-origin:var(--orbit-x, 100px) var(--orbit-y, 100px)}}@keyframes orbit{0%{transform:rotate(0) translate(var(--orbit-radius, 90px)) rotate(0)}to{transform:rotate(360deg) translate(var(--orbit-radius, 90px)) rotate(-360deg)}}.pearl-visual__center-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.8),transparent 70%);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}}.pearl-visual__color-labels{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(var(--color-foreground),.1)}.pearl-visual__color-label{display:inline-flex;align-items:center;gap:.5rem;padding:.25rem .75rem;background:rgba(var(--color-foreground),.05);border-radius:20px;font-size:.8rem;color:rgba(var(--color-foreground),.7)}.pearl-visual__color-dot{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.2)}.pearl-visual--loading{display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,rgba(var(--color-foreground),.05),rgba(var(--color-foreground),.1),rgba(var(--color-foreground),.05));background-size:200% 100%;animation:loading 1.5s ease-in-out infinite}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.pearl-visual__container:hover .pearl-visual__gradient-wave{animation-duration:3s!important}.pearl-visual__container:hover .pearl-visual__shimmer{animation-duration:1.5s}.pearl-visual__container:hover .pearl-visual__orb{animation-duration:3s!important}@media (prefers-color-scheme: dark){.pearl-visual__container{background:linear-gradient(135deg,#0a0a0a,#1a1a1a)}}
/*# sourceMappingURL=/cdn/shop/t/286/assets/pearl-color-visual.css.map */