.visualizer { position: fixed; top: 48px; left: 0; right: 0; bottom: 368px; margin: 0; background: #000; overflow: hidden; z-index: 1; } img { font-size: 0; color: transparent; } img.is-broken-image { visibility: hidden; } .spotlight-target { position: relative; } html.is-spotlight-active .spotlight-target::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.65); pointer-events: none; z-index: 1; opacity: 1; transition: opacity 0.3s ease; } html.is-spotlight-active .spotlight-target:hover::after, html.is-spotlight-active .spotlight-target:focus-within::after { opacity: 0; } :root { --bg: #000000; --text: #f5f1eb; --muted: #8a8680; --hint: #6b6b6b; --border: #2a2a2a; --image-bg: #141414; --line: #1c1c1c; --invert-amount: 0; --effective-invert: var(--invert-amount); --ds-invert-amount: 1; --arc-peak-base: 18vh; --spin-rate: 1; --arc-amplitude: 40vw; --section-logo-y-offset: 0vh; --carousel-duration-mult: 1; --pulse-scale: 1; --ds-pulse-scale: 1; --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif; --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif; } html.arc-mode-vertical { --arc-amplitude: 0vw; } html.arc-mode-narrow { --arc-amplitude: 20vw; } html.arc-mode-medium { --arc-amplitude: 30vw; } html.arc-mode-wide { --arc-amplitude: 40vw; } html.section-logo-mode-lift { --section-logo-y-offset: -8vh; --arc-peak-base: 18vh; --arc-amplitude: 40vw; } html.section-logo-mode-hover { --section-logo-y-offset: 14vh; --arc-peak-base: 10vh; --arc-amplitude: 20vw; } html.section-logo-mode-pump { --section-logo-y-offset: 0vh; --arc-peak-base: 22vh; --arc-amplitude: 0vw; } html.fx-moth, html.fx-harsh, html.fx-osiriz, html.fx-apocryphal, html.fx-wither, html.fx-corpsethorn, html.fx-revolveroscillator { --effective-invert: calc(0.5 + 0.5 * var(--invert-amount)); } html.fx-moth body, html.fx-harsh body, html.fx-osiriz body, html.fx-apocryphal body, html.fx-wither body, html.fx-corpsethorn body, html.fx-revolveroscillator body { background: #fff !important; } html.fx-wither .section-logo { display: none !important; } html.fx-harsh body { background: #000 !important; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: rgb( calc(var(--effective-invert) * 255), calc(var(--effective-invert) * 255), calc(var(--effective-invert) * 255) ); color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { display: flex; flex-direction: column; min-height: 100vh; position: relative; overscroll-behavior: none; } .soundcloud-section { flex: 1; } a { color: inherit; text-decoration: none; } button { font: inherit; background: none; color: inherit; border: none; cursor: pointer; } img { display: block; max-width: 100%; } ::selection { background: var(--text); color: var(--bg); } .header-spinner { position: absolute; left: 32px; top: 52px; transform: translate( var(--shake-x, 0px), calc(-50% + (1 - var(--ds-pulse-scale, 1)) * 20px + var(--shake-y, 0px)) ) scale(var(--ds-pulse-scale, 1)); transform-origin: center center; will-change: transform; width: 88px; height: 88px; border: 3px solid #000; border-radius: 50%; overflow: hidden; box-sizing: border-box; z-index: 10; } .home-mode .header-spinner-img { animation: none !important; transition: none !important; transform: none !important; } .home-mode .site-header { background: #000; padding-top: 0; padding-bottom: 0; } @media (min-width: 901px) { html.home-mode .header-spinner, html.home-mode .cart-button { display: none; } } html.artist-mode .header-spinner, html.artist-mode .cart-button { display: none !important; } .home-mode .site-title-logo { display: block; height: 100%; width: auto; object-fit: contain; opacity: var(--neon-flicker, 1); filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.35)) invert(var(--effective-invert, 0)) invert(1); transition: opacity 30ms linear; cursor: pointer; transform: translate3d(var(--shake-x, 0px), var(--shake-y, 0px), 0); } #bar-counter { display: none; position: fixed; top: 20px; left: 50%; transform: translateX(-50%); font-family: 'Michroma', sans-serif; font-size: 96px; font-weight: 900; line-height: 1; color: #ff0000; text-shadow: 0 0 4px rgba(0, 0, 0, 0.85), 0 0 12px rgba(0, 0, 0, 0.6); pointer-events: none; z-index: 14; } #bar-counter:empty { display: none; } @media (max-width: 900px) { #bar-counter { top: 100px; font-size: 64px; } } #intro-cover, #intro-cover-blur { display: none; position: absolute; aspect-ratio: 1 / 1; border-radius: 50%; box-sizing: border-box; object-fit: cover; object-position: center; opacity: var(--intro-cover-opacity, 0); pointer-events: none; z-index: 12; will-change: opacity, filter; } #intro-cover { filter: brightness(var(--intro-cover-brightness, 1)); } #intro-cover-blur { filter: blur(var(--intro-cover-blur-px, 0px)) brightness(var(--intro-cover-brightness, 1)); -webkit-mask: radial-gradient(circle closest-side at center, black 0%, black 96%, transparent 100%); mask: radial-gradient(circle closest-side at center, black 0%, black 96%, transparent 100%); } @media (min-width: 901px) { .home-mode #intro-cover, .home-mode #intro-cover-blur { display: block; bottom: 38%; left: 50%; width: min(52vh, 38vw); height: min(52vh, 38vw); transform: translate( -50%, calc((1 - var(--cover-pulse-scale, 1)) * 50px) ) scale(calc(var(--cover-pulse-scale, 1) * var(--intro-cover-shrink, 1))) rotate(var(--intro-cover-rotation, 0deg)); } } @media (max-width: 900px) { .home-mode #intro-cover, .home-mode #intro-cover-blur { display: block; top: 50%; left: 50%; width: 84vw; height: 84vw; transform: translate( -50%, calc(-50% + (1 - var(--cover-pulse-scale, 1)) * 50px) ) scale(calc(var(--cover-pulse-scale, 1) * var(--intro-cover-shrink, 1))) rotate(var(--intro-cover-rotation, 0deg)); } } #intro-artist-logo { display: none; position: absolute; opacity: 0; object-fit: contain; object-position: center; pointer-events: none; z-index: 13; will-change: opacity, transform; } @media (min-width: 901px) { .home-mode #intro-artist-logo { display: block; bottom: 38%; left: 50%; width: calc(min(52vh, 38vw) * 0.6); height: calc(min(52vh, 38vw) * 0.6); transform: translate( -50%, calc(min(52vh, 38vw) * -0.2 + (1 - var(--ds-pulse-scale, 1)) * 50px) ) scale(var(--ds-pulse-scale, 1)) rotate(var(--intro-cover-rotation, 0deg)); } } @media (max-width: 900px) { .home-mode #intro-artist-logo { display: block; top: 50%; left: 50%; width: calc(84vw * 0.6); height: calc(84vw * 0.6); transform: translate( -50%, calc(-50% + (1 - var(--ds-pulse-scale, 1)) * 50px) ) scale(var(--ds-pulse-scale, 1)) rotate(var(--intro-cover-rotation, 0deg)); } } .section-logo { display: none; position: relative; transform-origin: center center; will-change: transform; } html.is-loud-sustained .home-mode .section-logo, html.is-loud-sustained .artist-mode .section-logo, html.is-loud-sustained .header-spinner { animation: loudWhiteFlash 0.5s ease-in-out infinite; } html.fx-harsh.is-loud-sustained.home-mode .section-logo, html.fx-harsh.is-loud-sustained.artist-mode .section-logo { translate: calc(var(--shake-x, 0px) * var(--harsh-shake-mult, 0)) calc(var(--shake-y, 0px) * var(--harsh-shake-mult, 0)); } html.fx-harsh.is-loud-sustained.home-mode .section-logo .section-logo-layer-img:not([data-role="arc"]), html.fx-harsh.is-loud-sustained.artist-mode .section-logo .section-logo-layer-img:not([data-role="arc"]) { border-radius: 0 !important; transition: none !important; filter: brightness(0) drop-shadow(calc(var(--invert-amount, 0) * 4px) 0 0 #ff003c) drop-shadow(calc(var(--invert-amount, 0) * -4px) 0 0 #00f0ff) blur(calc(0.5px + var(--invert-amount, 0) * 1.5px)) !important; } .home-mode .section-logo, .artist-mode .section-logo, .header-spinner { transition: filter 0.4s ease; } .section-logo::before { content: ''; position: absolute; top: -5%; left: -5%; width: 110%; height: 110%; border-radius: 50%; z-index: -1; pointer-events: none; } .section-logo-layer, .section-logo-backdrop { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; box-sizing: border-box; border-radius: 50%; } .section-logo-layer { overflow: hidden; } .section-logo-backdrop { z-index: -1; } .section-logo-layer-img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 50%; animation-duration: calc(var(--spin-duration, 4s) / var(--layer-speed, 1)); animation-timing-function: linear; animation-iteration-count: infinite; animation-play-state: paused; will-change: transform; } .section-logo-layer[data-spin="forward"] .section-logo-layer-img { animation-name: headerSpin; } .section-logo-layer[data-spin="reverse"] .section-logo-layer-img { animation-name: headerSpinReverse; } .section-logo.is-spinning .section-logo-layer-img { animation-play-state: running; } .home-mode .section-logo-layer[data-spin="forward"] .section-logo-layer-img, .artist-mode .section-logo-layer[data-spin="forward"] .section-logo-layer-img { animation-name: rotationSwing; animation-duration: calc((var(--spin-duration, 4s) * 16) / var(--layer-speed, 1)); animation-timing-function: ease-in-out; } .home-mode .section-logo-layer[data-spin="reverse"] .section-logo-layer-img, .artist-mode .section-logo-layer[data-spin="reverse"] .section-logo-layer-img { animation-name: rotationSwingReverse; animation-duration: calc((var(--spin-duration, 4s) * 16) / var(--layer-speed, 1)); animation-timing-function: ease-in-out; } html.intro-spin-frozen .section-logo-layer-img { animation-play-state: paused !important; } .header-spinner-img { width: 100%; height: 100%; object-fit: contain; display: block; animation: headerSpin var(--spin-duration, 4s) linear infinite; animation-play-state: paused; transition: filter 0.2s ease; will-change: transform, filter; } .header-spinner.is-spinning .header-spinner-img { animation-play-state: running; } @keyframes headerSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes headerSpinReverse { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } @keyframes rotationSwing { 0% { transform: rotate(0deg); } 50% { transform: rotate(2880deg); } 100% { transform: rotate(0deg); } } @keyframes rotationSwingReverse { 0% { transform: rotate(0deg); } 50% { transform: rotate(-2880deg); } 100% { transform: rotate(0deg); } } html.song-flipped .home-mode .section-logo-layer[data-spin="forward"] .section-logo-layer-img, html.song-flipped .artist-mode .section-logo-layer[data-spin="forward"] .section-logo-layer-img { animation-name: rotationSwingReverse; } html.song-flipped .home-mode .section-logo-layer[data-spin="reverse"] .section-logo-layer-img, html.song-flipped .artist-mode .section-logo-layer[data-spin="reverse"] .section-logo-layer-img { animation-name: rotationSwing; } html.song-flipped .carousel-stack > .artist-carousel:not(:nth-child(3)) .artist-carousel-track { animation-direction: normal; } html.song-flipped .carousel-stack > .artist-carousel:nth-child(3) .artist-carousel-track { animation-direction: reverse; } @media (min-width: 901px) { html.song-flipped .home-mode .carousel-stack > .artist-carousel:nth-child(3) .artist-carousel-track, html.song-flipped .artist-mode .carousel-stack > .artist-carousel:nth-child(3) .artist-carousel-track { animation-direction: normal; } html.song-flipped .home-mode .carousel-stack > .artist-carousel:nth-child(4) .artist-carousel-track, html.song-flipped .artist-mode .carousel-stack > .artist-carousel:nth-child(4) .artist-carousel-track { animation-direction: reverse; } } @keyframes loudWhiteFlash { 0%, 100% { filter: none; } 50% { filter: invert(1) drop-shadow(0 0 30px rgba(255, 255, 255, 0.9)); } } @property --shake-x { syntax: '<length>'; initial-value: 0px; inherits: true; } @property --shake-y { syntax: '<length>'; initial-value: 0px; inherits: true; } @property --arc-y { syntax: '<length>'; initial-value: 0vh; inherits: true; } @property --arc-x { syntax: '<length>'; initial-value: 0px; inherits: true; } @property --arc-rx { syntax: '<angle>'; initial-value: 0deg; inherits: true; } @property --arc-tz { syntax: '<length>'; initial-value: 0px; inherits: true; } @keyframes loudShake { 0%, 100% { --shake-x: 0px; --shake-y: 0px; } 20% { --shake-x: -3px; --shake-y: -2px; } 40% { --shake-x: 3px; --shake-y: 2px; } 60% { --shake-x: -2px; --shake-y: 3px; } 80% { --shake-x: 2px; --shake-y: -3px; } } html.is-loud-sustained { animation: loudShake 80ms linear infinite; } body::before { content: ''; position: fixed; top: 88px; bottom: var(--player-bar-height, 184px); left: 0; right: 0; pointer-events: none; z-index: 9999; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 1); opacity: 0; transition: opacity 0.12s ease; transform: translate3d(var(--shake-x, 0px), var(--shake-y, 0px), 0); } html.is-loud-sustained body::before { opacity: 1; } @media (min-width: 901px) { body::before { top: 190px; bottom: auto; height: 3px; box-shadow: none; background: rgba(255, 255, 255, 1); } body::after { content: ''; position: fixed; left: 0; right: 0; bottom: calc(88px + var(--sc-section-height, 280px)); height: 6px; pointer-events: none; z-index: 9999; background: rgba(255, 255, 255, 1); opacity: 0; transition: opacity 0.12s ease; transform: translate3d(var(--shake-x, 0px), var(--shake-y, 0px), 0); } html.is-loud-sustained body::after { opacity: 1; } html.home-mode body::before { opacity: 0 !important; } html.home-mode.is-loud-sustained body:has(.site-header:hover)::before { opacity: 1 !important; } html.artist-mode body::before { opacity: 0 !important; } } .site-header { position: sticky; top: 0; z-index: 100; background: #000; color: var(--text); border-bottom: 0.5px solid var(--line); padding: 12px 32px; display: flex; justify-content: center; align-items: center; height: 48px; box-sizing: border-box; } .site-title-logo { position: absolute; left: 32px; top: 50%; transform: translateY(-50%); filter: invert(1); height: 60px; width: auto; object-fit: contain; display: block; } .logo-link { display: block; } .logo { height: 80px; width: auto; transform: scale(var(--pulse-scale, 1)); transform-origin: center center; filter: invert(var(--effective-invert, 0)); will-change: transform, filter; } html.fx-harsh .site-header { filter: none; } html.fx-harsh.home-mode .site-title-logo { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.35)); } html.fx-harsh .logo { filter: none; } .cart-button { position: absolute; right: 32px; top: 52px; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; padding: 8px; color: #fff; transition: opacity 0.15s ease; z-index: 10; } .cart-button:hover { opacity: 0.7; } .cart-icon { width: 22px; height: 22px; display: block; } .cart-count { font-size: 11px; letter-spacing: 0.04em; color: var(--muted); min-width: 12px; text-align: left; } .invert-high .product-name, .invert-high .price, .invert-high .product-description, .audio-at-rest .product-page .product-name, .audio-at-rest .product-page .price, .audio-at-rest .product-page .product-description { color: var(--bg); } .product-page { max-width: 1100px; margin: 0 auto; padding: 60px 32px 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; } .audio-at-rest .product-page { background: #fff; box-shadow: 0 0 0 100vw #fff; clip-path: inset(0 -100vw); } .audio-at-rest .product-page .option-btn:not(.option-btn--active), .audio-at-rest .product-page .size-btn:not(.size-btn--active) { color: var(--bg); } .product-details { align-self: center; } .option-label, .option-btn:not(.option-btn--active), .size-btn:not(.size-btn--active), .disclaimer { filter: invert(var(--effective-invert, 0)); will-change: filter; } .hero-image { aspect-ratio: 5 / 4; border-radius: 2px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .product-images { display: flex; flex-direction: column; } .product-images .image-meta-row { margin-top: auto; } .placeholder-text { color: #3a3a3a; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; } .thumbnails { display: flex; gap: 8px; margin-top: 12px; } .thumb { width: 64px; height: 64px; border: none; border-radius: 2px; padding: 0; overflow: hidden; outline: 1px solid transparent; outline-offset: -1px; transition: outline-color 0.15s ease; } .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .thumb--active { outline-color: var(--text); } .image-meta-row { display: flex; align-items: flex-start; justify-content: center; gap: 18px; margin-top: 12px; margin-bottom: 24px; } .image-meta-row .thumbnails { margin-top: 0; flex-shrink: 0; } .image-meta-row .product-name { flex: none; margin: 0; font-size: 32px; } .image-meta-row .price { margin: 0; flex: none; } .title-price { display: flex; align-items: baseline; flex: none; } .title-price .price::before { content: '-'; margin: 0 10px; } .title-block { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; } .title-block .product-description { margin: 0; max-width: none; } .image-meta-row .title-block { display: none; } .product-details .title-block--details { margin-bottom: 32px; gap: 10px; } .product-details .title-price { flex-direction: column; align-items: flex-start; gap: 4px; } .product-details .title-price .price::before { content: none; margin: 0; } .product-details .product-name { font-size: 44px; margin: 0; } .product-details .price { font-size: 26px; margin: 0; } .product-name { font-family: 'Michroma', sans-serif; font-size: 56px; line-height: 1; letter-spacing: 0; margin-bottom: 16px; font-weight: 400; } .product-description { font-size: 15px; line-height: 1.55; color: var(--text); margin-bottom: 24px; max-width: 320px; } .price { font-family: 'Michroma', sans-serif; font-size: 28px; letter-spacing: 0; margin-bottom: 32px; } .option-group { margin-bottom: 26px; } .option-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 12px; } .option-row { display: flex; gap: 8px; } .option-btn { padding: 12px 18px; font-size: 13px; border: 0.5px solid var(--border); color: var(--text); transition: all 0.15s ease; } .option-btn:hover { border-color: var(--text); } .option-btn--active { background: var(--bg); color: var(--text); border: 1px solid var(--text); font-weight: 500; } .size-row { display: flex; flex-wrap: wrap; gap: 6px; } .size-btn { min-width: 50px; padding: 11px 8px; font-size: 13px; text-align: center; border: 0.5px solid var(--border); color: var(--text); transition: all 0.15s ease; } .size-btn:hover { border-color: var(--text); } .size-btn--active { background: var(--bg); color: var(--text); border: 1px solid var(--text); font-weight: 500; } .design-dropdown { position: relative; } .design-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; font-size: 13px; font-weight: 500; text-align: left; border: 1px solid var(--text); color: var(--text); background: var(--bg); cursor: pointer; } .design-trigger-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .design-chevron { width: 10px; height: 6px; margin-left: 12px; flex-shrink: 0; transition: transform 0.15s ease; } .design-dropdown--open .design-chevron { transform: rotate(180deg); } .design-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--bg); border: 0.5px solid var(--text); border-radius: 2px; z-index: 10; display: flex; flex-direction: column; } .design-menu[hidden] { display: none; } .design-option { padding: 12px 14px; font-size: 13px; text-align: left; border: none; border-bottom: 0.5px solid var(--line); background: transparent; color: var(--text); cursor: pointer; transition: background 0.12s ease; } .design-option:last-child { border-bottom: none; } .design-option:hover, .design-option:focus-visible { background: rgba(245, 241, 235, 0.06); outline: none; } .design-option--active { font-weight: 500; background: rgba(245, 241, 235, 0.04); } .cta-button { display: block; width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--text); padding: 18px; text-align: center; font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500; margin-top: 12px; transition: background 0.15s ease, color 0.15s ease; } .cta-button:hover { background: var(--text); color: var(--bg); } .disclaimer { font-size: 11px; color: var(--hint); margin-top: 16px; line-height: 1.55; } .soundcloud-section { border-top: 0.5px solid var(--line); padding: 0 0 60px; } .soundcloud-inner { max-width: none; margin: 0 auto; } .soundcloud-profile { display: flex; align-items: center; gap: 18px; padding: 16px 20px; background: var(--bg); border-bottom: 0.5px solid var(--line); } .soundcloud-profile-link { display: flex; align-items: center; gap: 18px; padding: 4px 6px; margin: -4px -6px; border-radius: 4px; text-decoration: none; color: inherit; flex-shrink: 0; min-width: 0; transition: background 0.15s ease; } .soundcloud-profile-link:hover { background: rgba(255, 255, 255, 0.06); } .soundcloud-profile-bar-slot { display: none; } .desktop-player-bar-host { display: none; } .soundcloud-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; transform: scale(var(--pulse-scale, 1)); transform-origin: center center; will-change: transform; } .soundcloud-meta { flex: 1; min-width: 0; } .soundcloud-name { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.01em; color: var(--text); margin-bottom: 2px; text-transform: uppercase; line-height: 1.15; } .soundcloud-name:empty { display: none; } .soundcloud-bio { font-size: 13px; color: var(--muted); letter-spacing: 0.02em; line-height: 1.15; } .soundcloud-cta { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); text-decoration: none; flex-shrink: 0; transition: color 0.15s ease; } .soundcloud-cta:hover { color: var(--text); } .soundcloud-player { display: block; width: 100%; border: 0; border-radius: 2px; overflow: hidden; } .sc-iframe-hidden { position: fixed; left: -9999px; top: -9999px; width: 300px; height: 150px; opacity: 0; pointer-events: none; border: 0; } html:not(.home-mode) .player-stack:has(.player-content[hidden]) .soundcloud-profile { visibility: hidden; } .player-loading { display: none; } .player-stack { border: none; border-bottom: 0.5px solid var(--line); border-radius: 0; overflow: hidden; background: var(--bg); position: relative; z-index: 1; } html.is-booting body { opacity: 0; } body { opacity: 1; transition: opacity 320ms ease-out; } .player-cap { display: none; } @media (min-width: 901px) { .player-cap { display: flex; align-items: center; justify-content: center; position: fixed; bottom: 88px; height: var(--sc-section-height, 280px); z-index: 5; pointer-events: none; transform: translate3d(var(--shake-x, 0px), var(--shake-y, 0px), 0); will-change: transform; } .player-cap--left { left: 0; right: auto; width: calc(var(--floating-cover-x, 50vw) - var(--floating-cover-size, 120px) / 2); } .player-cap--right { display: none; } .player-cap--merch-ad { right: 0 !important; left: auto; width: 240px; background-color: #1a1a1a; background-size: cover; background-position: center; background-repeat: no-repeat; pointer-events: auto; overflow: hidden; } .merch-ad-frost { display: none; } .merch-ad-btn { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 2; font-family: var(--font-display); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #ffffff; text-decoration: none; padding: 6px 14px; border: 1px solid rgba(255, 255, 255, 0.85); background: rgba(0, 0, 0, 0.5); white-space: nowrap; transition: background-color 0.18s ease, color 0.18s ease; } .merch-ad-btn:hover, .merch-ad-btn:focus { background-color: rgba(255, 255, 255, 0.92); color: #000; outline: none; } } .player-cap-label-link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; text-decoration: none; pointer-events: auto; transform: scale(var(--pulse-scale, 1)); transform-origin: center center; will-change: transform; } .player-cap-label-img { display: block; max-width: 90%; max-height: 90%; width: auto; height: auto; object-fit: contain; object-position: center; } .player-cap-img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; transform: scale(var(--pulse-scale, 1)); transform-origin: center center; will-change: transform; } .player-cap-cover-group { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; gap: 12px; } .player-cap-cover-group .player-cap-img { flex: 1 1 0; min-width: 0; width: auto; max-height: 100%; } .player-cap-cover-sep { flex: 0 0 auto; font-family: var(--font-display); font-size: clamp(18px, 4vw, 36px); line-height: 1; color: var(--text); opacity: 0.6; user-select: none; pointer-events: none; } .label-panel { display: none; } @media (min-width: 901px) { .label-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; pointer-events: auto; }
.label-panel-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex: 0 0 auto; text-decoration: none; color: inherit; cursor: pointer; }
.label-panel-name { display: none; }
.label-panel-artists { display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; gap: 24px; }


