/**
 * Custom Gallery Styles - Rounded Frames & Shadows
 * 
 * Wendet abgerundete Rahmen und Schatten-Effekte auf die
 * Pelicula Portfolio/Video Grid Widgets an.
 * 
 * Modals werden immer im 16:9 Format angezeigt.
 *
 * @package Dekaii_Film_Gallery_Child
 * @version 1.0.3
 */

/* ==========================================================================
   CSS Custom Properties (für einfache Anpassung)
   ========================================================================== */

:root {
    --dekaii-border-radius: 10px;
    --dekaii-border-radius-mobile: 16px;
    --dekaii-shadow-default: 0 10px 30px rgba(0, 0, 0, 0.15);
    --dekaii-shadow-hover: 0 20px 50px rgba(0, 0, 0, 0.25);
    --dekaii-transition-duration: 0.4s;
    --dekaii-transition-easing: cubic-bezier(0.165, 0.84, 0.44, 1);

    /* Einblende-Animation Einstellungen */
    --dekaii-reveal-duration: 1.2s;
    --dekaii-reveal-delay-step: 0.12s;
    /* Zeitabstand zwischen Items */
    --dekaii-reveal-scale-start: 1.08;
    /* Startgröße (8% größer) */

    /* Aspect Ratio Einstellungen */
    --dekaii-ratio-16x9: 56.25%;
    /* 9 / 16 * 100 */
    --dekaii-ratio-9x16: 177.78%;
    /* 16 / 9 * 100 */
    --dekaii-ratio-1x1: 100%;
    /* 1 / 1 * 100 */
    --dekaii-ratio-max-width-portrait: 500px;
    /* Max Breite für Hochformat */
    --dekaii-ratio-max-width-square: 600px;
    /* Max Breite für Quadrat */
}

/* ==========================================================================
   Blur-to-Sharp Animation für Tagline/Headline
   ========================================================================== */

