/* Section Border Module - Standalone border separator
 * Creates a full-width visual divider between sections
 */

.section-border-module {
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

/* Default height */
.section-border-container {
    width: 100%;
    height: calc(var(--current-scale) * (0.6vw + 0.3vh)); /* ~10px viewport-scaled height */
    display: flex;
    position: relative;
}

/* Split color styles */
.section-border-split {
    display: flex;
    width: 100%;
    height: 100%;
}

.section-border-split .color-left,
.section-border-split .color-right {
    height: 100%;
}

/* Default 50/50 split */
.section-border-split .color-left {
    width: 50%;
}

.section-border-split .color-right {
    width: 50%;
}

/* Gradient style */
.section-border-gradient {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
}

/* Different split ratio options */
.split-25-75 .color-left {
    width: 25%;
}
.split-25-75 .color-right {
    width: 75%;
}

.split-30-70 .color-left {
    width: 30%;
}
.split-30-70 .color-right {
    width: 70%;
}

.split-40-60 .color-left {
    width: 40%;
}
.split-40-60 .color-right {
    width: 60%;
}

.split-60-40 .color-left {
    width: 60%;
}
.split-60-40 .color-right {
    width: 40%;
}

.split-70-30 .color-left {
    width: 70%;
}
.split-70-30 .color-right {
    width: 30%;
}

.split-75-25 .color-left {
    width: 75%;
}
.split-75-25 .color-right {
    width: 25%;
}

/* Height variations */
.height-xs .section-border-container {
    height: calc(var(--current-scale) * (0.3vw + 0.15vh)); /* ~5px */
}

.height-sm .section-border-container {
    height: calc(var(--current-scale) * (0.6vw + 0.3vh)); /* ~10px */
}

.height-md .section-border-container {
    height: calc(var(--current-scale) * (0.9vw + 0.45vh)); /* ~15px */
}

.height-lg .section-border-container {
    height: calc(var(--current-scale) * (1.2vw + 0.6vh)); /* ~20px */
}

/* Animation options */
.animate-slide .color-left {
    animation: slideFromLeft 1.5s ease forwards;
    transform: translateX(-100%);
}

.animate-slide .color-right {
    animation: slideFromRight 1.5s ease forwards;
    transform: translateX(100%);
}

.animate-fade {
    opacity: 0;
    animation: fadeIn 1s ease-out 0.5s forwards;
}

/* Diagonal accent line */
.diagonal-accent .section-border-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent 49.5%, var(--accent-color, #ffffff) 49.5%, var(--accent-color, #ffffff) 50.5%, transparent 50.5%);
    z-index: 5;
}

/* Animations */
@keyframes slideFromLeft {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
}

@keyframes slideFromRight {
    0% { transform: translateX(100%); }
    100% { transform: translateX(0); }
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hide-tablet {
        display: none;
    }
}

@media (max-width: 480px) {
    .hide-mobile {
        display: none;
    }
    
    .section-border-container:not(.hide-mobile) {
        height: calc(var(--current-scale) * (0.5vw + 0.25vh)); /* Slightly smaller on mobile */
    }
}