/**
 * ELO Landing Page - Stile Dark Theme
 * Basato su UGO con colore accento #519ef3
 */

/* Import Google Fonts - Noto Sans Mono */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@300;400;500;600;700;800&display=swap');

/* CSS Variables - Dark Theme ELO */
:root {
    --dark-bg: #0a0a0a;
    --dark-card: #1f1f1f;
    --dark-text: #ffffff;
    --dark-text-muted: rgba(255, 255, 255, 0.6);
    --elo-primary: #519ef3;
    --elo-secondary: #3b82f6;
    --elo-gradient: linear-gradient(135deg, #519ef3, #3b82f6);
    --shadow-dark: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5);
    --color-error: #ef4444;
    --color-success: #10b981;
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 4rem;
    --border-radius: 8px;
    --border-radius-lg: 12px;
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Noto Sans Mono', 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, monospace, sans-serif;
    background: var(--dark-bg);
    color: var(--dark-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.6;
    min-height: 100vh;
}

.main-content {
    min-height: calc(100vh - 200px);
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

/* Header */
.site-header {
    background: var(--dark-card);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--spacing-sm) 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-dark);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-logo {
    display: inline-block;
    transition: all 0.2s ease;
    text-decoration: none;
}

.logo-img {
    height: 40px;
    width: auto;
    object-fit: contain;
    display: block;
    transition: all 0.2s ease;
}

.site-logo:hover .logo-img {
    opacity: 0.9;
    transform: scale(1.05);
}

.main-nav {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.main-nav a {
    color: var(--dark-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: color 0.2s ease;
    padding: 8px 16px;
    border-radius: var(--border-radius);
}

.main-nav a:hover {
    color: var(--elo-primary);
    background: rgba(81, 158, 243, 0.1);
}

/* Hero Section */
.hero {
    background: #000000;
    padding: 0;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 650px;
    height: auto;
    object-fit: contain;
    z-index: 0;
    opacity: 0.8;
}



.hero .container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    padding: 0 var(--spacing-sm);
}

.hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    margin-top: 120px;
    line-height: 1.2;
    color: var(--dark-text);
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
}

.hero .subtitle {
    font-size: 1.25rem;
    margin-bottom: var(--spacing-md);
    color: var(--dark-text-muted);
    font-weight: 400;
    position: relative;
    z-index: 1;
}

.highlight {
    background: rgba(81, 158, 243, 0.1);
    border: 1px solid var(--elo-primary);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    display: inline-block;
    margin: var(--spacing-sm) 0;
    font-weight: 600;
    color: var(--dark-text);
    text-align: center;
}

.highlight strong {
    color: var(--elo-primary);
}

.hero .cta-group {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 500px;
    position: relative;
    z-index: 1;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--border-radius);
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    font-family: inherit;
    white-space: nowrap;
}

.btn-primary {
    background: var(--elo-gradient);
    color: white;
    box-shadow: 0 4px 12px rgba(81, 158, 243, 0.3);
}

.btn-primary:hover {
    opacity: 0.95;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(81, 158, 243, 0.4);
}

.btn-secondary {
    background: transparent;
    color: var(--dark-text);
    border: 2px solid var(--elo-primary);
}

.btn-secondary:hover {
    background: rgba(81, 158, 243, 0.1);
    border-color: var(--elo-secondary);
    color: var(--elo-primary);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Sections */
.section {
    padding: var(--spacing-xl) 0;
}

.section-title {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--spacing-sm);
    color: var(--dark-text);
    letter-spacing: -0.02em;
    position: relative; /* Per ancorare le particelle */
    z-index: 1; /* Assicura che il testo sia sopra le particelle */
}

.section-subtitle {
    text-align: center;
    color: var(--dark-text-muted);
    margin-bottom: var(--spacing-lg);
    font-size: 1.125rem;
    font-weight: 400;
}

/* Grid */
.grid {
    display: grid;
    gap: var(--spacing-md);
}

.grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Cards */
.card {
    background: var(--dark-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.card:hover {
    border-color: var(--elo-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(81, 158, 243, 0.2);
}

.card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-sm);
    background: rgba(81, 158, 243, 0.1);
}

.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--dark-text);
}

.card ul {
    list-style: none;
    padding-left: 0;
}

.card li {
    padding: var(--spacing-xs) 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--dark-text-muted);
    font-size: 14px;
}

.card li {
    padding-left: 2rem;
}

.card li:before {
    content: '';
    position: absolute;
    left: 0;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.7071 4.70711C15.0976 4.31658 15.0976 3.68342 14.7071 3.29289C14.3166 2.90237 13.6834 2.90237 13.2929 3.29289L6.5 10.0858L4.70711 8.29289C4.31658 7.90237 3.68342 7.90237 3.29289 8.29289C2.90237 8.68342 2.90237 9.31658 3.29289 9.70711L5.79289 12.2071C6.18342 12.5976 6.81658 12.5976 7.20711 12.2071L14.7071 4.70711Z' fill='%23519ef3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Steps */
.steps {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-width: 800px;
    margin: 0 auto;
}

.step {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
    background: var(--dark-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md);
    transition: all 0.3s ease;
}

.step:hover {
    border-color: var(--elo-primary);
    box-shadow: 0 4px 12px rgba(81, 158, 243, 0.1);
}

.step-number {
    background: var(--elo-gradient);
    color: white;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(81, 158, 243, 0.3);
}

.step-content h3 {
    font-size: 1.25rem;
    margin-bottom: var(--spacing-xs);
    color: var(--dark-text);
    font-weight: 600;
}

.step-content p {
    color: var(--dark-text-muted);
    font-size: 14px;
}

/* Include/Exclude */
.include-exclude {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.include-box, .exclude-box {
    padding: var(--spacing-md);
    border-radius: var(--border-radius-lg);
    border: 1px solid;
}

.include-box {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--color-success);
}

.exclude-box {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--color-error);
}

