/**
 * WS Booster - Hover Reveal Service
 */

.ws-hr {
    position: relative;
    width: 100%;
}

.ws-hr__list {
    display: flex;
    flex-direction: column;
    gap: 0; /* override par le control items_gap si l'user en pose */
    position: relative;
    z-index: 1;
}

.ws-hr__item {
    display: block;
    padding: 24px 0;
    text-decoration: none;
    color: inherit;
    cursor: pointer;

    /* === BASE TRANSFORM PER-ITEM ===
       Variables posees par les controls repeater (item_rotate / item_skew /
       item_offset_y). La transform de base est composee ici une seule fois
       puis reutilisee dans toutes les regles :hover via la var
       --ws-hr-base-transform. Permet de combiner les transforms per-item
       (rotation + skew + offset) avec les hover effects (zoom/lift/tilt)
       sans collision. */
    --ws-hr-item-rotate: 0deg;
    --ws-hr-item-skew: 0deg;
    --ws-hr-item-offset-y: 0px;
    --ws-hr-base-transform:
        translateY(var(--ws-hr-item-offset-y, 0px))
        rotate(var(--ws-hr-item-rotate, 0deg))
        skewY(var(--ws-hr-item-skew, 0deg));
    transform: var(--ws-hr-base-transform);

    /* Transitions multi-properties. La duree des transforms/padding est
       configurable via --ws-hr-hover-duration (control item_hover_duration). */
    transition:
        padding-left  var(--ws-hr-hover-duration, 400ms) ease,
        padding-right var(--ws-hr-hover-duration, 400ms) ease,
        transform     var(--ws-hr-hover-duration, 400ms) cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity       var(--ws-hr-hover-duration, 400ms) ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        color 0.3s ease,
        filter 0.3s ease;
}

/* === ANIMATIONS AU SURVOL DES ITEMS ===
   Pose-toi sur le wrapper widget via prefix_class (control item_hover_anim).
   Classes generees : ws-hr--hover-slide-right / -slide-left / -zoom-in /
   -zoom-out / -lift / -tilt / -fade-others.
   L'intensite (var --ws-hr-hover-intensity, 0-100) module l'effet via calc(). */

.ws-hr {
    --ws-hr-hover-intensity: 50;
    --ws-hr-hover-duration: 400ms;
}

/* SLIDE RIGHT (default original) : padding-left vers la droite */
.ws-hr--hover-slide-right .ws-hr__item:hover {
    padding-left: calc(var(--ws-hr-hover-intensity, 50) * 0.5px);
}

/* SLIDE LEFT : padding-right vers la gauche (effet symetrique) */
.ws-hr--hover-slide-left .ws-hr__item:hover {
    padding-right: calc(var(--ws-hr-hover-intensity, 50) * 0.5px);
}

/* ZOOM IN : l'item grossit (1.0 a 1.2 selon intensite).
   Compose avec base transform (rotate + skew + offset_y per-item). */
.ws-hr--hover-zoom-in .ws-hr__item:hover {
    transform: var(--ws-hr-base-transform) scale(calc(1 + var(--ws-hr-hover-intensity, 50) * 0.002));
    z-index: 5;
}

/* ZOOM OUT : l'item retrecit (1.0 a 0.85 selon intensite). */
.ws-hr--hover-zoom-out .ws-hr__item:hover {
    transform: var(--ws-hr-base-transform) scale(calc(1 - var(--ws-hr-hover-intensity, 50) * 0.0015));
}

/* LIFT : l'item monte verticalement (0 a -20px). */
.ws-hr--hover-lift .ws-hr__item:hover {
    transform: var(--ws-hr-base-transform) translateY(calc(var(--ws-hr-hover-intensity, 50) * -0.2px));
    z-index: 5;
}

/* TILT : rotation legere additionnelle (0 a -5deg). */
.ws-hr--hover-tilt .ws-hr__item:hover {
    transform: var(--ws-hr-base-transform) rotate(calc(var(--ws-hr-hover-intensity, 50) * -0.05deg));
    z-index: 5;
}

/* FADE OTHERS : l'item survole reste opaque, les autres fadent (1 a 0.4) */
.ws-hr--hover-fade-others:hover .ws-hr__item {
    opacity: calc(1 - var(--ws-hr-hover-intensity, 50) * 0.006);
}
.ws-hr--hover-fade-others .ws-hr__item:hover {
    opacity: 1;
}

