/* ==========================================================
   3D ARTIST CARD SHOWCASE
========================================================== */

.card-showcase {
    position: relative;
    width: min(100%, 660px);
    height: 560px;
    margin-inline: auto;
    perspective: 1800px;
    perspective-origin: 50% 44%;
    isolation: isolate;
    user-select: none;
    touch-action: pan-y;
}

.showcase-scene {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    will-change: transform;
}

.showcase-scene::before {
    position: absolute;
    top: 7%;
    left: 50%;
    width: 82%;
    height: 70%;
    content: "";
    border-radius: 50%;
    background:
        radial-gradient(
            circle at center,
            rgba(255, 255, 255, .86) 0%,
            rgba(244, 217, 120, .28) 31%,
            rgba(212, 175, 55, .12) 52%,
            transparent 74%
        );
    filter: blur(38px);
    opacity: .92;
    transform: translateX(-50%) translateZ(-180px);
    pointer-events: none;
}

.showcase-light {
    position: absolute;
    top: -8%;
    left: 50%;
    width: 64%;
    height: 94%;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .28) 0%,
            rgba(255, 255, 255, .06) 48%,
            transparent 100%
        );
    clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%);
    filter: blur(16px);
    opacity: .72;
    transform: translateX(-50%) translateZ(-210px);
    pointer-events: none;
}

.showcase-ambient {
    position: absolute;
    border-radius: 50%;
    filter: blur(42px);
    pointer-events: none;
}

.ambient-1 {
    top: 4%;
    right: 8%;
    width: 170px;
    height: 170px;
    background: rgba(212, 175, 55, .22);
    transform: translateZ(-150px);
}

.ambient-2 {
    bottom: 12%;
    left: 2%;
    width: 220px;
    height: 220px;
    background: rgba(255, 255, 255, .38);
    transform: translateZ(-170px);
}

.ambient-3 {
    right: 16%;
    bottom: 4%;
    width: 140px;
    height: 140px;
    background: rgba(180, 139, 31, .2);
    transform: translateZ(-120px);
}


/* ==========================================================
   CARD BASE
========================================================== */

.artist-card {
    --card-width: 224px;
    --card-height: 318px;
    --card-radius: 18px;
    --card-x: 0px;
    --card-y: 0px;
    --card-z: 0px;
    --card-rotate-x: 0deg;
    --card-rotate-y: 0deg;
    --card-rotate-z: 0deg;
    --card-scale: 1;
    --card-blur: 0px;
    --float-distance: 10px;
    --float-duration: 6s;
    --float-delay: 0s;

    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--card-width);
    height: var(--card-height);
    border-radius: var(--card-radius);
    transform:
        translate3d(
            calc(-50% + var(--card-x)),
            calc(-50% + var(--card-y)),
            var(--card-z)
        )
        rotateX(var(--card-rotate-x))
        rotateY(var(--card-rotate-y))
        rotateZ(var(--card-rotate-z))
        scale(var(--card-scale));
    transform-style: preserve-3d;
    filter: blur(var(--card-blur));
    transition:
        filter .5s ease,
        opacity .5s ease,
        transform .9s cubic-bezier(.2, .75, .2, 1);
    will-change: transform;
    cursor: pointer;
    animation:
        showcaseFloat var(--float-duration) ease-in-out var(--float-delay) infinite alternate;
}

.artist-card::before {
    position: absolute;
    inset: -1px;
    z-index: 2;
    content: "";
    border: 1px solid rgba(255, 255, 255, .48);
    border-radius: inherit;
    pointer-events: none;
}

.artist-card::after {
    position: absolute;
    inset: 6px;
    z-index: 3;
    content: "";
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: calc(var(--card-radius) - 6px);
    pointer-events: none;
}

.artist-card.portrait {
    --card-width: 224px;
    --card-height: 318px;
}

.artist-card.landscape {
    --card-width: 286px;
    --card-height: 194px;
}

.artist-card.square {
    --card-width: 226px;
    --card-height: 226px;
}

.card-inner {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(.18, .8, .22, 1);
    will-change: transform;
}

.artist-card.is-flipped .card-inner {
    transform: rotateY(180deg);
}

