/* MakPlay Liquid Glass — shared motion and material system. CSS-only effects: no playback listeners, layout measurements, or animation timers. */ :root { --liquid-white: rgba(255,255,255,.22); --liquid-edge: rgba(228,244,255,.18); --liquid-edge-light: rgba(238,250,255,.34); --liquid-aqua: rgba(109,255,202,.22); --liquid-ice: rgba(139,205,255,.19); --liquid-violet: rgba(143,169,255,.20); --liquid-shadow: 0 22px 58px rgba(0,0,0,.24); --liquid-ease: cubic-bezier(.2,.75,.22,1); --liquid-duration: 420ms; } html { -webkit-tap-highlight-color: transparent; scrollbar-color: rgba(194,208,255,.25) transparent; } body { background-image: radial-gradient(ellipse at 14% 9%, rgba(109,255,202,.055), transparent 30%), radial-gradient(ellipse at 86% 42%, rgba(143,169,255,.06), transparent 32%), radial-gradient(ellipse at 48% 100%, rgba(191,117,220,.045), transparent 40%); } .ambient { isolation: isolate; contain: paint; } .ambient::before { content: ""; position: absolute; inset: -24%; pointer-events: none; opacity: .32; filter: blur(38px); mix-blend-mode: screen; background: radial-gradient(ellipse at 18% 28%, rgba(109,255,202,.19), transparent 26%), radial-gradient(ellipse at 76% 22%, rgba(143,169,255,.22), transparent 28%), radial-gradient(ellipse at 68% 78%, rgba(210,130,205,.14), transparent 27%); transform: translate3d(0,0,0); animation: liquid-aurora-flow 36s ease-in-out infinite alternate; } .ambient-orb { border-radius: 41% 59% 63% 37% / 42% 36% 64% 58%; opacity: .22; /* Keep this on the compositor: changing border-radius every frame forces repaint. */ will-change: transform; animation: liquid-orb-drift 30s ease-in-out infinite; } .ambient-orb-b { animation-delay: -8s; } .ambient-noise { mix-blend-mode: soft-light; opacity: .045; } /* Deep, translucent surfaces with a soft inner rim. */ .glass-panel:not(.settings-hero):not(.hero-feature), .bottom-nav, .search-box, .settings-card, .settings-choice, .player-tabs, .player-content, .empty-state, .settings-network-metric, .settings-storage-metric { border-color: var(--liquid-edge); box-shadow: inset 0 1px 0 rgba(255,255,255,.11), inset 0 -1px 0 rgba(255,255,255,.025), var(--liquid-shadow); } .glass-panel:not(.settings-hero):not(.hero-feature) { background-image: radial-gradient(ellipse at 8% 0%, rgba(255,255,255,.12), transparent 43%), radial-gradient(ellipse at 100% 100%, rgba(109,255,202,.055), transparent 46%), linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.008) 58%, rgba(139,205,255,.025)); border-color: var(--liquid-edge); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 1px 0 0 rgba(255,255,255,.045), inset 0 -1px 0 rgba(0,0,0,.12), 0 18px 46px rgba(0,0,0,.2); -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%); } .settings-card::before, .bottom-nav::before, .search-box::before, .small-card::before, .search-row::before, .library-row::before, .settings-choice::before, .player-tabs::before, .queue-row::before, .create-card::before { content: ""; position: absolute; z-index: 0; inset: -70% -85%; pointer-events: none; opacity: .0; background: linear-gradient(112deg, transparent 35%, rgba(255,255,255,.13) 46%, rgba(190,255,240,.075) 50%, transparent 62%); transform: translate3d(-34%,0,0) rotate(-8deg); transition: opacity 380ms ease; } .settings-card:hover::before, .bottom-nav:hover::before, .search-box:focus-within::before, .small-card:hover::before, .search-row:hover::before, .library-row:hover::before, .settings-choice:hover::before, .player-tabs:hover::before, .queue-row:hover::before, .create-card:hover::before { opacity: .72; animation: liquid-specular-flow 4.8s var(--liquid-ease) both; } .small-card, .search-row, .library-row, .queue-row, .playlist-detail-row { position: relative; border-color: rgba(255,255,255,.085); background: radial-gradient(ellipse at 0% 0%, rgba(255,255,255,.055), transparent 56%), linear-gradient(120deg, rgba(255,255,255,.055), rgba(255,255,255,.018) 60%, rgba(109,255,202,.018)); box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 7px 22px rgba(0,0,0,.09); transition: border-color var(--liquid-duration) ease, background var(--liquid-duration) ease, box-shadow var(--liquid-duration) ease, transform var(--liquid-duration) var(--liquid-ease); } .search-row:hover, .library-row:hover, .small-card:hover, .queue-row:hover, .playlist-detail-row:hover { border-color: rgba(207,255,240,.2); background: radial-gradient(ellipse at 0% 0%, rgba(109,255,202,.075), transparent 58%), linear-gradient(120deg, rgba(255,255,255,.075), rgba(255,255,255,.025)); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 12px 28px rgba(0,0,0,.16), 0 0 22px rgba(109,255,202,.035); } .search-box { position: relative; isolation: isolate; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025)), rgba(17,19,24,.55); -webkit-backdrop-filter: blur(26px) saturate(160%); backdrop-filter: blur(26px) saturate(160%); transition: border-color .3s ease, box-shadow .3s ease, transform .3s var(--liquid-ease); } .search-box:focus-within { border-color: rgba(109,255,202,.38); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 0 0 3px rgba(109,255,202,.055), 0 14px 38px rgba(0,0,0,.2); } .filter-chip { border-color: rgba(255,255,255,.12); background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035)), rgba(25,27,32,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 8px 20px rgba(0,0,0,.08); transition: border-color .3s ease, background .3s ease, box-shadow .3s ease, transform .28s var(--liquid-ease); } .filter-chip.active { background: radial-gradient(ellipse at 22% 0%, rgba(255,255,255,.48), transparent 54%), linear-gradient(130deg, rgba(105,255,186,.98), rgba(75,216,159,.9)); border-color: rgba(214,255,240,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.52), 0 9px 28px rgba(67,244,173,.18), 0 0 24px rgba(109,255,202,.07); } .art-card { border-color: rgba(255,255,255,.15); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 17px 38px rgba(0,0,0,.3); transition: border-color .4s ease, box-shadow .4s ease, transform .45s var(--liquid-ease); } .art-card::after { content: ""; position: absolute; z-index: 1; inset: -55% -80%; pointer-events: none; opacity: 0; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.19) 49%, rgba(172,255,229,.08) 52%, transparent 63%); transform: translate3d(-34%,0,0) rotate(-9deg); } .card:hover .art-card { border-color: rgba(213,255,242,.32); box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 22px 48px rgba(0,0,0,.32), 0 0 28px rgba(109,255,202,.055); } .card:hover .art-card::after { opacity: 1; animation: liquid-specular-flow 1.3s var(--liquid-ease) both; } .card:active .art-card { transform: scale(.985); } .card-title, .card-subtitle, .search-row .meta, .library-row .meta, .mini-meta, .full-track-info > div:first-child { min-width: 0; } .hero-feature { border: 1px solid rgba(255,255,255,.19); background-color: rgba(255,255,255,.035); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 23px 58px rgba(0,0,0,.23); } .hero-feature::after { animation: liquid-hero-gel 22s ease-in-out infinite alternate; will-change: transform; } .hero-kicker { border-color: rgba(255,255,255,.18); background: linear-gradient(140deg, rgba(255,255,255,.18), rgba(255,255,255,.035)); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); } .glass-button, .icon-button, .round-icon, .back-button, .hero-play, .play-badge, .transport-button, .player-icon { transition: transform .32s var(--liquid-ease), border-color .3s ease, background .3s ease, box-shadow .3s ease, color .3s ease; } .glass-button, .round-icon, .back-button, .icon-button { border-color: rgba(255,255,255,.15); } .glass-button:hover, .round-icon:hover, .back-button:hover, .icon-button:hover, .hero-play:hover, .play-badge:hover, .transport-button:hover, .player-icon:hover { transform: translateY(-2px) scale(1.025); border-color: rgba(222,255,245,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 12px 26px rgba(0,0,0,.22), 0 0 23px rgba(109,255,202,.06); } .glass-button:active, .round-icon:active, .back-button:active, .icon-button:active, .hero-play:active, .play-badge:active, .transport-button:active, .player-icon:active, .nav-item:active, .filter-chip:active, .settings-choice:active { transform: scale(.955); } .bottom-nav { overflow: hidden; isolation: isolate; border-color: rgba(225,245,255,.23); background: radial-gradient(ellipse at 12% 0%, rgba(255,255,255,.18), transparent 46%), radial-gradient(ellipse at 100% 100%, rgba(139,205,255,.075), transparent 52%), linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.018)), rgba(17,19,24,.67); -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255,255,255,.23), inset 0 -1px 0 rgba(255,255,255,.055), 0 17px 50px rgba(0,0,0,.28), 0 0 32px rgba(139,205,255,.035); } .nav-item { position: relative; transition: color .3s ease, background .3s ease, transform .32s var(--liquid-ease); } .nav-item.active { background: radial-gradient(ellipse at 50% 0%, rgba(109,255,202,.13), transparent 75%), rgba(255,255,255,.075); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 24px rgba(109,255,202,.035); } .nav-item.active span { animation: liquid-icon-breathe 4.5s ease-in-out infinite; } .mini-player { border-color: rgba(225,248,255,.28); background-image: radial-gradient(ellipse at 12% 0%, rgba(255,255,255,.17), transparent 48%), radial-gradient(ellipse at 100% 100%, rgba(109,255,202,.09), transparent 55%), linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.015) 54%, rgba(139,205,255,.04)); box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(0,0,0,.16), 0 18px 42px rgba(0,0,0,.28), 0 0 28px rgba(139,205,255,.045); -webkit-backdrop-filter: blur(36px) saturate(180%); backdrop-filter: blur(36px) saturate(180%); } .mini-player::before { animation: liquid-player-light 22s ease-in-out infinite alternate; } .mini-play, .transport-button.primary { position: relative; overflow: hidden; border-color: rgba(230,255,248,.56); box-shadow: inset 0 1px 0 rgba(255,255,255,.68), 0 7px 20px rgba(0,0,0,.23), 0 0 24px rgba(109,255,202,.1); } .mini-play::before, .transport-button.primary::before { content: ""; position: absolute; inset: -80% -40%; pointer-events: none; background: linear-gradient(115deg, transparent 37%, rgba(255,255,255,.56) 49%, transparent 61%); transform: translate3d(-65%,0,0) rotate(-10deg); opacity: .28; } .mini-play:hover::before, .transport-button.primary:hover::before { animation: liquid-specular-flow 1.1s var(--liquid-ease) both; } .full-player-backdrop { overflow: hidden; } .full-player-backdrop::before { content: ""; position: absolute; inset: -24%; pointer-events: none; background: radial-gradient(ellipse at 22% 26%, rgba(109,255,202,.17), transparent 32%), radial-gradient(ellipse at 80% 35%, rgba(143,169,255,.2), transparent 34%), radial-gradient(ellipse at 60% 82%, rgba(202,124,194,.12), transparent 30%); filter: blur(34px); opacity: .8; transform: translate3d(0,0,0); animation: liquid-aurora-flow 36s ease-in-out infinite alternate; } .full-art-wrap { position: relative; isolation: isolate; border-color: rgba(255,255,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 32px 90px rgba(0,0,0,.48), 0 0 34px rgba(109,255,202,.055); } .full-art-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.23), transparent 27%, transparent 70%, rgba(0,0,0,.16)); } .player-tabs, .player-content { position: relative; isolation: isolate; background: radial-gradient(ellipse at 0% 0%, rgba(255,255,255,.075), transparent 55%), linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.018)), rgba(17,19,24,.48); -webkit-backdrop-filter: blur(26px) saturate(155%); backdrop-filter: blur(26px) saturate(155%); } .player-tabs { overflow: hidden; } .player-content { overflow: auto; overscroll-behavior: contain; } .player-tab { transition: background .3s ease, color .3s ease, transform .3s var(--liquid-ease); } .player-tab.active { background: linear-gradient(140deg, rgba(255,255,255,.14), rgba(109,255,202,.055)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); } .toast { border-color: rgba(218,255,245,.2); background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.035)), rgba(13,15,18,.8); -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 12px 36px rgba(0,0,0,.28); } .settings-hero { border-color: rgba(224,244,255,.19); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 22px 55px rgba(0,0,0,.21); } .settings-hero::after { animation: liquid-specular-flow 20s ease-in-out infinite alternate; } .settings-card { isolation: isolate; -webkit-backdrop-filter: blur(27px) saturate(155%); backdrop-filter: blur(27px) saturate(155%); transition: border-color .35s ease, box-shadow .35s ease, transform .4s var(--liquid-ease); } .settings-choice { -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); } .settings-choice.active { box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent), 0 12px 30px rgba(0,0,0,.16); } .settings-live-orb { animation: liquid-icon-breathe 9s ease-in-out infinite; will-change: transform; } @supports not (view-transition-name: none) { #homeView:not(.view-hidden), #searchView:not(.view-hidden), #libraryView:not(.view-hidden), #settingsView:not(.view-hidden) { animation: liquid-view-arrive .42s var(--liquid-ease) both; } } button, [role="button"] { -webkit-tap-highlight-color: transparent; } button:focus-visible, input:focus-visible, [role="button"]:focus-visible { outline-color: rgba(143,255,219,.88); outline-offset: 3px; } /* Deep screens, Library collections, and action sheets share the same fluid material. */ .library-collection, .playlist-card, .playlist-detail-hero, .remote-playlist-hero, .catalog-entity-hero, .home-explore-panel, .home-collection-sheet-panel, .item-actions-panel, .playlist-sheet { border-color: rgba(224,244,255,.15); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 20px 54px rgba(0,0,0,.22); } .library-collection { background: radial-gradient(ellipse at 0% 0%, rgba(109,255,202,.085), transparent 52%), linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.018)), var(--glass); } .playlist-card { background: radial-gradient(ellipse at 100% 0%, rgba(143,169,255,.1), transparent 48%), linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.018)), var(--glass); } .playlist-detail-hero { background: radial-gradient(ellipse at 12% 0%, rgba(109,255,202,.15), transparent 45%), radial-gradient(ellipse at 100% 50%, rgba(143,169,255,.09), transparent 48%), linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.018)); -webkit-backdrop-filter: blur(25px) saturate(150%); backdrop-filter: blur(25px) saturate(150%); } .remote-playlist-hero, .catalog-entity-hero { border-radius: 27px; } .home-entity-art-wrap, .home-explore-track-art, .remote-playlist-cover-wrap, .catalog-entity-art-wrap { border-color: rgba(224,244,255,.19); box-shadow: inset 0 1px 0 rgba(255,255,255,.17), 0 18px 40px rgba(0,0,0,.28), 0 0 25px rgba(109,255,202,.025); transition: border-color .38s ease, box-shadow .38s ease, transform .48s var(--liquid-ease); } #searchView.detail-immersive .catalog-artist-release { border-color: rgba(224,244,255,.15) !important; background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.018)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 22px rgba(0,0,0,.1); transition: border-color .3s ease, background .3s ease, transform .35s var(--liquid-ease), box-shadow .3s ease; } .recent-search-query { border-color: rgba(255,255,255,.075); background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.016)); transition: border-color .3s ease, background .3s ease, transform .3s var(--liquid-ease); } .recent-search-query:active { border-color: rgba(109,255,202,.25); background: linear-gradient(145deg, rgba(109,255,202,.1), rgba(255,255,255,.025)); } .related-entity-card img { border: 1px solid rgba(255,255,255,.13); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 10px 26px rgba(0,0,0,.2); transition: border-color .35s ease, box-shadow .35s ease, transform .4s var(--liquid-ease); } .home-explore-track, .home-explore-entity { transition: background .32s ease, transform .38s var(--liquid-ease); } .item-action-row, .home-collection-action-row, .home-collection-playlist-row { transition: background .3s ease, border-color .3s ease, transform .3s var(--liquid-ease); } .item-action-row:active, .home-collection-action-row:active, .home-collection-playlist-row:active { transform: scale(.985); } .home-explore-panel { background: radial-gradient(ellipse at 12% 0%, rgba(109,255,202,.075), transparent 44%), radial-gradient(ellipse at 100% 18%, rgba(143,169,255,.085), transparent 38%), linear-gradient(165deg, rgba(25,28,32,.97), rgba(8,9,11,.99) 42%); } .home-collection-sheet-panel, .playlist-sheet { background: radial-gradient(ellipse at 10% 0%, rgba(109,255,202,.085), transparent 45%), radial-gradient(ellipse at 100% 6%, rgba(143,169,255,.11), transparent 42%), linear-gradient(145deg, rgba(39,41,49,.985), rgba(13,15,20,.99)); -webkit-backdrop-filter: blur(36px) saturate(155%); backdrop-filter: blur(36px) saturate(155%); } @media (hover:hover) and (pointer:fine) { .home-entity-card:hover .home-entity-art-wrap, .home-explore-track:hover .home-explore-track-art, .remote-playlist-cover-wrap:hover, .catalog-entity-art-wrap:hover { border-color: rgba(210,255,243,.34); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 22px 48px rgba(0,0,0,.32), 0 0 28px rgba(109,255,202,.055); } .related-entity-card:hover img { transform: translateY(-2px) scale(1.02); border-color: rgba(210,255,243,.34); box-shadow: 0 18px 36px rgba(0,0,0,.25), 0 0 24px rgba(109,255,202,.06); } .recent-search-query:hover { transform: translateX(2px); border-color: rgba(109,255,202,.2); background: linear-gradient(145deg, rgba(109,255,202,.075), rgba(255,255,255,.02)); } .home-explore-track:hover, .home-explore-entity:hover { transform: translateY(-2px); } } /* A soft liquid rim: the light is baked into gradients and compositor-safe transforms rather than animated blur or per-frame layout work. */ .small-card, .search-row, .library-row, .queue-row, .playlist-detail-row, .filter-chip, .settings-choice, .settings-card, .search-box, .player-tabs, .player-content, .toast, .library-collection, .playlist-card, .playlist-detail-hero, .remote-playlist-hero, .catalog-entity-hero, .home-collection-sheet-panel, .playlist-sheet, .item-actions-panel { border-color: rgba(226,244,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.10), 0 12px 32px rgba(0,0,0,.16); } .small-card, .search-row, .library-row, .queue-row, .playlist-detail-row { background-image: radial-gradient(ellipse at 4% 0%, rgba(255,255,255,.10), transparent 48%), linear-gradient(125deg, rgba(255,255,255,.045), rgba(255,255,255,.012) 62%, rgba(139,205,255,.025)); } .glass-button, .round-icon, .back-button, .icon-button, .hero-play, .play-badge, .transport-button, .player-icon, .filter-chip, .settings-choice, .nav-item { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } @media (hover:none) { .small-card:active, .search-row:active, .library-row:active, .queue-row:active, .playlist-detail-row:active { border-color: rgba(139,225,255,.34); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 28px rgba(0,0,0,.19), 0 0 18px rgba(139,205,255,.06); } } /* Progressive, frame-by-frame section entrance tied to real scroll progress. Transform + opacity only; unsupported browsers simply keep the static layout. */ @keyframes liquid-scroll-enter { from { opacity: .88; transform: translate3d(0,7px,0) scale(.995); } to { opacity: 1; transform: translate3d(0,0,0) scale(1); } } /* Scroll-linked transforms are reserved for desktop browsers. On mobile, letting native scrolling move the sections directly feels more immediate. */ @media (hover:hover) and (pointer:fine) and (min-width:900px) { @supports (animation-timeline: view()) { .home-sections > .section-block, .library-section { animation: liquid-scroll-enter linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; } } } @keyframes liquid-aurora-flow { 0% { transform: translate3d(-2%,0,0) scale(1) rotate(0deg); } 48% { transform: translate3d(2.5%,-1.5%,0) scale(1.06) rotate(3deg); } 100% { transform: translate3d(-1%,2%,0) scale(1.025) rotate(-2deg); } } @keyframes liquid-orb-drift { 0%,100% { transform: translate3d(0,0,0) scale(1); } 34% { transform: translate3d(4vw,-3vh,0) scale(1.08); } 68% { transform: translate3d(-2vw,4vh,0) scale(.94); } } @keyframes liquid-orb-morph { 0% { border-radius: 41% 59% 63% 37% / 42% 36% 64% 58%; } 50% { border-radius: 58% 42% 38% 62% / 54% 62% 38% 46%; } 100% { border-radius: 35% 65% 56% 44% / 63% 39% 61% 37%; } } @keyframes liquid-specular-flow { 0% { transform: translate3d(-34%,0,0) rotate(-8deg); } 100% { transform: translate3d(34%,0,0) rotate(-8deg); } } @keyframes liquid-hero-gel { 0% { transform: translate3d(-3%,1%,0) rotate(-14deg) scale(1); opacity: .72; } 55% { transform: translate3d(3%,-2%,0) rotate(-7deg) scale(1.045); opacity: .92; } 100% { transform: translate3d(-1%,2%,0) rotate(-12deg) scale(1.015); opacity: .78; } } @keyframes liquid-player-light { 0% { transform: translate3d(-1%,0,0) scale(1); opacity: .76; } 100% { transform: translate3d(1.5%,-2%,0) scale(1.045); opacity: 1; } } @keyframes liquid-icon-breathe { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1px) scale(1.035); } } @keyframes liquid-view-arrive { from { opacity: .84; transform: translate3d(0,7px,0); } to { opacity: 1; transform: translate3d(0,0,0); } } @media (hover:hover) and (pointer:fine) { .card:hover, .small-card:hover, .search-row:hover, .library-row:hover, .create-card:hover, .genre-card:hover, .settings-card:hover { transform: translateY(-2px); } } @media (hover:none) { .settings-card::before, .bottom-nav::before, .search-box::before, .small-card::before, .search-row::before, .library-row::before, .settings-choice::before, .player-tabs::before, .queue-row::before, .create-card::before { opacity: .2; } } @media (max-width:620px) { /* Prioritize native touch-scroll: many simultaneous live backdrop filters on card grids force Android Chrome to re-rasterize large areas per frame. Preserve the liquid material with layered gradients and rims instead. */ .small-card, .search-row, .library-row, .queue-row, .playlist-detail-row, .art-card, .recent-search-query, .catalog-artist-release, .home-explore-track, .home-explore-entity, .related-entity-card img, .filter-chip, .glass-button, .play-badge, .track-context-menu { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .ambient-orb { filter: blur(20px); opacity: .13; } .ambient::before { filter: blur(12px); opacity: .16; animation-duration: 60s; } .ambient-orb { animation-duration: 48s; } .home-sections > .section-block, .library-section { animation: none !important; animation-timeline: auto !important; transform: none; } /* Mobile-first compositing: keep the liquid look in the rim/light, not in a stack of huge live backdrop blurs on top of a scrolling page. */ .ambient-noise { opacity: .025; } .glass-panel:not(.settings-hero):not(.hero-feature) { -webkit-backdrop-filter: blur(12px) saturate(135%); backdrop-filter: blur(12px) saturate(135%); } .bottom-nav { -webkit-backdrop-filter: blur(15px) saturate(145%); backdrop-filter: blur(15px) saturate(145%); } .mini-player { -webkit-backdrop-filter: blur(17px) saturate(150%); backdrop-filter: blur(17px) saturate(150%); } .search-box, .settings-card { -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); } .player-tabs { -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); } .player-content { -webkit-backdrop-filter: blur(8px) saturate(125%); backdrop-filter: blur(8px) saturate(125%); } /* Full-screen sheets/player backdrop are also large composited surfaces. */ .home-explore-panel, .home-collection-sheet-panel, .playlist-sheet, .item-actions-panel, .playlist-detail-hero, .remote-playlist-hero, .catalog-entity-hero { -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); } .full-player-backdrop::after { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } /* Smooth touch scrolling without scroll handlers or JS layout work. */ .carousel, .filter-row, .player-content, .full-player, .home-explore-content, .home-collection-sheet-panel, .playlist-sheet, .library-page { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .hero-feature::after, .mini-player::before { animation-duration: 48s; } #homeView:not(.view-hidden), #searchView:not(.view-hidden), #libraryView:not(.view-hidden), #settingsView:not(.view-hidden) { animation-duration: .24s; } } /* OriginOS-inspired Liquid Glass v8: optical depth with mobile-first motion. Keep the material mostly static; animate only compositor-friendly properties. */ :root { --liquid-edge: rgba(207, 233, 255, .23); --liquid-edge-light: rgba(239, 250, 255, .52); --liquid-aqua: rgba(83, 220, 255, .18); --liquid-ice: rgba(104, 160, 255, .22); --liquid-violet: rgba(115, 111, 255, .15); --liquid-shadow: 0 18px 44px rgba(0, 0, 0, .28); --liquid-ease: cubic-bezier(.16, .82, .24, 1); --liquid-duration: 260ms; } /* A brighter upper rim and a cool, refractive-looking inner edge create depth without requiring SVG filters or per-frame JavaScript. */ .glass-panel, .settings-card, .settings-choice, .search-box, .player-content, .player-tabs, .bottom-nav, .mini-player, .full-player-backdrop .full-art-wrap { border-color: var(--liquid-edge); box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(130,190,255,.08), 0 16px 42px rgba(0,0,0,.23); } .glass-panel:not(.settings-hero):not(.hero-feature), .settings-card, .settings-choice, .player-tabs, .player-content, .empty-state { background-color: rgba(24, 36, 62, .27); background-image: radial-gradient(ellipse at 14% 0%, rgba(255,255,255,.13), transparent 48%), linear-gradient(145deg, rgba(151,199,255,.075), rgba(255,255,255,.018) 48%, rgba(74,123,255,.045)); -webkit-backdrop-filter: blur(22px) saturate(175%); backdrop-filter: blur(22px) saturate(175%); } .glass-button, .icon-button, .round-icon, .back-button, .transport-button, .player-icon, .filter-chip, .settings-choice { -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform 180ms var(--liquid-ease), border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease; } .glass-button:active, .icon-button:active, .round-icon:active, .back-button:active, .transport-button:active, .player-icon:active, .filter-chip:active, .settings-choice:active { transform: scale(.965); } /* Keep touch scrolling native and continuous; don't smooth-scroll every mobile gesture. */ html { scroll-behavior: auto; overscroll-behavior-y: contain; -webkit-text-size-adjust: 100%; } body, .app-shell, .home-view, .search-view, .library-view { overscroll-behavior-x: none; } .app-shell { -webkit-overflow-scrolling: touch; } button, a, [role="button"] { touch-action: manipulation; } input, textarea, [contenteditable="true"] { touch-action: auto; } /* Avoid persistent will-change on large surfaces: it can waste mobile GPU memory. */ .ambient::before, .full-player-backdrop::before, .mini-player::before { pointer-events: none; } .ambient-orb { will-change: transform; } .ambient-orb, .ambient::before, .full-player-backdrop::before { animation-play-state: running; } /* On touch screens, hover-only specular sweeps should not trigger during scrolling. */ @media (hover: none), (pointer: coarse) { .settings-card:hover::before, .bottom-nav:hover::before, .small-card:hover::before, .search-row:hover::before, .library-row:hover::before, .settings-choice:hover::before, .player-tabs:hover::before, .queue-row:hover::before, .create-card:hover::before, .card:hover .art-card::after { animation: none; opacity: 0; } .small-card, .search-row, .library-row, .queue-row, .playlist-detail-row { transition: border-color 160ms ease, background-color 160ms ease; } .glass-panel:not(.settings-hero):not(.hero-feature), .settings-card, .settings-choice, .player-tabs, .player-content { -webkit-backdrop-filter: blur(18px) saturate(155%); backdrop-filter: blur(18px) saturate(155%); } } /* Accessibility and battery-conscious motion fallback. */ /* Stable, directional page changes. No whole-page snapshots, 3D curl, or scaling. */ #homeView.page-turn-enter-from-right, #searchView.page-turn-enter-from-right, #libraryView.page-turn-enter-from-right, #settingsView.page-turn-enter-from-right { animation: makplay-page-turn-next 300ms cubic-bezier(.2,.75,.22,1) both; } #homeView.page-turn-enter-from-left, #searchView.page-turn-enter-from-left, #libraryView.page-turn-enter-from-left, #settingsView.page-turn-enter-from-left { animation: makplay-page-turn-previous 300ms cubic-bezier(.2,.75,.22,1) both; } @keyframes makplay-page-turn-next { from { opacity: .94; transform: translate3d(24px,0,0); } to { opacity: 1; transform: translate3d(0,0,0); } } @keyframes makplay-page-turn-previous { from { opacity: .94; transform: translate3d(-24px,0,0); } to { opacity: 1; transform: translate3d(0,0,0); } } /* Disable the legacy vertical entrance on platforms without native view transitions. The directional page-turn above is the only top-level navigation animation. */ @supports not (view-transition-name: none) { #homeView:not(.view-hidden):not(.page-turn-enter-from-left):not(.page-turn-enter-from-right), #searchView:not(.view-hidden):not(.page-turn-enter-from-left):not(.page-turn-enter-from-right), #libraryView:not(.view-hidden):not(.page-turn-enter-from-left):not(.page-turn-enter-from-right), #settingsView:not(.view-hidden):not(.page-turn-enter-from-left):not(.page-turn-enter-from-right) { animation: none; } } /* MakPlay mobile smoothness pass: keep the glass look, reduce repaint pressure on touch GPUs. */ @media (max-width: 760px), (pointer: coarse), (hover: none) { /* Large blurred translucent layers were the main source of frame drops on phones. */ .glass-panel:not(.settings-hero):not(.hero-feature), .bottom-nav, .search-box, .settings-card, .settings-choice, .mini-player, .player-tabs, .player-content, .toast, .hero-kicker { -webkit-backdrop-filter: blur(12px) saturate(125%); backdrop-filter: blur(12px) saturate(125%); } .ambient::before, .full-player-backdrop::before { filter: blur(18px); opacity: .48; animation: none; } .ambient-orb, .hero-feature::after, .mini-player::before, .nav-item.active span, .settings-live-orb, .settings-hero::after { animation: none !important; will-change: auto; } .ambient-noise, .liquid-transition-drop::before { mix-blend-mode: normal !important; } .liquid-transition-drop { box-shadow: 0 14px 30px rgba(55,199,255,.24), 0 4px 12px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.82), inset 0 -10px 18px rgba(17,58,106,.3); } .liquid-transition-drop::before { opacity: .72; } .glass-panel:not(.settings-hero):not(.hero-feature), .small-card, .search-row, .library-row, .queue-row, .playlist-detail-row, .art-card { transition-duration: 220ms; } /* Keep scroll and touch feedback immediate; avoid scroll-linked paint work. */ #fullPlayer, #homeView, #searchView, #libraryView, #settingsView { -webkit-overflow-scrolling: touch; scroll-behavior: auto; } } /* Mobile player rendering: one small entrance animation, no stacked blur surfaces. */ @media (max-width: 760px), (pointer: coarse), (hover: none) { #fullPlayer .full-player-backdrop { inset: 0; filter: none !important; } /* Keep the background glass blur available on touch devices. The blur is scoped to the backdrop layer and begins with its first visible fade frame. */ #fullPlayer .full-player-backdrop::before { display: none !important; filter: none !important; animation: none !important; } #fullPlayer .full-player-backdrop::after { background: linear-gradient(180deg, rgba(6, 8, 11, .25), rgba(5, 6, 8, .7)); } #fullPlayer .player-tabs, #fullPlayer .player-content { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: linear-gradient(145deg, rgba(255, 255, 255, .095), rgba(255, 255, 255, .025)), rgba(17, 20, 28, .84); border: 1px solid rgba(255, 255, 255, .13); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 24px rgba(0, 0, 0, .2); } #fullPlayer .full-art-wrap { box-shadow: 0 14px 36px rgba(0, 0, 0, .38); } #fullPlayer[aria-hidden="false"] .full-player-inner, #fullPlayer[aria-hidden="false"] .full-player-backdrop, #fullPlayer[aria-hidden="false"] .full-art-wrap { animation: none !important; } /* Light droplet styling for touch devices: retain a soft liquid silhouette but avoid expensive 3D depth, blend modes, nested highlights, and heavy shadows. */ .liquid-transition-drop.liquid-transition-drop-mobile { border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; transform-style: flat; backface-visibility: visible; -webkit-backface-visibility: visible; will-change: transform, opacity; } .liquid-transition-drop.liquid-transition-drop-mobile .liquid-transition-drop-clip { transform: none; backface-visibility: visible; -webkit-backface-visibility: visible; } .liquid-transition-drop.liquid-transition-drop-mobile::before, .liquid-transition-drop.liquid-transition-drop-mobile::after { display: none !important; content: none !important; border: 0 !important; box-shadow: none !important; background: none !important; } .liquid-transition-drop.liquid-transition-drop-mobile .liquid-transition-drop-ridge, .liquid-transition-drop.liquid-transition-drop-mobile .liquid-transition-drop-gloss, .liquid-transition-drop.liquid-transition-drop-mobile .liquid-transition-drop-caustic { display: none !important; } #fullPlayer, #homeView, #searchView, #libraryView, #settingsView { -webkit-overflow-scrolling: touch; scroll-behavior: auto; } } /* Player transition owns all player motion. Disable legacy CSS entrance effects on every device so old keyframes cannot stack with the live liquid transition. */ #fullPlayer[aria-hidden="false"] .full-player-inner, #fullPlayer[aria-hidden="false"] .full-player-backdrop, #fullPlayer[aria-hidden="false"] .full-art-wrap { animation: none !important; } #fullPlayer .full-player-backdrop { transition: none !important; } #fullPlayer .full-art-wrap img { transition: none !important; } /* Motion follows MakPlay's saved preference, not an operating-system media query. */ html[data-motion="off"]:not(#makplay-motion-a):not(#makplay-motion-b):not(#makplay-motion-c) *, html[data-motion="off"]:not(#makplay-motion-a):not(#makplay-motion-b):not(#makplay-motion-c) *::before, html[data-motion="off"]:not(#makplay-motion-a):not(#makplay-motion-b):not(#makplay-motion-c) *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }