/* ============================================================
 * MS27 – UX: Skeleton · Hover · Scroll-Reveal · States
 * ============================================================ */


/* ============================================================
 * 1. REDUCED MOTION – globaler Override
 * ============================================================ */

@media ( prefers-reduced-motion: reduce ) {

    *,
    *::before,
    *::after {
        animation-duration:        0.01ms !important;
        animation-iteration-count: 1      !important;
        transition-duration:       0.01ms !important;
    }

    html {
        scroll-behavior: auto !important;
    }

}


/* ============================================================
 * 2. SKELETON LOADER
 *    Shimmer-Hintergrund auf Bild-Containern; verschwindet,
 *    sobald das <img> die Klasse .is-loaded trägt.
 * ============================================================ */

@keyframes ms-skeleton-shimmer {
    from { background-position: -200% 0; }
    to   { background-position:  200% 0; }
}

.ms-gallery__item,
.ms-portfolio-card__image,
.ms-post-card__image {
    background:      linear-gradient(
        90deg,
        var( --ms-surface ) 25%,
        var( --ms-border  ) 50%,
        var( --ms-surface ) 75%
    );
    background-size: 200% 100%;
    animation:       ms-skeleton-shimmer 1.4s ease infinite;
}

/* Shimmer stoppen, sobald Bild geladen */
.ms-gallery__item:has( .is-loaded ),
.ms-portfolio-card__image:has( .is-loaded ),
.ms-post-card__image:has( .is-loaded ) {
    animation:  none;
    background: none;
}


/* ============================================================
 * 3. BILD-FADE-IN
 *    Bilder starten unsichtbar; .is-loaded löst Einblendung aus.
 * ============================================================ */

.ms-gallery__img:not( .is-loaded ),
.ms-portfolio-card__image img:not( .is-loaded ),
.ms-post-card__image img:not( .is-loaded ) {
    opacity: 0;
}

.ms-gallery__img.is-loaded,
.ms-portfolio-card__image img.is-loaded,
.ms-post-card__image img.is-loaded {
    opacity:    1;
    transition: opacity 0.35s ease;
}


/* ============================================================
 * 4. HOVER – GALERIE-BILDER
 * ============================================================ */

.ms-gallery__item img {
    transition: transform 0.3s ease;
    will-change: transform;
}

.ms-gallery__item:hover img,
.ms-gallery__item:focus-within img {
    transform: scale( 1.04 );
}

.ms-gallery--filmstrip .ms-gallery__item:hover img {
    transform: scale( 1.06 );
}


/* ============================================================
 * 5. SCROLL-REVEAL
 *    JS fügt .ms-will-reveal hinzu; IntersectionObserver
 *    ergänzt .is-visible, sobald das Element sichtbar wird.
 * ============================================================ */

.ms-will-reveal {
    opacity:    0;
    transform:  translateY( 14px );
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.ms-will-reveal.is-visible {
    opacity:   1;
    transform: none;
}

/* Gestaffelte Delays in Grid-Gruppen */
.ms-will-reveal:nth-child( 2 ) { transition-delay: 0.07s; }
.ms-will-reveal:nth-child( 3 ) { transition-delay: 0.14s; }
.ms-will-reveal:nth-child( 4 ) { transition-delay: 0.21s; }

@media ( prefers-reduced-motion: reduce ) {
    .ms-will-reveal {
        opacity:    1;
        transform:  none;
        transition: none;
    }
}


/* ============================================================
 * 6. LEERE ZUSTÄNDE
 * ============================================================ */

.ms-empty-state {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             var( --ms-space-3 );
    padding:         var( --ms-space-6 ) var( --ms-space-4 );
    color:           var( --ms-text-subtle );
    text-align:      center;
}

.ms-empty-state__icon {
    font-size:   2.25rem;
    line-height: 1;
    opacity:     0.4;
}

.ms-empty-state__text {
    margin:      0;
    font-size:   0.9rem;
    line-height: 1.55;
}


/* ============================================================
 * 7. FEHLERZUSTÄNDE
 * ============================================================ */

.ms-error-state {
    padding:       var( --ms-space-4 );
    background:    var( --ms-alert-error-bg );
    border:        1px solid rgba( 239, 68, 68, 0.25 );
    border-radius: var( --ms-radius );
    color:         var( --ms-color-error );
    font-size:     0.875rem;
    text-align:    center;
}

/* Gebrochene Bilder ausblenden */
img.is-broken {
    opacity: 0;
}

/* Placeholder in Galerie- und Portfolio-Containern */
.ms-gallery__item:has( img.is-broken ),
.ms-portfolio-card__image:has( img.is-broken ) {
    background: var( --ms-surface );
    animation:  none;
}

.ms-gallery__item:has( img.is-broken )::after,
.ms-portfolio-card__image:has( img.is-broken )::after {
    content:         '—';
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var( --ms-text-subtle );
    opacity:         0.4;
    font-size:       1.25rem;
    pointer-events:  none;
}