/* Effektgruppe: layout/arrow-hover; Reihenfolge in inc/assets.php. */
/* ========================================================== */
/* BASIS-CONTAINER (SECTION) - Löst den Effekt aus             */
/* ========================================================== */
.arrow-hover-section {
  position: relative;
  overflow: visible; 
  cursor: pointer;
}

/* ========================================================== */
/* BILD-CONTAINER (KT-INSIDE-INNER-COL)                       */
/* ========================================================== */
.arrow-hover-section .kt-inside-inner-col {
    position: relative; 
}

/* ========================================================== */
/* WP-BLOCK-KADENCE-IMAGE (TARGET-ELEMENT) - STARTZUSTAND     */
/* * Beinhaltet alle Transformationen und Transitions          */
/* ========================================================== */
.arrow-hover-section .wp-block-kadence-image {
    position: relative;
    display: block; 
    width: 100%; /* Sicherstellen, dass Breite vorhanden ist */
    height: auto;
    /* Startform: Rechteck (6 Punkte für smoothe Transition) */
    clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%);
    transform: translateX(0);
    
    /* Transitions für alle synchronisierten Animationen */
    transition:
        clip-path 0.3s cubic-bezier(0.25, 1, 0.5, 1),
        transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);

    will-change: clip-path, transform;
    backface-visibility: hidden;
    z-index: 1; 
}

/* ---------------------------------------------------------- */
/* OVERLAY-DEFINITION (::after auf .wp-block-kadence-image)   */
/* ---------------------------------------------------------- */
.arrow-hover-section .wp-block-kadence-image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* SYNCHRONISATION START: Gleiche Form und Position wie das Target-Element */
    clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%);
    transform: translateX(0);
    
    /* Farbe: Startet halbtransparent (rgba(0, 0, 0, 0.2)) */
    background-color: rgba(0, 0, 0, 0.0); 
    
    /* Transitions für alle synchronisierten Animationen */
    transition: 
        background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1),
        clip-path 0.3s cubic-bezier(0.25, 1, 0.5, 1),
        transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
        border-radius 0.3s cubic-bezier(0.25, 1, 0.5, 1); /* Transition für Radius hinzufügen */

    pointer-events: none;
    z-index: 2; 
}

/* ========================================================== */
/* BILD-ELEMENT (IMG) - NUR FÜR DIE ANZEIGE                   */
/* ========================================================== */
.arrow-hover-section .wp-block-kadence-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========================================================== */
/* TEXT-ELEMENTE (STARTZUSTAND)                               */
/* ========================================================== */
.arrow-hover-section .arrow-text-1,
.arrow-hover-section .arrow-text-2,
.arrow-hover-section .arrow-text-3 {
    transform: translateX(0); 
    transition: 
        opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
        transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative; 
    z-index: 3; 
}

.arrow-hover-section .arrow-text-2 {
    opacity: 1; 
}

.arrow-hover-section .arrow-text-3 {
    opacity: 0; 
}

/* ========================================================== */
/* HOVER/HOVERED-ZUSTAND (Ausgelöst durch :hover oder .hovered)*/
/* ========================================================== */

/* 1. KADENCE-IMAGE EFFEKT: Pfeil-Zuschnitt und 20% Verschiebung */
/* Hover- und .hovered-Zustand */
.arrow-hover-section:is(:hover, .hovered) .wp-block-kadence-image {
  clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
  border-radius: 0;
  /* Kein translateX hier, mobile/tablet = kein Verschieben */
}

/* Ab Tablet-Breite (z.B. 768px und größer) translateX anwenden */
@media (min-width: 768px) {
  .arrow-hover-section:is(:hover, .hovered) .wp-block-kadence-image {
    transform: translateX(5%);
  }
}

/* 2. OVERLAY EINBLENDEN UND SYNCHRONISIEREN */
.arrow-hover-section:is(:hover, .hovered) .wp-block-kadence-image::after {
    border-radius: 0px!important;
    /* Hintergrundfarbe auf fast volle Transparenz setzen (Ausblenden) */
    background-color: rgba(0, 0, 0, 0.0); 
    
    /* SYNCHRONISATION ENDE: Pfeil-Zuschnitt und 20% Verschiebung */
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);

}

@media (min-width: 768px) {
  .arrow-hover-section:is(:hover, .hovered) .wp-block-kadence-image::after {
        transform: translateX(0%);
  }
}

/* 3. TEXT 1-EFFEKT: 30% Verschiebung nach rechts */
.arrow-hover-section:is(:hover, .hovered) .arrow-text-1 {
    transform: translateX(30%); 
}

/* 4. TEXT 2-EFFEKT: Sichtbar machen und 35% Verschiebung nach rechts */
.arrow-hover-section:is(:hover, .hovered) .arrow-text-2 {
    opacity: 1; 
    transform: translateX(0%); 
}

.arrow-hover-section:is(:hover, .hovered) .arrow-text-3 {
    opacity: 1;
    transform: translateY(-20px); 
}