/* ========================================
   ⭐ FALLING STARS STYLES ⭐
   Supporting Styles for Golden Stars
   ======================================== */

/* Canvas base */
#falling-stars-canvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none !important;
    z-index: 1000 !important;
    mix-blend-mode: screen !important;
}

/* Assicurati che il canvas non interferisca con altri elementi */
#falling-stars-canvas {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Controlli opzionali (se necessari in futuro) */
.stars-controls {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10001;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    padding: 8px;
    display: none; /* Nascosti di default */
}

.stars-toggle {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.stars-toggle:hover {
    background: rgba(255, 215, 0, 0.2);
}

/* Effetti speciali per interazioni */
.stars-burst {
    animation: starsBurst 2s ease-out forwards;
}

@keyframes starsBurst {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.8;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}

/* Supporto per reduced motion */
@media (prefers-reduced-motion: reduce) {
    #falling-stars-canvas {
        display: none !important;
    }
}

/* Supporto per reduced data */
@media (prefers-reduced-data: reduce) {
    #falling-stars-canvas {
        display: none !important;
    }
}

/* Performance optimizations per dispositivi mobili */
@media (max-width: 768px) {
    #falling-stars-canvas {
        /* Su mobile potresti voler ridurre la qualità se necessario */
        image-rendering: optimizeSpeed;
        image-rendering: -moz-crisp-edges;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: optimize-contrast;
    }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    #falling-stars-canvas {
        /* Le stelle dorate stanno bene sia in light che dark mode */
        opacity: 0.9;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    #falling-stars-canvas {
        /* Riduce leggermente l'effetto per l'accessibilità */
        opacity: 0.7;
    }
}

/* Animazioni di ingresso per il canvas */
#falling-stars-canvas {
    animation: starsCanvasFadeIn 1s ease-in-out;
}

@keyframes starsCanvasFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Prevenzione conflitti con altri elementi */
body:has(#falling-stars-canvas) {
    /* Il canvas non dovrebbe influenzare il layout */
}

/* Stili per debugging (nascosti in produzione) */
.stars-debug {
    position: fixed;
    bottom: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: #ffd700;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    display: none; /* Solo per debug */
    z-index: 10002;
}

/* Effetti quando le stelle interagiscono con elementi hover */
.stars-interactive:hover ~ #falling-stars-canvas {
    /* Possibilità future di interazioni */
    animation: starsIntensify 0.5s ease-in-out;
}

@keyframes starsIntensify {
    0% { opacity: 1; }
    50% { opacity: 1.2; }
    100% { opacity: 1; }
}