:root {
    --pointer-x: 50%;
    --pointer-y: 50%;
    --pointer-from-center: 0;
    --pointer-from-top: 0.5;
    --pointer-from-left: 0.5;
    --card-opacity: 0;
    --rotate-x: 0deg;
    --rotate-y: 0deg;
    --background-x: 50%;
    --background-y: 50%;
    --grain: none;
    --icon: none;
    --behind-gradient: none;
    --behind-glow-color: rgba(125, 190, 255, 0.67);
    --behind-glow-size: 25%;
    --inner-gradient: none;
    --sunpillar-1: hsl(2, 100%, 73%);
    --sunpillar-2: hsl(53, 100%, 69%);
    --sunpillar-3: hsl(93, 100%, 69%);
    --sunpillar-4: hsl(176, 100%, 76%);
    --sunpillar-5: hsl(228, 100%, 74%);
    --sunpillar-6: hsl(283, 100%, 73%);
    --sunpillar-clr-1: var(--sunpillar-1);
    --sunpillar-clr-2: var(--sunpillar-2);
    --sunpillar-clr-3: var(--sunpillar-3);
    --sunpillar-clr-4: var(--sunpillar-4);
    --sunpillar-clr-5: var(--sunpillar-5);
    --sunpillar-clr-6: var(--sunpillar-6);
    --card-radius: 30px;
}

.pc-card-wrapper {
    perspective: 500px;
    transform: translate3d(0, 0, 0.1px);
    position: relative;
    touch-action: none;
}

.pc-behind {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle at var(--pointer-x) var(--pointer-y),
            var(--behind-glow-color) 0%,
            transparent var(--behind-glow-size));
    filter: blur(50px) saturate(1.1);
    opacity: calc(1 * var(--card-opacity));
    transition: opacity 200ms ease;
}

.pc-card-wrapper:hover,
.pc-card-wrapper.active {
    --card-opacity: 1;
}

.pc-card {
    aspect-ratio: 112 / 195;
    height: 80vh;
    width: auto;
    display: grid;
    border-radius: var(--card-radius);
    position: relative;
    background-blend-mode: color-dodge, normal, normal, normal;
    animation: glow-bg 12s linear infinite;
    box-shadow: rgba(0, 0, 0, 0.8) calc((var(--pointer-from-left) * 10px) - 3px) calc((var(--pointer-from-top) * 20px) - 6px) 20px -5px;
    transition: transform 1s ease;
    transform: translateZ(0) rotateX(0deg) rotateY(0deg);
    background: rgba(0, 0, 0, 0.9);
    backface-visibility: hidden;
    overflow: hidden;
}

.pc-card:hover,
.pc-card.active {
    transition: none;
    transform: translateZ(0) rotateX(var(--rotate-y)) rotateY(var(--rotate-x));
}

.pc-card-shell.entering .pc-card {
    transition: transform 180ms ease-out;
}

.pc-card-shell {
    position: relative;
    z-index: 1;
}

.pc-card * {
    display: grid;
    grid-area: 1/-1;
    border-radius: var(--card-radius);
    pointer-events: none;
}

.pc-user-info,
.pc-user-info * {
    display: revert;
    grid-area: revert;
    border-radius: revert;
    pointer-events: auto;
}

.pc-inside {
    height: 100%;
    width: 100%;
    inset: 0;
    position: absolute;
    background-image: var(--inner-gradient);
    background-color: rgba(0, 0, 0, 0.9);
    transform: none;
}

.pc-shine {
    mask-image: var(--icon);
    mask-mode: luminance;
    mask-repeat: repeat;
    mask-size: 150%;
    mask-position: top calc(200% - (var(--background-y) * 5)) left calc(100% - var(--background-x));
    transition: filter 0.8s ease;
    filter: brightness(0.66) contrast(1.33) saturate(0.33) opacity(0.5);
    animation: holo-bg 18s linear infinite;
    animation-play-state: running;
    mix-blend-mode: color-dodge;
}

