:root {
    --artist-color: #f7931e;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #0d1117;
    color: #e5e7eb;
}

.standard #ad-banner { display: block; }
.standard #exclusive-content { display: none; }
.premium #ad-banner { display: none; }
.premium #exclusive-content { display: block; }

.artist-hero-bg {
    background-size: cover;
    background-position: center 25%;
    position: relative;
    z-index: 0;
}

.standard .artist-hero-bg {
    background-image: url('/public/assets/mv/tarima.webp');
    background-position: center center;
    background-size: cover;
}

.hero-stage-animation {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.hero-stage-smoke {
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 10%;
    height: 44%;
    border-radius: 999px;
    background: radial-gradient(ellipse at center, rgba(218, 226, 236, 0.36) 0%, rgba(190, 198, 208, 0.16) 36%, rgba(160, 170, 180, 0) 74%);
    filter: blur(15px);
    mix-blend-mode: screen;
    animation: hero-smoke-drift 9.5s ease-in-out infinite alternate;
}

.hero-stage-smoke::before,
.hero-stage-smoke::after {
    content: '';
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.hero-stage-smoke::before {
    left: -2%;
    right: 10%;
    bottom: -8%;
    height: 86%;
    background: radial-gradient(ellipse at center, rgba(230, 238, 246, 0.26) 0%, rgba(210, 218, 226, 0.12) 34%, rgba(170, 180, 190, 0) 72%);
    filter: blur(18px);
    animation: hero-smoke-drift-b 12.8s ease-in-out infinite alternate;
}

.hero-stage-smoke::after {
    left: 16%;
    right: -2%;
    bottom: -12%;
    height: 92%;
    background: radial-gradient(ellipse at center, rgba(215, 224, 234, 0.24) 0%, rgba(196, 205, 214, 0.11) 32%, rgba(170, 180, 190, 0) 70%);
    filter: blur(20px);
    animation: hero-smoke-drift-c 10.6s ease-in-out infinite alternate-reverse;
}

.hero-stage-lights {
    position: absolute;
    inset: 0;
}

.hero-stage-lights::before,
.hero-stage-lights::after {
    content: '';
    position: absolute;
    inset: -8% 0 0;
}

.hero-stage-lights::before {
    background:
        radial-gradient(circle at 12% 26%, rgba(56, 189, 248, 0.42) 0%, rgba(56, 189, 248, 0) 36%),
        radial-gradient(circle at 34% 20%, rgba(250, 204, 21, 0.34) 0%, rgba(250, 204, 21, 0) 38%),
        radial-gradient(circle at 52% 22%, rgba(168, 85, 247, 0.38) 0%, rgba(168, 85, 247, 0) 40%),
        radial-gradient(circle at 72% 24%, rgba(236, 72, 153, 0.30) 0%, rgba(236, 72, 153, 0) 38%),
        radial-gradient(circle at 90% 28%, rgba(59, 130, 246, 0.36) 0%, rgba(59, 130, 246, 0) 36%);
    mix-blend-mode: screen;
    animation: hero-ambient-lights 7.2s ease-in-out infinite alternate;
}

.hero-stage-lights::after {
    width: 120%;
    height: 170%;
    top: -62%;
    left: -8%;
    right: auto;
    bottom: auto;
    background:
        conic-gradient(from 192deg at 26% 2%, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0.30) 11deg, rgba(255, 255, 255, 0) 24deg),
        conic-gradient(from 174deg at 50% 2%, rgba(255, 255, 255, 0) 0deg, rgba(56, 189, 248, 0.36) 11deg, rgba(255, 255, 255, 0) 22deg),
        conic-gradient(from 160deg at 74% 2%, rgba(255, 255, 255, 0) 0deg, rgba(250, 204, 21, 0.30) 10deg, rgba(255, 255, 255, 0) 22deg);
    mix-blend-mode: screen;
    opacity: 0.85;
    animation: hero-beam-sweep 5.4s ease-in-out infinite;
}

.hero-stage-lights {
    animation: hero-strobe 2.4s linear infinite;
}

.hero-stage-crowd {
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: auto;
    z-index: 1;
    opacity: 0.96;
    transform-origin: center bottom;
    filter: drop-shadow(0 -3px 10px rgba(0, 0, 0, 0.7));
    animation: hero-crowd-sway 3.8s ease-in-out infinite;
}

.gradient-overlay {
    z-index: 2;
}

.hero-content {
    z-index: 3;
}

.artist-name-standard {
    color: #f3f4f6;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
}

.artist-name-premium {
    color: #fff4c1;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7), 0 0 18px rgba(251, 191, 36, 0.35);
}

.featured-videos-track {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.28) rgba(255, 255, 255, 0.08);
}

