/**
 * Cursor Effects CSS
 * Styles for all custom cursor effects
 * ACTIVE SITE-WIDE
 */

/* ========================================
   COMMAND PALETTE - Hide cursor completely
   ======================================== */
.command-palette.open~.custom-cursor,
.command-palette-active .custom-cursor,
body.command-palette-active .custom-cursor {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Restore normal cursor when command palette is open */
.command-palette-active,
.command-palette-active *,
.command-palette.open,
.command-palette.open * {
    cursor: default !important;
}

/* ========================================
   GLOBAL CURSOR OVERRIDE - Aggressive
   ======================================== */
html {
    cursor: none !important;
}

body {
    cursor: none !important;
    overflow-x: hidden;
}

/* Alle Elemente und Zustande - absolut KEINE native Cursor */
*,
*::before,
*::after,
*:hover,
*:focus,
*:active,
*:focus-visible,
*:focus-within,
*:-webkit-any-link,
*:-moz-any-link {
    cursor: none !important;
    -webkit-user-drag: none !important;
    -webkit-touch-callout: none !important;
}

/* Spezifisch fuer interaktive Elemente */
a,
a:hover,
a:active,
a:focus,
a:visited,
button,
button:hover,
button:active,
button:focus,
input,
input:hover,
input:focus,
textarea,
textarea:hover,
textarea:focus,
select,
select:hover,
select:focus,
[role="button"],
.btn,
.btn:hover,
.card-hover,
.card-hover:hover,
.hero-btn,
.hero-btn:hover,
.magnetic-btn,
.magnetic-btn:hover,
label,
label:hover {
    cursor: none !important;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* ========================================
   CUSTOM CURSOR - Wolf-Pfote (kein runder Rahmen)
   ======================================== */
.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
}

/* Wolf-Pfote Bild - KEIN runder Hintergrund */
.cursor-paw {
    width: 100%;
    height: 100%;
    background-image: url('/assets/images/cursor.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.15s ease, filter 0.15s ease;
    /* Glow-Effekt statt rundem Hintergrund */
    filter: drop-shadow(0 0 6px var(--color-primary, #DC2626));
}

/* Hover state - Pfote wird groesser mit staerkerem Glow */
.custom-cursor.cursor-hover .cursor-paw {
    transform: scale(1.2);
    filter: drop-shadow(0 0 12px var(--color-primary, #DC2626)) drop-shadow(0 0 20px var(--color-primary, #DC2626));
}

/* Click/Press Animation */
.custom-cursor.cursor-active .cursor-paw {
    transform: scale(0.9);
}

/* ========================================
   2. CURSOR TRAIL CANVAS
   ======================================== */
.cursor-trail-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

/* ========================================
   3. MAGNETIC BUTTONS
   ======================================== */
.magnetic-btn,
.btn {
    transition: transform 0.3s ease;
    will-change: transform;
}

/* ========================================
   4. FLEEING LETTERS
   ======================================== */
.fleeing-letter {
    display: inline-block;
    transition: transform 0.3s ease;
    will-change: transform;
}

/* ========================================
   5. SPOTLIGHT EFFECT - Staerker
   ======================================== */
.spotlight-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9000;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: rgba(0, 0, 0, 0.95);
}

/* ========================================
   6. REPEL GRID CANVAS
   ======================================== */
.repel-grid-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

/* ========================================
   RESPONSIVE & ACCESSIBILITY
   ======================================== */

/* Disable on touch devices */
@media (hover: none) and (pointer: coarse) {

    .custom-cursor,
    .cursor-trail-canvas,
    .spotlight-overlay,
    .repel-grid-canvas {
        display: none !important;
    }

    html,
    body,
    *,
    *::before,
    *::after {
        cursor: auto !important;
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {

    .custom-cursor,
    .cursor-trail-canvas,
    .fleeing-letter,
    .magnetic-btn {
        animation: none !important;
        transition: none !important;
    }

    .spotlight-overlay,
    .repel-grid-canvas {
        display: none !important;
    }
}

/* ========================================
   THEME SUPPORT - Cursor Glow Farben
   ======================================== */

/* Blood Moon Theme (Default) */
[data-theme="blood-moon"] .cursor-paw {
    filter: drop-shadow(0 0 6px #DC2626);
}

[data-theme="blood-moon"] .custom-cursor.cursor-hover .cursor-paw {
    filter: drop-shadow(0 0 12px #DC2626) drop-shadow(0 0 20px #DC2626);
}

/* Arctic Wolf Theme */
[data-theme="arctic-wolf"] .cursor-paw {
    filter: drop-shadow(0 0 6px #3B82F6);
}

[data-theme="arctic-wolf"] .custom-cursor.cursor-hover .cursor-paw {
    filter: drop-shadow(0 0 12px #3B82F6) drop-shadow(0 0 20px #3B82F6);
}

/* Forest Pack Theme */
[data-theme="forest-pack"] .cursor-paw {
    filter: drop-shadow(0 0 6px #10B981);
}

[data-theme="forest-pack"] .custom-cursor.cursor-hover .cursor-paw {
    filter: drop-shadow(0 0 12px #10B981) drop-shadow(0 0 20px #10B981);
}

/* Neon Hunt Theme */
[data-theme="neon-hunt"] .cursor-paw {
    filter: drop-shadow(0 0 6px #EC4899);
}

[data-theme="neon-hunt"] .custom-cursor.cursor-hover .cursor-paw {
    filter: drop-shadow(0 0 12px #EC4899) drop-shadow(0 0 20px #EC4899);
}

/* Terminal Theme */
[data-theme="terminal"] .cursor-paw {
    filter: drop-shadow(0 0 6px #00FF00);
}

[data-theme="terminal"] .custom-cursor.cursor-hover .cursor-paw {
    filter: drop-shadow(0 0 12px #00FF00) drop-shadow(0 0 20px #00FF00);
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */
.custom-cursor,
.cursor-trail-canvas,
.repel-grid-canvas,
.fleeing-letter,
.magnetic-btn {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}