@keyframes dekaii-blur-reveal {
    0% {
        opacity: 0;
        filter: blur(40px);
        transform: translateY(-50px);
    }

    100% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

/* Tagline "Exploring the intersection..." */
.elementor-element-383c2ca .elementor-heading-title,
.elementor-element-36f21ea p {
    animation: dekaii-blur-reveal 2s cubic-bezier(0.23, 1, 0.32, 1) both !important;
    animation-delay: 0.3s;
}

/* Zweite Zeile leicht verzögert */
.elementor-element-36f21ea p {
    animation-delay: 0.6s;
}

/* ==========================================================================
   Einblende-Animation (Staggered Reveal)
   ========================================================================== */

@keyframes dekaii-reveal {
    0% {
        opacity: 0;
        transform: scale(var(--dekaii-reveal-scale-start));
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Initial state: unsichtbar */
.qodef-portfolio-list article .qodef-e-inner,
.qodef-video-list article .qodef-e-inner,
.qodef-pl-item .qodef-e-inner {
    opacity: 0;
    transform: scale(var(--dekaii-reveal-scale-start));
}

/* Animierter State: wird via JS aktiviert */
.qodef-portfolio-list article .qodef-e-inner.dekaii-revealed,
.qodef-video-list article .qodef-e-inner.dekaii-revealed,
.qodef-pl-item .qodef-e-inner.dekaii-revealed {
    animation: dekaii-reveal var(--dekaii-reveal-duration) var(--dekaii-transition-easing) forwards;
    animation-delay: var(--dekaii-reveal-delay, 0s);
}

/* Fallback für Nutzer mit deaktiviertem JS oder reduced-motion */
@media (prefers-reduced-motion: reduce) {

    .qodef-portfolio-list article .qodef-e-inner,
    .qodef-video-list article .qodef-e-inner,
    .qodef-pl-item .qodef-e-inner {
        opacity: 1;
        transform: scale(1);
        animation: none;
    }
}

/* ==========================================================================
   Overlay Background (Cyan Gradient)
   ========================================================================== */

.qodef-e-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Cyan Gradient - Increased Transparency (0.7 -> 0.4) */
    background: linear-gradient(to bottom, rgba(84, 200, 245, 0.4), rgba(0, 0, 0, 0.6));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
    pointer-events: none;
    border-radius: var(--dekaii-border-radius);
}

.qodef-e-inner:hover::before {
    opacity: 1;
}

/* ==========================================================================
   Play-Button auf Videos verstecken
   ========================================================================== */

/* Play-Button unsichtbar über gesamten Item-Bereich legen für Klickbarkeit */
.qodef-m-play {
    display: block !important;
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 10;
    margin: 0;
}

/* ==========================================================================
   Galerie-Container (Portfolio & Video Lists)
   ========================================================================== */

/* Hauptcontainer für Galerie-Items */
.qodef-portfolio-list article,
.qodef-video-list article,
.qodef-pl-item,
.qodef-e-inner {
    border-radius: var(--dekaii-border-radius);
    overflow: hidden;
    box-shadow: var(--dekaii-shadow-default);
    transition:
        transform var(--dekaii-transition-duration) var(--dekaii-transition-easing),
        box-shadow var(--dekaii-transition-duration) var(--dekaii-transition-easing);
    will-change: transform;
    transform-style: preserve-3d;
}

/* Media-Wrapper innerhalb der Items */
.qodef-m-media,
.qodef-e-media-holder {
    border-radius: var(--dekaii-border-radius);
    overflow: hidden;
}

/* Bilder und Videos innerhalb der Galerie */
.qodef-m-media img,
.qodef-m-media video,
.qodef-e-media-image,
.qodef-e-media-holder img,
.qodef-pl-item img {
    border-radius: var(--dekaii-border-radius);
    transition: transform var(--dekaii-transition-duration) var(--dekaii-transition-easing);
}

/* Overlay-Elemente (Titel, Kategorie) */
.qodef-m-content,
.qodef-e-content {
    border-radius: var(--dekaii-border-radius);
}

/* Klicks durch Overlay zum Play-Button durchlassen */
.qodef-e-content {
    pointer-events: none;
}

/* ==========================================================================
   Film Titel - Zentriert
   ========================================================================== */

.qodef-e-title {
    text-align: center !important;
    width: 100%;
    font-size: 19px !important;
    z-index: 30 !important;
    /* Higher than overlay (10) and link (10) */
    position: relative;
    color: #ffffff !important;
    pointer-events: none;
    /* Let clicks pass through to video link */
}

/* Ensure link inside title also respects size */
.qodef-e-title a {
    font-size: 19px !important;
    color: #ffffff !important;
}

/* Titel nicht klickbar machen */
.qodef-e-title-link {
    display: block;
    text-align: center;
    pointer-events: none;
    cursor: default;
}

/* ==========================================================================
   Film Kategorien - Ausgeblendet
   ========================================================================== */

.qodef-e-info--categories,
.qodef-e-category {
    display: none !important;
}

/* ==========================================================================
   Hover-States
   ========================================================================== */

/* Verstärkter Schatten beim Hover */
.qodef-portfolio-list article:hover,
.qodef-video-list article:hover,
.qodef-pl-item:hover,
.qodef-e-inner:hover {
    box-shadow: var(--dekaii-shadow-hover);
}

/* ==========================================================================
   Elementor-spezifische Selektoren (falls verwendet)
   ========================================================================== */

/* Elementor Widget Container */
.elementor-widget-portfolio article,
.elementor-widget-video-list article {
    border-radius: var(--dekaii-border-radius);
    overflow: hidden;
}

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

@media (max-width: 1024px) {
    :root {
        --dekaii-border-radius: 20px;
    }
}

@media (max-width: 768px) {
    :root {
        --dekaii-border-radius: var(--dekaii-border-radius-mobile);
    }

    /* Reduzierte Schatten auf Mobile für Performance */
    .qodef-portfolio-list article,
    .qodef-video-list article,
    .qodef-pl-item,
    .qodef-e-inner {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
}

@media (max-width: 480px) {
    :root {
        --dekaii-border-radius: 12px;
    }
}

/* ==========================================================================
   Performance-Optimierungen
   ========================================================================== */

/* GPU-Beschleunigung für smoother Transitions */
.qodef-portfolio-list article,
.qodef-video-list article,
.qodef-pl-item {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Reduzierte Motion für Nutzer mit Präferenz */
@media (prefers-reduced-motion: reduce) {

    .qodef-portfolio-list article,
    .qodef-video-list article,
    .qodef-pl-item,
    .qodef-e-inner {
        transition: none;
    }
}

/* ==========================================================================
   Modal/Popup - Standard 16:9 Format
   ========================================================================== */

/* Modal Container Basis-Styles */
.qodef-popup-holder,
.qodef-m-popup,
.mfp-container,
.qodef-video-popup {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Modal Content Wrapper - Immer 16:9 */
.qodef-popup-holder .qodef-m-content,
.mfp-content {
    position: relative !important;
    display: block !important;
    width: 90vw !important;
    max-width: 1200px !important;
    height: auto !important;
}

/* Modal Video/iframe - Immer 16:9 */
.qodef-popup-holder iframe,
.qodef-popup-holder video,
.mfp-content iframe,
.mfp-content video {
    display: block !important;
    border: none !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 300px !important;
}

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

@media (max-width: 768px) {

    /* Portrait Modals auf Tablets */
    .dekaii-ratio-9x16 .mfp-content,
    .dekaii-ratio-9x16 .qodef-m-content {
        max-width: min(400px, 90vw);
        height: 85vh;
    }

    /* Square Modals auf Tablets */
    .dekaii-ratio-1x1 .mfp-content,
    .dekaii-ratio-1x1 .qodef-m-content {
        width: min(600px, 85vmin) !important;
        height: min(600px, 85vmin);
    }
}

@media (max-width: 480px) {

    /* Landscape Modals auf Mobile */
    .dekaii-ratio-16x9 .mfp-content,
    .dekaii-ratio-16x9 .qodef-m-content {
        width: 95vw !important;
    }

    /* Portrait Modals auf Mobile */
    .dekaii-ratio-9x16 .mfp-content,
    .dekaii-ratio-9x16 .qodef-m-content {
        max-width: min(320px, 95vw);
        height: 80vh;
    }

    .dekaii-ratio-9x16 iframe,
    .dekaii-ratio-9x16 video {
        max-height: 80vh;
    }

    /* Square Modals auf Mobile */
    .dekaii-ratio-1x1 .mfp-content,
    .dekaii-ratio-1x1 .qodef-m-content {
        width: min(95vw, 95vh) !important;
        height: min(95vw, 95vh);
    }
}


/* Scroll Line Animation Variables */
:root {
    --dekaii-line-width: 4px;
    --dekaii-line-color: #7FD3EE;
    --dekaii-line-offset: 24px;
    --dekaii-line-offset-right: 24px;
    --dekaii-line-offset-left: 24px;
    --dekaii-line-glow: 0 0 16px rgba(255, 107, 107, 0.5);
}

:root {
    --dekaii-header-safe: 110px;
}

/* anpassen */

.dekaii-scroll-line-svg {
    clip-path: inset(var(--dekaii-header-safe) 0 0 0);
}

/* ==========================================================================
   Header Z-Index Fix
   ========================================================================== */

/* Force sticky header above everything (Scroll Line is 0) */
#haru-header.is-sticky,
#haru-header.header-sticky,
.haru-main-header.is-sticky,
.haru-main-header.header-sticky,
#haru-header,
.haru-main-header {
    z-index: 99999 !important;
}

/* ==========================================================================
   Footer Fix - Disable Reveal Effect
   ========================================================================== */

#haru-footer,
.haru-footer,
footer {
    position: relative !important;
    /* Force standard flow */
    z-index: 10 !important;
    /* Ensure it sits with/above background content */
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* Ensure content wrapper doesn't cover it */
#page-content,
.qodef-page-content {
    margin-bottom: 0 !important;
    z-index: 1 !important;
}