.include-box h3, .exclude-box h3 {
    margin-bottom: var(--spacing-sm);
    color: var(--dark-text);
    font-weight: 600;
}

.include-box ul, .exclude-box ul {
    list-style: none;
    padding-left: 0;
}

.include-box li, .exclude-box li {
    padding: var(--spacing-xs) 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--dark-text-muted);
    font-size: 14px;
}

.include-box li:before {
    content: '';
    position: absolute;
    left: 0;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.7071 4.70711C15.0976 4.31658 15.0976 3.68342 14.7071 3.29289C14.3166 2.90237 13.6834 2.90237 13.2929 3.29289L6.5 10.0858L4.70711 8.29289C4.31658 7.90237 3.68342 7.90237 3.29289 8.29289C2.90237 8.68342 2.90237 9.31658 3.29289 9.70711L5.79289 12.2071C6.18342 12.5976 6.81658 12.5976 7.20711 12.2071L14.7071 4.70711Z' fill='%2310b981'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.exclude-box li:before {
    content: '';
    position: absolute;
    left: 0;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.7071 4.29289C14.0976 4.68342 14.0976 5.31658 13.7071 5.70711L10.4142 9L13.7071 12.2929C14.0976 12.6834 14.0976 13.3166 13.7071 13.7071C13.3166 14.0976 12.6834 14.0976 12.2929 13.7071L9 10.4142L5.70711 13.7071C5.31658 14.0976 4.68342 14.0976 4.29289 13.7071C3.90237 13.3166 3.90237 12.6834 4.29289 12.2929L7.58579 9L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L9 7.58579L12.2929 4.29289C12.6834 3.90237 13.3166 3.90237 13.7071 4.29289Z' fill='%23ef4444'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* FAQ */
.faq {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: var(--dark-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-sm);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: var(--elo-primary);
}

.faq-question {
    padding: var(--spacing-md);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(81, 158, 243, 0.05);
    transition: background 0.2s ease;
    color: var(--dark-text);
}

.faq-question:hover {
    background: rgba(81, 158, 243, 0.1);
}

.faq-answer {
    padding: 0 var(--spacing-md);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    color: var(--dark-text-muted);
    font-size: 14px;
}

.faq-item.active .faq-answer {
    max-height: 500px;
    padding: var(--spacing-md);
}

.faq-toggle {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-toggle {
    transform: rotate(180deg);
}

/* Slot Counter */
.slot-counter-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    max-width: 500px;
    margin: 0 auto;
}

.slot-cta {
    margin-top: var(--spacing-sm);
    width: 100%;
    text-align: center;
}

.slot-cta .btn {
    width: 100%;
    max-width: 400px;
}

.slot-counter {
    background: var(--dark-card);
    border: 2px solid var(--elo-primary);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md);
    text-align: center;
    width: 100%;
    box-shadow: 0 4px 12px rgba(81, 158, 243, 0.2);
}

.slot-counter .number {
    font-size: 3rem;
    font-weight: 800;
    color: var(--elo-primary);
    display: block;
    line-height: 1;
}

.slot-counter .label {
    color: var(--dark-text-muted);
    font-size: 1.125rem;
    margin-top: var(--spacing-xs);
}

.slot-cta {
    margin-top: var(--spacing-md);
    width: 100%;
    text-align: center;
}

.slot-cta .btn {
    width: 100%;
    max-width: 400px;
}

/* Forms - Stile UGO/ELO */
.form-section {
    background: var(--dark-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    margin: var(--spacing-lg) 0;
    box-shadow: var(--shadow-dark);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--dark-text);
    font-size: 14px;
}

.form-group label .required {
    color: var(--color-error);
    margin-left: 4px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 14px 12px;
    background: transparent;
    border: 1px solid var(--elo-primary);
    border-radius: var(--border-radius);
    font-size: 14px;
    font-family: inherit;
    color: var(--dark-text);
    transition: all 0.2s ease;
    min-height: 48px;
    box-sizing: border-box;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--dark-text-muted);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--elo-secondary);
    box-shadow: 0 0 0 3px rgba(81, 158, 243, 0.2);
}

.form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23519ef3' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
    padding: 12px;
}

.form-group .checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
}

.form-group .checkbox-group input[type="checkbox"] {
    width: auto;
    margin-top: 0.25rem;
    accent-color: var(--elo-primary);
    cursor: pointer;
}

.form-group .checkbox-group label {
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
}

