@import "tailwindcss";

@theme {
    --color-kindred-red: #FF0505;
    --color-kindred-blue: #049FFF;
    --color-kindred-dark: #361525;
    --color-maroon-dark: #A40605;
    --color-navy-dark: #0F6B94;
}

@layer components {
    #blazor-error-ui {
        display: none;
    }
    .coin-wrapper {
        perspective: 1200px;
        width: min(420px, 80vw);
        height: min(420px, 80vw);
    }

    .coin {
        width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
        animation: coin-spin 8s ease-in-out infinite;
        border-radius: 50%;
    }

    .coin-face {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        border-radius: 50%;
        overflow: hidden;
    }

    .coin-front {
        transform: rotateY(0deg);
    }

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

    .coin-face img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

    @keyframes coin-spin {
        0%   { transform: rotateY(0deg); }
        37.5% { transform: rotateY(0deg); }
        50%  { transform: rotateY(180deg); }
        87.5% { transform: rotateY(180deg); }
        100% { transform: rotateY(360deg); }
    }

    .btn-kindred {
        @apply inline-block font-semibold px-6 py-3 rounded text-center cursor-pointer;
        transition: transform 250ms ease-in-out, box-shadow 250ms ease-in-out, background-color 250ms ease-in-out;
        box-shadow: 2px 3px 6px 0 rgba(0, 0, 0, 0.25);
    }

    .btn-kindred:hover {
        transform: translateY(-2px) scale(1.05);
        box-shadow: 3px 5px 12px 0 rgba(0, 0, 0, 0.35);
    }

    .btn-kindred:active {
        transform: scale(0.96);
        box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
    }

    .btn-primary {
        @apply bg-kindred-red text-white;
    }

    .btn-primary:hover {
        @apply bg-red-700;
    }

    .btn-outline {
        @apply bg-transparent border border-white/30 text-white;
    }

    .btn-outline:hover {
        @apply bg-white/10;
    }

    .card-kindred {
        transition: transform 250ms ease-in-out, box-shadow 250ms ease-in-out, border-color 250ms ease-in-out;
        box-shadow: 2px 3px 6px 0 rgba(0, 0, 0, 0.08);
    }

    .card-kindred:hover {
        transform: translateY(-3px);
        box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.15);
    }

    .card-kindred:active {
        transform: scale(0.98);
        box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.1);
    }
}