:root {
    --color-background: #1a1a1a;
}

body {
    margin: 0;
    display: grid;
    place-items: center;
    min-height: 100vh;
    background: #0e0e0e;
}

.card-wrap {
    display: flex;
    flex-direction: column;
    align-self: center;
    align-items: center;
    user-select: none;
    margin: 1rem 0;
}


.card {
    --mx: 50%;
    --my: 50%;
    --tx: 0;
    --ty: 0;
    --lift: 0px;

    width: auto;
    height: 500px;
    aspect-ratio: 6 / 9;
    border-radius: 6px;

    position: relative;
    isolation: isolate;
    transform-style: preserve-3d;
    transform:
        perspective(900px) rotateX(calc(var(--ty) * 1deg)) rotateY(calc(var(--tx) * 1deg)) translateZ(var(--lift));
    background: linear-gradient(155deg, hsl(35, 8%, 18%), hsl(35, 10%, 20%));
}

.card-frame {
    position: absolute;
    inset: 2px;
    display: flex;
    overflow: hidden;
    border-radius: 2px;
}

.portrait {
    object-fit: cover;
    height: 110%;
    width: 100%;
    filter: brightness(0.95);
}

.holo-band {
    background-image: linear-gradient(136deg,
            transparent 49%,
            rgba(252, 167, 167, 1) 52%,
            rgba(242, 220, 48, 1) 55%,
            rgba(73, 235, 70, 1) 58%,
            rgba(100, 192, 250, 1) 61%,
            rgba(186, 94, 219, 1) 65%,
            transparent 71%);
    background-size: 120% 638%;
    background-position: var(--mx) calc(var(--my) + 20%);
    mix-blend-mode: soft-light;
}

.holo-band-2 {
    background-image: linear-gradient(125deg,
            transparent 8%,
            hsla(0, 0%, 100%, 0.32) 26%,
            hsla(190, 50%, 80%, 0.28) 38%,
            transparent 68%);
    background-size: 100% 300%;
    background-position: var(--my) var(--mx);
    mix-blend-mode: soft-light;
    filter: brightness(2.95) contrast(2.55);
}

.holo-silver {
    background: conic-gradient(from calc(var(--my) * 1.6deg),
            hsla(220, 8%, 88%, 0.22) 20%,
            hsla(0, 0%, 100%, 0.11) 40%,
            hsla(220, 8%, 88%, 0.18) 60%,
            hsla(0, 0%, 100%, 0.08) 80%,
            hsla(220, 8%, 88%, 0.22)) 100%;
    mix-blend-mode: overlay;
}

.holo,
.holo-band,
.holo-band-2,
.holo-silver {
    opacity: 0;
    transition: opacity 320ms ease;
}

.holo {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
}

.card:hover .holo-band {
    opacity: 0.15;
}

.card:hover .holo-band-2 {
    opacity: 1;
}

.card:hover .holo-silver {
    opacity: 0.25;
}

.ttv-link {
    color: #E3DB7D;
    margin-top: 2.5rem;
    opacity: 1;
    transition: opacity 300ms ease-out;
}

.ttv-link:hover {
    opacity: 0.5;
}