.form-group .checkbox-group a {
    color: var(--elo-primary);
    text-decoration: none;
}

.form-group .checkbox-group a:hover {
    text-decoration: underline;
}

.form-group .error {
    color: var(--color-error);
    font-size: 0.875rem;
    margin-top: var(--spacing-xs);
}

/* Alert Messages */
.alert {
    padding: 12px 16px;
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
    font-size: 14px;
}

.alert-success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid var(--color-success);
    color: var(--color-success);
}

.alert-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--color-error);
    color: var(--color-error);
}

/* Footer */
.site-footer {
    background: var(--dark-card);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--dark-text-muted);
    padding: var(--spacing-md) 0;
    text-align: center;
    margin-top: var(--spacing-xl);
}

.site-footer a {
    color: var(--elo-primary);
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}

/* Admin Table */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--spacing-md);
    background: var(--dark-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.admin-table th,
.admin-table td {
    padding: var(--spacing-sm);
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--dark-text);
}

.admin-table th {
    background: rgba(81, 158, 243, 0.1);
    font-weight: 600;
    color: var(--dark-text);
}

.admin-table tr:hover {
    background: rgba(81, 158, 243, 0.05);
}

.admin-filters {
    background: var(--dark-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
}

.admin-filters form {
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-end;
    flex-wrap: wrap;
}

.admin-filters .form-group {
    margin-bottom: 0;
    flex: 1;
    min-width: 200px;
}

/* Responsive */
@media (max-width: 768px) {
    .hero {
        height: 100vh;
        padding: 0;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero .subtitle {
        font-size: 1rem;
    }
    
    .hero-video {
        width: 550px;
    }
    
    .section-title {
        font-size: 1.75rem;
    }
    
    .cta-group {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
    }
    
    .header-content {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .step {
        flex-direction: column;
        text-align: center;
    }
    
    .step-number {
        margin: 0 auto;
    }
    
    .admin-table {
        font-size: 0.875rem;
    }
    
    .admin-table th,
    .admin-table td {
        padding: var(--spacing-xs);
    }
    
    .form-section {
        padding: var(--spacing-md);
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 var(--spacing-xs);
    }
    
    .section {
        padding: var(--spacing-md) 0;
    }
    
    .form-section {
        padding: var(--spacing-md);
    }
    
    .hero {
        height: 100vh;
        padding: 0;
    }
    
    .hero h1 {
        font-size: 1.75rem;
    }
    
    .hero .highlight {
        font-size: 0.875rem;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .hero .cta-group {
        flex-direction: column;
        width: 100%;
    }
    
    .hero .cta-group .btn {
        width: 100%;
    }
    
    .hero-video {
        width: 550px;
    }
}

/* ===== SCROLL ANIMATIONS - Stile Antigravity ===== */

/* Elementi nascosti di default */
.scroll-fade-in,
.scroll-slide-up,
.scroll-slide-left,
.scroll-slide-right,
.scroll-scale {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Fade In */
.scroll-fade-in {
    transform: translateY(30px);
}

.scroll-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Slide Up */
.scroll-slide-up {
    transform: translateY(50px);
}

.scroll-slide-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Slide Left */
.scroll-slide-left {
    transform: translateX(-50px);
}

.scroll-slide-left.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Slide Right */
.scroll-slide-right {
    transform: translateX(50px);
}

.scroll-slide-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Scale */
.scroll-scale {
    transform: scale(0.9);
}

.scroll-scale.visible {
    opacity: 1;
    transform: scale(1);
}

/* Delay per animazioni stagger */
.scroll-delay-1 { transition-delay: 0.1s; }
.scroll-delay-2 { transition-delay: 0.2s; }
.scroll-delay-3 { transition-delay: 0.3s; }
.scroll-delay-4 { transition-delay: 0.4s; }
.scroll-delay-5 { transition-delay: 0.5s; }

/* Disabilita animazioni su dispositivi con preferenza reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .scroll-fade-in,
    .scroll-slide-up,
    .scroll-slide-left,
    .scroll-slide-right,
    .scroll-scale {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ===== GLOW PARTICLES ANIMATION - Puntini Cyano ELO ===== */

/* Particelle ancorate ai titoli delle sezioni */
.floating-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%);
    transform-origin: center;
    z-index: -1; /* Dietro ai titoli */
    background: #519ef3;
    box-shadow: 0 0 3px rgba(81, 158, 243, 0.8);
    will-change: transform, opacity;
}

/* Fade in quando appaiono */
.floating-particles.fade-in {
    animation: particlesFadeIn 0.3s ease-out forwards;
}

/* Visibile */
.floating-particles.visible {
    opacity: 1;
}

/* Fade out quando scompaiono */
.floating-particles.fade-out {
    animation: particlesFadeOut 0.3s ease-out forwards;
}

/* Durante l'esplosione */
.floating-particles.exploding {
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

/* Animazioni fade */
@keyframes particlesFadeIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes particlesFadeOut {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
}

/* Compatibilità con elemento singolo (se ancora presente) */
#floating-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%);
    transform-origin: center;
    z-index: 9999;
    background: #519ef3;
    box-shadow: 0 0 3px rgba(81, 158, 243, 0.8);
    will-change: transform, opacity;
    display: none; /* Nascondi elemento singolo, usiamo .floating-particles */
}

/* Particelle esplosive individuali */
.explosion-particle {
    position: fixed;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #519ef3;
    box-shadow: 
        0 0 3px rgba(81, 158, 243, 1),
        0 0 6px rgba(81, 158, 243, 0.8),
        0 0 12px rgba(81, 158, 243, 0.4);
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    animation: explodeParticle var(--duration, 800ms) ease-out forwards;
    opacity: 1;
    will-change: transform, opacity;
}

@keyframes explodeParticle {
    0% {
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
        opacity: 1;
    }
    30% {
        opacity: 0.9;
    }
    100% {
        transform: translate(-50%, -50%) translate(var(--delta-x, 0px), var(--delta-y, 0px)) scale(0.2);
        opacity: 0;
    }
}

/* Elementi con particelle luminose (per compatibilità) */
.glow-particles {
    position: relative;
    overflow: visible;
}

/* Container per le particelle - ancorate ai titoli */
.floating-particles::before,
.floating-particles::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    pointer-events: none;
    opacity: inherit;
    transform-origin: center;
    background: #519ef3;
    box-shadow: 0 0 3px rgba(81, 158, 243, 0.8);
}

/* Container per le particelle - elemento singolo (compatibilità) */
#floating-particles::before,
#floating-particles::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    pointer-events: none;
    opacity: inherit;
    transform-origin: center;
    background: #519ef3;
    box-shadow: 0 0 3px rgba(81, 158, 243, 0.8);
}

/* Container per le particelle (per compatibilità con elementi statici) */
.glow-particles::before,
.glow-particles::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease-out;
    transform-origin: center;
    background: #519ef3;
    box-shadow: 0 0 4px rgba(81, 158, 243, 0.8);
}