.label-panel-logo { display: block; height: 100px; width: auto; object-fit: contain; }
.label-panel-artists { display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; gap: 24px; }


.site-header { height: 142px; }
.visualizer { top: 142px; } .header-artist { color: var(--text); text-decoration: none; font-family: var(--font-display); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.55; transition: opacity 0.2s ease, transform 0.2s ease; white-space: nowrap; cursor: pointer; } .header-artist:hover, .header-artist:focus-visible { opacity: 1; outline: none; } .header-artist.is-current { opacity: 1; transform: scale(1.05); } } .waveform-wrap { display: none; position: relative; height: 220px; background: #050505; border-bottom: 0.5px solid var(--line); cursor: pointer; } .waveform-canvas { display: block; width: 100%; height: 100%; } .now-playing-art { display: none; } .cover-spinner { display: none; } .cover-spinner-back { display: none; } .carousel-stack { display: none; opacity: 0; transition: opacity 280ms ease; } .carousel-stack.is-ready { opacity: 1; } html { --dome-scale: 0; } html.dome-subtle { --dome-scale: 0.4; } html.dome-moderate { --dome-scale: 1.0; } html.dome-strong { --dome-scale: 1.6; } html.no-dome { --dome-scale: 0; } .carousel-stack { perspective: 1200px; perspective-origin: center bottom; transform-style: preserve-3d; position: relative; } .carousel-stack > .artist-carousel:nth-child(1) { transform-origin: bottom center; rotate: x calc(-25deg * var(--dome-scale, 0)); translate: 0 0 calc(80px * var(--dome-scale, 0)); } .carousel-stack > .artist-carousel:nth-child(2) { transform-origin: bottom center; rotate: x calc(-22deg * var(--dome-scale, 0)); translate: 0 0 calc(70px * var(--dome-scale, 0)); } .carousel-stack > .artist-carousel:nth-child(3) { transform-origin: bottom center; rotate: x calc(-18deg * var(--dome-scale, 0)); translate: 0 0 calc(58px * var(--dome-scale, 0)); } .carousel-stack > .artist-carousel:nth-child(4) { transform-origin: bottom center; rotate: x calc(-14deg * var(--dome-scale, 0)); translate: 0 0 calc(45px * var(--dome-scale, 0)); } .carousel-stack > .artist-carousel:nth-child(5) { transform-origin: bottom center; rotate: x calc(-10deg * var(--dome-scale, 0)); translate: 0 0 calc(32px * var(--dome-scale, 0)); } .carousel-stack > .artist-carousel:nth-child(6) { transform-origin: bottom center; rotate: x calc(-7deg * var(--dome-scale, 0)); translate: 0 0 calc(22px * var(--dome-scale, 0)); } .carousel-stack > .artist-carousel:nth-child(7) { transform-origin: bottom center; rotate: x calc(-4deg * var(--dome-scale, 0)); translate: 0 0 calc(14px * var(--dome-scale, 0)); } .carousel-stack > .artist-carousel:nth-child(8) { transform-origin: bottom center; rotate: x calc(-2deg * var(--dome-scale, 0)); translate: 0 0 calc(7px * var(--dome-scale, 0)); } .carousel-stack > .artist-carousel:nth-child(9) { transform-origin: bottom center; rotate: x calc(0deg * var(--dome-scale, 0)); translate: 0 0 calc(2px * var(--dome-scale, 0)); } .sky-backdrop { position: absolute; top: 0; left: 0; right: 0; bottom: var(--sky-backdrop-bottom, 10%); z-index: 0; pointer-events: none; overflow: hidden; } .sky-effect { position: absolute; inset: 0; pointer-events: none; } .sky-effect--fog { background-image: var(--sky-fog-image, radial-gradient(ellipse 80% 60% at 30% 50%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 40%, transparent 70%), radial-gradient(ellipse 60% 50% at 70% 60%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 50%, transparent 80%)); background-repeat: no-repeat; background-size: 200% 100%; background-position: 0% 0%; opacity: var(--sky-fog-opacity, 0.6); animation: skyFogDrift var(--sky-fog-duration, 90s) linear infinite alternate; display: none; } html.sky-fog .sky-effect--fog { display: block; } @keyframes skyFogDrift { from { background-position: 0% 0%; } to { background-position: -50% 0%; } } .home-mode .carousel-stack > .artist-carousel:nth-child(-n+3), .artist-mode .carousel-stack > .artist-carousel:nth-child(-n+3) { position: relative; } .home-mode .carousel-stack > .artist-carousel:nth-child(1)::after, .artist-mode .carousel-stack > .artist-carousel:nth-child(1)::after, .home-mode .carousel-stack > .artist-carousel:nth-child(2)::after, .artist-mode .carousel-stack > .artist-carousel:nth-child(2)::after, .home-mode .carousel-stack > .artist-carousel:nth-child(3)::after, .artist-mode .carousel-stack > .artist-carousel:nth-child(3)::after { content: ''; position: absolute; inset: 0; backdrop-filter: blur(calc(var(--frost-amount, 0) * var(--frost-mute, 1) * 6px)); -webkit-backdrop-filter: blur(calc(var(--frost-amount, 0) * var(--frost-mute, 1) * 6px)); background: rgba(255, 255, 255, calc(var(--frost-amount, 0) * var(--frost-mute, 1) * 0.14)); pointer-events: none; z-index: 5; animation-delay: var(--carousel-anim-delay, 0s); } .home-mode .carousel-stack > .artist-carousel:nth-child(1)::after, .artist-mode .carousel-stack > .artist-carousel:nth-child(1)::after, .home-mode .carousel-stack > .artist-carousel:nth-child(2)::after, .artist-mode .carousel-stack > .artist-carousel:nth-child(2)::after { animation-duration: calc(var(--spin-duration, 4s) * 16); animation-timing-function: step-end; animation-iteration-count: infinite; } .home-mode .carousel-stack > .artist-carousel:nth-child(1)::after, .artist-mode .carousel-stack > .artist-carousel:nth-child(1)::after { animation-name: frostMuteRow1; } .home-mode .carousel-stack > .artist-carousel:nth-child(2)::after, .artist-mode .carousel-stack > .artist-carousel:nth-child(2)::after { animation-name: frostMuteRow2; } @keyframes frostMuteRow1 { 0% { --frost-mute: 1; } 75% { --frost-mute: 0; } 100% { --frost-mute: 1; } } @keyframes frostMuteRow2 { 0% { --frost-mute: 1; } 50% { --frost-mute: 0; } 75% { --frost-mute: 1; } 100% { --frost-mute: 1; } } @property --frost-mute { syntax: '<number>'; initial-value: 1; inherits: false; } @media (max-width: 900px) { .home-mode .carousel-stack > .artist-carousel:nth-child(4), .artist-mode .carousel-stack > .artist-carousel:nth-child(4) { position: relative; } .home-mode .carousel-stack > .artist-carousel:nth-child(4)::after, .artist-mode .carousel-stack > .artist-carousel:nth-child(4)::after { content: ''; position: absolute; inset: 0; backdrop-filter: blur(calc(var(--frost-amount, 0) * 6px)); -webkit-backdrop-filter: blur(calc(var(--frost-amount, 0) * 6px)); background: rgba(255, 255, 255, calc(var(--frost-amount, 0) * 0.14)); pointer-events: none; z-index: 5; } } .carousel-stack > .artist-carousel .artist-carousel-track { animation-direction: reverse; } html.fx-harsh .carousel-stack .artist-carousel-track, html.fx-osiriz .carousel-stack .artist-carousel-track, html.fx-revolveroscillator .carousel-stack .artist-carousel-track { animation-duration: calc(var(--spin-duration, 4s) * 8); animation-timing-function: ease-in-out; } html.fx-harsh .carousel-stack > .artist-carousel:not(:nth-child(3)) .artist-carousel-track, html.fx-osiriz .carousel-stack > .artist-carousel:not(:nth-child(3)) .artist-carousel-track, html.fx-revolveroscillator .carousel-stack > .artist-carousel:not(:nth-child(3)) .artist-carousel-track { animation-direction: alternate-reverse; } @media (min-width: 901px) { html.layout-pendulum .carousel-stack > .artist-carousel:nth-child(3) .artist-carousel-track { animation-direction: alternate-reverse; } html.layout-pendulum .carousel-stack > .artist-carousel:nth-child(4) .artist-carousel-track { animation-name: carouselSwing; animation-duration: var(--layout-block-duration, 5s); animation-direction: alternate; } } @media (max-width: 900px) { html.layout-pendulum .carousel-stack > .artist-carousel:nth-child(3) .artist-carousel-track { animation-name: carouselSwing; animation-duration: var(--layout-block-duration, 5s); animation-direction: alternate; } } html.fx-osiriz .section-logo .section-logo-layer-img { animation: osirizStrobeFade var(--layout-block-duration, 5s) linear infinite alternate; } html.layout-pendulum .section-logo { animation: sectionLogoArcY var(--layout-block-duration, 5s) ease-in-out infinite alternate, sectionLogoArcX var(--layout-block-duration, 5s) ease-in-out infinite alternate; } html.layout-pendulum.view-forward .section-logo { animation: sectionLogoArcY var(--layout-block-duration, 5s) ease-in-out infinite alternate, sectionLogoArcX var(--layout-block-duration, 5s) ease-in-out infinite alternate, sectionLogoArcRotateX var(--layout-block-duration, 5s) ease-in-out infinite alternate, sectionLogoArcTranslateZ var(--layout-block-duration, 5s) ease-in-out infinite alternate; } html.layout-pendulum.view-centered { --arc-amplitude: 0vw; } html.layout-pendulum.view-sideways { --arc-amplitude: 40vw; } html.layout-pendulum.view-forward { --arc-amplitude: 0vw; } html.layout-pendulum.view-forward .section-logo { overflow: visible !important; border-radius: 0 !important; perspective: 1200px; transform-style: preserve-3d; will-change: transform; } html.layout-pendulum.view-forward .section-logo .section-logo-layer-img { backface-visibility: hidden; } .carousel-stack > .artist-carousel .artist-carousel-track { animation-delay: 0s; } @media (max-width: 900px) { .carousel-stack > .artist-carousel:nth-child(2) .artist-carousel-track { margin-left: -15vw; } .carousel-stack > .artist-carousel:nth-child(4) .artist-carousel-track { margin-left: -15vw; } } @media (min-width: 901px) { .carousel-stack > .artist-carousel:nth-child(2) .artist-carousel-track { margin-left: calc(-50vw / 7); } .carousel-stack > .artist-carousel:nth-child(4) .artist-carousel-track { margin-left: calc(-50vw / 7); } } .volume-control { display: none; } .track-list-row { display: contents; } .track-list-recent { display: none !important; } @keyframes carouselScroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @keyframes carouselSwing { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-65%, 0, 0); } } @keyframes carouselPendulumWindup { from { transform: translate3d(-65%, 0, 0); } to { transform: translate3d(-32.5%, 0, 0); } } @media (min-width: 901px) { html.intro-active .carousel-stack > .artist-carousel:nth-child(4) .artist-carousel-track { animation-name: carouselPendulumWindup !important; animation-duration: var(--layout-block-duration, 16s) !important; animation-direction: normal !important; animation-iteration-count: 1 !important; animation-fill-mode: forwards !important; animation-timing-function: ease-out !important; } } @media (max-width: 900px) { html.intro-active .carousel-stack > .artist-carousel:nth-child(3) .artist-carousel-track { animation-name: carouselPendulumWindup !important; animation-duration: var(--layout-block-duration, 16s) !important; animation-direction: normal !important; animation-iteration-count: 1 !important; animation-fill-mode: forwards !important; animation-timing-function: ease-out !important; } } html.layout-transitioning .carousel-stack .artist-carousel-track { transition: transform 200ms ease-out, filter 100ms ease-out; filter: blur(2px); } html.layout-transitioning .carousel-stack .artist-carousel-img { transition: filter 100ms ease-out; filter: blur(2px); } html.layout-transitioning { transition: --arc-x 300ms ease-out, --arc-y 300ms ease-out, --arc-rx 300ms ease-out, --arc-tz 300ms ease-out, --levels-y 300ms ease-out, --levels-scale 300ms ease-out; } @keyframes sectionLogoArcY { 0%, 100% { --arc-y: 0vh; } 50% { --arc-y: calc(var(--arc-peak-base, 18vh) * var(--spin-rate, 1) * var(--spin-rate, 1) * -1); } } @keyframes osirizStrobeFade { 0%, 22% { opacity: 1; } 22.5% { opacity: 0; } 23% { opacity: 0.95; } 23.5% { opacity: 0; } 24% { opacity: 0.85; } 24.5% { opacity: 0; } 25% { opacity: 0.70; } 25.5% { opacity: 0; } 26% { opacity: 0.55; } 26.5% { opacity: 0; } 27% { opacity: 0.40; } 27.5% { opacity: 0; } 28% { opacity: 0.25; } 28.5% { opacity: 0; } 29% { opacity: 0.10; } 29.5%, 70% { opacity: 0; } 70.5% { opacity: 0.10; } 71% { opacity: 0; } 71.5% { opacity: 0.25; } 72% { opacity: 0; } 72.5% { opacity: 0.40; } 73% { opacity: 0; } 73.5% { opacity: 0.55; } 74% { opacity: 0; } 74.5% { opacity: 0.70; } 75% { opacity: 0; } 75.5% { opacity: 0.85; } 76% { opacity: 0; } 76.5% { opacity: 0.95; } 77% { opacity: 0; } 77.5%, 100% { opacity: 1; } } @keyframes sectionLogoArcX { 0% { --arc-x: var(--arc-amplitude, 40vw); } 100% { --arc-x: calc(var(--arc-amplitude, 40vw) * -1); } } @keyframes sectionLogoArcXBounce { 0% { --arc-x: calc(var(--arc-amplitude, 40vw) * 1.25); } 3% { --arc-x: calc(var(--arc-amplitude, 40vw) * 0.92); } 8% { --arc-x: calc(var(--arc-amplitude, 40vw) * 1.05); } 12% { --arc-x: var(--arc-amplitude, 40vw); } 50% { --arc-x: 0vw; } 88% { --arc-x: calc(var(--arc-amplitude, 40vw) * -1); } 92% { --arc-x: calc(var(--arc-amplitude, 40vw) * -1.05); } 97% { --arc-x: calc(var(--arc-amplitude, 40vw) * -0.92); } 100% { --arc-x: calc(var(--arc-amplitude, 40vw) * -1.25); } } html.is-bounce.layout-pendulum .section-logo { animation: sectionLogoArcY var(--layout-block-duration, 5s) ease-in-out infinite alternate, sectionLogoArcXBounce var(--layout-block-duration, 5s) ease-in-out infinite alternate; } html.is-bounce.layout-pendulum.view-forward .section-logo { animation: sectionLogoArcY var(--layout-block-duration, 5s) ease-in-out infinite alternate, sectionLogoArcXBounce var(--layout-block-duration, 5s) ease-in-out infinite alternate, sectionLogoArcRotateX var(--layout-block-duration, 5s) ease-in-out infinite alternate, sectionLogoArcTranslateZ var(--layout-block-duration, 5s) ease-in-out infinite alternate; } @keyframes sectionLogoArcRotateX { 0% { --arc-rx: var(--arc-rx-amplitude, 30deg); } 100% { --arc-rx: calc(var(--arc-rx-amplitude, 30deg) * -1); } } @keyframes sectionLogoArcTranslateZ { 0%, 100% { --arc-tz: 0px; } 50% { --arc-tz: var(--arc-tz-amplitude, 150px); } } @keyframes carouselSlowDrift { 0% { transform: translate3d(-3%, 0, 0); } 100% { transform: translate3d(3%, 0, 0); } } html.layout-pendulum.view-forward .carousel-stack .artist-carousel-track { animation-name: carouselSlowDrift !important; animation-duration: 8s !important; animation-direction: alternate !important; animation-timing-function: ease-in-out !important; } @property --levels-y { syntax: '<length-percentage>'; inherits: true; initial-value: 0vh; } @property --levels-scale { syntax: '<number>'; inherits: true; initial-value: 1; } @keyframes levelsAscent { 0% { --levels-y: 28vh; --levels-scale: 1.00; } 50% { --levels-y: 0vh; --levels-scale: 0.78; } 100% { --levels-y: -22vh; --levels-scale: 0.58; } } html.layout-levels .section-logo { animation: levelsAscent var(--layout-block-duration, 8s) ease-in-out infinite alternate; } @property --depth-pullback-scale { syntax: '<number>'; inherits: true; initial-value: 1; } @property --show-y { syntax: '<length-percentage>'; inherits: true; initial-value: 0vh; } @property --show-scale { syntax: '<number>'; inherits: true; initial-value: 1; } html { transition: --depth-pullback-scale 800ms ease-out, --levels-y 600ms ease-out, --levels-scale 600ms ease-out, --show-y 1200ms ease-in-out, --show-scale 1200ms ease-in-out; } html.is-spin-frozen .section-logo-layer-img { animation: none !important; transform: rotate(0deg); } html.row-1-hidden .carousel-stack > .artist-carousel:nth-child(1), html.row-2-hidden .carousel-stack > .artist-carousel:nth-child(2), html.row-3-hidden .carousel-stack > .artist-carousel:nth-child(3), html.row-4-hidden .carousel-stack > .artist-carousel:nth-child(4), html.row-5-hidden .carousel-stack > .artist-carousel:nth-child(10) { background: #fff; } html.row-1-hidden .carousel-stack > .artist-carousel:nth-child(1) .artist-carousel-img, html.row-2-hidden .carousel-stack > .artist-carousel:nth-child(2) .artist-carousel-img, html.row-3-hidden .carousel-stack > .artist-carousel:nth-child(3) .artist-carousel-img, html.row-4-hidden .carousel-stack > .artist-carousel:nth-child(4) .artist-carousel-img, html.row-5-hidden .carousel-stack > .artist-carousel:nth-child(10) .artist-carousel-img { opacity: 0; } html.is-show-active .artist-carousel { transition: background 1.2s ease-out; } html.is-show-active .artist-carousel-img { transition: opacity 1.2s ease-out; } @keyframes spaceshipEntrance { 0% { opacity: 0; transform: scale(0.05); filter: blur(15px); } 40% { opacity: 0.6; filter: blur(6px); } 100% { opacity: 1; transform: scale(1); filter: blur(0); } } html.row-1-spaceship .carousel-stack > .artist-carousel:nth-child(1) .artist-carousel-img { animation: spaceshipEntrance 2s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0ms; } html.row-2-spaceship .carousel-stack > .artist-carousel:nth-child(2) .artist-carousel-img { animation: spaceshipEntrance 2s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 120ms; } html.row-3-spaceship .carousel-stack > .artist-carousel:nth-child(3) .artist-carousel-img { animation: spaceshipEntrance 2s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 240ms; } html.row-4-spaceship .carousel-stack > .artist-carousel:nth-child(4) .artist-carousel-img { animation: spaceshipEntrance 2s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 360ms; } html.row-5-spaceship .carousel-stack > .artist-carousel:nth-child(10) .artist-carousel-img { animation: spaceshipEntrance 2s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 480ms; } html.is-show-void .carousel-stack { background: #fff; } html.is-show-void .artist-carousel-img { opacity: 0; } html.is-show-active.fx-osiriz .section-logo .section-logo-layer-img { animation: rotationSwing calc((var(--spin-duration, 4s) * 16) / var(--layer-speed, 1)) ease-in-out infinite; } html.is-show-active.fx-osiriz .section-logo-layer[data-spin="reverse"] .section-logo-layer-img { animation: rotationSwingReverse calc((var(--spin-duration, 4s) * 16) / var(--layer-speed, 1)) ease-in-out infinite; } @keyframes osirizShowStrobeOut { 0%, 4% { opacity: 1; filter: invert(0); } 5%, 9% { opacity: 1; filter: invert(1); } 10%, 14% { opacity: 1; filter: invert(0); } 15%, 19% { opacity: 1; filter: invert(1); } 20%, 24% { opacity: 1; filter: invert(0); } 25%, 29% { opacity: 1; filter: invert(1); } 30%, 34% { opacity: 1; filter: invert(0); } 35%, 39% { opacity: 1; filter: invert(1); } 40%, 44% { opacity: 1; filter: invert(0); } 45%, 49% { opacity: 1; filter: invert(1); } 50%, 54% { opacity: 1; filter: invert(0); } 55%, 59% { opacity: 1; filter: invert(1); } 60%, 64% { opacity: 1; filter: invert(0); } 65%, 100% { opacity: 0; filter: invert(0); } } @keyframes osirizShowStrobeIn { 0%, 4% { opacity: 0; filter: invert(0); } 5%, 9% { opacity: 1; filter: invert(1); } 10%, 14% { opacity: 1; filter: invert(0); } 15%, 19% { opacity: 1; filter: invert(1); } 20%, 24% { opacity: 1; filter: invert(0); } 25%, 29% { opacity: 1; filter: invert(1); } 30%, 34% { opacity: 1; filter: invert(0); } 35%, 39% { opacity: 1; filter: invert(1); } 40%, 44% { opacity: 1; filter: invert(0); } 45%, 49% { opacity: 1; filter: invert(1); } 50%, 54% { opacity: 1; filter: invert(0); } 55%, 59% { opacity: 1; filter: invert(1); } 60%, 64% { opacity: 1; filter: invert(0); } 65%, 69% { opacity: 1; filter: invert(1); } 70%, 100% { opacity: 1; filter: invert(0); } } html.is-show-strobe-out .section-logo { animation: osirizShowStrobeOut var(--show-strobe-duration, 1.5s) linear forwards; } html.is-show-strobe-in .section-logo { animation: osirizShowStrobeIn var(--show-strobe-duration, 1.5s) linear forwards; } .osiriz-ghost { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 100; opacity: 0; display: none; object-fit: cover; } html.fx-osiriz .osiriz-ghost { display: block; } @keyframes osirizGhostFlash { 0% { opacity: 0; } 27% { opacity: 0.5; } 60% { opacity: 0.5; } 100% { opacity: 0; } } .osiriz-ghost.is-flashing { animation: osirizGhostFlash 300ms ease-out forwards; } html.layout-freeze { --depth-pullback-scale: 0.90; } @property --punch-scale { syntax: '<number>'; inherits: true; initial-value: 1; } @keyframes cameraPunch { 0% { --punch-scale: 1; } 50% { --punch-scale: 1.05; } 100% { --punch-scale: 1; } } body.is-camera-punch { animation: cameraPunch 100ms ease-out; } .carousel-stack { transform: scale(var(--punch-scale, 1)); transform-origin: center center; } @keyframes carouselRowExplode { 0% { filter: brightness(1) saturate(1); transform: scale(1); } 15% { filter: brightness(2.6) saturate(1.5); transform: scale(1.08); } 100% { filter: brightness(1) saturate(1); transform: scale(1); } } @media (min-width: 901px) { html.is-bar-8-explosion .carousel-stack > .artist-carousel:nth-child(4) .artist-carousel-img { animation: carouselRowExplode 800ms ease-out 0ms; } html.is-bar-8-explosion .carousel-stack > .artist-carousel:nth-child(3) .artist-carousel-img, html.is-bar-8-explosion .carousel-stack > .artist-carousel:nth-child(10) .artist-carousel-img { animation: carouselRowExplode 800ms ease-out 80ms; } html.is-bar-8-explosion .carousel-stack > .artist-carousel:nth-child(2) .artist-carousel-img { animation: carouselRowExplode 800ms ease-out 160ms; } html.is-bar-8-explosion .carousel-stack > .artist-carousel:nth-child(1) .artist-carousel-img { animation: carouselRowExplode 800ms ease-out 240ms; } } @media (max-width: 900px) { html.is-bar-8-explosion .carousel-stack > .artist-carousel:nth-child(3) .artist-carousel-img { animation: carouselRowExplode 800ms ease-out 0ms; } html.is-bar-8-explosion .carousel-stack > .artist-carousel:nth-child(2) .artist-carousel-img, html.is-bar-8-explosion .carousel-stack > .artist-carousel:nth-child(4) .artist-carousel-img { animation: carouselRowExplode 800ms ease-out 80ms; } html.is-bar-8-explosion .carousel-stack > .artist-carousel:nth-child(1) .artist-carousel-img, html.is-bar-8-explosion .carousel-stack > .artist-carousel:nth-child(10) .artist-carousel-img { animation: carouselRowExplode 800ms ease-out 160ms; } } .artist-carousel-link--blank { pointer-events: none; } .carousel-stack > .artist-carousel:nth-child(1) .artist-carousel-track > .artist-carousel-link:nth-child(4), .carousel-stack > .artist-carousel:nth-child(2) .artist-carousel-track > .artist-carousel-link:nth-child(4) { transition: opacity 0.5s ease-out; } html.is-rest-transition .carousel-stack > .artist-carousel:nth-child(1) .artist-carousel-track > .artist-carousel-link:nth-child(4), html.is-rest-transition .carousel-stack > .artist-carousel:nth-child(2) .artist-carousel-track > .artist-carousel-link:nth-child(4) { opacity: 0; } .artist-carousel-img { display: block; width: 100%; aspect-ratio: 2 / 1; } html.is-page-hidden .artist-carousel-track, html.is-page-hidden .artist-carousel-img, html.is-page-hidden .section-logo, html.is-page-hidden .section-logo-layer-img, html.is-page-hidden .header-spinner-img, html.is-page-hidden .cover-spinner, html.is-page-hidden .cover-spinner-back { animation-play-state: paused !important; } .artist-carousel { display: none; } .artists-header { background: #000; color: #fff; text-align: center; font-family: var(--font-display, 'Michroma', sans-serif); font-size: 18px; letter-spacing: 0.08em; padding: 14px 16px; margin: 24px -16px 0; line-height: 1.2; } .artist-logos { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 16px 16px 12px; background: transparent; } .artist-logo-link { display: block; opacity: 0.85; transition: opacity 0.15s ease; } .artist-logo-link:hover { opacity: 1; } .artist-logo-link:active { opacity: 0.7; } .artist-logo-img { height: 36px; width: auto; object-fit: contain; display: block; } .artist-logos:not(.artist-logos--section):not(.artist-logos--side):not(.artist-logos--footer) { display: none; } .track-artist-logo-link { display: none; } .track-list { list-style: none; margin: 0; padding: 0; transition: opacity 0.25s ease; } .track-list.is-loading { opacity: 0; pointer-events: none; } .track-row { display: grid; grid-template-columns: 28px 56px 1fr auto; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 0.5px solid var(--line); cursor: pointer; transition: background 0.15s ease; } .track-row:last-child { border-bottom: 0; } .track-row:hover { background: #3a0a0a; } .track-row.is-active { background: rgba(204, 0, 0, 0.08); } .track-row.is-active .track-title { color: var(--text); } .track-play-icon { display: none; width: 22px; height: 22px; color: var(--muted); align-items: center; justify-content: center; } .track-play-icon svg { width: 100%; height: 100%; } .track-row:hover .track-play-icon, .track-row.is-active .track-play-icon { color: var(--text); } .track-art { width: 56px; height: 56px; background: var(--image-bg); object-fit: cover; display: block; border-radius: 2px; } .track-meta { min-width: 0; } .track-title { font-size: 14px; color: var(--text); margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.15s ease; } .track-title-text { display: inline-block; white-space: nowrap; will-change: transform; } .track-row.has-overflow:hover .track-title { text-overflow: clip; text-align: left; } .track-row.has-overflow:hover .track-title-text { animation: titleMarquee 8s ease-in-out infinite; } @keyframes titleMarquee { 0% { transform: translateX(0); } 50%, 65% { transform: translateX(var(--marquee-shift, 0)); } 100% { transform: translateX(0); } } .track-artist { font-size: 12px; color: var(--muted); letter-spacing: 0.02em; text-transform: uppercase; } .track-duration { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .player-bar { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 14px 18px; border-bottom: 0.5px solid var(--line); background: rgba(255, 255, 255, 0.02); } .player-meta-art { display: none; } .player-current-artist-logo { display: none; } .player-controls { display: flex; align-items: center; gap: 4px; position: relative; } .player-floating-cover { display: none; pointer-events: none; } @media (min-width: 901px) { .player-floating-cover[src]:not([src=""]) { display: block; position: fixed; bottom: 88px; left: var(--floating-cover-x, 50vw); transform: translateX(-50%); width: var(--floating-cover-size, 120px); height: var(--floating-cover-size, 120px); object-fit: cover; z-index: 5; background: var(--image-bg); box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0); transition: box-shadow 0.12s ease; will-change: transform; } .now-playing-label { display: none; } @media (min-width: 901px) { .player-controls:has(.player-floating-cover[src]:not([src=""])) .now-playing-label { display: block; position: fixed; left: var(--floating-cover-x, 50vw); bottom: calc(88px + var(--floating-cover-size, 170px) - 36px); transform: translateX(-50%); z-index: 6; font-family: var(--font-display, 'Michroma', sans-serif); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; white-space: nowrap; pointer-events: none; text-shadow: 0 0 6px rgba(0,0,0,0.9); } } html.is-loud-sustained .player-floating-cover[src]:not([src=""]) { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 1); } } .player-active-artist { display: none !important; } @media (min-width: 901px) { .player-active-artist[src]:not([src=""]) { display: block; position: fixed; left: 0; bottom: 88px; width: calc(var(--floating-cover-x, 50vw) - var(--floating-cover-size, 120px) / 2); height: var(--sc-section-height, 280px); object-fit: contain; object-position: center; z-index: 5; will-change: transform; } } @media (min-width: 901px) { .player-active-artist[src]:not([src=""]) { display: block; position: fixed; left: 0; bottom: 88px; width: calc(var(--floating-cover-x, 50vw) - var(--floating-cover-size, 120px) / 2); height: var(--sc-section-height, 280px); object-fit: contain; object-position: center; z-index: 5; transform: scale(calc(var(--pulse-scale, 1) * var(--breath-scale, 1))); transform-origin: center center; filter: brightness(var(--breath-brightness, 1)); animation: activeArtistBreathe 4s ease-in-out infinite; will-change: transform, filter; } } .player-skip { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--muted); flex-shrink: 0; transition: color 0.15s ease, background 0.15s ease, opacity 0.15s ease; } .player-skip:hover:not(:disabled) { color: var(--text); background: rgba(255, 255, 255, 0.05); } .player-skip:disabled { opacity: 0.25; cursor: not-allowed; } .player-skip svg { width: 18px; height: 18px; } .player-play { width: 44px; height: 44px; border-radius: 50%; background: var(--text); color: var(--bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s ease, transform 0.15s ease; } .player-play:hover { background: #ffffff; transform: scale(1.04); } .player-play .icon-pause { display: none; } .player-play.is-playing .icon-play { display: none; } .player-play.is-playing .icon-pause { display: block; } .player-play svg { width: 18px; height: 18px; } .player-meta { min-width: 0; } .player-title { font-size: 13px; color: var(--text); margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .player-title-text { display: inline-block; white-space: nowrap; will-change: transform; } .player-title.has-overflow { text-overflow: clip; } .player-title.has-overflow .player-title-text { animation: titleMarquee 8s ease-in-out infinite; } .player-progress { height: 4px; padding: 8px 0; background: rgba(255, 255, 255, 0.08); background-clip: content-box; box-sizing: content-box; border-radius: 2px; cursor: pointer; position: relative; touch-action: none; } .player-progress-fill { height: 100%; width: 0; background: var(--text); border-radius: 2px; transition: width 0.1s linear; } .player-progress-fill.is-resetting { transition: none; } .player-progress-fill.is-scrubbing { transition: none; } .player-time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; flex-shrink: 0; } .site-footer { background: #000; border-top: 0.5px solid var(--line); margin-top: 80px; padding: 28px 32px; } .footer-row { max-width: 1100px; margin: 0 auto; display: flex; justify-content: center; align-items: center; gap: 24px; font-size: 12px; color: var(--text); } .footer-nav { display: flex; gap: 24px; } .footer-nav a { color: var(--text); transition: opacity 0.15s ease; } .footer-nav a:hover { opacity: 0.7; } @media (min-width: 901px) { .player-content[hidden] { display: block; } html:not(.home-mode) .player-stack:has(.player-content[hidden]) .soundcloud-profile { visibility: visible; } .track-list { min-height: 120px; } .artists-header { display: none; } .header-spinner[href] { cursor: pointer; } .header-spinner { border: none; } .artist-mode .visualizer { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; max-width: none; position: fixed; top: 0; left: 0; right: 0; bottom: calc(88px + var(--sc-section-height, 280px)); width: auto; height: auto; padding: 0; box-sizing: border-box; overflow: hidden; cursor: pointer; } .home-mode .visualizer { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; max-width: none; position: fixed; top: 0; left: 0; right: 0; bottom: calc(88px + var(--sc-section-height, 280px)); width: auto; height: auto; padding: 0; box-sizing: border-box; overflow: hidden; isolation: isolate; cursor: pointer; } .home-mode .visualizer-bg, .artist-mode .visualizer-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .home-mode .carousel-stack, .artist-mode .carousel-stack { position: relative; z-index: 1; } .artist-mode .visualizer > .product-images, .artist-mode .visualizer > .product-details, .home-mode .visualizer > .product-images, .home-mode .visualizer > .product-details { display: none; } .artist-mode .section-logo, .home-mode .section-logo { display: block; position: absolute; bottom: 38%; left: 50%; transform: translate( calc(-50% + var(--shake-x, 0px) + var(--arc-x, 0px) + var(--cp-x, 0%)), calc((1 - var(--ds-pulse-scale, 1)) * 90vh + var(--shake-y, 0px) + var(--intro-ds-drop-y, 0vh) + var(--arc-y, 0vh) + var(--levels-y, 0vh) + var(--show-y, 0vh) + var(--section-logo-y-offset, 0vh) + var(--cp-y, 0%)) ) rotateX(var(--arc-rx, 0deg)) translateZ(var(--arc-tz, 0px)) rotate(var(--cp-rotation, 0deg)) scale(calc(var(--ds-pulse-scale, 1) * var(--intro-ds-scale, 1) * var(--levels-scale, 1) * var(--depth-pullback-scale, 1) * var(--punch-scale, 1) * var(--show-scale, 1) * var(--cp-scale, 1))); width: min(52vh, 38vw); height: min(52vh, 38vw); aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; box-sizing: border-box; z-index: 10; pointer-events: none; } .home-mode .artist-logos--side, .artist-mode .artist-logos--side { display: none; } .home-mode .carousel-stack, .artist-mode .carousel-stack { display: flex; flex-direction: column; width: 100%; flex: 1; min-height: 0; } .home-mode .carousel-stack > .artist-carousel, .artist-mode .carousel-stack > .artist-carousel { display: flex; flex: 1; min-height: 0; width: 100%; overflow: hidden; align-items: center; position: relative; transform: translate3d(var(--shake-x, 0px), var(--shake-y, 0px), 0); } .home-mode .carousel-stack > .artist-carousel:nth-child(1), .artist-mode .carousel-stack > .artist-carousel:nth-child(1) { flex: var(--carousel-row-1-flex, 1); top: var(--carousel-row-1-offset, 0); } .home-mode .carousel-stack > .artist-carousel:nth-child(2), .artist-mode .carousel-stack > .artist-carousel:nth-child(2) { flex: var(--carousel-row-2-flex, 1); top: var(--carousel-row-2-offset, 0); } .home-mode .carousel-stack > .artist-carousel:nth-child(3), .artist-mode .carousel-stack > .artist-carousel:nth-child(3) { flex: var(--carousel-row-3-flex, 1); top: var(--carousel-row-3-offset, 0); } .home-mode .carousel-stack > .artist-carousel:nth-child(4), .artist-mode .carousel-stack > .artist-carousel:nth-child(4) { flex: var(--carousel-row-4-flex, 1); top: var(--carousel-row-4-offset, 0); } .home-mode .carousel-stack > .artist-carousel:nth-child(10), .artist-mode .carousel-stack > .artist-carousel:nth-child(10) { flex: var(--carousel-row-5-flex, 1); top: var(--carousel-row-5-offset, 0); } .home-mode .carousel-stack .artist-carousel-link, .artist-mode .carousel-stack .artist-carousel-link { height: 100%; flex-shrink: 0; display: flex; align-items: center; } .home-mode .carousel-stack .artist-carousel-img, .artist-mode .carousel-stack .artist-carousel-img { flex: 0 0 calc(100vw / 7); width: calc(100vw / 7); height: calc(var(--carousel-img-scale, 0.9) * 100%); object-fit: contain; } .home-mode .carousel-stack .artist-carousel-track, .artist-mode .carousel-stack .artist-carousel-track { display: flex; flex-direction: row; align-items: center; width: max-content; height: 100%; animation: carouselScroll calc(var(--spin-duration, 4s) * 7 * var(--carousel-duration-mult, 1)) linear infinite; will-change: transform; } .home-mode .carousel-stack > .artist-carousel:nth-child(3) .artist-carousel-track, .artist-mode .carousel-stack > .artist-carousel:nth-child(3) .artist-carousel-track { animation-direction: reverse; } .home-mode .carousel-stack > .artist-carousel:nth-child(4) .artist-carousel-track, .artist-mode .carousel-stack > .artist-carousel:nth-child(4) .artist-carousel-track { animation-direction: normal; } .home-mode .carousel-stack > .artist-carousel:nth-child(4), .artist-mode .carousel-stack > .artist-carousel:nth-child(4) { overflow-x: hidden; overflow-y: visible; } .home-mode .carousel-stack > .artist-carousel:nth-child(4) .artist-carousel-track > .artist-carousel-link, .artist-mode .carousel-stack > .artist-carousel:nth-child(4) .artist-carousel-track > .artist-carousel-link { position: relative; } .home-mode .carousel-stack > .artist-carousel:nth-child(4) .artist-carousel-track > .artist-carousel-link:nth-child(odd), .artist-mode .carousel-stack > .artist-carousel:nth-child(4) .artist-carousel-track > .artist-carousel-link:nth-child(odd) { z-index: 11; } .home-mode .carousel-stack > .artist-carousel:nth-child(4) .artist-carousel-track > .artist-carousel-link:nth-child(even), .artist-mode .carousel-stack > .artist-carousel:nth-child(4) .artist-carousel-track > .artist-carousel-link:nth-child(even) { z-index: 9; } .home-mode .carousel-stack > .artist-carousel:nth-child(1) .artist-carousel-img, .artist-mode .carousel-stack > .artist-carousel:nth-child(1) .artist-carousel-img { transform: scale(calc(var(--pulse-scale, 1) * var(--carousel-row-1-img-scale, 1))); } .home-mode .carousel-stack > .artist-carousel:nth-child(2) .artist-carousel-img, .artist-mode .carousel-stack > .artist-carousel:nth-child(2) .artist-carousel-img { transform: scale(calc(var(--pulse-scale, 1) * var(--carousel-row-2-img-scale, 1))); } .home-mode .carousel-stack > .artist-carousel:nth-child(3) .artist-carousel-img, .artist-mode .carousel-stack > .artist-carousel:nth-child(3) .artist-carousel-img { transform: scale(calc(var(--pulse-scale, 1) * var(--carousel-row-3-img-scale, 1))); } .home-mode .carousel-stack > .artist-carousel:nth-child(4) .artist-carousel-img, .artist-mode .carousel-stack > .artist-carousel:nth-child(4) .artist-carousel-img { transform: scale(calc(var(--pulse-scale, 1) * var(--carousel-row-4-img-scale, 1))); } .home-mode .carousel-stack > .artist-carousel:nth-child(5) .artist-carousel-img, .artist-mode .carousel-stack > .artist-carousel:nth-child(5) .artist-carousel-img { transform: scale(calc(var(--pulse-scale, 1) * var(--carousel-row-5-img-scale, 1))); } .home-mode .carousel-stack > .artist-carousel:nth-child(6) .artist-carousel-img, .artist-mode .carousel-stack > .artist-carousel:nth-child(6) .artist-carousel-img { transform: scale(calc(var(--pulse-scale, 1) * var(--carousel-row-6-img-scale, 1))); } .home-mode .carousel-stack > .artist-carousel:nth-child(7) .artist-carousel-img, .artist-mode .carousel-stack > .artist-carousel:nth-child(7) .artist-carousel-img { transform: scale(calc(var(--pulse-scale, 1) * var(--carousel-row-7-img-scale, 1))); } .home-mode .carousel-stack > .artist-carousel:nth-child(8) .artist-carousel-img, .artist-mode .carousel-stack > .artist-carousel:nth-child(8) .artist-carousel-img { transform: scale(calc(var(--pulse-scale, 1) * var(--carousel-row-8-img-scale, 1))); } .home-mode .carousel-stack > .artist-carousel:nth-child(9) .artist-carousel-img, .artist-mode .carousel-stack > .artist-carousel:nth-child(9) .artist-carousel-img { transform: scale(calc(var(--pulse-scale, 1) * var(--carousel-row-9-img-scale, 1))); } .home-mode .carousel-stack > .artist-carousel:nth-child(10) .artist-carousel-img, .artist-mode .carousel-stack > .artist-carousel:nth-child(10) .artist-carousel-img { transform: scale(calc(var(--pulse-scale, 1) * var(--carousel-row-10-img-scale, 1))); } .home-mode .carousel-stack .artist-carousel-link, .artist-mode .carousel-stack .artist-carousel-link { flex: 0 0 calc(100vw / 7); width: calc(100vw / 7); height: 100%; display: flex; align-items: center; justify-content: center; padding: 0 1.5vw; box-sizing: border-box; opacity: 1; } .home-mode .carousel-stack .artist-carousel-img, .artist-mode .carousel-stack .artist-carousel-img { max-width: 100%; max-height: 100%; object-fit: contain; transform: scale(var(--pulse-scale, 1)); transform-origin: center center; will-change: transform; } .home-mode .artist-logos--side .artist-logo-img, .artist-mode .artist-logos--side .artist-logo-img { width: 100%; height: auto; max-height: 22vh; object-fit: contain; transform: scale(var(--pulse-scale, 1)); transform-origin: center center; filter: invert(var(--effective-invert, 0)); will-change: transform, filter; } .audio-at-rest.home-mode .artist-logos--side .artist-logo-img, .audio-at-rest.artist-mode .artist-logos--side .artist-logo-img { filter: invert(1); transform: scale(1); } body { display: flex; flex-direction: column; height: 100vh; min-height: 100vh; overflow: hidden; } .site-footer { display: none; } .product-page { flex: 1; min-height: 0; box-sizing: border-box; max-width: 1100px; margin: 0 auto; width: 100%; padding: 32px 32px 244px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-content: center; overflow-y: auto; } .product-images { display: flex; flex-direction: column; max-width: none; width: auto; margin: 0; } .product-details { align-self: center; max-width: none; width: auto; margin: 0; } .hero-image { aspect-ratio: 5 / 4; } .soundcloud-section { position: fixed; bottom: 88px; left: 0; right: 0; width: auto; min-height: 150px; max-height: calc(100vh - 88px - 150px); background: var(--bg); border: none; padding: 0; z-index: 5; } .soundcloud-inner { height: auto; padding: 0; display: block; } .player-stack { width: 100%; max-width: none; max-height: none; border: none; border-radius: 0; overflow: visible; background: var(--bg); display: block; padding: 0; min-height: 0; } .soundcloud-profile { display: contents; } .soundcloud-profile > .soundcloud-profile-link, .soundcloud-profile > .soundcloud-cta { display: none; } .player-content { min-width: 0; min-height: 0; overflow: visible; padding: 0; } .desktop-player-bar-host > .player-bar > .player-meta { padding-left: 12px; } .soundcloud-cta-seg { display: inline; } .soundcloud-profile-bar-slot { display: none; } .player-loading { display: none; } .soundcloud-avatar { width: 40px; height: 40px; } .soundcloud-name { font-size: 14px; min-width: var(--profile-name-min-width, 0); } .soundcloud-bio { font-size: 12px; } .track-row { cursor: grab; } .track-row:active { cursor: grabbing; } .track-row.is-dragging { opacity: 0.4; } .track-list-row { display: flex; flex-direction: row; align-items: stretch; gap: 16px; width: 100%; min-width: 0; padding-left: var(--track-list-pad-left, 24px); } .tracklist-cover { display: none; } .track-list-recent { flex: 0 0 320px; max-width: 320px; overflow-x: scroll; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; display: flex; flex-direction: row; gap: 12px; padding-left: 12px; padding-right: 12px; border-left: 0.5px solid var(--line); margin: 0; position: relative; list-style: none; } .track-list-recent::-webkit-scrollbar { display: none; } .track-list-recent::after { content: ''; position: absolute; inset: 0; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); background: rgba(255, 255, 255, 0.08); pointer-events: none; z-index: 2; opacity: 1; transition: opacity 0.25s ease; } .track-list-recent:hover::after { opacity: 0; } .track-list:not(.track-list-recent) { flex: 1; min-width: 0; display: flex; flex-direction: row; gap: 12px; padding-right: var(--track-list-pad-right, 24px); overflow-x: scroll; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; border: none; border-radius: 0; margin: 0; position: relative; } .track-list:not(.track-list-recent)::-webkit-scrollbar { display: none; } .track-row { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 96px; flex-shrink: 0; padding: 4px; border: none; border-bottom: none; border-radius: 4px; grid-template-columns: none; } .track-artist-logo-link { display: flex; justify-content: center; align-items: center; height: 36px; margin-bottom: 0; opacity: 0.75; transition: opacity 0.15s ease; } .track-artist-logo-link:hover { opacity: 1; } .track-artist-logo { height: 100%; width: auto; object-fit: contain; display: block; } .track-artist-logo-group { display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; margin-bottom: 0; } .track-artist-logo-group .track-artist-logo-link { height: 100%; } .track-artist-logo-sep { font-family: var(--font-display); font-size: 12px; line-height: 1; color: var(--text); opacity: 0.5; user-select: none; pointer-events: none; } .track-artist-logo-more { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.04em; color: var(--text); opacity: 0.6; pointer-events: none; } .track-row:hover { background: #3a0a0a; } .track-row.is-active { width: 0; padding-left: 0; padding-right: 0; margin-right: -12px; opacity: 0; overflow: hidden; pointer-events: none; transition: width 0.45s ease-out, padding 0.45s ease-out, margin-right 0.45s ease-out, opacity 0.35s ease-out; } .track-row { transition: width 0.45s ease-out, padding 0.45s ease-out, margin-right 0.45s ease-out, opacity 0.35s ease-out, background 0.15s ease; } .track-play-icon, .track-artist, .track-duration { display: none; } .track-art { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 2px; } .track-meta { min-width: 0; width: 100%; } .track-title { font-size: 11px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0; line-height: 1.3; } .desktop-player-bar-host { position: fixed; bottom: 0; left: 0; right: 0; display: flex; align-items: center; gap: 24px; background: #000; border-top: 0.5px solid var(--line); padding: 8px 24px; height: 88px; box-sizing: border-box; z-index: 6; } .desktop-player-bar-host::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0); transition: box-shadow 0.12s ease; } html.is-loud-sustained .desktop-player-bar-host::before { box-shadow: none; } .desktop-player-bar-host > .soundcloud-profile-link { flex: 0 0 auto; } .desktop-player-bar-host > .player-bar { flex: 1; min-width: 0; width: auto; padding: 0; border-bottom: none; background: transparent; grid-template-columns: auto 1fr auto auto; } .player-bar > .player-bar-merch { display: none !important; } .desktop-player-bar-host .player-meta-art { display: block; width: 40px; height: 40px; border-radius: 2px; object-fit: cover; background: var(--image-bg); flex-shrink: 0; } .desktop-player-bar-host > .soundcloud-cta { flex: 0 0 auto; margin-left: 0; text-align: right; line-height: 1.2; } .player-bar > .volume-control { display: flex; align-items: center; height: 100%; padding: 0; } .player-bar > .player-bar-merch { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 16px; color: var(--text); font-family: var(--font-display); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; opacity: 0.85; transition: opacity 0.2s ease; } .player-bar > .player-bar-merch:hover, .player-bar > .player-bar-merch:focus-visible { opacity: 1; text-decoration: underline; } .player-bar > .player-bar-merch:focus-visible { outline: 1px solid var(--text); outline-offset: 2px; } .volume-slider { -webkit-appearance: none; appearance: none; width: 80px; height: 14px; background: transparent; outline: none; cursor: pointer; margin: 0; padding: 0; box-sizing: border-box; } .volume-slider::-webkit-slider-runnable-track { width: 100%; height: 2px; background: rgba(255, 255, 255, 0.3); border-radius: 1px; border: none; } .volume-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.95); cursor: pointer; border: none; margin-top: -5px; } .volume-slider::-moz-range-track { width: 100%; height: 2px; background: rgba(255, 255, 255, 0.3); border-radius: 1px; border: none; } .volume-slider::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.95); cursor: pointer; border: none; } .volume-slider:hover::-webkit-slider-thumb, .volume-slider:focus::-webkit-slider-thumb { background: rgba(255, 255, 255, 1); } .volume-slider:hover::-moz-range-thumb, .volume-slider:focus::-moz-range-thumb { background: rgba(255, 255, 255, 1); } .cart-button { display: none; } } @media (max-width: 900px) { .volume-control { display: none; } .site-header { padding: 12px 20px; height: 88px; } .logo { height: 64px; } .header-spinner { left: 16px; top: 44px; width: 72px; height: 72px; } .cart-button { right: 16px; top: 44px; } .cart-icon { width: 20px; height: 20px; } .product-page { grid-template-columns: 1fr; gap: 16px; padding: 16px 20px 0; } .hero-image { aspect-ratio: 3 / 2; } .product-name { font-size: 40px; } .image-meta-row { flex-direction: column; align-items: center; gap: 10px; margin-top: 10px; margin-bottom: 0; flex-wrap: nowrap; justify-content: flex-start; } .image-meta-row .title-block { display: flex; align-items: center; gap: 4px; width: 100%; } .product-details .title-block--details { display: none; } .image-meta-row .product-name { flex: 0 1 auto; font-size: 22px; min-width: 0; white-space: nowrap; margin: 0; } .title-price { flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .title-price .price::before { content: none; margin: 0; } .product-description { max-width: none; text-align: center; } .product-description .desc-line { display: block; } .price { font-size: 20px; margin: 0; white-space: nowrap; } .thumb { width: 56px; height: 56px; } .option-group { margin-bottom: 10px; } .option-label { margin-bottom: 8px; } .option-row { display: grid; grid-template-columns: 1fr 1fr; } .option-btn { padding: 10px 8px; } .design-trigger { padding: 10px 12px; font-size: 12px; } .design-option { padding: 11px 12px; font-size: 12px; } .size-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .size-btn { min-width: 0; padding: 9px 0; font-size: 12px; } .cta-button { padding: 14px; margin-top: 0; } .disclaimer { font-size: 10px; margin-top: 10px; } .footer-row { flex-direction: column; align-items: center; gap: 12px; } .site-footer { display: none; } .soundcloud-section { padding: 0; } .soundcloud-inner, .player-stack { width: 100%; } .soundcloud-profile { padding: 14px 16px; gap: 14px; } .soundcloud-avatar { width: 52px; height: 52px; } .soundcloud-name { font-size: 19px; } .soundcloud-cta { font-size: 10px; letter-spacing: 0.06em; margin-left: auto; } .home-mode .soundcloud-avatar { display: none; } .home-mode .soundcloud-cta { display: none; } .home-mode .soundcloud-profile { justify-content: center; text-align: center; } .home-mode .soundcloud-profile-link { justify-content: center; flex-shrink: 1; } .track-row { grid-template-columns: 56px 1fr auto; gap: 12px; padding: 10px 12px; } .track-art { width: 56px; height: 56px; aspect-ratio: 1 / 1; } .track-title { font-size: 13px; } .player-bar { padding: 14px; gap: 10px 12px; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "controls controls" "current-artist current-artist" "title title" "progress time"; align-items: center; gap: 8px 12px; } .player-controls { grid-area: controls; justify-content: center; gap: 10px; } .player-current-artist-logo { display: block; grid-area: current-artist; justify-self: center; align-self: center; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; transform: scale(var(--pulse-scale, 1)); transform-origin: center center; will-change: transform; } .player-meta-art { display: block; grid-area: current-cover; justify-self: center; align-self: center; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--image-bg); } .player-meta { display: contents; } .player-title { grid-area: title; margin-bottom: 0; text-align: center; } .player-progress { grid-area: progress; } .player-time { grid-area: time; justify-self: end; font-size: 10px; } .player-skip { display: flex; width: 46px; height: 46px; } .player-skip svg { width: 26px; height: 26px; } .player-play { width: 64px; height: 64px; } .player-play svg { width: 26px; height: 26px; } .waveform-wrap { display: none; } .waveform-canvas { display: none; } .now-playing-art { position: absolute; top: -8.8235vw; left: -8.8235vw; width: calc(100vw / 0.85); height: calc(100vw / 0.85); object-fit: cover; background: var(--image-bg); transform: scale(var(--pulse-scale, 1)); transform-origin: center center; will-change: transform; z-index: 1; } .cover-spinner { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 75%; max-width: none; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; pointer-events: none; box-sizing: border-box; z-index: 3; } .cover-spinner-img { width: 100%; height: 100%; object-fit: contain; display: block; animation: headerSpin var(--spin-duration, 4s) linear infinite; animation-play-state: paused; will-change: transform; } .cover-spinner.is-spinning .cover-spinner-img { animation-play-state: running; } .cover-spinner-back { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: none; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; pointer-events: none; box-sizing: border-box; z-index: 2; } .cover-spinner-back-img { width: 100%; height: 100%; object-fit: contain; display: block; filter: invert(1); animation: headerSpinReverse var(--spin-duration, 4s) linear infinite; animation-play-state: paused; will-change: transform, filter; } .cover-spinner-back.is-spinning .cover-spinner-back-img { animation-play-state: running; } .player-cap { padding: 16px 18px 0; height: 200px; } .player-stack { display: flex; flex-direction: column; } .player-cap { order: 99; } } @media (max-width: 900px) { .home-mode .visualizer, .artist-mode .visualizer { display: flex; flex-direction: column; align-items: center; width: 100vw; height: calc(100vh - 88px - 84px - 184px); height: calc(100svh - 88px - 84px - var(--player-bar-height, 184px)); margin: 0; padding: 0; max-width: none; overflow: visible; position: relative; cursor: pointer; } .home-mode .section-logo, .artist-mode .section-logo { display: block; position: absolute; top: 50%; left: 50%; transform: translate( calc(-50% + var(--shake-x, 0px) + var(--arc-x, 0px) + var(--cp-x, 0%)), calc(-50% + (1 - var(--ds-pulse-scale, 1)) * 60vh + var(--shake-y, 0px) + var(--arc-y, 0vh) + var(--levels-y, 0vh) + var(--show-y, 0vh) + var(--section-logo-y-offset, 0vh) + var(--cp-y, 0%)) ) rotateX(var(--arc-rx, 0deg)) translateZ(var(--arc-tz, 0px)) rotate(var(--cp-rotation, 0deg)) scale(calc(var(--ds-pulse-scale, 1) * var(--intro-ds-scale, 1) * var(--levels-scale, 1) * var(--depth-pullback-scale, 1) * var(--punch-scale, 1) * var(--show-scale, 1) * var(--cp-scale, 1))); transform-origin: center center; width: 84vw; height: 84vw; margin: 0; aspect-ratio: 1 / 1; box-sizing: border-box; z-index: 10; pointer-events: auto; cursor: pointer; overflow: visible; } .home-mode .artist-logos--side, .artist-mode .artist-logos--side { display: none; } .carousel-stack { display: flex; flex-direction: column; width: 100vw; flex: 1; } .home-mode .artist-carousel, .artist-mode .artist-carousel { display: flex; flex: 1; width: 100vw; overflow: hidden; align-items: center; position: static; margin: 0; padding: 0; transform: translate3d(var(--shake-x, 0px), var(--shake-y, 0px), 0); } .home-mode .artist-carousel-track, .artist-mode .artist-carousel-track { display: flex; flex-direction: row; align-items: center; width: max-content; height: 100%; animation: carouselScroll calc(var(--spin-duration, 4s) * 7 * var(--carousel-duration-mult, 1)) linear infinite; will-change: transform; } .home-mode .artist-carousel-link, .artist-mode .artist-carousel-link { flex: 0 0 30vw; width: 30vw; height: 100%; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0 2vw; opacity: 0.85; transition: opacity 0.15s ease; } .home-mode .artist-carousel-link:hover, .artist-mode .artist-carousel-link:hover { opacity: 1; } .home-mode .artist-carousel-img, .artist-mode .artist-carousel-img { max-width: 100%; max-height: 100%; object-fit: contain; transform: scale(var(--pulse-scale, 1)); transform-origin: center center; will-change: transform; } .home-mode .carousel-stack > .artist-carousel:nth-child(1), .home-mode .carousel-stack > .artist-carousel:nth-child(3), .home-mode .carousel-stack > .artist-carousel:nth-child(10), .artist-mode .carousel-stack > .artist-carousel:nth-child(1), .artist-mode .carousel-stack > .artist-carousel:nth-child(3), .artist-mode .carousel-stack > .artist-carousel:nth-child(10) { overflow-x: hidden; overflow-y: visible; position: relative; } .home-mode .carousel-stack > .artist-carousel:nth-child(1), .home-mode .carousel-stack > .artist-carousel:nth-child(10), .artist-mode .carousel-stack > .artist-carousel:nth-child(1), .artist-mode .carousel-stack > .artist-carousel:nth-child(10) { z-index: 2; } .home-mode .carousel-stack > .artist-carousel:nth-child(1) .artist-carousel-img, .home-mode .carousel-stack > .artist-carousel:nth-child(10) .artist-carousel-img, .artist-mode .carousel-stack > .artist-carousel:nth-child(1) .artist-carousel-img, .artist-mode .carousel-stack > .artist-carousel:nth-child(10) .artist-carousel-img { transform: scale(calc(var(--pulse-scale, 1) * 1.3)); } .home-mode .carousel-stack > .artist-carousel:nth-child(3) .artist-carousel-img, .artist-mode .carousel-stack > .artist-carousel:nth-child(3) .artist-carousel-img { transform: scale(calc(var(--pulse-scale, 1) * 0.7)); } html.carousel-pendulum-cliffs .home-mode .carousel-stack > .artist-carousel:nth-child(3) .artist-carousel-track > .artist-carousel-link:nth-child(n+5):nth-child(-n+7), html.carousel-pendulum-cliffs .home-mode .carousel-stack > .artist-carousel:nth-child(3) .artist-carousel-track > .artist-carousel-link:nth-child(n+12), html.carousel-pendulum-cliffs .artist-mode .carousel-stack > .artist-carousel:nth-child(3) .artist-carousel-track > .artist-carousel-link:nth-child(n+5):nth-child(-n+7), html.carousel-pendulum-cliffs .artist-mode .carousel-stack > .artist-carousel:nth-child(3) .artist-carousel-track > .artist-carousel-link:nth-child(n+12) { display: none; } html.carousel-pendulum-cliffs .home-mode .carousel-stack > .artist-carousel:nth-child(3) .artist-carousel-track > .artist-carousel-link, html.carousel-pendulum-cliffs .artist-mode .carousel-stack > .artist-carousel:nth-child(3) .artist-carousel-track > .artist-carousel-link { flex: 0 0 calc(100vw / 4); width: calc(100vw / 4); } html.carousel-pendulum-cliffs .home-mode .carousel-stack > .artist-carousel:nth-child(3) .artist-carousel-track > .artist-carousel-link:nth-child(-n+3), html.carousel-pendulum-cliffs .home-mode .carousel-stack > .artist-carousel:nth-child(3) .artist-carousel-track > .artist-carousel-link:nth-child(10), html.carousel-pendulum-cliffs .home-mode .carousel-stack > .artist-carousel:nth-child(3) .artist-carousel-track > .artist-carousel-link:nth-child(11), html.carousel-pendulum-cliffs .artist-mode .carousel-stack > .artist-carousel:nth-child(3) .artist-carousel-track > .artist-carousel-link:nth-child(-n+3), html.carousel-pendulum-cliffs .artist-mode .carousel-stack > .artist-carousel:nth-child(3) .artist-carousel-track > .artist-carousel-link:nth-child(10), html.carousel-pendulum-cliffs .artist-mode .carousel-stack > .artist-carousel:nth-child(3) .artist-carousel-track > .artist-carousel-link:nth-child(11) { opacity: 0; pointer-events: none; } .player-bar { grid-template-columns: 64px 1fr 64px; grid-template-areas: "current-artist controls current-cover" "current-artist title current-cover" "progress progress time"; column-gap: 12px; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background: var(--bg); border-top: 0.5px solid var(--line); border-bottom: none; padding-bottom: 6px; } .soundcloud-section { padding-bottom: var(--player-bar-height, 184px); } } .audio-at-rest.home-mode .artist-logos--side .artist-logo-img, .audio-at-rest.artist-mode .artist-logos--side .artist-logo-img { filter: invert(1); transform: scale(1); } .audio-at-rest .player-current-artist-logo { transform: scale(1); } .audio-at-rest .artist-carousel-img { filter: invert(1); transition: filter 0.15s linear; } html.audio-at-rest .carousel-stack .artist-carousel-track { animation-name: carouselScroll !important; animation-timing-function: linear !important; animation-duration: calc(var(--spin-duration, 4s) * 7) !important; animation-iteration-count: infinite !important; animation-direction: normal !important; } html.audio-at-rest .carousel-stack > .artist-carousel:nth-child(4) .artist-carousel-track { animation-direction: reverse !important; } html.audio-at-rest body { background: #fff !important; } html.home-mode:not(.audio-at-rest) .artist-carousel-img, html.artist-mode:not(.audio-at-rest) .artist-carousel-img { filter: invert(var(--effective-invert, 0)); } html.fx-harsh:not(.audio-at-rest).home-mode .artist-carousel-img, html.fx-harsh:not(.audio-at-rest).artist-mode .artist-carousel-img { filter: none !important; } html.fx-harsh:not(.audio-at-rest).home-mode .artist-carousel-img, html.fx-harsh:not(.audio-at-rest).artist-mode .artist-carousel-img { opacity: calc(0.25 + var(--invert-amount, 0) * 0.75); filter: blur(calc(0.5px + var(--invert-amount, 0) * 1.5px)) !important; } html.fx-harsh.is-loud-sustained:not(.audio-at-rest).home-mode .artist-carousel-img, html.fx-harsh.is-loud-sustained:not(.audio-at-rest).artist-mode .artist-carousel-img { filter: drop-shadow(calc(var(--invert-amount, 0) * 4px) 0 0 #ff003c) drop-shadow(calc(var(--invert-amount, 0) * -4px) 0 0 #00f0ff) blur(calc(0.5px + var(--invert-amount, 0) * 1.5px)) !important; } html.fx-harsh:not(.audio-at-rest) .carousel-stack .artist-carousel-img { translate: calc(var(--tear-dir, 0) * var(--invert-amount, 0) * 18px + var(--shake-x, 0px) * var(--harsh-shake-mult, 0)) calc(var(--shake-y, 0px) * var(--harsh-shake-mult, 0)); } html.fx-harsh:not(.audio-at-rest) .carousel-stack > .artist-carousel:nth-child(1) .artist-carousel-img { animation: harshScreenTear 11s step-end infinite; } html.fx-harsh:not(.audio-at-rest) .carousel-stack > .artist-carousel:nth-child(2) .artist-carousel-img { animation: harshScreenTear 13s step-end infinite; animation-delay: -3.4s; } html.fx-harsh:not(.audio-at-rest) .carousel-stack > .artist-carousel:nth-child(3) .artist-carousel-img { animation: harshScreenTear 17s step-end infinite; animation-delay: -7.1s; } html.fx-harsh:not(.audio-at-rest) .carousel-stack > .artist-carousel:nth-child(4) .artist-carousel-img { animation: harshScreenTear 19s step-end infinite; animation-delay: -2.3s; } html.fx-harsh:not(.audio-at-rest) .carousel-stack > .artist-carousel:nth-child(10) .artist-carousel-img { animation: harshScreenTear 23s step-end infinite; animation-delay: -11.7s; } html.fx-harsh.is-loud-sustained:not(.audio-at-rest) { --harsh-shake-mult: 2; } @keyframes harshScreenTear { 0%, 86%, 91%, 100% { --tear-dir: 0; clip-path: inset(0); } 86.5% { --tear-dir: 1.4; clip-path: inset(5% 0 87% 0); } 87% { --tear-dir: -1.1; clip-path: polygon(0 0, 100% 0, 100% 22%, 0 22%, 0 28%, 100% 28%, 100% 100%, 0 100%); } 87.5% { --tear-dir: 0.9; clip-path: inset(38% 0 55% 0); } 88% { --tear-dir: -1.3; clip-path: inset(58% 0 35% 0); } 88.5% { --tear-dir: 0.6; clip-path: inset(82% 0 12% 0); } 89% { --tear-dir: -0.9; clip-path: inset(0 0 95% 0); } 89.5% { --tear-dir: 1.1; clip-path: polygon(0 0, 100% 0, 100% 65%, 0 65%, 0 70%, 100% 70%, 100% 100%, 0 100%); } 90% { --tear-dir: -0.7; clip-path: inset(45% 0 50% 0); } 90.5% { --tear-dir: 0; clip-path: inset(0); } } .home-mode .carousel-stack > .artist-carousel::after, .artist-mode .carousel-stack > .artist-carousel::after { display: none !important; } html.fx-harsh.is-loud-sustained:not(.audio-at-rest).home-mode .carousel-stack > .artist-carousel:nth-child(1)::after, html.fx-harsh.is-loud-sustained:not(.audio-at-rest).home-mode .carousel-stack > .artist-carousel:nth-child(2)::after, html.fx-harsh.is-loud-sustained:not(.audio-at-rest).home-mode .carousel-stack > .artist-carousel:nth-child(3)::after, html.fx-harsh.is-loud-sustained:not(.audio-at-rest).artist-mode .carousel-stack > .artist-carousel:nth-child(1)::after, html.fx-harsh.is-loud-sustained:not(.audio-at-rest).artist-mode .carousel-stack > .artist-carousel:nth-child(2)::after, html.fx-harsh.is-loud-sustained:not(.audio-at-rest).artist-mode .carousel-stack > .artist-carousel:nth-child(3)::after { display: block !important; } html.fx-harsh:not(.audio-at-rest) .carousel-stack { position: relative; filter: brightness(calc(0.85 + var(--invert-amount, 0) * 0.45)) hue-rotate(calc(var(--invert-amount, 0) * 18deg)); } html.fx-harsh.is-loud-sustained:not(.audio-at-rest) .carousel-stack { background: #fff; } html.fx-harsh:not(.audio-at-rest) .carousel-stack::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5; background: repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.35) 0px, rgba(0, 0, 0, 0.35) 1px, transparent 1px, transparent 3px ); opacity: 0.6; mix-blend-mode: difference; } html.fx-harsh.is-loud-sustained:not(.audio-at-rest) .carousel-stack::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 6; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-size: 400px 400px; background-repeat: repeat; opacity: calc(0.2 + var(--invert-amount, 0) * 0.5); mix-blend-mode: multiply; animation: harshNoiseDrift 0.3s steps(8) infinite; } @keyframes harshNoiseDrift { 0% { background-position: 0 0; } 12% { background-position: -73px -41px; } 25% { background-position: 110px -94px; } 37% { background-position: -38px 156px; } 50% { background-position: 187px 22px; } 62% { background-position: -129px -83px; } 75% { background-position: 64px 197px; } 87% { background-position: -201px 51px; } 100% { background-position: 0 0; } } @media (max-width: 900px) { html:not(.audio-at-rest) .section-logo-layer .section-logo-layer-img, html:not(.audio-at-rest) .header-spinner-img { filter: invert(calc(1 - var(--ds-invert-amount, 1))); } .section-logo-layer-img[src$="deathspin-spinner.png"], .header-spinner-img[src$="deathspin-spinner.png"] { filter: none !important; } } @media (max-width: 900px) { .soundcloud-section:has(.player-content[hidden]) { min-height: 1200px; } } .artist-roster { display: none; } @media (max-width: 900px) { .artist-roster { display: block; border-top: 0.5px solid var(--line); } .artist-roster-row { display: flex; align-items: center; justify-content: center; padding: 18px 16px; border-bottom: 0.5px solid var(--line); } .artist-roster-row:last-child { border-bottom: none; } .artist-roster-info { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; color: inherit; width: 100%; } .artist-roster-avatar { width: 160px; height: 100px; flex-shrink: 0; object-fit: contain; } .artist-roster-meta { text-align: center; } .artist-roster-name { font-family: var(--font-display); font-size: 19px; text-transform: uppercase; letter-spacing: -0.01em; color: var(--text); line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .artist-roster-bio { font-size: 13px; color: var(--muted); margin-top: 2px; letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .now-playing-overlay { display: none; } @media (max-width: 900px) { .home-mode .soundcloud-profile { display: none; } .home-mode .track-list { display: none; } .home-mode .soundcloud-section { padding-bottom: var(--player-bar-height, 184px); } .home-mode .visualizer, .artist-mode .visualizer { height: calc(100vh - 88px - 184px); height: calc(100svh - 88px - var(--player-bar-height, 184px)); } } @media (max-width: 900px) { .now-playing-overlay { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 200; background: var(--bg); transform: translateY(100%); visibility: hidden; pointer-events: none; transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.32s; overflow: hidden; touch-action: pan-y; } .now-playing-overlay.is-open { transform: translateY(0); visibility: visible; pointer-events: auto; transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0s; } .now-playing-overlay:not(.is-open) .now-playing-bg, .now-playing-overlay:not(.is-open) .now-playing-center { display: none; } .now-playing-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; opacity: 0.35; z-index: 1; } .now-playing-bg .carousel-stack { display: flex; flex-direction: column; width: 100%; height: 100%; } .now-playing-chrome { position: relative; z-index: 3; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: 14px 16px; padding-top: calc(14px + env(safe-area-inset-top, 0px)); } .now-playing-close, .now-playing-queue-btn { background: transparent; border: 0; color: var(--text); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; } .now-playing-close svg, .now-playing-queue-btn svg { width: 24px; height: 24px; stroke: currentColor; fill: none; } .now-playing-headline { font-family: 'Michroma', sans-serif; font-size: 14px; text-align: center; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; } .now-playing-center { position: relative; z-index: 2; flex: 1; height: calc(100vh - 88px - 200px); height: calc(100svh - 88px - 200px); display: flex; align-items: center; justify-content: center; padding: 0 0 8px; } .now-playing-center .np-section-logo { display: block; position: relative; top: auto; left: auto; transform: none; width: 80vw; height: 80vw; max-width: 480px; max-height: 480px; pointer-events: auto; cursor: default; overflow: visible; z-index: 2; } .now-playing-info { position: relative; z-index: 2; text-align: center; padding: 14px 24px 6px; } .np-title { font-family: 'Michroma', sans-serif; font-size: 22px; color: var(--text); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; filter: invert(var(--effective-invert, 0)); } .np-artist { font-family: var(--font-display); font-size: 13px; color: var(--muted); letter-spacing: 0.06em; margin-top: 4px; text-transform: uppercase; } .now-playing-controls { position: relative; z-index: 2; padding: 12px 24px calc(20px + env(safe-area-inset-bottom, 0px)); } .np-progress { height: 4px; background: rgba(255, 255, 255, 0.18); border-radius: 2px; cursor: pointer; overflow: hidden; margin-bottom: 6px; } .np-progress-fill { height: 100%; width: 0%; background: var(--text); transition: width 0.1s linear; } .np-time { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; margin-bottom: 18px; } .np-buttons { display: flex; align-items: center; justify-content: center; gap: 24px; } .np-skip, .np-play { background: transparent; border: 0; color: var(--text); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; } .np-skip { width: 56px; height: 56px; } .np-skip svg { width: 32px; height: 32px; fill: var(--text); } .np-play { width: 72px; height: 72px; border-radius: 50%; background: var(--text); color: var(--bg); } .np-play svg { width: 36px; height: 36px; fill: var(--bg); } .np-play .icon-pause { display: none; } .np-play.is-playing .icon-play { display: none; } .np-play.is-playing .icon-pause { display: block; } .np-queue-sheet { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 4; background: var(--bg); transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1); display: flex; flex-direction: column; overflow: hidden; } .np-queue-sheet.is-open { transform: translateY(0); } .np-queue-handle { width: 40px; height: 4px; background: var(--line); border-radius: 2px; margin: 10px auto 0; flex-shrink: 0; } .np-queue-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; padding-top: calc(14px + env(safe-area-inset-top, 0px)); border-bottom: 0.5px solid var(--line); flex-shrink: 0; } .np-queue-title { font-family: 'Michroma', sans-serif; font-size: 16px; color: var(--text); letter-spacing: 0.08em; text-transform: uppercase; } .np-queue-close { background: transparent; border: 0; color: var(--text); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; } .np-queue-close svg { width: 20px; height: 20px; stroke: currentColor; fill: none; } .np-track-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: env(safe-area-inset-bottom, 0px); } } @media (max-width: 900px) { html.fx-no-invert:not(.audio-at-rest) .artist-carousel-img, html.fx-no-invert:not(.audio-at-rest) .section-logo-layer .section-logo-layer-img, html.fx-no-invert:not(.audio-at-rest) .header-spinner-img { filter: none !important; } html.fx-no-pulse .section-logo { transform: none; } html.fx-no-pulse .header-spinner { transform: translateY(-50%); } } html.layout-freeze .artist-carousel-track, html.layout-freeze .artist-carousel-img, html.layout-freeze .section-logo-layer-img, html.layout-freeze .header-spinner-img { animation-play-state: paused !important; } html.overlay-quake { animation: loudShake 80ms linear infinite; } html.overlay-quake.fx-harsh:not(.audio-at-rest) { --harsh-shake-mult: 2; } html.overlay-quake .home-mode .section-logo, html.overlay-quake .artist-mode .section-logo, html.overlay-quake .header-spinner { animation: loudWhiteFlash 0.5s ease-in-out infinite; } html.overlay-flip .home-mode .section-logo-layer[data-spin="forward"] .section-logo-layer-img, html.overlay-flip .artist-mode .section-logo-layer[data-spin="forward"] .section-logo-layer-img { animation-name: rotationSwingReverse; } html.overlay-flip .home-mode .section-logo-layer[data-spin="reverse"] .section-logo-layer-img, html.overlay-flip .artist-mode .section-logo-layer[data-spin="reverse"] .section-logo-layer-img { animation-name: rotationSwing; } html.overlay-flip .carousel-stack > .artist-carousel:not(:nth-child(3)) .artist-carousel-track { animation-direction: normal; } html.overlay-flip .carousel-stack > .artist-carousel:nth-child(3) .artist-carousel-track { animation-direction: reverse; } @media (min-width: 901px) { html.overlay-flip .home-mode .carousel-stack > .artist-carousel:nth-child(3) .artist-carousel-track, html.overlay-flip .artist-mode .carousel-stack > .artist-carousel:nth-child(3) .artist-carousel-track { animation-direction: normal; } html.overlay-flip .home-mode .carousel-stack > .artist-carousel:nth-child(4) .artist-carousel-track, html.overlay-flip .artist-mode .carousel-stack > .artist-carousel:nth-child(4) .artist-carousel-track { animation-direction: reverse; } } html.is-pixelated .carousel-stack img, html.is-pixelated .section-logo img, html.is-pixelated .osiriz-ghost { image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; filter: contrast(1.3) saturate(0.6); } html.is-scanlines::after { content: ''; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 90; background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.25) 3px, rgba(0, 0, 0, 0.25) 4px ); mix-blend-mode: multiply; } html.is-vector-grid::before { content: ''; position: fixed; top: 0; left: -50%; width: 200vw; height: 100vh; pointer-events: none; z-index: 1; transform: perspective(800px) rotateX(60deg) translateY(20vh); transform-origin: center bottom; background: repeating-linear-gradient( to right, var(--vector-grid-color, rgba(0, 255, 255, 0.4)) 0px, var(--vector-grid-color, rgba(0, 255, 255, 0.4)) 1px, transparent 1px, transparent 60px ), repeating-linear-gradient( to bottom, var(--vector-grid-color, rgba(0, 255, 255, 0.4)) 0px, var(--vector-grid-color, rgba(0, 255, 255, 0.4)) 1px, transparent 1px, transparent 60px ); animation: vectorGridScroll 4s linear infinite; } @keyframes vectorGridScroll { 0% { background-position: 0 0, 0 0; } 100% { background-position: 0 60px, 0 60px; } } .arcade-bullet { width: 8px; height: 24px; background: #fff; box-shadow: 0 0 8px #fff, 0 0 16px rgba(255,255,255,0.5); border-radius: 1px; transform: translate(-50%, -50%); } @keyframes arcadeHitFlash { 0% { filter: invert(1) brightness(1.5); } 100% { filter: none; } } .is-arcade-hit { animation: arcadeHitFlash 150ms ease-out; } @keyframes introDsDropThud { 0% { translate: 0 -150vh; } 50% { translate: 0 30vh; } 65% { translate: 0 14vh; } 80% { translate: 0 26vh; } 90% { translate: 0 20vh; } 100% { translate: 0 23vh; } } @keyframes introRow5Conveyor { 0% { transform: translateX(20vw); } 100% { transform: translateX(calc(20vw - 50%)); } } @media (min-width: 901px) { html.intro-active.home-mode .section-logo, html.intro-active.artist-mode .section-logo { animation: introDsDropThud 2400ms ease-in forwards !important; } html.intro-active.home-mode .section-logo-layer .section-logo-layer-img, html.intro-active.artist-mode .section-logo-layer .section-logo-layer-img { animation: headerSpin 16s linear infinite normal none running !important; } html.intro-active .carousel-stack > .artist-carousel:nth-child(10) { flex: 2; transform: translateY(65%); position: relative; z-index: 0; } html.intro-active .carousel-stack > .artist-carousel:nth-child(9) { translate: 0 100%; } html.intro-active .carousel-stack > .artist-carousel:nth-child(5) { translate: 0 80% calc(7px * var(--dome-scale, 0)); } html.intro-active .carousel-stack > .artist-carousel:not(:nth-child(10)) .artist-carousel-track { animation-name: carouselScroll !important; animation-direction: reverse !important; animation-timing-function: linear !important; animation-duration: calc(var(--spin-duration, 4s) * 14) !important; animation-iteration-count: infinite !important; } html.intro-active .carousel-stack > .artist-carousel:nth-child(10) .artist-carousel-track { animation-name: introRow5Conveyor !important; animation-direction: normal !important; animation-timing-function: linear !important; animation-duration: calc(var(--spin-duration, 4s) * 20) !important; animation-iteration-count: infinite !important; animation-delay: 2000ms !important; animation-fill-mode: backwards !important; } } .carousel-stack > .artist-carousel.row-1 { opacity: calc(var(--carousel-row-1-opacity, 1) * var(--row-1-mute, 1)); } .carousel-stack > .artist-carousel.row-2 { opacity: calc(var(--carousel-row-2-opacity, 1) * var(--row-2-mute, 1)); } .carousel-stack > .artist-carousel.row-3 { opacity: calc(var(--carousel-row-3-opacity, 1) * var(--row-3-mute, 1)); } .carousel-stack > .artist-carousel.row-4 { opacity: calc(var(--carousel-row-4-opacity, 1) * var(--row-4-mute, 1)); } .carousel-stack > .artist-carousel.row-5 { opacity: calc(var(--carousel-row-5-opacity, 1) * var(--row-5-mute, 1)); } .carousel-stack > .artist-carousel.row-6 { opacity: calc(var(--carousel-row-6-opacity, 1) * var(--row-6-mute, 1)); } .carousel-stack > .artist-carousel.row-7 { opacity: calc(var(--carousel-row-7-opacity, 1) * var(--row-7-mute, 1)); } .carousel-stack > .artist-carousel.row-8 { opacity: calc(var(--carousel-row-8-opacity, 1) * var(--row-8-mute, 1)); } .carousel-stack > .artist-carousel.row-9 { opacity: calc(var(--carousel-row-9-opacity, 1) * var(--row-9-mute, 1)); } .carousel-stack > .artist-carousel.row-10 { opacity: calc(var(--carousel-row-10-opacity, 1) * var(--row-10-mute, 1)); } .reactive-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 5; opacity: 0; pointer-events: none; transform: scale(1) translate(0, 0); filter: brightness(1) blur(calc((1 - var(--audio-energy, 0.5)) * 3px)); transition: opacity 600ms ease-in-out, transform 90ms ease-out, filter 180ms ease-out; will-change: transform, filter, opacity; } html.is-playing-image .reactive-image.has-image { opacity: 1; } html.is-impact .reactive-image.has-image { transform: scale(1.04); filter: brightness(1.18) blur(calc((1 - var(--audio-energy, 0.5)) * 3px)); transition: transform 50ms ease-out, filter 50ms ease-out; } html.is-loud-sustained .reactive-image.has-image { animation: reactive-image-shake 320ms ease-out; filter: brightness(1.3) blur(calc((1 - var(--audio-energy, 0.5)) * 3px)); } @keyframes reactive-image-shake { 0% { transform: translate(0, 0) scale(1.08); } 15% { transform: translate(-7px, 3px) scale(1.07); } 30% { transform: translate(6px, -4px) scale(1.07); } 45% { transform: translate(-4px, 5px) scale(1.06); } 60% { transform: translate(5px, -3px) scale(1.05); } 75% { transform: translate(-3px, 2px) scale(1.04); } 90% { transform: translate(2px, -1px) scale(1.02); } 100% { transform: translate(0, 0) scale(1); } } .audio-led { position: fixed; top: 18px; right: 18px; width: 10px; height: 10px; border-radius: 50%; background: hsl( calc(120 - var(--audio-energy, 0) * 120), 85%, calc(45% + var(--audio-energy, 0) * 15%) ); box-shadow: 0 0 calc(4px + var(--audio-energy, 0) * 14px) hsl( calc(120 - var(--audio-energy, 0) * 120), 85%, 55% ), inset 0 0 2px rgba(0, 0, 0, 0.3); z-index: 2147483640; pointer-events: none; transition: opacity 200ms ease-out; opacity: 0.85; } html.audio-led-hidden .audio-led { opacity: 0; } main.visualizer { box-sizing: border-box; } main.visualizer::after { display: none !important; content: none !important; } @media (max-width: 900px) { .player-bar > .player-bar-merch { display: none; } } @media (max-width: 900px) { .tracklist-cover { display: none; } }




























/* ============================================================
 * BUILD 33 — LAYOUT FIX v11 (appended override block)
 * ============================================================
 * Replaces v1..v10. Adds:
 *
 *   1. Kills the bundle's leftover debug red border on
 *      main.visualizer (border:3px solid #ff0000) by overriding
 *      with border:0 !important and box-shadow:none.
 *
 *   2. Artist portrait logo, centered vertically + horizontally
 *      in the visualizer. Pulses with the bundle's --pulse-scale
 *      (the bundle drives this from the SoundCloud waveform JSON,
 *      smoothed). max-height keeps it sized to fit the band.
 *
 *   3. Earthquake shake on loud impacts. The bundle adds the
 *      `is-loud-sustained` class to <html> when the smoothed
 *      audio amplitude crosses the loud threshold (~0.85). We
 *      run a short shake animation on the logo wrap during
 *      that period, with a slight shrink baked in (per spec:
 *      "shrinking earthquake effect").
 *
 *   4. Black tint overlay above the frost, opacity driven by
 *      --audio-energy (the bundle sets this every audio tick,
 *      0=silent → 1=loud). Quiet → tint near transparent;
 *      loud → tint near opaque-ish. Numerically clamped via
 *      calc() so the band is never fully black.
 *
 *   5. Carry-forward: wordmark constrained+inverted, label-panel
 *      right-of-header, visualizer-bg blur, frost ::after.
 *
 * To remove: delete this whole block.
 * ============================================================ */
@media (min-width: 901px) {

  /* (1) Kill the debug red border that lives in the bundle CSS */
  main.visualizer,
  .visualizer {
    border: 0 !important;
    box-shadow: none !important;
    background: #000 !important;
  }

  /* (2) Wordmark (carried) */
  .site-title-logo,
  .home-mode .site-title-logo,
  .artist-mode .site-title-logo,
  html.fx-harsh .site-title-logo,
  html.fx-harsh.home-mode .site-title-logo {
    position: absolute !important;
    left: 32px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 60px !important;
    width: auto !important;
    max-height: 60px !important;
    max-width: 240px !important;
    object-fit: contain !important;
    display: block !important;
    filter: invert(1) !important;
    opacity: 1 !important;
  }
  /* The anchor wrapper on artist pages — keep it sized to the
     image so the click area matches what the user sees. */
  .site-title-link {
    position: absolute !important;
    left: 32px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: inline-block !important;
    line-height: 0 !important;
    text-decoration: none !important;
    z-index: 5 !important;
    cursor: pointer !important;
  }
  /* When wordmark is inside the anchor, drop the absolute
     position (the anchor handles it). */
  .site-title-link .site-title-logo {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
  }

  /* (3) Label panel right of header (carried) */
  .label-panel,
  #label-panel {
    position: absolute !important;
    right: 32px !important;
    top: auto !important;
    bottom: -10px !important;
    left: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    height: auto !important;
    width: auto !important;
    max-width: calc(100vw - 320px) !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: auto !important;
  }
  .label-panel .header-artist,
  #label-panel .header-artist {
    flex: 0 0 auto !important;
  }
  .label-panel .label-panel-artists,
  #label-panel .label-panel-artists {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: 18px !important;
    max-width: none !important;
  }


  .label-panel .label-panel-center,
  #label-panel .label-panel-center {
    display: none !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
  }
  .label-panel .label-panel-logo,
  #label-panel .label-panel-logo {
    height: 100px !important;
    width: auto !important;
    object-fit: contain !important;
    flex: 0 0 auto !important;
  }

  /* (4) Visualizer-bg cover image — width-fit, top-mid focus,
     heavy blur (color wash). (carried) */
  main.visualizer > .visualizer-bg,
  .visualizer > .visualizer-bg,
  #visualizer-bg {
    position: absolute !important;
    top: -15vw !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    object-fit: unset !important;
    display: block !important;
    z-index: 0 !important;
    pointer-events: none !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    filter: blur(50px) saturate(1.25) brightness(0.95) !important;
    transform: scale(1.15) !important;
    transform-origin: top center !important;
    will-change: filter, transform !important;
  }
  main.visualizer > .visualizer-bg:not([src]),
  main.visualizer > .visualizer-bg[src=""] {
    visibility: hidden !important;
  }

  /* (5) Frost overlay — only when bg has a src. (carried) */
  main.visualizer:has(> .visualizer-bg[src]:not([src=""]))::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    pointer-events: none !important;
    z-index: 1 !important;
    backdrop-filter: blur(6px) saturate(1.05) !important;
    -webkit-backdrop-filter: blur(6px) saturate(1.05) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 0 !important;
    margin: 0 !important;
  }

  /* (6) Audio-driven dark tint above the frost.
     Opacity = 0.15 + (energy * 0.45)  → quiet 0.15, loud 0.60.
     Energy is set by the bundle: setRootVar('--audio-energy', ...).
     Falls back to 0 (no tint) if the bundle hasn't run yet. */
  main.visualizer > .visualizer-tint,
  .visualizer > .visualizer-tint {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    pointer-events: none !important;
    z-index: 2 !important;
    background: #000 !important;
    opacity: calc(0.15 + var(--audio-energy, 0) * 0.45) !important;
    /* Tiny ease so we don't get a stepped look on coarse energy
       updates. The bundle ticks energy fast enough that a 50ms
       transition is unnoticeable as lag but smooths the steps. */
    transition: opacity 50ms linear !important;
  }
  /* Only show tint when there's actually a background image —
     otherwise visualizer would just be a black square with a
     black-on-black tint. */
  main.visualizer:not(:has(> .visualizer-bg[src]:not([src=""]))) > .visualizer-tint {
    display: none !important;
  }

  /* (7) Artist portrait — centered, big, pulses with --pulse-scale */
  main.visualizer > .visualizer-logo-wrap,
  .visualizer > .visualizer-logo-wrap {
    position: absolute !important;
    top: 14vh !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 3 !important;
    /* Wrapper holds the earthquake shake transform during
       loud-sustained moments. Inner img holds the pulse
       scale — separating them avoids transform stacking
       conflicts. */
    will-change: transform !important;
  }
  main.visualizer > .visualizer-logo-wrap > .visualizer-artist-logo,
  .visualizer > .visualizer-logo-wrap > .visualizer-artist-logo,
  #visualizer-artist-logo {
    /* Size: roughly 70% of the visualizer's height, capped at
       a reasonable max so it doesn't bloom huge on ultrawide. */
    height: 70% !important;
    max-height: 520px !important;
    width: auto !important;
    max-width: 70% !important;
    object-fit: contain !important;
    display: block !important;
    /* Breathe with the music. Per the Build-33 audio-reactive reference:
     * drive the scale off the bundle-smoothed --pulse-scale (0.85 loud ..
     * 1.15 quiet) with the same clean 0.5-multiplier composition — the
     * bundle's smoothing does the work, no jitter. Direction is inverted
     * from the reference so the logo BREATHES the way you want:
     *   quiet  (--pulse-scale 1.15) -> 1 + 0.15*0.5  = 1.075x  (bigger)
     *   idle   (--pulse-scale 1.00) -> 1.0x
     *   loud   (--pulse-scale 0.85) -> 1 - 0.15*0.5  = 0.925x  (smaller)
     * A gentle transition keeps it feeling alive between amplitude ticks. */
    /* Direct amplitude scale: quiet = bigger, loud = smaller, locked to
     * playback position (scrub-accurate). Matches the vhs-effects rule. */
    transform: scale(calc(1.08 - var(--audio-energy, 0) * 0.24)) !important;
    transform-origin: center center !important;
    transition: transform 80ms linear !important;
    will-change: transform, filter !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    /* Same energy-driven inversion as the collab images. */
    filter: drop-shadow(0 4px 24px rgba(0,0,0,0.55)) invert(var(--audio-energy, 0)) !important;
  }

  /* (8) Earthquake shake on loud impacts. The bundle adds
     html.is-loud-sustained when amplitude > ~0.85. Shake is
     applied to the wrap so it composes with the inner img's
     pulse scale. Brief shrink baked in via the keyframe's
     scale, per spec ("shrinking earthquake effect"). */
  @keyframes dsr-earthquake {
    0%   { transform: translate3d(0,0,0)        scale(1.00); }
    12%  { transform: translate3d(-6px,-3px,0)  scale(0.93); }
    25%  { transform: translate3d(5px,-2px,0)   scale(0.92); }
    38%  { transform: translate3d(-4px,4px,0)   scale(0.93); }
    50%  { transform: translate3d(6px,2px,0)    scale(0.91); }
    62%  { transform: translate3d(-5px,-4px,0)  scale(0.93); }
    75%  { transform: translate3d(4px,3px,0)    scale(0.94); }
    88%  { transform: translate3d(-3px,-2px,0)  scale(0.96); }
    100% { transform: translate3d(0,0,0)        scale(1.00); }
  }
  html.is-loud-sustained main.visualizer > .visualizer-logo-wrap,
  html.is-loud-sustained .visualizer > .visualizer-logo-wrap {
    animation: dsr-earthquake 320ms cubic-bezier(.36,.07,.19,.97) both !important;
  }
}
/* === END BUILD 33 LAYOUT FIX === */

