/**
 * Scroll Animations - CSS Styles
 * Verwendet mit JavaScript Intersection Observer API
 * Basierend auf Coding2GO Tutorial
 */

/* ============================================
   GRUNDZUSTAND: Unsichtbar
   ============================================ */

.scroll-hidden {
    opacity: 0;
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Langsamere Animation für bestimmte Elemente */
.scroll-hidden.slow {
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

/* Fade Up (von unten) */
.scroll-hidden.fade-up {
    transform: translateY(40px);
}

/* Fade Left (von links) */
.scroll-hidden.fade-left {
    transform: translateX(-40px);
}

/* Fade Right (von rechts) */
.scroll-hidden.fade-right {
    transform: translateX(40px);
}

/* Scale In (leichte Skalierung) */
.scroll-hidden.scale-in {
    transform: scale(0.95);
}

/* Fade In (nur Opacity, keine Bewegung) */
.scroll-hidden.fade-in {
    transform: none;
}

/* ============================================
   ANIMIERTER ZUSTAND: Sichtbar
   ============================================ */

.scroll-hidden.scroll-show {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

/* ============================================
   HIGHLIGHT-BOX: Auffälliger Effekt für wichtige Inhalte
   ============================================ */

.scroll-hidden.highlight-box {
    transform: scale(0.98);
    border-left: 4px solid transparent;
    padding-left: 15px;
    background: transparent;
    transition: opacity 1.5s ease-out, transform 1.5s ease-out,
        border-color 1.5s ease-out, background 1.5s ease-out,
        box-shadow 1.5s ease-out;
}

.scroll-hidden.highlight-box.scroll-show {
    border-left-color: #4a90a4;
    /* Dezentes Blau-Grau passend zu Natursteinen */
    background: linear-gradient(90deg, rgba(74, 144, 164, 0.08) 0%, transparent 100%);
    box-shadow: 0 4px 15px rgba(74, 144, 164, 0.1);
}

/* Grüne Variante - wie auf der Anfrage-Seite */
.scroll-hidden.highlight-box-green {
    transform: scale(0.98);
    border-left: 4px solid transparent;
    padding-left: 15px;
    background: transparent;
    transition: opacity 2.2s ease-out, transform 2.2s ease-out,
        border-color 2.2s ease-out, background 2.2s ease-out,
        box-shadow 2.2s ease-out;
}

.scroll-hidden.highlight-box-green.scroll-show {
    border-left-color: #68ab03;
    /* Naturstein-Grün von der Anfrage-Seite */
    background: linear-gradient(135deg, #f8fdf9 0%, #e8f5e9 100%);
    box-shadow: 0 4px 15px rgba(104, 171, 3, 0.1);
}

/* ============================================
   DELAY-KLASSEN für gestaffeltes Erscheinen
   ============================================ */

.scroll-hidden.delay-1 {
    transition-delay: 0.1s;
}

.scroll-hidden.delay-2 {
    transition-delay: 0.2s;
}

.scroll-hidden.delay-3 {
    transition-delay: 0.3s;
}

.scroll-hidden.delay-4 {
    transition-delay: 0.4s;
}

.scroll-hidden.delay-5 {
    transition-delay: 0.5s;
}

/* ============================================
   BARRIEREFREIHEIT: Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .scroll-hidden {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .scroll-hidden.scroll-show {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================
   MOBILE: Schnellere Animationen für Handys
   ============================================ */

@media (max-width: 767px) {

    /* Basis-Animation: 1s -> 0.5s */
    .scroll-hidden {
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }

    /* Slow-Animation: 1.5s -> 0.8s */
    .scroll-hidden.slow {
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }

    /* Highlight-box: 1.5s -> 0.8s */
    .scroll-hidden.highlight-box {
        transition: opacity 0.8s ease-out, transform 0.8s ease-out,
            border-color 0.8s ease-out, background 0.8s ease-out,
            box-shadow 0.8s ease-out;
    }

    /* Highlight-box-green: 2.2s -> 1s */
    .scroll-hidden.highlight-box-green {
        transition: opacity 1s ease-out, transform 1s ease-out,
            border-color 1s ease-out, background 1s ease-out,
            box-shadow 1s ease-out;
    }
}

/* ============================================
   GALERIE-ANIMATIONEN: Gestaffelte Reihen
   ============================================ */

/* Langsamere Animation für Galerie-Thumbnails */
.thumbnail-gallery .scroll-hidden {
    transition: opacity 2.5s ease-out, transform 2.5s ease-out;
}

/* Automatische Delays für 6-Spalten-Raster (Desktop) */
.thumbnail-gallery .row>.scroll-hidden:nth-child(6n+1) {
    transition-delay: 0s;
}

.thumbnail-gallery .row>.scroll-hidden:nth-child(6n+2) {
    transition-delay: 0.08s;
}

.thumbnail-gallery .row>.scroll-hidden:nth-child(6n+3) {
    transition-delay: 0.16s;
}

.thumbnail-gallery .row>.scroll-hidden:nth-child(6n+4) {
    transition-delay: 0.24s;
}

.thumbnail-gallery .row>.scroll-hidden:nth-child(6n+5) {
    transition-delay: 0.32s;
}

.thumbnail-gallery .row>.scroll-hidden:nth-child(6n+6) {
    transition-delay: 0.40s;
}

/* Mobile: 3-Spalten-Raster + schnellere Animation */
@media (max-width: 767px) {

    /* Galerie-Thumbnails: 2.5s -> 1.2s */
    .thumbnail-gallery .scroll-hidden {
        transition: opacity 1.2s ease-out, transform 1.2s ease-out;
    }

    .thumbnail-gallery .row>.scroll-hidden:nth-child(3n+1) {
        transition-delay: 0s;
    }

    .thumbnail-gallery .row>.scroll-hidden:nth-child(3n+2) {
        transition-delay: 0.08s;
    }

    .thumbnail-gallery .row>.scroll-hidden:nth-child(3n+3) {
        transition-delay: 0.15s;
    }
}

/* ============================================
   BILD-SPEZIFISCHE ANIMATIONEN
   ============================================ */

/* Reveal Zoom: Bild zoomt leicht ein */
.scroll-hidden.reveal-zoom {
    transform: scale(1.03);
}

.scroll-hidden.reveal-zoom.scroll-show {
    transform: scale(1);
}

/* Reveal Zoom mit Bewegung von unten */
.scroll-hidden.reveal-zoom-up {
    transform: scale(1.03) translateY(20px);
}

.scroll-hidden.reveal-zoom-up.scroll-show {
    transform: scale(1) translateY(0);
}

/* Für 2x2 Grid (Main Gallery) - etwas längere Delays */
.main-gallery .scroll-hidden:nth-child(1) {
    transition-delay: 0s;
}

.main-gallery .scroll-hidden:nth-child(2) {
    transition-delay: 0.15s;
}

.main-gallery .scroll-hidden:nth-child(3) {
    transition-delay: 0.3s;
}

.main-gallery .scroll-hidden:nth-child(4) {
    transition-delay: 0.45s;
}