.card-front,
.card-back {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    background: #111;
    box-shadow:
        0 30px 55px rgba(0, 0, 0, .24),
        0 8px 18px rgba(0, 0, 0, .14),
        inset 0 1px rgba(255, 255, 255, .18);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.card-back {
    transform: rotateY(180deg);
}

.card-front img,
.card-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.card-shadow {
    position: absolute;
    right: 7%;
    bottom: -15%;
    left: 7%;
    height: 17%;
    z-index: -2;
    border-radius: 50%;
    background: rgba(0, 0, 0, .38);
    filter: blur(16px);
    opacity: .72;
    transform: translateZ(-25px) rotateX(76deg);
    pointer-events: none;
}

.card-glare {
    position: absolute;
    inset: 0;
    z-index: 5;
    overflow: hidden;
    border-radius: inherit;
    opacity: var(--glare-opacity, 0);
    background:
        radial-gradient(
            circle at var(--glare-x, 50%) var(--glare-y, 50%),
            rgba(255, 255, 255, .68) 0%,
            rgba(255, 255, 255, .24) 13%,
            rgba(255, 255, 255, .07) 27%,
            transparent 56%
        );
    mix-blend-mode: screen;
    transition: opacity .25s ease;
    pointer-events: none;
}

.card-glare::after {
    position: absolute;
    inset: -35%;
    content: "";
    background:
        linear-gradient(
            112deg,
            transparent 33%,
            rgba(255, 255, 255, .22) 45%,
            rgba(255, 255, 255, .7) 50%,
            rgba(255, 255, 255, .15) 55%,
            transparent 67%
        );
    transform: translateX(-55%) rotate(4deg);
    transition: transform .85s cubic-bezier(.2, .7, .2, 1);
}

.artist-card:hover .card-glare::after {
    transform: translateX(55%) rotate(4deg);
}


/* ==========================================================
   CARD POSITIONS
========================================================== */

.card-center {
    --card-x: 0px;
    --card-y: -12px;
    --card-z: 180px;
    --card-rotate-x: -2deg;
    --card-rotate-y: -4deg;
    --card-rotate-z: -1deg;
    --card-scale: 1.08;
    --float-distance: 13px;
    --float-duration: 5.4s;
    z-index: 50;
}

.card-left {
    --card-x: -190px;
    --card-y: 50px;
    --card-z: 50px;
    --card-rotate-x: 3deg;
    --card-rotate-y: 22deg;
    --card-rotate-z: -7deg;
    --card-scale: .91;
    --float-distance: 9px;
    --float-duration: 6.8s;
    --float-delay: -.8s;
    z-index: 35;
}

.card-right {
    --card-x: 176px;
    --card-y: 60px;
    --card-z: 65px;
    --card-rotate-x: 3deg;
    --card-rotate-y: -23deg;
    --card-rotate-z: 8deg;
    --card-scale: .94;
    --float-distance: 11px;
    --float-duration: 6.3s;
    --float-delay: -1.7s;
    z-index: 36;
}

.card-back-left {
    --card-x: -130px;
    --card-y: -82px;
    --card-z: -70px;
    --card-rotate-x: 1deg;
    --card-rotate-y: 28deg;
    --card-rotate-z: -9deg;
    --card-scale: .76;
    --card-blur: 2.3px;
    --float-distance: 8px;
    --float-duration: 7.2s;
    --float-delay: -2.2s;
    z-index: 15;
    opacity: .76;
}

.card-back-right {
    --card-x: 132px;
    --card-y: -92px;
    --card-z: -82px;
    --card-rotate-x: 1deg;
    --card-rotate-y: -28deg;
    --card-rotate-z: 9deg;
    --card-scale: .74;
    --card-blur: 2.6px;
    --float-distance: 7px;
    --float-duration: 7.7s;
    --float-delay: -3.1s;
    z-index: 14;
    opacity: .72;
}

.artist-card:hover {
    --card-blur: 0px;
    z-index: 70;
    opacity: 1;
}

.card-center:hover {
    --card-scale: 1.12;
}

.card-left:hover,
.card-right:hover {
    --card-scale: .98;
}

.card-back-left:hover,
.card-back-right:hover {
    --card-scale: .84;
}


/* ==========================================================
   FLOATING DECORATION
========================================================== */

.floating-ring,
.floating-dot {
    position: absolute;
    pointer-events: none;
}

.floating-ring {
    border: 1px solid rgba(212, 175, 55, .4);
    border-radius: 50%;
    box-shadow:
        inset 0 0 18px rgba(212, 175, 55, .08),
        0 0 22px rgba(212, 175, 55, .08);
}

.ring-1 {
    top: 10%;
    right: 4%;
    width: 74px;
    height: 74px;
    transform: translateZ(-20px) rotateX(68deg);
    animation: ringDrift 8s ease-in-out infinite alternate;
}

.ring-2 {
    bottom: 19%;
    left: 4%;
    width: 52px;
    height: 52px;
    transform: translateZ(60px) rotateX(72deg);
    animation: ringDrift 6.5s ease-in-out -2s infinite alternate-reverse;
}

.floating-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow:
        0 0 12px rgba(212, 175, 55, .8),
        0 0 24px rgba(212, 175, 55, .45);
}

.dot-1 {
    top: 18%;
    left: 14%;
    transform: translateZ(85px);
    animation: dotPulse 3.4s ease-in-out infinite;
}

