@import "../base.css";
@import "./heroicc-card-details.css";

@layer heroicc.core {
    @property --card-pointer-x {
        syntax: "<percentage>";
        inherits: true;
        initial-value: 50%;
    }

    @property --card-pointer-y {
        syntax: "<percentage>";
        inherits: true;
        initial-value: 50%;
    }

    @property --card-glare-opacity {
        syntax: "<number>";
        inherits: true;
        initial-value: 100;
    }

    @property --card-rotate-percent-x {
        syntax: "<number>";
        inherits: true;
        initial-value: 0;
    }

    @property --card-rotate-percent-y {
        syntax: "<number>";
        inherits: true;
        initial-value: 0;
    }

    @property --card-rotate-percent-z {
        syntax: "<number>";
        inherits: true;
        initial-value: 0;
    }

    @property --card-scale-x {
        syntax: "<number>";
        inherits: true;
        initial-value: 1;
    }

    @keyframes cardShowcase {
        0% {
            --card-pointer-x: 50%;
            --card-pointer-y: 50%;
            --card-rotate-percent-x: 0;
            --card-rotate-percent-y: 0;
            --card-rotate-percent-z: 0;
            --card-glare-opacity: 0;
        }

        15% {
            --card-pointer-x: 50%;
            --card-pointer-y: 50%;
            --card-rotate-percent-x: 0;
            --card-rotate-percent-y: 0;
            --card-rotate-percent-z: 0;
            --card-glare-opacity: 0;
        }

        30% {
            --card-pointer-x: 0%;
            --card-pointer-y: 100%;
            --card-rotate-percent-x: 0.025;
            --card-rotate-percent-y: 0.025;
            --card-rotate-percent-z: 0.01;
            --card-glare-opacity: 100;
        }

        45% {
            --card-pointer-x: 100%;
            --card-pointer-y: 0%;
            --card-rotate-percent-x: -0.025;
            --card-rotate-percent-y: -0.025;
            --card-rotate-percent-z: -0.01;
        }

        55% {
            --card-pointer-x: 85%;
            --card-pointer-y: 0%;
        }

        60% {
            --card-pointer-x: 15%;
            --card-pointer-y: 0%;
        }

        75% {
            --card-pointer-x: 0%;
            --card-pointer-y: 0%;
            --card-rotate-percent-x: -0.95;
            --card-rotate-percent-y: -0.0125;
            --card-rotate-percent-z: -0.005;
            --card-glare-opacity: 100;
        }

        90% {
            --card-pointer-x: 50%;
            --card-pointer-y: 50%;
            --card-rotate-percent-x: -1;
            --card-rotate-percent-y: 0;
            --card-rotate-percent-z: 0;
            --card-glare-opacity: 0;
        }

        100% {
            --card-pointer-x: 50%;
            --card-pointer-y: 50%;
            --card-rotate-percent-x: -1;
            --card-rotate-percent-y: 0;
            --card-rotate-percent-z: 0;
            --card-glare-opacity: 0;
        }
    }

    @keyframes cardGlow {
        0% {
            opacity: 0;
        }

        50% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }

    heroicc-card {
        --card-original-width: 430;
        --card-original-height: 600;
        --card-width: calc(var(--card-original-width) * 1px);
        --card-height: calc(var(--card-original-height) * 1px);
        --card-aspect-ratio: var(--card-original-width) /
            var(--card-original-height);
        --card-border-radius: 25;

        --card-glow:
            0 0 0.6cqb -0.2cqb oklch(1 0 0),
            0 0 0.6cqb 0.2cqb var(--accent-color-lighter),
            0 0 1.2cqb 0.15cqb var(--accent-color),
            0 1.6cqb 1.6cqb -1cqb oklch(0 0 0),
            0 0 8cqb -6cqb var(--accent-color),
            0 0 6cqb -6cqb var(--accent-color);

        --card-perspective: 600px;
        --card-showcase-duration: 14s;
        --card-glow-duration: 2s;
        --card-pointer-x: 50%;
        --card-pointer-y: 50%;
        --card-rotate-percent-x: 0;
        --card-rotate-percent-y: 0;
        --card-rotate-percent-z: 0;
        --card-glare-opacity: 0;

        container-type: size;
        display: inline-grid;
        position: relative;
        border-radius: calc(
                (var(--card-border-radius) / var(--card-original-width)) * 100%
            ) /
            calc(
                (var(--card-border-radius) / var(--card-original-height)) * 100%
            );
        aspect-ratio: var(--card-aspect-ratio);
        width: 100%;
        max-width: min(350px, 100cqi);
        max-height: var(--card-height);
        background-size: cover;
        background-image: url("https://images.heroi.cc/cards/BACK-001.webp");
        justify-self: center;

        &:has(picture) {
            background-image: none;

            &::before,
            &::after {
                content: "";
                display: block;
                width: inherit;
                height: inherit;
                max-width: inherit;
                max-height: inherit;
                position: absolute;
                inset-block: 0;
                border-radius: inherit;
                pointer-events: none;
                z-index: 0;
            }
        }

        &[data-js][data-interactive] {
            @media (hover: none) {
                touch-action: none;
            }
        }

        &[data-js],
        &[data-showcase] {
            perspective: var(--card-perspective);

            &::before,
            &::after,
            a:has(picture),
            button:has(picture),
            &:not(:has(a > picture), :has(button > picture)) picture {
                transform-origin: center center -20cqb;
                transform: rotateX(
                        calc(
                            var(--card-rotate-max-y, 360deg) *
                                var(--card-rotate-percent-y, 0)
                        )
                    )
                    rotateY(
                        calc(
                            var(--card-rotate-max-x, 360deg) *
                                var(--card-rotate-percent-x, 0) *
                                var(--card-scale-x, 1)
                        )
                    )
                    rotateZ(
                        calc(
                            var(--card-rotate-max-z, 360deg) *
                                var(--card-rotate-percent-z, 0) *
                                var(--card-scale-x, 1)
                        )
                    );
            }
        }

        &:not([data-showcase], [data-js][style*="--card-rotate-percent-x:"]) {
            &::before,
            &::after,
            a:has(picture),
            button:has(picture),
            &:not(:has(a > picture), :has(button > picture)) picture {
                transition:
                    transform var(--card-transition-duration)
                        var(--spring-easing),
                    --card-rotate-percent-x var(--card-transition-duration)
                        var(--spring-easing),
                    --card-rotate-percent-y var(--card-transition-duration)
                        var(--spring-easing),
                    --card-pointer-x var(--card-transition-duration)
                        var(--spring-easing),
                    --card-pointer-y var(--card-transition-duration)
                        var(--spring-easing),
                    --card-glare-opacity var(--card-transition-duration)
                        var(--spring-easing);
            }
        }

        &:not(:has(picture)),
        &:not([data-card-id*="_P"])::before {
            box-shadow: var(--card-shadow);
        }

        &[data-card-id*="_P"]::before {
            box-shadow: var(--card-shadow), var(--card-glow);
            width: calc(100% - 0.6cqb);
            left: 0.3cqb;
        }

        &[data-card-id*="_P"]::after {
            opacity: 0;
            box-shadow: var(--card-glow);
        }

        &[data-card-id*="_P"]::after,
        &[data-card-id*="_P"][data-js][style*="--card-rotate-percent-x:"]::after {
            animation: var(--card-glow-duration) ease-in-out 0s infinite both
                running cardGlow;
        }

        &[data-showcase][data-card-id*="_P"]::after {
            @media (prefers-reduced-motion: no-preference) {
                animation: var(--card-glow-duration) ease-in-out 0s infinite
                    both running cardGlow;
            }
        }

        &[data-showcase] {
            @media (prefers-reduced-motion: no-preference) {
                animation: var(--card-showcase-duration) var(--spring-easing) 0s
                    infinite both running cardShowcase;
            }
        }

        &[data-js][style*="--card-rotate-percent-x:"] {
            --card-rotate-max-x: 50deg;
            --card-rotate-max-y: 20deg;
            --card-rotate-max-z: 45deg;
        }

        &[data-js][style*="--card-rotate-percent-x:"],
        &[data-showcase]:has(dialog[open]),
        &[data-showcase]:has(dialog:popover-open) {
            animation: none;
        }

        picture {
            position: relative;
            display: grid;
            border-radius: inherit;
            background-color: oklch(1 0 0);
            background-position: inherit;
            background-size: cover;
            background-repeat: inherit;
            backface-visibility: hidden;
            width: inherit;
            max-width: inherit;
            max-height: inherit;
            aspect-ratio: var(--card-aspect-ratio);
            overflow: clip;
            z-index: 1;

            &::before,
            &::after {
                content: "";
                display: block;
                width: inherit;
                height: inherit;
                position: absolute;
                inset-block: 0;
                border-radius: inherit;
                pointer-events: none;
            }

            &::after {
                background-image: radial-gradient(
                    farthest-corner circle at var(--card-pointer-x, 50%)
                        var(--card-pointer-y, 50%),
                    oklch(1 0 0 / 80%) 10%,
                    oklch(1 0 0 / 65%) 20%,
                    oklch(0.25 0 0 / 40%) 80%
                );
                mix-blend-mode: overlay;
                opacity: calc(var(--card-glare-opacity, 0) / 100);
            }

            img {
                display: block;
                width: inherit;
                max-width: inherit;
                height: 100%;
                border-radius: inherit;
                backface-visibility: hidden;
                object-fit: cover;
                color: transparent;
                background-size: cover;
                transform: translateZ(100px);
            }
        }

        a[href],
        button {
            cursor: pointer;
            width: inherit;
            max-width: inherit;
            max-height: inherit;
            background: none;
            backface-visibility: hidden;

            &:has(picture) {
                display: grid;
                padding: 0;
                width: inherit;
                max-width: inherit;
                max-height: inherit;
                border: none;
                border-radius: inherit;

                &:focus-visible {
                    outline: 0.25em solid var(--accent-color);
                    outline-offset: 0.125em;
                }
            }
        }

        [aria-hidden="true"] {
            position: absolute;
            bottom: 10%;
            width: 100%;
            text-align: center;
            color: transparent;
            pointer-events: none;
            word-break: break-all;
        }

        &:has(.credit) {
            margin-block-end: 2em;
        }

        .credit {
            display: flex;
            flex-direction: row;
            justify-content: end;
            position: absolute;
            width: 100%;
            top: 100%;
            height: fit-content;
            margin-block-start: 1em;
            padding-inline: 0.5em;
            font-size: var(--font-step--1);
            color: oklch(from var(--theme-color) calc(1.15 - l) c h / 0.3);
            z-index: 0;

            > span,
            > a {
                width: fit-content;
                white-space: pre;
            }

            a[href] {
                color: var(--text-color-soften);
                text-decoration: underline;
                text-underline-offset: 0.15em;
                text-decoration-color: oklch(from currentColor l c h / 0.5);

                &:hover {
                    text-decoration-color: revert;
                }

                &:first-child {
                    display: inline-block;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                &:last-child {
                    color: oklch(from var(--theme-color) calc(1.1 - l) c h);
                }
            }
        }

        &::before,
        picture img {
            background-image: url("https://images.heroi.cc/cards/BACK-001.webp");
        }

        &[data-category="digi-egg"] {
            &::before,
            picture img {
                background-image: url("https://images.heroi.cc/cards/BACK-002.webp");
            }
        }

        &::before {
            --card-scale-x: -1;
            background-position: inherit;
            background-size: inherit;
            scale: var(--card-scale-x) 1;
            transform-style: preserve-3d;
        }
    }

    .panorama heroicc-card {
        &[data-js],
        &[data-showcase] {
            perspective: revert;
        }

        a[href] {
            display: contents;
        }
    }
}