/* Particelle esterne - ruotano in senso orario (ancorate ai titoli) - dimensioni ridotte */
.floating-particles::before {
    box-shadow: 
        /* Cerchio esterno - 16 particelle principali - dimensioni ridotte */
        0 -45px 0 0.5px #519ef3, 0 -45px 0 0 rgba(81, 158, 243, 0.9),
        31.82px -31.82px 0 0.5px rgba(81, 158, 243, 0.95), 31.82px -31.82px 0 0 rgba(81, 158, 243, 0.85),
        45px 0 0 0.5px rgba(81, 158, 243, 0.9), 45px 0 0 0 rgba(81, 158, 243, 0.8),
        31.82px 31.82px 0 0.5px rgba(81, 158, 243, 0.85), 31.82px 31.82px 0 0 rgba(81, 158, 243, 0.75),
        0 45px 0 0.5px rgba(81, 158, 243, 0.8), 0 45px 0 0 rgba(81, 158, 243, 0.7),
        -31.82px 31.82px 0 0.5px rgba(81, 158, 243, 0.75), -31.82px 31.82px 0 0 rgba(81, 158, 243, 0.65),
        -45px 0 0 0.5px rgba(81, 158, 243, 0.7), -45px 0 0 0 rgba(81, 158, 243, 0.6),
        -31.82px -31.82px 0 0.5px rgba(81, 158, 243, 0.65), -31.82px -31.82px 0 0 rgba(81, 158, 243, 0.55),
        /* Cerchio intermedio - 12 particelle - dimensioni ridotte */
        0 -34px 0 0.5px rgba(81, 158, 243, 0.9), 0 -34px 0 0 rgba(81, 158, 243, 0.8),
        29.24px -16.88px 0 0.5px rgba(81, 158, 243, 0.85), 29.24px -16.88px 0 0 rgba(81, 158, 243, 0.75),
        29.24px 16.88px 0 0.5px rgba(81, 158, 243, 0.8), 29.24px 16.88px 0 0 rgba(81, 158, 243, 0.7),
        0 34px 0 0.5px rgba(81, 158, 243, 0.75), 0 34px 0 0 rgba(81, 158, 243, 0.65),
        -29.24px 16.88px 0 0.5px rgba(81, 158, 243, 0.7), -29.24px 16.88px 0 0 rgba(81, 158, 243, 0.6),
        -29.24px -16.88px 0 0.5px rgba(81, 158, 243, 0.65), -29.24px -16.88px 0 0 rgba(81, 158, 243, 0.55),
        /* Particelle aggiuntive per densità - dimensioni ridotte */
        22.5px -22.5px 0 0.5px rgba(81, 158, 243, 0.7), 22.5px -22.5px 0 0 rgba(81, 158, 243, 0.6),
        -22.5px 22.5px 0 0.5px rgba(81, 158, 243, 0.65), -22.5px 22.5px 0 0 rgba(81, 158, 243, 0.55),
        22.5px 22.5px 0 0.5px rgba(81, 158, 243, 0.6), 22.5px 22.5px 0 0 rgba(81, 158, 243, 0.5),
        -22.5px -22.5px 0 0.5px rgba(81, 158, 243, 0.55), -22.5px -22.5px 0 0 rgba(81, 158, 243, 0.45),
        /* Particelle più piccole sparse - dimensioni ridotte */
        0 -26px 0 0.3px rgba(81, 158, 243, 0.5), 0 -26px 0 0 rgba(81, 158, 243, 0.4),
        18.38px -18.38px 0 0.3px rgba(81, 158, 243, 0.45), 18.38px -18.38px 0 0 rgba(81, 158, 243, 0.35),
        26px 0 0 0.3px rgba(81, 158, 243, 0.4), 26px 0 0 0 rgba(81, 158, 243, 0.3),
        18.38px 18.38px 0 0.3px rgba(81, 158, 243, 0.35), 18.38px 18.38px 0 0 rgba(81, 158, 243, 0.25),
        0 26px 0 0.3px rgba(81, 158, 243, 0.3), 0 26px 0 0 rgba(81, 158, 243, 0.2),
        -18.38px 18.38px 0 0.3px rgba(81, 158, 243, 0.25), -18.38px 18.38px 0 0 rgba(81, 158, 243, 0.15),
        -26px 0 0 0.3px rgba(81, 158, 243, 0.2), -26px 0 0 0 rgba(81, 158, 243, 0.1),
        -18.38px -18.38px 0 0.3px rgba(81, 158, 243, 0.15), -18.38px -18.38px 0 0 rgba(81, 158, 243, 0.1);
    transform: translate(-50%, -50%) rotate(0deg);
    animation: rotateParticlesOuter 12s linear infinite;
    z-index: -2; /* Ancora più dietro */
    filter: blur(0.2px);
}

