@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .brutalist-border {
        @apply border-[3px] border-white shadow-[8px_8px_0px_#5211d4];
    }

    .ink-splatter {
        background-image: radial-gradient(circle at 20% 30%, rgba(82, 17, 212, 0.15) 0%, transparent 50%),
            radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
    }

    .glitch-text {
        text-shadow: 2px 0 #5211d4, -2px 0 #ff00ea;
    }

    .rotated-card-1 {
        transform: rotate(-1deg);
    }

    .rotated-card-2 {
        transform: rotate(1.5deg);
    }

    .rotated-card-3 {
        transform: rotate(-2.5deg);
    }

    .paper-stack-base {
        position: relative;
        transition: transform 0.3s ease;
    }

    .paper-layer {
        position: absolute;
        inset: 0;
        background: white;
        border: 2px solid black;
        z-index: -1;
    }

    .dark .paper-layer {
        background: #18181b;
        border: 2px solid white;
    }

    .paper-stack-base:hover {
        transform: translateY(-5px);
    }

    .pfp-placeholder {
        background: repeating-conic-gradient(#5211d4 0% 25%, transparent 0% 50%) 50% / 20px 20px;
    }
}