/* === BORDURES / LIGNES DE SEPARATION ===
   Pose-toi sur le wrapper .elementor-widget-ws-hover-reveal via prefix_class.
   Les classes sont generees automatiquement : ws-hr--border-top / -bottom /
   -both / -box. Les CSS vars (--ws-hr-border-*) viennent des controls
   width/style/color via selectors. */
.ws-hr {
    --ws-hr-border-width: 1px;
    --ws-hr-border-style: solid;
    --ws-hr-border-color: rgba(15, 23, 42, 0.15);
}

/* Position TOP : ligne au-dessus de chaque item (separateurs entre items) */
.ws-hr--border-top .ws-hr__item {
    border-top: var(--ws-hr-border-width) var(--ws-hr-border-style) var(--ws-hr-border-color);
}

/* Position BOTTOM : ligne en-dessous de chaque item */
.ws-hr--border-bottom .ws-hr__item {
    border-bottom: var(--ws-hr-border-width) var(--ws-hr-border-style) var(--ws-hr-border-color);
}

/* Position BOTH : top + bottom (separateurs partout incluant haut et bas) */
.ws-hr--border-both .ws-hr__item {
    border-top: var(--ws-hr-border-width) var(--ws-hr-border-style) var(--ws-hr-border-color);
    border-bottom: var(--ws-hr-border-width) var(--ws-hr-border-style) var(--ws-hr-border-color);
}

/* Position BOX : contour complet (utile avec bg-color sur les items) */
.ws-hr--border-box .ws-hr__item {
    border: var(--ws-hr-border-width) var(--ws-hr-border-style) var(--ws-hr-border-color);
}

.ws-hr__title {
    margin: 0 0 4px;
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    transition: color 0.3s ease;
}

.ws-hr__desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.4s ease;
}

.ws-hr__item:hover .ws-hr__desc {
    opacity: 0.7;
    max-height: 60px;
    margin-top: 6px;
}

.ws-hr__reveal {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 280px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    transform: translate3d(-1000px, -1000px, 0);
    transition: opacity var(--ws-hr-duration, 300ms) var(--ws-hr-easing, ease-out),
                transform 0.15s ease-out;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    --ws-hr-transform-out: scale(0.8);
    --ws-hr-transform-in: scale(1);
}

/* Animations - etats initiaux */
.ws-hr--anim-fade .ws-hr__reveal       { --ws-hr-transform-out: translate3d(-1000px, -1000px, 0) scale(1); }
.ws-hr--anim-zoom .ws-hr__reveal       { --ws-hr-transform-out: translate3d(-1000px, -1000px, 0) scale(0.4); }
.ws-hr--anim-slide-up .ws-hr__reveal   { --ws-hr-transform-out: translate3d(-1000px, calc(-1000px + 40px), 0); }
.ws-hr--anim-slide-down .ws-hr__reveal { --ws-hr-transform-out: translate3d(-1000px, calc(-1000px - 40px), 0); }
.ws-hr--anim-slide-left .ws-hr__reveal { --ws-hr-transform-out: translate3d(calc(-1000px + 40px), -1000px, 0); }
.ws-hr--anim-slide-right .ws-hr__reveal{ --ws-hr-transform-out: translate3d(calc(-1000px - 40px), -1000px, 0); }
.ws-hr--anim-rotate .ws-hr__reveal     { --ws-hr-transform-out: translate3d(-1000px, -1000px, 0) rotate(-20deg) scale(0.7); }
.ws-hr--anim-flip .ws-hr__reveal       { --ws-hr-transform-out: translate3d(-1000px, -1000px, 0) rotateY(90deg); }
.ws-hr--anim-blur .ws-hr__reveal       { filter: blur(20px); transition-property: opacity, transform, filter; }

.ws-hr__reveal.is-active {
    opacity: 1;
    transform: translate3d(var(--rx, 0px), var(--ry, 0px), 0);
    filter: blur(0);
}

.ws-hr--anim-zoom .ws-hr__reveal.is-active       { transform: translate3d(var(--rx, 0px), var(--ry, 0px), 0) scale(1); }
.ws-hr--anim-rotate .ws-hr__reveal.is-active     { transform: translate3d(var(--rx, 0px), var(--ry, 0px), 0) rotate(0deg) scale(1); }
.ws-hr--anim-flip .ws-hr__reveal.is-active       { transform: translate3d(var(--rx, 0px), var(--ry, 0px), 0) rotateY(0); }

@media (max-width: 768px) {
    .ws-hr__reveal {
        display: none;
    }
    .ws-hr__desc {
        opacity: 0.7;
        max-height: 60px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ws-hr__item,
    .ws-hr__desc,
    .ws-hr__reveal {
        transition: none;
    }
}