/* Particelle esterne - ruotano in senso orario (elemento singolo - compatibilità) */
#floating-particles::before {
    box-shadow: 
        /* Cerchio esterno - 16 particelle principali - dimensioni ridotte */
        0 -45px 0 0.5px #519ef3, 0 -45px 0 0 rgba(81, 158, 243, 0.9),
        31.82px -31.82px 0 0.5px rgba(81, 158, 243, 0.95), 31.82px -31.82px 0 0 rgba(81, 158, 243, 0.85),
        45px 0 0 0.5px rgba(81, 158, 243, 0.9), 45px 0 0 0 rgba(81, 158, 243, 0.8),
        31.82px 31.82px 0 0.5px rgba(81, 158, 243, 0.85), 31.82px 31.82px 0 0 rgba(81, 158, 243, 0.75),
        0 45px 0 0.5px rgba(81, 158, 243, 0.8), 0 45px 0 0 rgba(81, 158, 243, 0.7),
        -31.82px 31.82px 0 0.5px rgba(81, 158, 243, 0.75), -31.82px 31.82px 0 0 rgba(81, 158, 243, 0.65),
        -45px 0 0 0.5px rgba(81, 158, 243, 0.7), -45px 0 0 0 rgba(81, 158, 243, 0.6),
        -31.82px -31.82px 0 0.5px rgba(81, 158, 243, 0.65), -31.82px -31.82px 0 0 rgba(81, 158, 243, 0.55),
        /* Cerchio intermedio - 12 particelle - dimensioni ridotte */
        0 -34px 0 0.5px rgba(81, 158, 243, 0.9), 0 -34px 0 0 rgba(81, 158, 243, 0.8),
        29.24px -16.88px 0 0.5px rgba(81, 158, 243, 0.85), 29.24px -16.88px 0 0 rgba(81, 158, 243, 0.75),
        29.24px 16.88px 0 0.5px rgba(81, 158, 243, 0.8), 29.24px 16.88px 0 0 rgba(81, 158, 243, 0.7),
        0 34px 0 0.5px rgba(81, 158, 243, 0.75), 0 34px 0 0 rgba(81, 158, 243, 0.65),
        -29.24px 16.88px 0 0.5px rgba(81, 158, 243, 0.7), -29.24px 16.88px 0 0 rgba(81, 158, 243, 0.6),
        -29.24px -16.88px 0 0.5px rgba(81, 158, 243, 0.65), -29.24px -16.88px 0 0 rgba(81, 158, 243, 0.55),
        /* Particelle aggiuntive per densità - dimensioni ridotte */
        22.5px -22.5px 0 0.5px rgba(81, 158, 243, 0.7), 22.5px -22.5px 0 0 rgba(81, 158, 243, 0.6),
        -22.5px 22.5px 0 0.5px rgba(81, 158, 243, 0.65), -22.5px 22.5px 0 0 rgba(81, 158, 243, 0.55),
        22.5px 22.5px 0 0.5px rgba(81, 158, 243, 0.6), 22.5px 22.5px 0 0 rgba(81, 158, 243, 0.5),
        -22.5px -22.5px 0 0.5px rgba(81, 158, 243, 0.55), -22.5px -22.5px 0 0 rgba(81, 158, 243, 0.45),
        /* Particelle più piccole sparse - dimensioni ridotte */
        0 -26px 0 0.3px rgba(81, 158, 243, 0.5), 0 -26px 0 0 rgba(81, 158, 243, 0.4),
        18.38px -18.38px 0 0.3px rgba(81, 158, 243, 0.45), 18.38px -18.38px 0 0 rgba(81, 158, 243, 0.35),
        26px 0 0 0.3px rgba(81, 158, 243, 0.4), 26px 0 0 0 rgba(81, 158, 243, 0.3),
        18.38px 18.38px 0 0.3px rgba(81, 158, 243, 0.35), 18.38px 18.38px 0 0 rgba(81, 158, 243, 0.25),
        0 26px 0 0.3px rgba(81, 158, 243, 0.3), 0 26px 0 0 rgba(81, 158, 243, 0.2),
        -18.38px 18.38px 0 0.3px rgba(81, 158, 243, 0.25), -18.38px 18.38px 0 0 rgba(81, 158, 243, 0.15),
        -26px 0 0 0.3px rgba(81, 158, 243, 0.2), -26px 0 0 0 rgba(81, 158, 243, 0.1),
        -18.38px -18.38px 0 0.3px rgba(81, 158, 243, 0.15), -18.38px -18.38px 0 0 rgba(81, 158, 243, 0.1);
    transform: translate(-50%, -50%) rotate(0deg);
    animation: rotateParticlesOuter 12s linear infinite;
    z-index: -1;
    filter: blur(0.2px);
}