.dot-2 {
    top: 29%;
    right: 7%;
    width: 4px;
    height: 4px;
    transform: translateZ(-10px);
    animation: dotPulse 4.1s ease-in-out -1.3s infinite;
}

.dot-3 {
    right: 18%;
    bottom: 12%;
    width: 8px;
    height: 8px;
    transform: translateZ(130px);
    animation: dotPulse 3.8s ease-in-out -2.1s infinite;
}


/* ==========================================================
   INTERACTION STATES
========================================================== */

.card-showcase.is-interacting .artist-card {
    transition:
        filter .35s ease,
        opacity .35s ease,
        transform .18s linear;
}

.card-showcase.is-interacting .card-glare {
    transition: opacity .1s linear;
}

.card-showcase.has-active-card .artist-card:not(.is-active) {
    opacity: .36;
    filter: blur(4px) saturate(.72);
}

.card-showcase.has-active-card .artist-card.is-active {
    z-index: 90;
    opacity: 1;
    filter: none;
}

.artist-card:focus-visible {
    outline: 3px solid rgba(212, 175, 55, .72);
    outline-offset: 7px;
}


/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes showcaseFloat {
    0% {
        margin-top: calc(var(--float-distance) * -.55);
    }

    100% {
        margin-top: calc(var(--float-distance) * .55);
    }
}

@keyframes ringDrift {
    0% {
        margin-top: -7px;
        margin-left: -5px;
        opacity: .32;
    }

    100% {
        margin-top: 8px;
        margin-left: 7px;
        opacity: .7;
    }
}

@keyframes dotPulse {
    0%,
    100% {
        opacity: .32;
        scale: .78;
    }

    50% {
        opacity: 1;
        scale: 1.18;
    }
}


/* ==========================================================
   RESPONSIVE SHOWCASE
========================================================== */

@media (max-width: 1199.98px) {
    .card-showcase {
        width: min(100%, 600px);
        height: 500px;
    }

    .artist-card {
        --card-width: 202px;
        --card-height: 287px;
    }

    .artist-card.portrait {
        --card-width: 202px;
        --card-height: 287px;
    }

    .artist-card.landscape {
        --card-width: 255px;
        --card-height: 173px;
    }

    .artist-card.square {
        --card-width: 205px;
        --card-height: 205px;
    }

    .card-left {
        --card-x: -168px;
    }

    .card-right {
        --card-x: 158px;
    }

    .card-back-left {
        --card-x: -118px;
    }

    .card-back-right {
        --card-x: 120px;
    }
}

@media (max-width: 991.98px) {
    .card-showcase {
        width: min(100%, 560px);
        height: 455px;
    }

    .card-center {
        --card-y: -2px;
    }

    .card-left {
        --card-x: -158px;
        --card-y: 48px;
    }

    .card-right {
        --card-x: 150px;
        --card-y: 54px;
    }

    .card-back-left {
        --card-x: -112px;
        --card-y: -68px;
    }

    .card-back-right {
        --card-x: 112px;
        --card-y: -72px;
    }
}

@media (max-width: 767.98px) {
    .card-showcase {
        width: 100%;
        height: 380px;
        transform: scale(.9);
        transform-origin: center center;
    }

    .artist-card.portrait {
        --card-width: 176px;
        --card-height: 250px;
    }

    .artist-card.landscape {
        --card-width: 220px;
        --card-height: 149px;
    }

    .artist-card.square {
        --card-width: 177px;
        --card-height: 177px;
    }

    .card-center {
        --card-y: -2px;
        --card-z: 150px;
    }

    .card-left {
        --card-x: -136px;
        --card-y: 40px;
        --card-z: 35px;
    }

    .card-right {
        --card-x: 130px;
        --card-y: 44px;
        --card-z: 40px;
    }

    .card-back-left {
        --card-x: -92px;
        --card-y: -58px;
    }

    .card-back-right {
        --card-x: 96px;
        --card-y: -62px;
    }
}

@media (max-width: 575.98px) {
    .card-showcase {
        height: 330px;
        transform: scale(.78);
    }

    .card-left {
        --card-x: -128px;
    }

    .card-right {
        --card-x: 122px;
    }
}

@media (hover: none), (pointer: coarse) {
    .artist-card {
        cursor: default;
    }

    .artist-card:hover {
        opacity: initial;
    }

    .card-back-left:hover,
    .card-back-right:hover {
        --card-blur: 2.3px;
    }

    .card-center:hover {
        --card-scale: 1.08;
    }

    .card-left:hover {
        --card-scale: .91;
    }

    .card-right:hover {
        --card-scale: .94;
    }
}

@media (prefers-reduced-motion: reduce) {
    .artist-card,
    .floating-ring,
    .floating-dot {
        animation: none !important;
    }

    .showcase-scene,
    .artist-card,
    .card-inner,
    .card-glare,
    .card-glare::after {
        transition: none !important;
    }
}