/*
Theme Name: Most Child
Template: most
Author: Oissim Pixelwork
Version: 1.4.0.1763398719
Updated: 2025-11-17 16:58:39

*/

/*********************************************
 * SYNCHRO HOVERS — PORTFOLIO PREV & NEXT
 * (100% CSS — aucun changement HTML/PHP)
 *********************************************/

/*********************************************
 * SYNCHRO HOVERS — PORTFOLIO PREV & NEXT
 * (100% CSS — aucun changement HTML/PHP)
 *********************************************/

/* =============================
   BASE : garder les transitions
   ============================= */

.ms-spn--content.row .ms-spn--text h1,
.ms-spn--content.row .ms-spn--text h3,
.ms-spn--content.row .ms-spn--text svg {
    transition: all .6s var(--ease-out);
}

/*********************************************
 * 1) IMAGE — HOVER SYNCHRONISÉ
 * (scale + brightness + animation flash)
 *********************************************/

/* PREV : TEXTE (2) → IMAGE (1) */
.ms-spn--content.row:has(> .ms-spn--text.prev.col-md-6:nth-child(2):hover)
    > .col-md-6:nth-child(1) img,

/* NEXT : TEXTE (3) → IMAGE (4) */
.ms-spn--content.row:has(> .ms-spn--text.col-md-6:nth-child(3):hover)
    > .col-md-6:nth-child(4) img {

    /* mêmes transitions que hover natif */
    transition: margin-top 1s cubic-bezier(.575,.015,0,.995),
                transform 1s cubic-bezier(.575,.015,0,.995),
                filter .6s var(--ease-out);

    /* valeurs finales du hover natif */
    transform: scale(1.08);
    filter: brightness(100%);

    /* même animation flash */
    animation: hoverfilter 1s cubic-bezier(.575,.015,0,.995);
}

/*********************************************
 * 2) TEXTE PREV — HOVER SYNCHRONISÉ
 * (couleur h1 + déplacement h3 + déplacement svg)
 *********************************************/

/* HOVER IMAGE (1) → TEXTE (2) */
.ms-spn--content.row:has(> .col-md-6:nth-child(1):hover)
    > .ms-spn--text.prev.col-md-6:nth-child(2) .ms-spn--link svg {
    transform: translateX(0) !important;
}

.ms-spn--content.row:has(> .col-md-6:nth-child(1):hover)
    > .ms-spn--text.prev.col-md-6:nth-child(2) h3 {
    transform: translateX(-1.5em);
    color: var(--color-contrast-higher);
}

.ms-spn--content.row:has(> .col-md-6:nth-child(1):hover)
    > .ms-spn--text.prev.col-md-6:nth-child(2) h1 {
    color: var(--color-primary);
}

/*********************************************
 * 3) TEXTE NEXT — HOVER SYNCHRONISÉ
 * (couleur h1 + déplacement h3/svg)
 *********************************************/

/* HOVER IMAGE (4) → TEXTE (3) */

/* couleur h1 */
.ms-spn--content.row:has(> .col-md-6:nth-child(4):hover)
    > .ms-spn--text.col-md-6:nth-child(3) h1 {
    color: var(--color-primary);
}

/* déplacement du h3 (même logique que le hover natif du texte NEXT) */
.ms-spn--content.row:has(> .col-md-6:nth-child(4):hover)
    > .ms-spn--text.col-md-6:nth-child(3) h3 {
    /* si ton thème fait bouger le h3 vers la droite sur hover,
       garde translateX(1.5em). Si c’est l’inverse, mets -1.5em. */
    transform: translateX(1.5em);
    color: var(--color-contrast-higher);
}

/* déplacement du svg (icône) */
.ms-spn--content.row:has(> .col-md-6:nth-child(4):hover)
    > .ms-spn--text.col-md-6:nth-child(3) .ms-spn--link svg {
    /* idem : adapte le signe si besoin pour matcher ton hover thème */
    transform: translateX(0) !important;
}

/*********************************************
 * 4) ANIMATION FLASH (au cas où non déclarée)
 *********************************************/

@keyframes hoverfilter {
    0% { filter: brightness(100%) blur(0); }
    25% { filter: brightness(125%) blur(2px); }
    100% { filter: brightness(100%) blur(0); }
}