/* Particelle esterne - ruotano in senso orario (per compatibilità) */
.glow-particles::before {
    box-shadow: 
        /* Cerchio esterno - 16 particelle principali */
        0 -60px 0 1px #519ef3, 0 -60px 0 0 rgba(81, 158, 243, 0.9),
        42.43px -42.43px 0 1px rgba(81, 158, 243, 0.95), 42.43px -42.43px 0 0 rgba(81, 158, 243, 0.85),
        60px 0 0 1px rgba(81, 158, 243, 0.9), 60px 0 0 0 rgba(81, 158, 243, 0.8),
        42.43px 42.43px 0 1px rgba(81, 158, 243, 0.85), 42.43px 42.43px 0 0 rgba(81, 158, 243, 0.75),
        0 60px 0 1px rgba(81, 158, 243, 0.8), 0 60px 0 0 rgba(81, 158, 243, 0.7),
        -42.43px 42.43px 0 1px rgba(81, 158, 243, 0.75), -42.43px 42.43px 0 0 rgba(81, 158, 243, 0.65),
        -60px 0 0 1px rgba(81, 158, 243, 0.7), -60px 0 0 0 rgba(81, 158, 243, 0.6),
        -42.43px -42.43px 0 1px rgba(81, 158, 243, 0.65), -42.43px -42.43px 0 0 rgba(81, 158, 243, 0.55),
        /* Cerchio intermedio - 12 particelle */
        0 -45px 0 1px rgba(81, 158, 243, 0.9), 0 -45px 0 0 rgba(81, 158, 243, 0.8),
        38.97px -22.5px 0 1px rgba(81, 158, 243, 0.85), 38.97px -22.5px 0 0 rgba(81, 158, 243, 0.75),
        38.97px 22.5px 0 1px rgba(81, 158, 243, 0.8), 38.97px 22.5px 0 0 rgba(81, 158, 243, 0.7),
        0 45px 0 1px rgba(81, 158, 243, 0.75), 0 45px 0 0 rgba(81, 158, 243, 0.65),
        -38.97px 22.5px 0 1px rgba(81, 158, 243, 0.7), -38.97px 22.5px 0 0 rgba(81, 158, 243, 0.6),
        -38.97px -22.5px 0 1px rgba(81, 158, 243, 0.65), -38.97px -22.5px 0 0 rgba(81, 158, 243, 0.55),
        /* Particelle aggiuntive per densità */
        30px -30px 0 1px rgba(81, 158, 243, 0.7), 30px -30px 0 0 rgba(81, 158, 243, 0.6),
        -30px 30px 0 1px rgba(81, 158, 243, 0.65), -30px 30px 0 0 rgba(81, 158, 243, 0.55),
        30px 30px 0 1px rgba(81, 158, 243, 0.6), 30px 30px 0 0 rgba(81, 158, 243, 0.5),
        -30px -30px 0 1px rgba(81, 158, 243, 0.55), -30px -30px 0 0 rgba(81, 158, 243, 0.45),
        /* Particelle più piccole sparse */
        0 -35px 0 0.5px rgba(81, 158, 243, 0.5), 0 -35px 0 0 rgba(81, 158, 243, 0.4),
        24.75px -24.75px 0 0.5px rgba(81, 158, 243, 0.45), 24.75px -24.75px 0 0 rgba(81, 158, 243, 0.35),
        35px 0 0 0.5px rgba(81, 158, 243, 0.4), 35px 0 0 0 rgba(81, 158, 243, 0.3),
        24.75px 24.75px 0 0.5px rgba(81, 158, 243, 0.35), 24.75px 24.75px 0 0 rgba(81, 158, 243, 0.25),
        0 35px 0 0.5px rgba(81, 158, 243, 0.3), 0 35px 0 0 rgba(81, 158, 243, 0.2),
        -24.75px 24.75px 0 0.5px rgba(81, 158, 243, 0.25), -24.75px 24.75px 0 0 rgba(81, 158, 243, 0.15),
        -35px 0 0 0.5px rgba(81, 158, 243, 0.2), -35px 0 0 0 rgba(81, 158, 243, 0.1),
        -24.75px -24.75px 0 0.5px rgba(81, 158, 243, 0.15), -24.75px -24.75px 0 0 rgba(81, 158, 243, 0.1);
    transform: translate(-50%, -50%) rotate(0deg);
    animation: rotateParticlesOuter 12s linear infinite;
    z-index: -1;
    filter: blur(0.3px);
}