@keyframes hero-ambient-lights {
    0% { opacity: 0.72; filter: saturate(1.08) hue-rotate(-8deg); }
    35% { opacity: 1; filter: saturate(1.32) hue-rotate(10deg); }
    70% { opacity: 0.78; filter: saturate(1.2) hue-rotate(22deg); }
    100% { opacity: 0.88; filter: saturate(1.14) hue-rotate(-14deg); }
}

@keyframes hero-beam-sweep {
    0% { transform: rotate(-12deg) translateX(-4%); opacity: 0.65; }
    25% { transform: rotate(-4deg) translateX(0%); opacity: 0.95; }
    52% { transform: rotate(7deg) translateX(2%); opacity: 0.72; }
    76% { transform: rotate(-8deg) translateX(-2%); opacity: 0.92; }
    100% { transform: rotate(10deg) translateX(3%); opacity: 0.66; }
}

@keyframes hero-smoke-drift {
    0% { transform: translate3d(-14px, 12px, 0) scale(0.98); opacity: 0.28; }
    50% { transform: translate3d(8px, -10px, 0) scale(1.12); opacity: 0.52; }
    100% { transform: translate3d(18px, -18px, 0) scale(1.2); opacity: 0.34; }
}

@keyframes hero-smoke-drift-b {
    0% { transform: translate3d(8px, 10px, 0) scale(0.98); opacity: 0.18; }
    50% { transform: translate3d(-6px, -8px, 0) scale(1.08); opacity: 0.34; }
    100% { transform: translate3d(12px, -16px, 0) scale(1.16); opacity: 0.22; }
}

@keyframes hero-smoke-drift-c {
    0% { transform: translate3d(-4px, 12px, 0) scale(1); opacity: 0.16; }
    50% { transform: translate3d(10px, -6px, 0) scale(1.1); opacity: 0.3; }
    100% { transform: translate3d(-14px, -20px, 0) scale(1.2); opacity: 0.2; }
}

@keyframes hero-crowd-sway {
    0%, 100% { transform: translateX(0) scaleY(1); }
    25% { transform: translateX(-2px) scaleY(1.016); }
    50% { transform: translateX(2px) scaleY(0.99); }
    75% { transform: translateX(-1px) scaleY(1.01); }
}

@keyframes hero-strobe {
    0%, 16%, 34%, 57%, 100% { filter: brightness(1) saturate(1); }
    18% { filter: brightness(1.12) saturate(1.15); }
    20% { filter: brightness(0.98) saturate(0.96); }
    36% { filter: brightness(1.14) saturate(1.2); }
    38% { filter: brightness(1); }
    59% { filter: brightness(1.1) saturate(1.1); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-stage-smoke,
    .hero-stage-lights::before,
    .hero-stage-lights::after,
    .hero-stage-crowd {
        animation: none !important;
    }
}

.gradient-overlay {
    background: linear-gradient(to top, #0d1117 0%, rgba(13, 17, 23, 0.9) 30%, rgba(13, 17, 23, 0.5) 100%);
}

.standard .gradient-overlay {
    background: linear-gradient(to top, rgba(13, 17, 23, 0.62) 0%, rgba(13, 17, 23, 0.42) 34%, rgba(13, 17, 23, 0.24) 100%);
}

.premium-feature {
    border: 2px solid var(--artist-color);
    box-shadow: 0 0 20px rgba(247, 147, 30, 0.3);
}

.custom-scrollbar::-webkit-scrollbar {
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    border-radius: 0.5rem;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.header-logo {
    height: 32px;
    width: auto;
}

.share-btn-animate {
    animation: share-pulse 1s ease-in-out 0s 1;
}

@keyframes share-pulse {
    0% { transform: translateY(0) scale(1); box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
    40% { transform: translateY(-6px) scale(1.02); box-shadow: 0 12px 28px rgba(0,0,0,0.35); }
    100% { transform: translateY(0) scale(1); box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
}

.share-btn-anim-loop {
    animation: share-breath 2.5s ease-in-out infinite;
}

@keyframes share-breath {
    0%,100% { box-shadow: 0 10px 30px rgba(0,0,0,0.15); transform: translateY(0); }
    50% { box-shadow: 0 18px 40px rgba(0,0,0,0.22); transform: translateY(-3px); }
}

.img-modal { display: none; z-index: 9999; }
.img-modal.active { display: flex; }
.img-modal .modal-img { max-width: 95vw; max-height: 85vh; object-fit: contain; border-radius: 8px; }

#imgModalClose { z-index: 10000; }

.genre-tag {
    cursor: pointer;
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border-radius: 6px;
    transition: background-color .12s ease, transform .08s ease;
    color: #fbbf24;
}

.genre-tag::before { content: '#'; margin-right: 0.35rem; color: #f59e0b; font-weight: 800; }

.genre-tag:hover,
.genre-tag:focus {
    text-decoration: underline;
    background: rgba(255,255,255,0.06);
    transform: translateY(-1px);
    outline: none;
}

.genre-tag:focus { box-shadow: 0 0 0 4px rgba(247,147,30,0.12); }

.genre-sep { color: rgba(251,191,36,0.9); margin: 0 0.4rem; }

.has-tooltip { position: relative; display: inline-flex; }

.has-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(100% + 8px);
    background: rgba(17,24,39,0.98);
    color: #fff;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease, transform .12s ease;
    z-index: 1200;
}

/* Events modal cards */
.event-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.95) 0%, rgba(10, 14, 22, 0.98) 100%);
    border-color: rgba(71, 85, 105, 0.6) !important;
    box-shadow: 0 14px 28px rgba(2, 6, 23, 0.45);
}

.event-main {
    min-width: 0;
}

.event-flyer-side {
    width: 100%;
}

.event-flyer-frame {
    width: min(100%, 230px);
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 2 / 3;
    background: rgba(2, 6, 23, 0.96);
    border: 0;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.4);
}

.event-flyer-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    background: rgba(2, 6, 23, 0.98);
}

