/* ========================================
   セクション区切り装飾
   ======================================== */

/* 波型ディバイダー */
.section-divider {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.section-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 80px;
}

.section-divider.wave-top {
    transform: rotate(180deg);
}

.section-divider.wave-primary {
    fill: var(--color-primary);
    opacity: 0.1;
}

.section-divider.wave-secondary {
    fill: var(--color-secondary);
    opacity: 0.1;
}

.section-divider.wave-white {
    fill: var(--color-white);
}

.section-divider.wave-gray {
    fill: var(--color-gray-50);
}

/* 斜めカットディバイダー */
.section-slant {
    position: relative;
    width: 100%;
    height: 80px;
    overflow: hidden;
}

.section-slant::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    transform: skewY(-2deg);
    transform-origin: top left;
}

/* ドット装飾 */
.section-dots {
    position: relative;
    padding: var(--spacing-xl) 0;
}

.section-dots::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, var(--color-gray-300) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.3;
    z-index: 0;
}

.section-dots > * {
    position: relative;
    z-index: 1;
}

/* アニメーション付きグラデーション装飾 */
.section-gradient-divider {
    position: relative;
    height: 4px;
    background: linear-gradient(90deg, 
        var(--color-primary) 0%, 
        var(--color-accent) 25%,
        var(--color-secondary) 50%,
        var(--color-success) 75%,
        var(--color-primary) 100%
    );
    background-size: 200% 100%;
    animation: gradient-flow 8s linear infinite;
}

@keyframes gradient-flow {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .section-divider svg {
        height: 50px;
    }
    
    .section-slant {
        height: 50px;
    }
}