/* Particelle interne - ruotano in senso antiorario (ancorate ai titoli) - dimensioni ridotte */
.floating-particles::after {
    box-shadow: 
        /* Cerchio interno - 8 particelle - dimensioni ridotte */
        0 -30px 0 0.5px rgba(81, 158, 243, 0.85), 0 -30px 0 0 rgba(81, 158, 243, 0.75),
        21.21px -21.21px 0 0.5px rgba(81, 158, 243, 0.8), 21.21px -21.21px 0 0 rgba(81, 158, 243, 0.7),
        30px 0 0 0.5px rgba(81, 158, 243, 0.75), 30px 0 0 0 rgba(81, 158, 243, 0.65),
        21.21px 21.21px 0 0.5px rgba(81, 158, 243, 0.7), 21.21px 21.21px 0 0 rgba(81, 158, 243, 0.6),
        0 30px 0 0.5px rgba(81, 158, 243, 0.65), 0 30px 0 0 rgba(81, 158, 243, 0.55),
        -21.21px 21.21px 0 0.5px rgba(81, 158, 243, 0.6), -21.21px 21.21px 0 0 rgba(81, 158, 243, 0.5),
        -30px 0 0 0.5px rgba(81, 158, 243, 0.55), -30px 0 0 0 rgba(81, 158, 243, 0.45),
        -21.21px -21.21px 0 0.5px rgba(81, 158, 243, 0.5), -21.21px -21.21px 0 0 rgba(81, 158, 243, 0.4),
        /* Particelle intermedie - dimensioni ridotte */
        0 -19px 0 0.3px rgba(81, 158, 243, 0.65), 0 -19px 0 0 rgba(81, 158, 243, 0.55),
        13.26px -13.26px 0 0.3px rgba(81, 158, 243, 0.6), 13.26px -13.26px 0 0 rgba(81, 158, 243, 0.5),
        19px 0 0 0.3px rgba(81, 158, 243, 0.55), 19px 0 0 0 rgba(81, 158, 243, 0.45),
        13.26px 13.26px 0 0.3px rgba(81, 158, 243, 0.5), 13.26px 13.26px 0 0 rgba(81, 158, 243, 0.4),
        0 19px 0 0.3px rgba(81, 158, 243, 0.45), 0 19px 0 0 rgba(81, 158, 243, 0.35),
        -13.26px 13.26px 0 0.3px rgba(81, 158, 243, 0.4), -13.26px 13.26px 0 0 rgba(81, 158, 243, 0.3),
        -19px 0 0 0.3px rgba(81, 158, 243, 0.35), -19px 0 0 0 rgba(81, 158, 243, 0.25),
        -13.26px -13.26px 0 0.3px rgba(81, 158, 243, 0.3), -13.26px -13.26px 0 0 rgba(81, 158, 243, 0.2);
    transform: translate(-50%, -50%) rotate(0deg);
    animation: rotateParticlesInner 10s linear infinite reverse;
    z-index: -2; /* Ancora più dietro */
    filter: blur(0.15px);
}

/* Particelle interne - ruotano in senso antiorario (elemento singolo - compatibilità) */
#floating-particles::after {
    box-shadow: 
        /* Cerchio interno - 8 particelle - dimensioni ridotte */
        0 -30px 0 0.5px rgba(81, 158, 243, 0.85), 0 -30px 0 0 rgba(81, 158, 243, 0.75),
        21.21px -21.21px 0 0.5px rgba(81, 158, 243, 0.8), 21.21px -21.21px 0 0 rgba(81, 158, 243, 0.7),
        30px 0 0 0.5px rgba(81, 158, 243, 0.75), 30px 0 0 0 rgba(81, 158, 243, 0.65),
        21.21px 21.21px 0 0.5px rgba(81, 158, 243, 0.7), 21.21px 21.21px 0 0 rgba(81, 158, 243, 0.6),
        0 30px 0 0.5px rgba(81, 158, 243, 0.65), 0 30px 0 0 rgba(81, 158, 243, 0.55),
        -21.21px 21.21px 0 0.5px rgba(81, 158, 243, 0.6), -21.21px 21.21px 0 0 rgba(81, 158, 243, 0.5),
        -30px 0 0 0.5px rgba(81, 158, 243, 0.55), -30px 0 0 0 rgba(81, 158, 243, 0.45),
        -21.21px -21.21px 0 0.5px rgba(81, 158, 243, 0.5), -21.21px -21.21px 0 0 rgba(81, 158, 243, 0.4),
        /* Particelle intermedie - dimensioni ridotte */
        0 -19px 0 0.3px rgba(81, 158, 243, 0.65), 0 -19px 0 0 rgba(81, 158, 243, 0.55),
        13.26px -13.26px 0 0.3px rgba(81, 158, 243, 0.6), 13.26px -13.26px 0 0 rgba(81, 158, 243, 0.5),
        19px 0 0 0.3px rgba(81, 158, 243, 0.55), 19px 0 0 0 rgba(81, 158, 243, 0.45),
        13.26px 13.26px 0 0.3px rgba(81, 158, 243, 0.5), 13.26px 13.26px 0 0 rgba(81, 158, 243, 0.4),
        0 19px 0 0.3px rgba(81, 158, 243, 0.45), 0 19px 0 0 rgba(81, 158, 243, 0.35),
        -13.26px 13.26px 0 0.3px rgba(81, 158, 243, 0.4), -13.26px 13.26px 0 0 rgba(81, 158, 243, 0.3),
        -19px 0 0 0.3px rgba(81, 158, 243, 0.35), -19px 0 0 0 rgba(81, 158, 243, 0.25),
        -13.26px -13.26px 0 0.3px rgba(81, 158, 243, 0.3), -13.26px -13.26px 0 0 rgba(81, 158, 243, 0.2);
    transform: translate(-50%, -50%) rotate(0deg);
    animation: rotateParticlesInner 10s linear infinite reverse;
    z-index: -1;
    filter: blur(0.15px);
}

