/**
 * Maritime Patterns CSS
 * Wellen-Muster, Tau-Texturen und maritime Hintergründe
 */

/* ============================================
   Wellen-Muster
   ============================================ */

.waves-divider {
    position: relative;
    width: 100%;
    height: 120px;
    background: transparent;
    overflow: hidden;
}

.waves-divider svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Wellen-Animation */
.waves-divider.animated svg {
    animation: waveMove 8s ease-in-out infinite;
}

@keyframes waveMove {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-25px);
    }
}

/* Wellen-Varianten */
.waves-divider.waves-top {
    transform: rotate(180deg);
}

.waves-divider.waves-small {
    height: 60px;
}

.waves-divider.waves-large {
    height: 180px;
}

/* Wellen als Hintergrund */
.bg-waves {
    background-image: url('../images/patterns/waves-pattern.svg');
    background-repeat: repeat-x;
    background-position: bottom;
    background-size: 1200px 120px;
}

/* ============================================
   Tau/Seil-Muster
   ============================================ */

.rope-divider {
    width: 100%;
    height: 20px;
    background-image: url('../images/patterns/rope-pattern.svg');
    background-repeat: repeat-x;
    background-size: 200px 20px;
    margin: 32px 0;
}

.rope-divider.rope-vertical {
    width: 20px;
    height: 100%;
    background-repeat: repeat-y;
    background-size: 20px 200px;
    margin: 0 32px;
}

/* Tau als Border */
.border-rope {
    border: none;
    border-top: 8px solid transparent;
    border-image: url('../images/patterns/rope-pattern.svg') 8 repeat;
}

.border-rope-bottom {
    border: none;
    border-bottom: 8px solid transparent;
    border-image: url('../images/patterns/rope-pattern.svg') 8 repeat;
}

/* ============================================
   Holz-Textur (Deck) - CSS-basiert
   ============================================ */

.bg-wood-deck {
    background: linear-gradient(90deg, 
        #8B4513 0%, 
        #A0522D 10%, 
        #8B4513 20%,
        #A0522D 30%,
        #8B4513 40%,
        #A0522D 50%,
        #8B4513 60%,
        #A0522D 70%,
        #8B4513 80%,
        #A0522D 90%,
        #8B4513 100%
    );
    background-size: 200px 100%;
    position: relative;
}

.bg-wood-deck::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 19px,
        rgba(0, 0, 0, 0.1) 19px,
        rgba(0, 0, 0, 0.1) 20px
    );
    pointer-events: none;
}

.bg-wood-deck::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
    pointer-events: none;
}

.bg-wood-deck > * {
    position: relative;
    z-index: 1;
}

/* ============================================
   Wasser-Textur - CSS-basiert
   ============================================ */

.bg-water {
    background: linear-gradient(
        135deg,
        var(--scp-light-blue, #4da6d6) 0%,
        var(--scp-secondary-blue, #0066a1) 50%,
        var(--scp-light-blue, #4da6d6) 100%
    );
    background-size: 400% 400%;
    position: relative;
}

.bg-water::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 60% 70%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.12) 0%, transparent 50%);
    pointer-events: none;
}

.bg-water > * {
    position: relative;
    z-index: 1;
}

/* Animierte Wasser-Reflexion */
.bg-water.animated {
    animation: waterGradient 8s ease infinite;
}

.bg-water.animated::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 70%
    );
    animation: waterShimmer 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes waterGradient {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes waterShimmer {
    0%, 100% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(100%);
    }
}

/* ============================================
   Segel-Canvas-Textur - CSS-basiert
   ============================================ */

.bg-sail-canvas {
    background-color: var(--scp-sail-white, #FFFAF0);
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.02) 2px,
            rgba(0, 0, 0, 0.02) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.02) 2px,
            rgba(0, 0, 0, 0.02) 4px
        );
    background-size: 4px 4px;
}

/* ============================================
   Section-Trenner mit Mustern
   ============================================ */

.section-divider {
    position: relative;
    margin: 64px 0;
}

.section-divider-waves {
    position: relative;
    margin: 0;
    padding: 0;
}

.section-divider-waves::before {
    content: '';
    position: absolute;
    top: -60px;
    left: 0;
    right: 0;
    height: 120px;
    background-image: url('../images/patterns/waves-pattern.svg');
    background-repeat: repeat-x;
    background-size: 1200px 120px;
    background-position: bottom;
}

.section-divider-rope {
    position: relative;
    margin: 48px 0;
}

.section-divider-rope::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 20px;
    transform: translateY(-50%);
    background-image: url('../images/patterns/rope-pattern.svg');
    background-repeat: repeat-x;
    background-size: 200px 20px;
}

/* ============================================
   Maritime Gradienten
   ============================================ */

.gradient-ocean {
    background: linear-gradient(
        to bottom,
        var(--scp-light-blue, #4da6d6) 0%,
        var(--scp-secondary-blue, #0066a1) 50%,
        var(--scp-primary-blue, #003d5c) 100%
    );
}

.gradient-sunset {
    background: linear-gradient(
        to bottom,
        #FF6B35 0%,
        #F7931E 30%,
        #FDC830 60%,
        var(--scp-light-blue, #4da6d6) 100%
    );
}

.gradient-horizon {
    background: linear-gradient(
        to bottom,
        var(--scp-light-blue, #4da6d6) 0%,
        rgba(77, 166, 214, 0.5) 50%,
        transparent 100%
    );
}

/* ============================================
   Overlay-Muster
   ============================================ */

.overlay-waves {
    position: relative;
}

.overlay-waves::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background-image: url('../images/patterns/waves-pattern.svg');
    background-repeat: repeat-x;
    background-size: 1200px 120px;
    background-position: bottom;
    pointer-events: none;
    z-index: 1;
}

/* ============================================
   Responsive Anpassungen
   ============================================ */

@media (max-width: 768px) {
    .waves-divider {
        height: 80px;
    }
    
    .waves-divider.waves-large {
        height: 120px;
    }
    
    .bg-waves {
        background-size: 800px 80px;
    }
    
    .section-divider {
        margin: 48px 0;
    }
    
    .section-divider-waves::before {
        height: 80px;
        background-size: 800px 80px;
    }
}

@media (max-width: 480px) {
    .waves-divider {
        height: 60px;
    }
    
    .waves-divider.waves-large {
        height: 90px;
    }
    
    .bg-waves {
        background-size: 600px 60px;
    }
    
    .rope-divider {
        height: 16px;
        background-size: 160px 16px;
    }
    
    .section-divider {
        margin: 32px 0;
    }
    
    .section-divider-rope {
        margin: 32px 0;
    }
}

/* ============================================
   Print-Styles
   ============================================ */

@media print {
    .waves-divider,
    .rope-divider,
    .bg-waves,
    .bg-water,
    .overlay-waves::after {
        display: none;
    }
}