.pc-shine,
.pc-shine::after {
    --space: 5%;
    --angle: -45deg;
    transform: translate3d(0, 0, 1px);
    overflow: hidden;
    z-index: 3;
    background: transparent;
    background-size: cover;
    background-position: center;
    background-image:
        repeating-linear-gradient(0deg,
            var(--sunpillar-clr-1) calc(var(--space) * 1),
            var(--sunpillar-clr-2) calc(var(--space) * 2),
            var(--sunpillar-clr-3) calc(var(--space) * 3),
            var(--sunpillar-clr-4) calc(var(--space) * 4),
            var(--sunpillar-clr-5) calc(var(--space) * 5),
            var(--sunpillar-clr-6) calc(var(--space) * 6),
            var(--sunpillar-clr-1) calc(var(--space) * 7)),
        repeating-linear-gradient(var(--angle),
            #0e152e 0%,
            hsl(180, 10%, 60%) 3.8%,
            hsl(180, 29%, 66%) 4.5%,
            hsl(180, 10%, 60%) 5.2%,
            #0e152e 10%,
            #0e152e 12%),
        radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
            hsla(0, 0%, 0%, 0.1) 12%,
            hsla(0, 0%, 0%, 0.15) 20%,
            hsla(0, 0%, 0%, 0.25) 120%);
    background-position:
        0 var(--background-y),
        var(--background-x) var(--background-y),
        center;
    background-blend-mode: color, hard-light;
    background-size:
        500% 500%,
        300% 300%,
        200% 200%;
    background-repeat: repeat;
}

.pc-shine::before,
.pc-shine::after {
    content: '';
    background-position: center;
    background-size: cover;
    grid-area: 1/1;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.pc-card:hover .pc-shine,
.pc-card.active .pc-shine {
    filter: brightness(0.65) contrast(1.2) saturate(0.3);
    animation-play-state: paused;
}

.pc-card:hover .pc-shine::before,
.pc-card.active .pc-shine::before,
.pc-card:hover .pc-shine::after,
.pc-card.active .pc-shine::after {
    opacity: 1;
}

.pc-shine::before {
    background-image:
        linear-gradient(45deg,
            var(--sunpillar-4),
            var(--sunpillar-5),
            var(--sunpillar-6),
            var(--sunpillar-1),
            var(--sunpillar-2),
            var(--sunpillar-3)),
        radial-gradient(circle at var(--pointer-x) var(--pointer-y), hsl(0, 0%, 70%) 0%, hsla(0, 0%, 30%, 0.2) 90%),
        var(--grain);
    background-size:
        250% 250%,
        100% 100%,
        220px 220px;
    background-position:
        var(--pointer-x) var(--pointer-y),
        center,
        calc(var(--pointer-x) * 0.01) calc(var(--pointer-y) * 0.01);
    background-blend-mode: color-dodge;
    filter: brightness(calc(2 - var(--pointer-from-center))) contrast(calc(var(--pointer-from-center) + 2)) saturate(calc(0.5 + var(--pointer-from-center)));
    mix-blend-mode: luminosity;
}

.pc-shine::after {
    background-position:
        0 var(--background-y),
        calc(var(--background-x) * 0.4) calc(var(--background-y) * 0.5),
        center;
    background-size:
        200% 300%,
        700% 700%,
        100% 100%;
    mix-blend-mode: difference;
    filter: brightness(0.8) contrast(1.5);
}

.pc-glare {
    transform: translate3d(0, 0, 1.1px);
    overflow: hidden;
    background-image: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
            hsl(248, 25%, 80%) 12%,
            hsla(207, 40%, 30%, 0.8) 90%);
    mix-blend-mode: overlay;
    filter: brightness(0.8) contrast(1.2);
    z-index: 4;
}

.pc-avatar-content {
    mix-blend-mode: luminosity;
    overflow: visible;
    transform: translateZ(2);
    backface-visibility: hidden;
}

.pc-avatar-content .avatar {
    width: 100%;
    position: absolute;
    left: 50%;
    transform-origin: 50% 50%;
    transform: translateX(calc(-50% + (var(--pointer-from-left) - 0.5) * 6px)) translateZ(0) scaleY(calc(1 + (var(--pointer-from-top) - 0.5) * 0.02)) scaleX(calc(1 + (var(--pointer-from-left) - 0.5) * 0.01));
    top: 0;
    backface-visibility: hidden;
    will-change: transform;
    transition: transform 120ms ease-out, opacity 300ms ease-out;
    object-fit: cover;
    object-position: center;
    opacity: 1;
    height: 100%;
}

.pc-avatar-content .avatar-hover {
    width: 100%;
    position: absolute;
    left: 50%;
    transform-origin: 50% 50%;
    transform: translateX(calc(-50% + (var(--pointer-from-left) - 0.5) * 6px)) translateZ(0) scaleY(calc(1 + (var(--pointer-from-top) - 0.5) * 0.02)) scaleX(calc(1 + (var(--pointer-from-left) - 0.5) * 0.01));
    top: 0;
    backface-visibility: hidden;
    will-change: transform;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: transform 120ms ease-out, opacity 300ms ease-out;
    height: 100%;
}

