/* ============================================================
   JoceHero — Scroll FX for Elementor
   JoceOffice — v1.0.0
   ============================================================ */

/* ---- Base Hero ---- */
.jh-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Images ---- */
.jh-images-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.jh-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    transition: opacity 0.8s ease;
    will-change: transform, filter, opacity;
}

.jh-img.jh-img-active {
    opacity: 1;
}

/* Mode blend : toutes visibles */
.jh-hero[data-mode="blend"] .jh-img {
    opacity: 1;
}

/* ---- Overlay ---- */
.jh-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* ---- Contenu ---- */
.jh-content {
    position: absolute;
    z-index: 2;
    max-width: 900px;
    width: 100%;
    padding: 2rem;
    box-sizing: border-box;
}

/* Positions verticales */
.jh-pos-v-top    { top: 8%; transform: translateY(0); }
.jh-pos-v-center { top: 50%; transform: translateY(-50%); }
.jh-pos-v-bottom { bottom: 8%; top: auto; transform: none; }

/* Positions horizontales */
.jh-pos-h-left   { left: 5%; right: auto; text-align: left; }
.jh-pos-h-center { left: 50%; transform: translateX(-50%); text-align: center; }
.jh-pos-h-right  { right: 5%; left: auto; text-align: right; }

/* Combinaisons center/center */
.jh-pos-v-center.jh-pos-h-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ---- Titre ---- */
.jh-title {
    margin: 0 0 0.5em;
    line-height: 1.1;
    color: #fff;
}

.jh-subtitle {
    margin: 0;
    color: rgba(255,255,255,0.8);
}

/* ---- Dots navigation ---- */
.jh-dots {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 8px;
}

.jh-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.7);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s, border-color 0.3s;
}

.jh-dot.jh-dot-active,
.jh-dot:hover {
    background: rgba(255,255,255,0.9);
    border-color: #fff;
}

/* ============================================================
   EFFETS SCROLL — État initial (avant révélation)
   ============================================================ */

/* L'image attend d'être révélée */
.jh-hero[data-fx="1"]:not(.jh-revealed) .jh-img.jh-img-active {
    /* Les valeurs sont injectées inline via JS */
    transition: none !important;
}

/* État révélé : transitions actives */
.jh-hero.jh-revealed .jh-img {
    transition-property: filter, transform, opacity, clip-path;
}

/* ============================================================
   TITRE CINÉTIQUE — Préparation des spans
   ============================================================ */

/* Mots et lettres sont wrappés en <span> par JS */
.jh-title .jh-word,
.jh-title .jh-letter {
    display: inline-block;
    will-change: transform, opacity;
}

/* words-fade : état initial */
.jh-fx-words-fade .jh-word {
    opacity: 0;
    transform: translateY(0);
    transition-property: opacity, transform;
}
.jh-fx-words-fade.jh-title-active .jh-word {
    opacity: 1;
    transform: translateY(0);
}

/* words-slide : état initial */
.jh-fx-words-slide .jh-word {
    opacity: 0;
    transform: translateY(40px);
    transition-property: opacity, transform;
}
.jh-fx-words-slide.jh-title-active .jh-word {
    opacity: 1;
    transform: translateY(0);
}

/* letters-explode : état initial */
.jh-fx-letters-explode .jh-letter {
    opacity: 0;
    transform: scale(1.8) rotate(var(--jh-rot, 0deg));
    transition-property: opacity, transform;
}
.jh-fx-letters-explode.jh-title-active .jh-letter {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* letters-slide */
.jh-fx-letters-slide .jh-letter {
    opacity: 0;
    transform: translateX(var(--jh-lx, -30px));
    transition-property: opacity, transform;
}
.jh-fx-letters-slide.jh-title-active .jh-letter {
    opacity: 1;
    transform: translateX(0);
}

/* scale */
.jh-fx-scale {
    opacity: 0;
    transform: scale(0.7);
    transition-property: opacity, transform;
}
.jh-fx-scale.jh-title-active {
    opacity: 1;
    transform: scale(1);
}

/* clip-reveal */
.jh-fx-clip-reveal {
    clip-path: inset(0 100% 0 0);
    transition-property: clip-path;
}
.jh-fx-clip-reveal.jh-title-active {
    clip-path: inset(0 0% 0 0);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .jh-content {
        padding: 1.5rem;
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .jh-content {
        padding: 1rem;
    }
    .jh-pos-h-left  { left: 0; right: 0; padding-left: 1rem; }
    .jh-pos-h-right { right: 0; left: 0; padding-right: 1rem; }
    .jh-dots {
        bottom: 1rem;
    }
    .jh-dot {
        width: 8px;
        height: 8px;
    }
}

/* ============================================================
   TRANSITIONS SLIDESHOW
   ============================================================ */

/* Fondu (défaut) */
.jh-slide-fade .jh-img {
    transition: opacity 0.8s ease;
}

/* Glissement */
.jh-slide-slide .jh-img {
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.jh-slide-slide .jh-img:not(.jh-img-active) {
    transform: translateX(100%);
}
.jh-slide-slide .jh-img.jh-img-prev {
    transform: translateX(-100%);
}
.jh-slide-slide .jh-img.jh-img-active {
    transform: translateX(0);
}

/* Zoom */
.jh-slide-zoom .jh-img.jh-img-active {
    transition: opacity 1s ease, transform 8s ease;
    transform: scale(1.08);
}
.jh-slide-zoom .jh-img:not(.jh-img-active) {
    transform: scale(1);
    transition: opacity 1s ease;
}