/* public/assets/css/style.css - Apple Music Aurora & Glassmorphism Theme */

@layer base {
    /* Custom Water Drop Cursor */
    @media (pointer: fine) {
        html, body {
            cursor: url('/cursors/drop.svg') 12 2, auto;
        }
        a, button, [role='button'], input, select, textarea, [data-interactive] {
            cursor: url('/cursors/drop-hover.svg') 12 2, pointer;
        }
        input[type="text"], input[type="search"] {
            cursor: text;
        }
    }
}

/* Splash Ripple */
.music-ripple {
    position: fixed;
    border-radius: 9999px;
    pointer-events: none;
    transform: translate(-50%, -50%);
    border: 1.5px solid rgba(56, 189, 248, 0.65);
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.35);
    animation: rippleGrow 0.65s cubic-bezier(0.15, 0.8, 0.25, 1) forwards;
    z-index: 9999;
}

@keyframes rippleGrow {
    from {
        width: 0;
        height: 0;
        opacity: 0.9;
    }
    to {
        width: 90px;
        height: 90px;
        opacity: 0;
    }
}

/* Living Aurora Glow Blobs Animation */
.aurora-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #060913;
    z-index: 0;
}

.aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.55;
    mix-blend-mode: screen;
    pointer-events: none;
    will-change: transform;
}

.aurora-1 {
    top: -10%;
    left: 15%;
    width: 45vw;
    height: 45vw;
    background: radial-gradient(circle, #0284c7 0%, rgba(2, 132, 199, 0) 70%);
    animation: floatAurora1 22s ease-in-out infinite alternate;
}

.aurora-2 {
    bottom: -15%;
    right: 10%;
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, #7c3aed 0%, rgba(124, 58, 237, 0) 70%);
    animation: floatAurora2 26s ease-in-out infinite alternate;
}

.aurora-3 {
    top: 30%;
    right: 25%;
    width: 38vw;
    height: 38vw;
    background: radial-gradient(circle, #06b6d4 0%, rgba(6, 182, 212, 0) 70%);
    animation: floatAurora3 20s ease-in-out infinite alternate;
}

.aurora-4 {
    bottom: 10%;
    left: 5%;
    width: 42vw;
    height: 42vw;
    background: radial-gradient(circle, #db2777 0%, rgba(219, 39, 119, 0) 70%);
    animation: floatAurora4 24s ease-in-out infinite alternate;
}

@keyframes floatAurora1 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(12vw, 15vh) scale(1.15); }
    100% { transform: translate(-8vw, 8vh) scale(0.95); }
}

@keyframes floatAurora2 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-15vw, -10vh) scale(1.2); }
    100% { transform: translate(8vw, -18vh) scale(0.9); }
}

@keyframes floatAurora3 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-12vw, 14vh) scale(0.85); }
    100% { transform: translate(10vw, -10vh) scale(1.1); }
}

@keyframes floatAurora4 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(16vw, -12vh) scale(1.18); }
    100% { transform: translate(-10vw, -16vh) scale(0.88); }
}

/* 3D Album Artwork Card */
.album-card-container {
    perspective: 1200px;
}

.album-card {
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
    transform-style: preserve-3d;
    will-change: transform;
}

.album-card-glow {
    position: absolute;
    inset: -12px;
    border-radius: 2.5rem;
    background: inherit;
    filter: blur(35px);
    opacity: 0.6;
    z-index: -1;
    transition: opacity 0.4s ease, filter 0.4s ease;
}

/* Floating breathing when playing */
.is-playing .album-card-float {
    animation: albumFloat 6s ease-in-out infinite alternate;
}

@keyframes albumFloat {
    0%   { transform: translateY(0px); }
    100% { transform: translateY(-12px); }
}

/* Glassmorphism Classes */
.glass-panel {
    background: rgba(10, 16, 32, 0.72);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-dock {
    background: rgba(8, 12, 24, 0.82);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Equalizer Bars Animation */
.eq-bar {
    width: 3.5px;
    border-radius: 9999px;
    background: #38bdf8;
    transform-origin: bottom;
    animation: eqPulse 1.1s ease-in-out infinite alternate;
}
.eq-bar:nth-child(1) { height: 12px; animation-delay: 0.1s; }
.eq-bar:nth-child(2) { height: 20px; animation-delay: 0.35s; }
.eq-bar:nth-child(3) { height: 9px;  animation-delay: 0.2s; }
.eq-bar:nth-child(4) { height: 16px; animation-delay: 0.5s; }

@keyframes eqPulse {
    0% { transform: scaleY(0.25); }
    100% { transform: scaleY(1); }
}

.is-paused .eq-bar {
    animation-play-state: paused;
    transform: scaleY(0.3);
}

/* Zen Mode Transition */
.zen-active .ui-hide-zen {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.zen-active .zen-card-hero {
    transform: scale(1.15) translateY(-20px);
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.zen-active .zen-only {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Range input style */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.12);
    height: 4px;
    border-radius: 2px;
    outline: none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.85);
    cursor: pointer;
    transition: transform 0.15s ease;
}
input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.35);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(56, 189, 248, 0.4);
}