/* Particelle interne - ruotano in senso antiorario (per compatibilità) */
.glow-particles::after {
    box-shadow: 
        /* Cerchio interno - 8 particelle */
        0 -40px 0 1px rgba(81, 158, 243, 0.85), 0 -40px 0 0 rgba(81, 158, 243, 0.75),
        28.28px -28.28px 0 1px rgba(81, 158, 243, 0.8), 28.28px -28.28px 0 0 rgba(81, 158, 243, 0.7),
        40px 0 0 1px rgba(81, 158, 243, 0.75), 40px 0 0 0 rgba(81, 158, 243, 0.65),
        28.28px 28.28px 0 1px rgba(81, 158, 243, 0.7), 28.28px 28.28px 0 0 rgba(81, 158, 243, 0.6),
        0 40px 0 1px rgba(81, 158, 243, 0.65), 0 40px 0 0 rgba(81, 158, 243, 0.55),
        -28.28px 28.28px 0 1px rgba(81, 158, 243, 0.6), -28.28px 28.28px 0 0 rgba(81, 158, 243, 0.5),
        -40px 0 0 1px rgba(81, 158, 243, 0.55), -40px 0 0 0 rgba(81, 158, 243, 0.45),
        -28.28px -28.28px 0 1px rgba(81, 158, 243, 0.5), -28.28px -28.28px 0 0 rgba(81, 158, 243, 0.4),
        /* Particelle intermedie */
        0 -25px 0 0.5px rgba(81, 158, 243, 0.65), 0 -25px 0 0 rgba(81, 158, 243, 0.55),
        17.68px -17.68px 0 0.5px rgba(81, 158, 243, 0.6), 17.68px -17.68px 0 0 rgba(81, 158, 243, 0.5),
        25px 0 0 0.5px rgba(81, 158, 243, 0.55), 25px 0 0 0 rgba(81, 158, 243, 0.45),
        17.68px 17.68px 0 0.5px rgba(81, 158, 243, 0.5), 17.68px 17.68px 0 0 rgba(81, 158, 243, 0.4),
        0 25px 0 0.5px rgba(81, 158, 243, 0.45), 0 25px 0 0 rgba(81, 158, 243, 0.35),
        -17.68px 17.68px 0 0.5px rgba(81, 158, 243, 0.4), -17.68px 17.68px 0 0 rgba(81, 158, 243, 0.3),
        -25px 0 0 0.5px rgba(81, 158, 243, 0.35), -25px 0 0 0 rgba(81, 158, 243, 0.25),
        -17.68px -17.68px 0 0.5px rgba(81, 158, 243, 0.3), -17.68px -17.68px 0 0 rgba(81, 158, 243, 0.2);
    transform: translate(-50%, -50%) rotate(0deg);
    animation: rotateParticlesInner 10s linear infinite reverse;
    z-index: -1;
    filter: blur(0.2px);
}

/* Attiva le particelle fluttuanti quando visibili */
#floating-particles.visible {
    opacity: 1;
}

#floating-particles:not(.visible) {
    opacity: 0;
}

/* Attiva le particelle quando l'elemento è visibile e nello scroll (per compatibilità) */
.glow-particles.visible::before,
.glow-particles.visible::after {
    opacity: 0.6;
    transition: opacity 0.8s ease-out;
}

/* Particelle completamente visibili quando l'elemento è ben centrato (per compatibilità) */
.glow-particles.particles-visible::before,
.glow-particles.particles-visible::after {
    opacity: 1;
}

/* Nascondi le particelle quando l'elemento esce dal viewport (per compatibilità) */
.glow-particles:not(.visible)::before,
.glow-particles:not(.visible)::after {
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

/* Animazione rotazione particelle esterne */
@keyframes rotateParticlesOuter {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Animazione rotazione particelle interne */
@keyframes rotateParticlesInner {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

/* Disabilita animazioni particelle su dispositivi con preferenza reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .glow-particles::before,
    .glow-particles::after {
        animation: none;
        opacity: 0;
    }
}