/* GPU-load reduction: backdrop-filter blur is extremely expensive and,
 * while paused/idle, re-blurs every frame for no visual benefit (no
 * audio drives the frost). Disable backdrop-filters when not actively
 * playing to stop the constant GPU work (coil whine) with zero visible
 * change. They re-enable the moment playback starts. */
html:not(.is-playing-image) .artist-carousel::after,
html:not(.is-playing-image) .track-list-recent::after,
html.audio-at-rest .artist-carousel::after,
html.audio-at-rest .track-list-recent::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* Merch ad restored to the cover area. The player-bar text link stays
   hidden since the comment ticker now lives in the bar. */
.player-bar-merch, .player-bar > .player-bar-merch { display: none !important; }

/* Header logo dropdown menu (non-home pages). */
.header-menu { position: fixed; z-index: 200; min-width: 200px; background: #0a0a0a; border: 0.5px solid var(--line); border-radius: 4px; padding: 6px 0; box-shadow: 0 12px 40px rgba(0,0,0,0.6); display: flex; flex-direction: column; }
.header-menu[hidden] { display: none; }
.header-menu-item { display: block; padding: 9px 18px; font-family: var(--font-display); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); text-decoration: none; white-space: nowrap; opacity: 0.75; transition: opacity 0.15s ease, background 0.15s ease; }
.header-menu-item:hover, .header-menu-item:focus-visible { opacity: 1; background: rgba(255,255,255,0.06); outline: none; }
.header-menu-divider { height: 0.5px; background: var(--line); margin: 6px 0; }
.site-title-logo { cursor: pointer; }

