.soul-case .soul-hero{--cycle:4.8s;isolation:isolate;aspect-ratio:3/2;color:#f5f3ed;background:#000;min-height:22rem;position:relative;overflow:hidden}.soul-case .soul-stage{perspective:1000px;position:absolute;inset:0;overflow:hidden}.soul-case .soul-wall{transform-style:preserve-3d;animation:soul-wall var(--cycle) infinite;will-change:transform,opacity;position:absolute;inset:0}.soul-case .soul-photo{left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--w)*1%);height:calc(var(--h)*1%);transform:translateZ(var(--depth)) rotate(var(--r));backface-visibility:hidden;background:#171b1b;position:absolute;overflow:hidden;box-shadow:0 12px 40px #0006}.soul-case .soul-photo img{object-fit:cover;object-position:50% 35%;filter:brightness(.73);width:100%;height:100%;display:block}.soul-case .soul-vignette{pointer-events:none;background:radial-gradient(#0000 20%,#0002 52%,#0008 100%);position:absolute;inset:0}.soul-case .soul-mark{width:42%;height:36%;animation:soul-logo var(--cycle) infinite;will-change:transform;transform-origin:50%;justify-content:center;align-items:center;margin:0;display:flex;position:absolute;top:32%;left:29%}.soul-case .soul-mark:before{content:"";z-index:-1;background:radial-gradient(#000 40%,#000b 57%,#0000 74%);position:absolute;inset:-8% -12%}.soul-case .soul-mark img{object-fit:contain;width:100%;height:auto;display:block}.soul-case .soul-caption{z-index:3;pointer-events:none;justify-content:space-between;align-items:flex-start;gap:24px;display:flex;position:absolute;top:16px;left:16px;right:16px}.soul-case .soul-caption .panel-label{color:#c7cac7;text-shadow:0 1px 8px #000;font-size:10px}.soul-case .soul-footer{z-index:3;letter-spacing:.14em;text-transform:uppercase;color:#afb5b2;justify-content:space-between;align-items:center;font-family:monospace;font-size:10px;display:flex;position:absolute;bottom:16px;left:16px;right:16px}.soul-case .soul-motion-toggle{font:inherit;color:inherit;cursor:pointer;background:#0007;border:1px solid #ffffff28;border-radius:2px;align-items:center;gap:9px;min-height:32px;padding:8px 10px;display:flex}.soul-case .soul-motion-toggle:hover{color:#fff;background:#000;border-color:#fff6}.soul-case .soul-motion-toggle:focus-visible{outline-offset:3px;outline:2px solid #f5f3ed}.soul-case .soul-hero.is-paused .soul-wall,.soul-case .soul-hero.is-paused .soul-mark,.soul-case .soul-hero.is-offscreen .soul-wall,.soul-case .soul-hero.is-offscreen .soul-mark{animation-play-state:paused}@keyframes soul-wall{0%,7%{opacity:0;animation-timing-function:cubic-bezier(.55,0,.35,1);transform:translateZ(-950px)rotateX(10deg)rotateY(-26deg)scale(.55)}29%{opacity:1;animation-timing-function:cubic-bezier(.45,0,.55,1);transform:translateZ(35px)rotateX(3deg)rotateY(-16deg)scale(.94)}48%{opacity:1;animation-timing-function:cubic-bezier(.65,0,.35,1);transform:translateZ(65px)rotateX(-2deg)rotateY(16deg)scale(.79)}65%,to{opacity:0;transform:translateZ(-950px)rotateX(9deg)rotateY(0)scale(.55)}}@keyframes soul-logo{0%,7%{animation-timing-function:cubic-bezier(.55,0,.35,1);transform:perspective(850px)rotateX(14deg)rotateY(0)scale(.72)}29%{animation-timing-function:cubic-bezier(.45,0,.55,1);transform:perspective(850px)rotateX(-5deg)rotateY(-29deg)rotate(-3deg)scale(1.18)}48%{animation-timing-function:cubic-bezier(.65,0,.35,1);transform:perspective(850px)rotateX(3deg)rotateY(29deg)rotate(3deg)scale(1.18)}65%,to{transform:perspective(850px)rotateX(14deg)rotateY(0)scale(.72)}}@media (max-width:639px){.soul-case .soul-hero{aspect-ratio:3/2;min-height:0}.soul-case .soul-caption{gap:12px;top:12px;left:12px;right:12px}.soul-case .soul-caption .panel-label{max-width:78%;font-size:8px;line-height:1.5}.soul-case .soul-footer{font-size:8px;bottom:12px;left:12px;right:12px}.soul-case .soul-mark{width:52%;left:24%}.soul-case .soul-motion-toggle{min-height:28px;padding:5px 7px}.soul-case .soul-toggle-label{display:none}}@media (prefers-reduced-motion:reduce){.soul-case .soul-wall,.soul-case .soul-mark{animation:none}.soul-case .soul-wall{opacity:.6;transform:scale(1.02)}.soul-case .soul-mark{transform:none}.soul-case .soul-motion-toggle{display:none}}.soul-case .soul-photo{aspect-ratio:1;height:auto}.soul-case .soul-photo img{object-fit:contain;object-position:center;filter:brightness(var(--light,.73))}.soul-case .social-motion{isolation:isolate;aspect-ratio:3/2;color:#efefef;--screen-h:70%;--screen-w:21.465%;--screen-top:11%;--bezel:7px;--radius:34px;background:#000;position:relative;overflow:hidden}.soul-case .social-caption{z-index:6;letter-spacing:.14em;color:#8a8a8a;justify-content:space-between;gap:20px;font-family:monospace;font-size:10px;line-height:1.4;display:flex;position:absolute;top:16px;left:16px;right:16px}.soul-case .social-stage,.soul-case .social-track{position:absolute;inset:0;overflow:hidden}.soul-case .social-edge-shade{z-index:2;pointer-events:none;background:linear-gradient(90deg,#000 0%,#0000 20% 80%,#000 100%);position:absolute;inset:0}.soul-case .social-platform-id{z-index:5;flex-direction:column;align-items:center;gap:9px;width:30%;height:12%;display:flex;position:absolute;top:85%;left:50%;transform:translate(-50%)}.soul-case .social-platform-circle{aspect-ratio:1;background:#111;border:1px solid #626267;border-radius:50%;flex-shrink:0;height:66%;position:relative;box-shadow:inset 0 0 20px #ffffff03}.soul-case .social-badge-item{opacity:0;justify-content:center;align-items:center;transition:opacity .18s,transform .3s;display:flex;position:absolute;inset:26%;transform:scale(.8)}.soul-case .social-badge-item.is-current{opacity:1;transform:scale(1)}.soul-case .social-badge-item img{object-fit:contain;width:100%;height:100%;display:block}.soul-case .platform-badge-mark{filter:invert()}.soul-case .social-badge-item:has(.sar-badge-mark){inset:20%}.soul-case .social-platform-name{letter-spacing:.16em;text-transform:uppercase;color:#a7a7aa;text-align:center;font-family:monospace;font-size:10px;line-height:1.2}.soul-case .social-motion-toggle{z-index:6;color:#999;letter-spacing:.1em;cursor:pointer;background:#090909;border:1px solid #ffffff28;border-radius:2px;align-items:center;gap:9px;min-height:32px;padding:6px 10px;font-family:monospace;font-size:10px;display:flex;position:absolute;bottom:16px;right:16px}.soul-case .social-motion-toggle:hover{color:#fff;border-color:#fff6}.soul-case .social-motion-toggle:focus-visible{outline-offset:4px;outline:2px solid #fff}@media (max-width:639px){.soul-case .social-motion{--bezel:4px;--radius:17px}.soul-case .social-caption{gap:10px;font-size:7px;top:12px;left:12px;right:12px}.soul-case .social-caption span:last-child{display:none}.soul-case .social-platform-id{gap:5px}.soul-case .social-platform-name{letter-spacing:.1em;font-size:7px}.soul-case .social-motion-toggle{min-height:27px;padding:4px 7px;font-size:8px;bottom:10px;right:10px}.soul-case .social-control-label{display:none}.soul-case .social-phone{box-shadow:0 0 0 2px #202022,0 12px 22px #0009}.soul-case .social-side-button{width:2px;right:calc(var(--bezel)*-1 - 3px)}}@media (prefers-reduced-motion:reduce){.soul-case .social-badge-item{transition:none}}.soul-case .social-motion{container-type:inline-size}.soul-case .social-device{aspect-ratio:.474;box-sizing:border-box;will-change:transform,opacity;-webkit-user-select:none;user-select:none;background:linear-gradient(115deg,#85898d 0%,#303438 5%,#101214 18%,#080a0c 70%,#555a5f 97%,#a1a6aa 100%);border:1px solid #92979c;border-radius:3.4cqw;width:22.6%;padding:.65cqw;position:absolute;top:10%;left:50%;transform:translate(-50%);box-shadow:0 0 0 1px #151719,0 0 0 3px #34383c,0 18px 35px #0009,inset 0 0 0 2px #151719}.soul-case .social-device-screen{aspect-ratio:1206/2622;background:#080a0c;border-radius:2.7cqw;width:100%;height:100%;position:relative;overflow:hidden;box-shadow:0 0 0 1px #000}.soul-case .social-device-screen>img{object-fit:cover;width:100%;max-width:none;height:100%;display:block}.soul-case .social-device-camera{z-index:2;background:#060708;border-radius:999px;width:26%;height:3.2%;position:absolute;top:2.5%;left:37%;box-shadow:inset 0 0 0 1px #ffffff0b}.soul-case .social-device-camera:after{content:"";aspect-ratio:1;background:radial-gradient(circle at 35% 35%,#31445c,#0c1520 65%);border-radius:50%;height:42%;position:absolute;top:29%;right:12%}.soul-case .social-device-power,.soul-case .social-device-volume{background:linear-gradient(90deg,#202428,#8c9094,#363a3e);border-radius:2px;width:3px;position:absolute}.soul-case .social-device-power{height:12%;top:25%;right:-4px}.soul-case .social-device-volume{height:8%;top:20%;left:-4px;box-shadow:0 5.6cqw #555a5f}@font-face{font-family:SAR Castoro;src:url(/demos/soul-archive-room/assets/label/CastoroTitling-Regular.ttf)format("truetype");font-style:normal;font-weight:400;font-display:swap}.soul-case .detail-carousel{isolation:isolate;aspect-ratio:3/4;color:#ecece7;background:#090d0f;position:relative;overflow:hidden;container-type:inline-size}.soul-case .detail-carousel[data-motion=ring]{background:#080909}.soul-case .carousel-kicker{font:9px/1.4 var(--font-label);letter-spacing:.1em;color:#8b8f8e;margin:0;position:absolute;top:3%;left:4%}.soul-case .carousel-heading{letter-spacing:-.035em;margin:0;font:400 clamp(24px,5.4cqw,48px)/1.1 SAR Castoro,serif;position:absolute;top:8%;left:7%;right:7%}.soul-case .carousel-window{position:absolute;inset:21% 15% 18%;overflow:hidden}.soul-case .carousel-picture{object-fit:cover;will-change:transform,opacity;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.soul-case .detail-carousel[data-motion=ring] .carousel-window{pointer-events:none;inset:0;overflow:visible}.soul-case .detail-carousel[data-motion=ring] .carousel-picture{aspect-ratio:2485/2210;object-fit:contain;transform-origin:50% 250%;width:78%;height:auto;margin-top:-34.68%;position:absolute;top:50%;left:11%}.soul-case .carousel-name{letter-spacing:-.015em;margin:0;font:400 clamp(17px,3.5cqw,30px)/1.2 SAR Castoro,serif;position:absolute;top:85%;left:7%;right:7%}.soul-case .detail-carousel[data-motion=ring] .carousel-name{color:#bcbdb8;max-width:80%;font-size:clamp(12px,2.25cqw,18px);line-height:1.5}.soul-case .carousel-footer{color:#777e7b;font:9px var(--font-label);letter-spacing:.12em;justify-content:space-between;align-items:center;display:flex;position:absolute;bottom:3%;left:7%;right:7%}.soul-case .carousel-buttons{gap:6px;display:flex}.soul-case .carousel-buttons button{font:13px var(--font-label);color:#acb0ac;cursor:pointer;background:0 0;border:1px solid #fff2;border-radius:2px;width:28px;height:28px}.soul-case .carousel-buttons button:hover{color:#fff;border-color:#fff6}.soul-case .carousel-buttons button:focus-visible{outline-offset:3px;outline:2px solid #fff}@media (max-width:639px){.soul-case .carousel-kicker{font-size:8px}.soul-case .carousel-heading{font-size:7cqw}.soul-case .carousel-name{font-size:5cqw}.soul-case .detail-carousel[data-motion=ring] .carousel-name{font-size:3cqw}}.soul-case .release-carousel-wide{aspect-ratio:3/2}.soul-case .release-carousel-wide .carousel-heading{font-size:clamp(18px,3.8cqw,48px);top:8%}.soul-case .release-carousel-wide[data-motion=ring] .carousel-picture{width:44%;margin-top:-19.566%;left:28%}.soul-case .release-carousel-wide[data-motion=ring] .carousel-name{text-align:center;max-width:none;font-size:clamp(10px,1.5cqw,18px);top:84%;left:15%;right:15%}.soul-case #the-artists .carousel-heading{text-align:center;letter-spacing:-.035em;color:#969d99;font-size:clamp(28px,8cqw,76px);top:7.5%;left:5%;right:5%}.soul-case #the-artists .carousel-name{text-align:center;color:#969d99;left:15%;right:15%}.soul-case #the-label{position:relative}.soul-case .label-number-overlay{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.soul-case .label-metric-trigger{pointer-events:none;height:15%;position:absolute;top:74%;left:0;right:0}.soul-case .sar-showcase{isolation:isolate;aspect-ratio:16/9;color:#eee;background:#000;position:relative;overflow:hidden}.soul-case .sar-showcase video{object-fit:cover;background:#000;width:100%;height:100%;display:block;position:absolute;inset:0}.soul-case .performance-caption{pointer-events:none;color:#aaa;letter-spacing:.14em;text-shadow:0 1px 6px #000;margin:0;font:10px/1.4 monospace;position:absolute;top:16px;left:16px}.soul-case .performance-controls{justify-content:flex-end;gap:12px;display:flex;position:absolute;bottom:14px;left:16px;right:16px}.soul-case .performance-controls button{color:#ddd;cursor:pointer;letter-spacing:.1em;background:#080808cf;border:1px solid #ffffff35;border-radius:2px;min-height:32px;padding:6px 10px;font:10px/1.4 monospace}.soul-case .performance-controls button:hover{color:#fff;background:#111;border-color:#fff9}.soul-case .performance-controls button:focus-visible{outline-offset:4px;outline:2px solid #fff}@media (max-width:639px){.soul-case .performance-caption{font-size:8px;top:12px;left:12px}.soul-case .performance-controls{bottom:12px;left:12px;right:12px}.soul-case .performance-controls button{font-size:9px}}.soul-case .release-stack{isolation:isolate;aspect-ratio:3/2;background:var(--sar-canvas,#0c1011);color:#ecece7;position:relative;overflow:hidden;container-type:inline-size}.soul-case .release-stack .carousel-heading{text-align:center;font-size:clamp(28px,5.8cqw,73px);top:15%;left:5%;right:5%;transform:translateY(-50%)}.soul-case .release-stack .carousel-name{text-align:center;color:#bcbdb8;font-size:clamp(10px,1.5cqw,18px);line-height:1.5;top:83%;left:12%;right:12%}.soul-case .release-stack-stage{pointer-events:none;position:absolute;inset:0}.soul-case .release-stack-card{aspect-ratio:1200/1067;will-change:left,width,opacity;width:32%;margin:0;position:absolute;top:51%;left:50%;transform:translate(-50%,-50%);box-shadow:0 12px 24px #0005}.soul-case .release-stack-card img{object-fit:contain;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.soul-case .release-stack .carousel-footer{z-index:500}
.soul-case{width:100%;min-width:0;color:var(--foreground);flex-direction:column;gap:8px;display:flex}.soul-presentation{flex-direction:column;gap:8px;min-width:0;display:flex}.soul-case .panel{border:0;border-radius:6px;overflow:hidden}.soul-case .soul-intro{background:var(--surface);font:10px/1.6 var(--font-label);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);border-radius:6px;justify-content:space-between;gap:24px;padding:22px 30px;display:flex}.soul-case .soul-site-cta{background:var(--surface);border-radius:6px;justify-content:space-between;align-items:center;gap:24px;padding:36px;display:flex}.soul-case .soul-site-cta h2{margin:0;font-size:24px;font-weight:500;line-height:1.3}.soul-case .soul-site-cta p{color:var(--muted);margin:8px 0 0;font-size:14px;line-height:1.6}.soul-case .sar-showcase{background:#000}.soul-case .performance-controls button{color:var(--foreground);background:0 0;border:0}.soul-case .sar-label-panel{background:#0c1011;position:relative}@media (max-width:700px){.soul-case .soul-intro{padding:18px 20px}.soul-case .soul-site-cta{flex-direction:column;align-items:flex-start;padding:24px}}.soul-case .release-stack{background:var(--surface);color:var(--foreground)}.soul-case .release-stack .carousel-name,.soul-case .release-stack .carousel-count{color:var(--muted)}.soul-case .release-stack .carousel-buttons button{color:var(--foreground);border-color:var(--surface-border)}.soul-case .social-motion{background:var(--background);color:var(--foreground)}.soul-case .social-edge-shade{background:linear-gradient(90deg,var(--background),transparent 20%,transparent 80%,var(--background))}.soul-case .social-track{-webkit-mask-image:none;mask-image:none}.soul-case .social-caption,.soul-case .social-platform-name{color:var(--muted)}.soul-case .social-motion-toggle{color:var(--foreground);border-color:var(--surface-border);background:0 0}.soul-case .social-motion-toggle:hover{color:var(--foreground);border-color:var(--foreground)}.soul-case .social-motion-toggle:focus-visible{outline-color:var(--foreground)}.soul-case .social-platform-circle{background:var(--background);border-color:var(--muted)}:root[data-theme=light] .soul-case .platform-badge-mark{filter:none}:root[data-theme=light] .soul-case .sar-badge-mark{filter:invert()}@media (min-width:1001px){.soul-case .spi-columns{row-gap:0}.soul-case .spi-columns article{grid-template-rows:subgrid;grid-row:span 3;display:grid}}.soul-case .social-device-screen{isolation:isolate;transform:translateZ(0)}.soul-case .social-device-screen>img{backface-visibility:hidden;transform:translateZ(0)}.soul-case .social-badge-item{transition:opacity .16s,transform .2s ease-in;transform:scale(.35)}.soul-case .social-badge-item.is-current{animation:.52s both sar-platform-pop;transform:scale(1.2)}@keyframes sar-platform-pop{0%{opacity:0;transform:scale(.35)}62%{opacity:1;animation-timing-function:ease-in-out;transform:scale(1.34)}to{opacity:1;transform:scale(1.2)}}@media (prefers-reduced-motion:reduce){.soul-case .social-badge-item{transition:none}.soul-case .social-badge-item.is-current{animation:none;transform:scale(1.2)}}.soul-case .social-platform-name{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}:root[data-theme=light] .soul-case .soul-hero{color:#000;background:#fff}:root[data-theme=light] .soul-case .soul-mark img{filter:brightness(0)}:root[data-theme=light] .soul-case .soul-mark:before{display:none}:root[data-theme=light] .soul-case .soul-vignette{background:radial-gradient(#0000 20%,#fff2 52%,#fff8 100%)}:root[data-theme=light] .soul-case .soul-caption .panel-label{color:#000;text-shadow:0 1px 8px #fff}:root[data-theme=light] .soul-case .soul-footer{color:#000}:root[data-theme=light] .soul-case .soul-motion-toggle{border-color:var(--surface-border);color:#000;background:#ffffffb3}:root[data-theme=light] .soul-case .soul-motion-toggle:hover{background:#fff;border-color:#000}:root[data-theme=light] .soul-case .soul-motion-toggle:focus-visible{outline-color:#000}:root[data-theme=light] .soul-case .sar-label-panel{background:var(--surface)}:root[data-theme=light] .soul-case img[src*=sar-the-label-v5\.svg]{content:url(/demos/soul-archive-room/assets/label/sar-the-label-v5-light.svg)}:root[data-theme=light] .soul-case .label-number-overlay g[fill]{fill:#000}:root[data-theme=light] .soul-case .soul-photo{opacity:.28;box-shadow:none}:root[data-theme=light] .soul-case .soul-photo img{filter:grayscale()}