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

html {
    scroll-behavior: smooth;
}

body {
    background-color: #050505;
    color: #f3f4f6;
}

/* Wichtig für den 3D Effekt */
.perspective-1000 {
    perspective: 1000px;
}

/* Scrollbar Styling */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* =========================================
   CUSTOM ARTISTIC CURSOR
   ========================================= */

@media (hover: hover) and (pointer: fine) {
    body, a, button, input, textarea {
        cursor: none !important;
    }

    .cursor-dot {
        position: fixed;
        top: 0;
        left: 0;
        width: 8px;
        height: 8px;
        background-color: white;
        border-radius: 50%;
        pointer-events: none; 
        z-index: 9999;
        transform: translate(-50%, -50%);
        mix-blend-mode: difference; 
    }

    .cursor-outline {
        position: fixed;
        top: 0;
        left: 0;
        width: 40px;
        height: 40px;
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        pointer-events: none;
        z-index: 9998;
        transform: translate(-50%, -50%);
        transition: width 0.2s, height 0.2s, background-color 0.2s;
        mix-blend-mode: difference;
    }

    body.hovering .cursor-outline {
        width: 60px;
        height: 60px;
        background-color: rgba(255, 255, 255, 0.1);
        border-color: transparent;
    }
}

@media (hover: none) {
    .cursor-dot, .cursor-outline {
        display: none;
    }
}