/* WML Heading Separator Base Styles */

.wml-heading-separator-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 30px;
}

.wml-hs-text {
    margin: 0;
    width: 100%;
    text-align: center;
}

.wml-hs-separator {
    width: 100%;
}

/* 1. The Royal Fade */
.wml-hs-sep-royal {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--hs-royal-center, #d4af37) 50%, transparent 100%);
    border: none;
    margin: 0;
}

/* 2. The Art Deco Diamond */
.wml-hs-sep-diamond { display: flex; align-items: center; justify-content: center; }
.wml-hs-sep-diamond::before, .wml-hs-sep-diamond::after {
    content: ""; height: 1px; flex-grow: 1; max-width: 35%; background: var(--hs-diamond-line, #e0e0e0);
}
.wml-hs-sep-diamond span {
    width: 10px; height: 10px; border: 1px solid var(--hs-diamond-color, #d4af37);
    transform: rotate(45deg); margin: 0 20px; flex-shrink: 0;
}

/* 3. The Minimalist Duo */
.wml-hs-sep-duo {
    display: flex; flex-direction: column; align-items: center; max-width: 50px; margin: 0;
}
.wml-hs-sep-duo div { height: 2px; width: 100%; background: var(--hs-duo-line, #2c3e50); margin-bottom: 5px; }
.wml-hs-sep-duo div:last-child { width: 25px; margin: 0; background: var(--hs-duo-accent, #d4af37); }

/* 4. Pulse Dots */
.wml-hs-sep-pulse { display: flex; justify-content: center; gap: 12px; cursor: pointer; }
.wml-hs-sep-pulse span { 
    width: 6px; height: 6px; background: var(--hs-pulse-base, #ddd); border-radius: 50%; 
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}
.wml-heading-separator-wrapper:hover .wml-hs-sep-pulse span {
    background: var(--hs-pulse-hover, #d4af37);
    transform: scale(1.8);
}
.wml-heading-separator-wrapper:hover .wml-hs-sep-pulse span:nth-child(1) { transition-delay: 0s; }
.wml-heading-separator-wrapper:hover .wml-hs-sep-pulse span:nth-child(2) { transition-delay: 0.1s; }
.wml-heading-separator-wrapper:hover .wml-hs-sep-pulse span:nth-child(3) { transition-delay: 0.2s; }

/* 5. Architectural Parallel */
.wml-hs-sep-arch { display: flex; justify-content: center; }
.wml-hs-sep-arch::before {
    content: ""; width: 80px; height: 5px;
    border-top: 1px solid var(--hs-arch-color, #d4af37); 
    border-bottom: 1px solid var(--hs-arch-color, #d4af37);
}

/* 6. Neon Thread */
.wml-hs-sep-neon { height: 1px; background: var(--hs-neon-base, #eee); position: relative; overflow: hidden; }
.wml-hs-sep-neon::after {
    content: ""; position: absolute; top: 0; left: -100%; height: 100%; width: 50%;
    background: linear-gradient(90deg, transparent, var(--hs-neon-glow, #d4af37), transparent);
    animation: wml-hs-travel 3s infinite linear;
}
@keyframes wml-hs-travel { 100% { left: 100%; } }

/* 7. Heritage Initial */
.wml-hs-sep-serif { display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--hs-heritage-symbol, #d4af37); font-family: 'Georgia', serif; }
.wml-hs-sep-serif::before, .wml-hs-sep-serif::after { 
    content: ""; flex: 1; height: 1px; 
    background: radial-gradient(circle at center, var(--hs-heritage-start, #ccc), transparent); 
}
.wml-hs-sep-serif span { padding: 0 20px; font-style: italic; white-space: nowrap; }

/* 8. Triple Accent */
.wml-hs-sep-triple { display: flex; justify-content: center; align-items: center; gap: 8px; }
.wml-hs-sep-triple .line { flex-grow: 1; max-width: 30px; height: 1px; background: var(--hs-triple-line, #bbb); }
.wml-hs-sep-triple .dot { width: 4px; height: 4px; background: var(--hs-triple-dot, #d4af37); border-radius: 50%; flex-shrink: 0; }

/* 9. Roman Column */
.wml-hs-sep-roman { display: flex; justify-content: center; align-items: center; gap: 4px; }
.wml-hs-sep-roman span { width: 2px; height: 20px; background: var(--hs-roman-side, #ddd); display: block; }
.wml-hs-sep-roman span:nth-child(2) { background: var(--hs-roman-center, #d4af37); height: 25px; margin-top: 0; }

/* 10. Floating Orb */
.wml-hs-sep-orb { display: flex; align-items: center; justify-content: center; }
.wml-hs-sep-orb::before, .wml-hs-sep-orb::after { content: ""; height: 1px; flex-grow: 1; max-width: 60px; background: var(--hs-orb-line, #eee); }
.wml-hs-sep-orb .orb {
    width: 4px; height: 4px; background: var(--hs-orb-core, #2c3e50); border-radius: 50%;
    margin: 0 10px; flex-shrink: 0;
    box-shadow: 0 0 0 4px var(--hs-orb-ring1, #ffffff), 0 0 0 5px var(--hs-orb-ring2, #d4af37);
}