/* VHS effect over the header. The wrapper covers the header; its three
   layers reuse the global .vhs-scanlines/.vhs-tracking/.vhs-static
   styles but sit above the header content (logo/nav) via z-index. */
.site-header { overflow: hidden; }
.vhs-header { position: absolute; inset: 0; pointer-events: none; z-index: 120; }
.vhs-header .vhs-header--layer { position: absolute; inset: 0; }
.vhs-header .vhs-scanlines { z-index: 120; }
.vhs-header .vhs-tracking { z-index: 121; }
.vhs-header .vhs-static { z-index: 122; }
.vhs-header .vhs-scanlines, .vhs-header .vhs-tracking, .vhs-header .vhs-static { animation: none !important; }
@media (min-width: 901px) { .visualizer-logo-wrap, .visualizer > .visualizer-logo-wrap { top: 75vh !important; bottom: 0 !important; } }

/* Collab in the visualizer — two (or three) artist portraits shown side
   by side with an × between them, replacing the single artist logo.
   Lives in .visualizer-logo-wrap, inheriting the wrap's centering and
   earthquake shake; the pulse "beat" is applied per portrait to match
   the single-logo behaviour. */
.visualizer-artist-collab {
  flex: 1 1 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  gap: clamp(12px, 3vw, 40px);
  width: 100%; height: 100%;
  pointer-events: none;
}
#visualizer-artist-logo.is-collab-hidden,
.visualizer-artist-logo.is-collab-hidden { display: none !important; }
.visualizer-artist-collab-img {
  min-width: 0; width: 100%;
  height: 58%; max-height: 460px;
  object-fit: contain; display: block;
  /* Music-reactive transform. --pulse-scale runs ~0.85 (quiet/soft hit)
   * to ~1.15 (hard hit). To read as SLAMMING DOWN into the visualizer,
   * louder hits make the logo SMALLER (recedes into the screen) and push
   * it DOWN; quieter moments return it to full size and neutral position. */
  /* Scale is a DIRECT function of the amplitude at the current playback
   * position: quiet = bigger, loud = smaller. No animation — the size
   * reflects the exact moment in the song (scrub-accurate). */
  transform: scale(calc(1.08 - var(--audio-energy, 0) * 0.24));
  transform-origin: center center;
  transition: transform 80ms linear;
  will-change: transform, filter;
  /* Inversion peaks at MEDIUM energy and is zero at both no-energy and
   * hardest hits. The portraits are naturally WHITE, so invert(1) makes
   * them black. Goal: black logo over the medium-energy white noise,
   * white logo over the hardest-hit blackout, white at rest.
   *   --logo-invert is a 0→1→0 triangle over --audio-energy, computed
   *   below via @property + calc. */
  filter: drop-shadow(0 4px 24px rgba(0,0,0,0.55)) invert(var(--audio-energy, 0));
  user-select: none; -webkit-user-drag: none;
}
.visualizer-artist-collab-img:first-child { object-position: right center; }
.visualizer-artist-collab-img:last-child { object-position: left center; }
.visualizer-artist-collab-sep {
  flex: 0 0 auto;
  font-family: var(--font-display, 'Michroma', sans-serif);
  font-size: clamp(32px, 9vw, 120px); line-height: 1;
  color: var(--text); opacity: 0.55; user-select: none;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.6));
}