/**
 * Alpine Mist Ripple Gallery – Frontend Styles
 *
 * Stile für die Galerie-Container, Canvas und Fallback-Elemente.
 * Unterstützt: prefers-reduced-motion, dark-mode-kompatibel.
 *
 * @package AlpineMistRippleGallery
 * @version 1.0.0
 */

/* ============================================================
   CONTAINER & WRAPPER
   ============================================================ */

.mist-ripple-gallery-wrapper {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    background-color: #1a1e27; /* Dunkler Hintergrund während des Ladens */
    border-radius: inherit;    /* Eltern-Radius übernehmen (z.B. Card-Layout) */
}

.mist-ripple-gallery-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
}

/* ============================================================
   WEBGL CANVAS
   ============================================================ */

.mist-ripple-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;   /* !important verhindert Überschreibung durch Themes */
    height: 100% !important;
    display: block;
    cursor: crosshair;        /* Visuelles Feedback: Canvas ist interaktiv */

    /* Sanftes Einblenden sobald Bild geladen ist */
    opacity: 0;
    animation: amrg-canvas-fadein 0.8s ease-out 0.2s forwards;

    /* Kein User-Select auf Canvas */
    user-select: none;
    -webkit-user-select: none;

    /* Touch-Action für besseres Mobile-Handling */
    touch-action: none;
}

@keyframes amrg-canvas-fadein {
    from { opacity: 0; transform: scale(1.02); }
    to   { opacity: 1; transform: scale(1.0); }
}

/* ============================================================
   FALLBACK – Statisches Bild (ohne WebGL)
   ============================================================ */

.mist-ripple-gallery-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* CSS-Nebel-Animation als Fallback (wenn WebGL nicht verfügbar) */
.amrg-fog-fallback {
    animation: amrg-fog-move 8s ease-in-out infinite alternate;
}

@keyframes amrg-fog-move {
    0%   { filter: brightness(1.0) contrast(1.0); }
    30%  { filter: brightness(1.08) contrast(0.95) blur(0.5px); }
    60%  { filter: brightness(0.97) contrast(1.02); }
    100% { filter: brightness(1.05) contrast(0.97) blur(0.3px); }
}

/* ============================================================
   ELEMENTOR EDITOR VORSCHAU
   ============================================================ */

.amrg-editor-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    pointer-events: none;
}

.amrg-editor-label {
    color: #ffffff;
    font-size: 13px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    text-align: center;
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 6px;
    line-height: 1.5;
    max-width: 80%;
}

/* Elementor Preview */
.mist-ripple-gallery-wrapper.elementor-preview {
    background-size: cover !important;
    background-position: center !important;
}

/* ============================================================
   PLACEHOLDER (Kein Bild gewählt)
   ============================================================ */

.amrg-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 300px;
    background: linear-gradient(135deg, #e8edf5, #d0dae8);
    border: 2px dashed #a0aec0;
    border-radius: 6px;
    color: #718096;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

.amrg-placeholder .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    color: #a0aec0;
}

.amrg-placeholder p {
    margin: 0;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ============================================================
   HINWEIS / NOTICE
   ============================================================ */

.amrg-notice {
    padding: 12px 16px;
    background: #fff8e1;
    border-left: 4px solid #f6ad55;
    border-radius: 4px;
    font-size: 14px;
    color: #744210;
    margin: 0;
}

/* ============================================================
   PREFERS-REDUCED-MOTION
   Deaktiviert alle Animationen für Nutzer die das wünschen
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .mist-ripple-canvas {
        display: none !important; /* WebGL-Canvas verstecken */
    }

    .amrg-fog-fallback {
        animation: none !important;
        filter: none !important;
    }

    .amrg-canvas-fadein {
        animation: none !important;
        opacity: 1 !important;
    }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .mist-ripple-canvas {
        cursor: default; /* Kein Crosshair auf Touch-Geräten */
    }
}

/* ============================================================
   LOADING SKELETON
   Zeigt einen Ladeindikator bevor das Bild/Canvas bereit ist
   ============================================================ */

.mist-ripple-gallery-container::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        #e2e8f0 25%,
        #edf2f7 50%,
        #e2e8f0 75%
    );
    background-size: 200% 100%;
    animation: amrg-skeleton-shimmer 1.5s infinite linear;
    z-index: 0;
    pointer-events: none;
}

/* Skeleton entfernen sobald initialisiert */
.mist-ripple-gallery-container[data-amrg-initialized="true"]::before {
    display: none;
}

@keyframes amrg-skeleton-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .mist-ripple-gallery-container::before {
        animation: none;
        background: #e2e8f0;
    }
}