/**
 * Titel: Schimmernder Hover-Rahmen für Beitragskarten im Archiv
 * Beschreibung: Fügt den Kadence Beitragskarten auf der Archiv bzw. Blogseite
 *               einen violett schimmernden Hover-Rahmen in der Farbe #7B3FE4 hinzu.
 *               Zusätzlich erhalten die Karten runde Ecken mit 15px, einen leichten
 *               Glow und eine sanfte Anhebung beim Hover.
 */

/* 
 * Grundstyling für jede Beitragskarte
 * position: relative ist nötig, damit das ::before Pseudo-Element sauber
 * innerhalb der Karte positioniert werden kann.
 * overflow: hidden sorgt dafür, dass der Hover-Rahmen die Rundungen korrekt einhält.
 */
#archive-container .entry.content-bg.loop-entry {
    position: relative;
    border-radius: 15px;
    border: 1px solid transparent;
    overflow: hidden;
    z-index: 1;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/*
 * Das ::before Element erzeugt den animierten Schimmer-Rahmen.
 * Über padding entsteht die sichtbare Randstärke.
 * Mit Masking wird nur der Rand sichtbar gemacht, nicht die komplette Fläche.
 */
#archive-container .entry.content-bg.loop-entry::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 15px;
    padding: 3.0px;
    background: linear-gradient(
        120deg,
        rgba(123, 63, 228, 0) 0%,
        rgba(123, 63, 228, 0.15) 20%,
        rgba(123, 63, 228, 0.95) 50%,
        rgba(123, 63, 228, 0.15) 80%,
        rgba(123, 63, 228, 0) 100%
    );
    background-size: 250% 250%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;

    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/*
 * Beim Hover wird der Rand sichtbar und der Schimmer gestartet.
 */
#archive-container .entry.content-bg.loop-entry:hover::before {
    opacity: 1;
    animation: lcsShimmerBorder 2.7s linear infinite;
}

/*
 * Die Karte hebt sich beim Hover leicht an und bekommt einen violetten Glow.
 */
#archive-container .entry.content-bg.loop-entry:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 28px rgba(123, 63, 228, 0.35);
}

/*
 * Animation für den schimmernden Verlauf des Rahmens.
 */
@keyframes lcsShimmerBorder {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}

/*
 * Sorgt dafür, dass äußere Container den Hover-Effekt nicht abschneiden.
 */
#archive-container .entry-list-item {
    overflow: visible;
}

/*
 * Übernimmt die runden Ecken auch für das Beitragsbild im oberen Bereich,
 * damit Bild und Karte optisch sauber zusammenpassen.
 */
#archive-container .entry.content-bg.loop-entry .post-thumbnail,
#archive-container .entry.content-bg.loop-entry .post-thumbnail-inner,
#archive-container .entry.content-bg.loop-entry img {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}