.event-date {
    text-transform: capitalize;
    line-height: 1.45;
}

.event-title {
    line-height: 1.25;
}

@media (min-width: 768px) {
    .event-card {
        grid-template-columns: minmax(0, 1fr) 230px;
        align-items: start;
    }

    .event-flyer-side {
        display: flex;
        justify-content: flex-end;
    }

    .event-flyer-frame {
        width: 230px;
    }
}

.has-tooltip:hover::after,
.has-tooltip:focus::after { opacity: 1; }

#artist-bio { line-height: 1.6; }
#artist-bio p { margin: 0 0 1rem 0; text-indent: 1.2rem; }

.premium-gallery-cta {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    border: 1px solid rgba(251, 191, 36, 0.5);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.34) 36%, rgba(180, 83, 9, 0.22) 100%);
    color: #fffbeb;
    box-shadow: 0 14px 30px rgba(245, 158, 11, 0.18);
}

.premium-gallery-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(245, 158, 11, 0.25);
    border-color: rgba(253, 224, 71, 0.75);
}

.premium-gallery-cta__icons {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(254, 243, 199, 0.95);
}

.premium-gallery-cta__title {
    display: block;
    font-size: 1.05rem;
    line-height: 1.2;
    font-weight: 800;
}

.gallery-main-frame {
    width: 100%;
    height: min(60vh, 560px);
    min-height: 330px;
    max-height: 560px;
}

.gallery-main-caption {
    min-height: 3.2em;
    line-height: 1.6;
}

.internal-artist-link {
    color: var(--color-internal, #f97316);
    font-weight: 700;
    text-decoration: none;
    transition: transform .12s ease, opacity .12s ease;
}

.internal-artist-link:hover { text-decoration: underline; transform: translateY(-2px); }

.external-artist-link {
    color: var(--color-external, #facc15);
    font-weight: 600;
    text-decoration: underline;
    display: inline-flex;
    align-items: center;
}

.external-artist-link:hover { opacity: 0.9; transform: translateY(-1px); }

.external-link-icon { margin-left: 0.28rem; font-size: 0.95em; line-height: 1; }

.artist-socials {
    font-size: 15px;
    color: #e5e7eb;
    opacity: 0.95;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.artist-socials-label { font-weight: 700; font-size: 15px; }

.artist-social-link {
    margin-right: 8px;
    text-decoration: none;
    color: inherit;
    display: inline-flex;
    align-items: center;
}

.artist-social-link svg {
    width: 18px;
    height: 18px;
}

.artist-social-link--spotify {
    color: #86efac;
}

.album-title-truncate { max-height: 1.6rem; line-height: 1.6rem; }

.member-link-inline { display: inline; }

.member-link-svg {
    vertical-align: middle;
    opacity: 0.9;
    color: #f59e0b;
}

.share-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #111;
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
    z-index: 9999;
    font-weight: 600;
}