/**
 * Dekaii – Film-Titel: buchstabenweiser Aufbau beim Hover
 * Ersetzt die Theme-eigene Block-Einblendung (opacity/translateY des Titels)
 * durch eine buchstabenweise Aufbau-Animation (analog zum Header-Menü).
 * Struktur wird von assets/js/film-title-hover.js erzeugt.
 */

/* Theme-eigene Titel-/Content-Einblendung neutralisieren – der Aufbau
   passiert jetzt buchstabenweise über die .dk-ch-Spans. */
.qodef-portfolio-list .qodef-e-title,
.qodef-video-list .qodef-e-title,
.qodef-pl-item .qodef-e-title,
.qodef-portfolio-list .qodef-e-content-holder,
.qodef-video-list .qodef-e-content-holder,
.qodef-pl-item .qodef-e-content-holder {
    opacity: 1 !important;
    transform: none !important;
}

/* Buchstaben: standardmäßig unsichtbar (leicht nach unten versetzt),
   bauen sich beim Hover einzeln nacheinander auf. */
.qodef-e-title .dk-ch {
    display: inline-block;
    white-space: pre;
    opacity: 0;
    transform: translateY(0.5em);
    transition:
        opacity 0.32s ease,
        transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: 0s;
}

.qodef-e-inner:hover .qodef-e-title .dk-ch,
.qodef-portfolio-list article:hover .qodef-e-title .dk-ch,
.qodef-video-list article:hover .qodef-e-title .dk-ch,
.qodef-pl-item:hover .qodef-e-title .dk-ch {
    opacity: 1;
    transform: translateY(0);
    transition-delay: var(--dk-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
    .qodef-e-title .dk-ch {
        transition: none;
    }
}