/* Psicodelia Theme - Vibrant Neons and Fluid Patterns */

/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* --- Global Variables & Body Background --- */
html.theme-psicodelia {
    --primary-color: #7500C0; /* Purple for text/details */
    --card-bg: #D1FF00; /* Neon Yellow/Green background */
    --text-color: #1a1a1a;
    --btn-bg-color: #7500C0;
    --btn-text-color: #D1FF00;
    --font-family: 'Space Mono', monospace;
    --border-color: #000000;
    --shadow-color: #000000;
}

html.theme-psicodelia body {
    font-family: var(--font-family) !important;
    color: var(--text-color);
    position: relative;
    min-height: 100vh;
}

/* --- Animated Fluid Background --- */
/* We create a full screen fixed background with multiple moving gradients/blobs */
/* Lava lamp effect: More defined edges and intense colors for the blobs */
html.theme-psicodelia body {
    background-color: #D1FF00;
    background-image:
        radial-gradient(circle at 50% 50%, #7500C0 5%, #9b20e8 15%, transparent 35%),
        radial-gradient(circle at 80% 20%, #7500C0 5%, #9b20e8 15%, transparent 35%),
        radial-gradient(circle at 20% 80%, #7500C0 5%, #9b20e8 15%, transparent 40%);
    background-size: 150% 150%, 120% 120%, 180% 180%;
    animation: psychedelic-move 20s infinite alternate ease-in-out;
    border-radius: 0;
    min-height: 100vh;
    box-shadow: none;
}

@keyframes psychedelic-move {
    0% {
        background-position: 0% 0%, 100% 0%, 0% 100%;
    }
    33% {
        background-position: 50% 100%, 0% 50%, 100% 0%;
    }
    66% {
        background-position: 100% 50%, 50% 100%, 0% 50%;
    }
    100% {
        background-position: 50% 0%, 0% 100%, 100% 50%;
    }
}

/* Ensure content sits above the animated background */
.theme-psicodelia .profile-card {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    position: relative;
    overflow: visible !important;
    z-index: 2;
}

.theme-psicodelia .profile-info,
.theme-psicodelia .content-links,
.theme-psicodelia .footer-legal,
.theme-psicodelia .bandup-branding {
    position: relative;
    z-index: 3;
}

/* --- Header & Avatar (Forcing Circle) --- */
.theme-psicodelia .profile-header-image-container {
    background-color: transparent !important;
}

.theme-psicodelia .profile-card.avatar-shape-circle .profile-header-image {
    display: none !important;
}

.theme-psicodelia .profile-card.avatar-shape-circle .profile-header-image-container {
    height: 430px !important;
}

.theme-psicodelia .profile-card.avatar-shape-circle .profile-info {
    padding-top: 0 !important;
}

.theme-psicodelia .circle-avatar-overlay {
    background-color: transparent !important;
}

.theme-psicodelia .avatar-wrapper {
    /* Neo-brutalism style for the avatar itself */
    border: 6px solid var(--border-color);
    box-shadow: 8px 8px 0px var(--shadow-color);
    background-color: var(--card-bg); /* Prevents transparency showing background inside the border */
    transform: translateY(-20px);
}

.theme-psicodelia .artist-name {
    font-weight: 700;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: -1px;
    font-size: 2.5rem;
    margin-bottom: 5px;
    text-shadow: 4px 4px 0px var(--primary-color),
                 -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    color: #fff;
}

/* Share Icon Visibility */
html.theme-psicodelia .page-header .share-icon {
    background-color: var(--primary-color) !important;
    color: var(--btn-text-color) !important;
    opacity: 1 !important;
    border: 3px solid var(--border-color);
    box-shadow: 4px 4px 0px var(--shadow-color);
    border-radius: 0; /* Square edges for brutalism */
    transition: all 0.2s ease;
}
html.theme-psicodelia .page-header .share-icon:active {
    transform: translate(4px, 4px);
    box-shadow: 0px 0px 0px var(--shadow-color);
}

.theme-psicodelia .band-slug {
    color: var(--text-color);
    font-weight: 700;
    background: #fff;
    padding: 4px 12px;
    border: 2px solid #000;
    display: inline-block;
    box-shadow: 3px 3px 0 #000;
}

.theme-psicodelia .artist-type-badge {
    background: var(--primary-color);
    color: var(--btn-text-color);
    border: 2px solid #000;
    box-shadow: 3px 3px 0 #000;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 0;
    margin-top: 15px !important;
}

.theme-psicodelia .band-styles-container .style-badge {
    background: #fff;
    color: #000;
    border: 2px solid #000;
    box-shadow: 3px 3px 0 #000;
    border-radius: 0;
    font-weight: 700;
    text-transform: uppercase;
}
.theme-psicodelia .band-styles-container {
    margin-top: 15px !important;
}


/* --- Links & Buttons (Neo-brutalism) --- */
.theme-psicodelia .link-poster,
.theme-psicodelia .album-link-capsule,
.theme-psicodelia .spotify-track-link,
.theme-psicodelia .artist-profile-card,
.theme-psicodelia .cta-button,
.theme-psicodelia .youtube-embed-container,
.theme-psicodelia .youtube-preview,
.theme-psicodelia .youtube-preview-inner {
    background: #ffffff !important;
    border-radius: 0 !important;
    border: 4px solid var(--border-color) !important;
    box-shadow: 8px 8px 0px var(--shadow-color) !important;
    margin-bottom: 20px !important;
    overflow: visible !important; /* Allow shadow to break bounds if needed */
    transition: all 0.2s ease !important;
    color: var(--text-color) !important;
}

/* Force YouTube embed specific fixes for borders */
.theme-psicodelia .youtube-embed-container,
.theme-psicodelia .youtube-preview {
    padding: 10px !important;
    display: block !important;
    box-sizing: border-box;
    height: auto !important;
    border: 4px solid var(--border-color) !important;
    background: #ffffff !important; /* brutalist background */
}

.theme-psicodelia .youtube-preview-inner {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.theme-psicodelia .youtube-embed-container iframe,
.theme-psicodelia .youtube-preview-inner {
    position: relative !important;
    width: 100% !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
    display: block;
    border-radius: 0 !important;
}

@supports not (aspect-ratio: 16 / 9) {
    .theme-psicodelia .youtube-embed-container iframe,
    .theme-psicodelia .youtube-preview-inner {
        height: 56.25vw !important;
        max-height: 300px;
    }
}

/* Button Hover State - Press down effect */
.theme-psicodelia .link-poster:hover,
.theme-psicodelia .album-link-capsule:hover,
.theme-psicodelia .spotify-track-link:hover,
.theme-psicodelia .artist-profile-card:hover,
.theme-psicodelia .youtube-preview:hover,
.theme-psicodelia .cta-button:hover {
    transform: translate(4px, 4px) !important;
    box-shadow: 4px 4px 0px var(--shadow-color) !important;
    background-color: var(--card-bg) !important;
}

/* Button Active State - Fully pressed down */
.theme-psicodelia .link-poster:active,
.theme-psicodelia .album-link-capsule:active,
.theme-psicodelia .spotify-track-link:active,
.theme-psicodelia .artist-profile-card:active,
.theme-psicodelia .youtube-preview:active,
.theme-psicodelia .cta-button:active {
    transform: translate(8px, 8px) !important;
    box-shadow: 0px 0px 0px var(--shadow-color) !important;
}

/* Text styles inside cards */
.theme-psicodelia .link-poster-title,
.theme-psicodelia .album-title,
.theme-psicodelia .track-title,
.theme-psicodelia .artist-card-name {
    font-weight: 700;
    color: var(--text-color) !important;
    text-transform: uppercase;
}

/* Custom User Sections & Dividers */
.theme-psicodelia .section-title {
    color: #000 !important;
    text-shadow: none !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

.theme-psicodelia hr[class*="separator-"] {
    border-color: #000 !important;
    background-color: #000 !important;
    opacity: 1 !important;
    border-width: 3px !important;
}

.theme-psicodelia .separator-dashed {
    border-style: dashed !important;
    background-color: transparent !important;
}

.theme-psicodelia .separator-dotted {
    border-style: dotted !important;
    background-color: transparent !important;
}

.theme-psicodelia .track-meta,
.theme-psicodelia .album-meta {
    color: #666 !important;
    font-weight: 400;
}

.theme-psicodelia .artist-card-cta,
.theme-psicodelia .album-meta .action-text {
    background: var(--primary-color) !important;
    color: var(--btn-text-color) !important;
    border-radius: 0 !important;
    border: 2px solid #000;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 2px 2px 0 #000;
}

/* Custom CTA buttons (like in concerts/echos) */
.theme-psicodelia .cta-button {
    background-color: var(--primary-color) !important;
    color: var(--btn-text-color) !important;
    font-weight: 700;
    text-transform: uppercase;
}
.theme-psicodelia .cta-button:hover {
    background-color: #5c0099 !important; /* Slightly darker purple on hover */
    color: var(--card-bg) !important;
}

/* --- Social Icons --- */
.theme-psicodelia .social-icons {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.theme-psicodelia .social-icons a {
    color: var(--text-color) !important;
    background: #fff;
    border: 3px solid var(--border-color);
    box-shadow: 4px 4px 0px var(--shadow-color);
    border-radius: 0 !important;
    width: 45px;
    height: 45px;
    transition: all 0.2s ease;
}

.theme-psicodelia .social-icons a:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px var(--shadow-color);
    background: var(--card-bg);
}
.theme-psicodelia .social-icons a:active {
    transform: translate(4px, 4px);
    box-shadow: 0px 0px 0px var(--shadow-color);
}

/* --- Footer & Branding --- */
.theme-psicodelia .footer-legal a,
.theme-psicodelia .bandup-branding a {
    color: var(--text-color) !important;
    font-weight: 700;
    background: #fff;
    padding: 2px 8px;
    border: 2px solid #000;
    box-shadow: 2px 2px 0 #000;
    text-decoration: none !important;
}

.theme-psicodelia .footer-legal a:hover {
    text-decoration: underline !important;
    background: var(--card-bg);
}

.theme-psicodelia .bandup-branding img {
    filter: none; /* Keep the original logo colors */
}

/* --- Responsive Adjustments --- */
@media (max-width: 480px) {
    .theme-psicodelia .artist-name {
        font-size: 2rem;
    }
}

/* --- Glassmorphism Effect for Psicodelia Container --- */
/* The user requested the container itself to look like glass floating over the background */
.theme-psicodelia .profile-card {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
    border-radius: 20px !important;
    margin: 20px auto;
    padding-bottom: 30px;
    z-index: 2;
}

@keyframes psychedelic-move-mobile {
    0% {
        /* 8 Larger blobs sweeping and circling */
        background-position:
            -20vw -20vh,
            60vw -30vh,
            110vw 120vh,
            -30vw 110vh,
            40vw 30vh,
            -10vw 60vh,
            90vw 50vh,
            50vw 80vh;
    }
    33% {
        background-position:
            -20vw 120vh,
            60vw 130vh,
            110vw -20vh,
            -30vw -10vh,
            80vw 60vh,
            40vw 10vh,
            10vw 80vh,
            90vw 20vh;
    }
    66% {
        background-position:
            100vw 60vh,
            -20vw 40vh,
            50vw -30vh,
            60vw 120vh,
            10vw 10vh,
            90vw 80vh,
            40vw 20vh,
            -10vw 90vh;
    }
    100% {
        background-position:
            110vw -10vh,
            -30vw 120vh,
            -20vw -20vh,
            120vw 110vh,
            60vw 80vh,
            20vw 40vh,
            80vw 10vh,
            30vw 50vh;
    }
}

@media (max-width: 768px) {
    /* To fix iOS mobile scrolling with background-attachment: fixed, we use a fixed ::before pseudo-element */
    html.theme-psicodelia body {
        background-image: none !important;
        background-color: var(--card-bg); /* Base neon green */
    }

    html.theme-psicodelia body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: -1;
        pointer-events: none;
        background-image:
            /* 8 Larger Blobs */
            radial-gradient(circle, #7500C0 0%, #9b20e8 25%, transparent 60%),
            radial-gradient(circle, #7500C0 0%, #9b20e8 30%, transparent 65%),
            radial-gradient(circle, #7500C0 0%, #9b20e8 20%, transparent 55%),
            radial-gradient(circle, #7500C0 0%, #9b20e8 25%, transparent 60%),
            radial-gradient(circle, #7500C0 0%, #9b20e8 35%, transparent 70%),
            radial-gradient(circle, #7500C0 0%, #9b20e8 25%, transparent 60%),
            radial-gradient(circle, #7500C0 0%, #9b20e8 30%, transparent 65%),
            radial-gradient(circle, #7500C0 0%, #9b20e8 20%, transparent 55%);
        background-size:
            120vw 120vw,
            100vw 100vw,
            140vw 140vw,
            110vw 110vw,
            130vw 130vw,
            105vw 105vw,
            125vw 125vw,
            115vw 115vw;
        background-repeat: no-repeat;
        animation: psychedelic-move-mobile 15s infinite alternate ease-in-out;
    }

    .theme-psicodelia .profile-card {
        margin: 0 !important;
        width: 100% !important;
        border-radius: 20px 20px 0 0 !important; /* Only round top corners */
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
        box-shadow: none !important; /* Remove shadow on mobile so it sits flush */
    }
}

/* Force wrapper to be transparent */
html.theme-psicodelia .profile-wrapper {
    background: transparent !important;
    box-shadow: none !important;
}