.pc-card:hover .avatar,
.pc-card.active .avatar {
    opacity: 0;
}

.pc-card:hover .avatar-hover,
.pc-card.active .avatar-hover {
    opacity: 1;
}

.pc-avatar-content::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    backdrop-filter: none;
    pointer-events: none;
}

.pc-user-info {
    position: absolute;
    --ui-inset: 20px;
    --ui-radius-bias: 6px;
    bottom: var(--ui-inset);
    left: var(--ui-inset);
    right: var(--ui-inset);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: calc(max(0px, var(--card-radius) - var(--ui-inset) + var(--ui-radius-bias)));
    padding: 12px 14px;
    pointer-events: auto;
}

.pc-user-details {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pc-mini-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.pc-mini-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.pc-user-text {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
}

.pc-handle {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1;
}

.pc-status {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1;
}

.pc-contact-btn {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    background: transparent;
    z-index: 100;
}

.pc-contact-btn:hover {
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

.pc-content:not(.pc-avatar-content) {
    max-height: 100%;
    overflow: hidden;
    text-align: center;
    position: relative;
    transform: translate3d(calc(var(--pointer-from-left) * -6px + 3px),
            calc(var(--pointer-from-top) * -6px + 3px),
            0.1px);
    z-index: 5;
    mix-blend-mode: luminosity;
}

.pc-details {
    width: 100%;
    position: absolute;
    top: 3em;
    display: flex;
    flex-direction: column;
}

.pc-details h3 {
    font-weight: 600;
    margin: 0;
    font-size: min(5svh, 3em);
    margin: 0;
    background-image: linear-gradient(to bottom, #fff, #6f6fbe);
    background-size: 1em 1.5em;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}

.pc-details p {
    font-weight: 600;
    position: relative;
    top: -12px;
    white-space: nowrap;
    font-size: 16px;
    margin: 0 auto;
    width: min-content;
    background-image: linear-gradient(to bottom, #fff, #4a4ac0);
    background-size: 1em 1.5em;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}

@keyframes glow-bg {
    0% {
        --bgrotate: 0deg;
    }

    100% {
        --bgrotate: 360deg;
    }
}

@keyframes holo-bg {
    0% {
        background-position:
            0 var(--background-y),
            0 0,
            center;
    }

    100% {
        background-position:
            0 var(--background-y),
            90% 90%,
            center;
    }
}

@media (max-width: 768px) {
    .pc-card {
        height: 70svh;
    }

    .pc-details {
        top: 2em;
    }

    .pc-details h3 {
        font-size: min(4svh, 2.5em);
    }

    .pc-details p {
        font-size: 14px;
    }

    .pc-user-info {
        --ui-inset: 15px;
        padding: 10px 12px;
    }

    .pc-mini-avatar {
        width: 28px;
        height: 28px;
    }

    .pc-user-details {
        gap: 10px;
    }

    .pc-handle {
        font-size: 13px;
    }

    .pc-status {
        font-size: 10px;
    }

    .pc-contact-btn {
        padding: 6px 12px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .pc-card {
        max-height: 60svh;
    }

    .pc-details {
        top: 1.5em;
    }

    .pc-details h3 {
        font-size: min(3.5svh, 2em);
    }

    .pc-details p {
        font-size: 12px;
        top: -8px;
    }

    .pc-user-info {
        --ui-inset: 12px;
        padding: 8px 10px;
    }

    .pc-mini-avatar {
        width: 24px;
        height: 24px;
    }

    .pc-user-details {
        gap: 8px;
    }

    .pc-handle {
        font-size: 12px;
    }

    .pc-status {
        font-size: 9px;
    }

    .pc-contact-btn {
        padding: 5px 10px;
        font-size: 10px;
        border-radius: 50px;
    }
}

@media (max-width: 320px) {
    .pc-card {
        max-height: 55svh;
    }

    .pc-details h3 {
        font-size: min(3svh, 1.5em);
    }

    .pc-details p {
        font-size: 11px;
    }

    .pc-user-info {
        padding: 6px 8px;
    }

    .pc-mini-avatar {
        width: 20px;
        height: 20px;
    }

    .pc-user-details {
        gap: 6px;
    }

    .pc-handle {
        font-size: 11px;
    }

    .pc-status {
        font-size: 8px;
    }

    .pc-contact-btn {
        padding: 4px 8px;
        font-size: 9px;
        border-radius: 50px;
    }
}