/*
==============================================================================
LUVEX THEME - PAGE: MERCURY UV LAMPS (OVERHAULED)
==============================================================================
*/

/*
==============================================================================
1. HERO SECTION & ANIMATION
==============================================================================
*/

.mercury-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Zentriert den Container vertikal */
    height: 80vh;
    min-height: 600px;
    max-height: 800px;
    overflow: hidden;
    text-align: center;
    padding: 2rem;
}

/* Add the global hero grid background */
.mercury-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><pattern id="hero-grid" width="50" height="50" patternUnits="userSpaceOnUse"><path d="M 50 0 L 0 0 0 50" fill="none" stroke="rgba(109, 213, 237, 0.1)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23hero-grid)"/></svg>');
    opacity: 0.4;
    pointer-events: none;
    z-index: 2; /* Above canvas, below content */
}

#mercury-animation-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Animation is the base layer */
}

.mercury-hero .luvex-hero__container {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.mercury-hero .luvex-hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8vh; /* Kontrollierter, responsiver Abstand zwischen den Elementen */
    max-width: 900px;
}

/* Alle Margins zurücksetzen, da Flexbox die Positionierung übernimmt */
.mercury-hero .luvex-hero__title,
.mercury-hero .luvex-hero__cta-container,
.mercury-hero .luvex-hero__description {
    margin: 0;
}

.mercury-hero .luvex-hero__description {
    max-width: 700px;
}


/*
==============================================================================
2. CUSTOM CURSOR
==============================================================================
*/

/* Standard-Cursor in den aktiven Zonen ausblenden */
.mercury-hero,
.site-header:not(.scrolled) {
    cursor: none;
}

.mercury-hero a,
.mercury-hero button,
.site-header:not(.scrolled) a,
.site-header:not(.scrolled) button {
    cursor: none;
}

/* Container für den Custom Cursor */
.mercury-cursor {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99999;
    opacity: 0;
    transform: translate(-50%, -50%); /* Zentriert das Element auf der Mausposition */
    transition: opacity 0.3s ease;
    will-change: transform;
}

/* Der sichtbare Teil des Cursors (der leuchtende Punkt) */
.mercury-cursor__dot {
    width: 8px;
    height: 8px;
    background-color: #a17de0; /* Violett, passend zur Animation */
    border-radius: 50%;
    transition: all 0.2s ease-out;
    box-shadow: 0 0 10px #a17de0, 0 0 20px #a17de0, 0 0 30px #a17de0;
}

/* Zustand: Aktiv (sichtbar) */
.mercury-cursor.is-active {
    opacity: 1;
}

/* Zustand: Hover über einem interaktiven Element */
.mercury-cursor.is-hovering .mercury-cursor__dot {
    transform: scale(4);
    background-color: rgba(161, 125, 224, 0.2); /* Transparenter violetter Kreis */
    box-shadow: none;
}

/* Zustand: Spezieller Hover-Effekt für den Header */
.mercury-cursor.is-header-hover .mercury-cursor__dot {
    transform: scale(2.5);
    background-color: transparent;
    border: 2px solid #a17de0;
    box-shadow: 0 0 15px #a17de0;
}

/* Zustand: Klick wird ausgeführt */
.mercury-cursor.is-clicking .mercury-cursor__dot {
    transform: scale(3.5);
    background-color: rgba(161, 125, 224, 0.4);
}


/*
==============================================================================
3. PAGE-SPECIFIC COMPONENT STYLES
==============================================================================
*/
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.comparison-table th,
.comparison-table td {
    padding: 1rem 1.5rem;
    text-align: left;
    border-bottom: 1px solid var(--luvex-gray-200);
}

.comparison-table th {
    background: var(--luvex-dark-blue);
    color: white;
    font-weight: 600;
}

.comparison-table th.highlight {
    background: var(--luvex-bright-cyan);
    color: var(--luvex-dark-blue);
}

.comparison-table td.highlight {
    font-weight: 600;
    color: var(--luvex-dark-blue);
}

.comparison-table strong {
    color: var(--luvex-dark-blue);
}