/* TS Hover Reveal – v1.1.0
 *
 * FIX #3 – Separazione tra transform di posizionamento e transform di animazione.
 *
 * PROBLEMA ORIGINALE: le modalità di posizionamento (fixed_center, fixed_left…) usavano
 * la proprietà `transform` per centrare l'elemento (es. translate(-50%, -50%)).
 * Le animazioni (slide_up, scale…) usavano a loro volta `transform` per lo stato iniziale.
 * Quando entrambe le regole erano attive sulla stessa modale, la seconda sovrascriveva
 * la prima a causa della cascata CSS — l'immagine perdeva il proprio posizionamento.
 *
 * SOLUZIONE: CSS Custom Properties.
 * --ts-px / --ts-py  → offset di posizionamento (impostati dalla classe di modalità)
 * --ts-ax / --ts-ay  → delta di animazione (impostati dall'attributo data-anim)
 * --ts-scale         → fattore di scala per l'animazione "scale"
 *
 * La proprietà `transform` combina sempre tutte e tre le componenti:
 *   transform: translate(calc(--ts-px + --ts-ax), calc(--ts-py + --ts-ay)) scale(--ts-scale)
 *
 * In questo modo:
 * - Lo stato iniziale cambia solo --ts-ax / --ts-ay / --ts-scale (delta animazione)
 * - Lo stato visible azzera solo i delta, lasciando invariate le variabili di posizione
 * - Non servono più regole specifiche per ogni combinazione modalità × animazione
 */

/* ─── Base ──────────────────────────────────────────────────────────── */

.ts-hr-wrap  { position: relative; }
.ts-hr-list  { list-style: none; margin: 0; padding: 0; }

.ts-hr-item {
    position: relative;
    border-bottom: 1px solid #1a2c4e;
    cursor: pointer;
}
.ts-hr-item:first-child { border-top: 1px solid #1a2c4e; }

.ts-hr-item-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: inherit;
    width: 100%;
}

.ts-hr-item-text {
    display: block;
    transition: transform 0.3s ease, color 0.3s ease;
}

.ts-hr-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

/* FIX #7 – Stile freccia applicato anche con :focus-within (accessibilità keyboard). */
.ts-hr-item:hover .ts-hr-arrow,
.ts-hr-item:focus-within .ts-hr-arrow { transform: translateX(6px); }

/* ─── Layer immagine ─────────────────────────────────────────────────── */

.ts-hr-image-wrap {
    position: absolute;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    will-change: opacity, transform, clip-path;
    z-index: 10;
    width: 280px;

    /* FIX #3 – Variabili di posizione (impostate dalla modalità). */
    --ts-px: 0px;
    --ts-py: 0px;

    /* FIX #3 – Variabili di animazione (impostate da data-anim; resettate da .ts-hr-visible). */
    --ts-ax: 0px;
    --ts-ay: 0px;
    --ts-scale: 1;

    /* FIX #3 – Unica dichiarazione transform che combina posizione + animazione. */
    transform: translate(
                    calc(var(--ts-px) + var(--ts-ax)),
                    calc(var(--ts-py) + var(--ts-ay))
               ) scale(var(--ts-scale));
}

.ts-hr-image-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* ─── Modalità di posizionamento ────────────────────────────────────── */
/* Impostano solo --ts-px / --ts-py; la geometria (top/left/right)
   rimane su proprietà dedicate per non interferire con transform.       */

.ts-hr-mode-fixed_left .ts-hr-image-wrap {
    top: 50%;
    left: 0;
    --ts-py: -50%;          /* centra verticalmente */
}

.ts-hr-mode-fixed_center .ts-hr-image-wrap {
    top: 50%;
    left: 50%;
    --ts-px: -50%;          /* centra orizzontalmente */
    --ts-py: -50%;          /* centra verticalmente */
}

.ts-hr-mode-fixed_right .ts-hr-image-wrap {
    top: 50%;
    right: 0;
    --ts-py: -50%;          /* centra verticalmente */
}

/* Cursor: posizionamento e offset gestiti interamente da JS. */
.ts-hr-mode-cursor .ts-hr-image-wrap {
    position: fixed;
    top: 0;
    left: 0;
    /* --ts-px / --ts-py restano a 0px: l'offset è nel cfg.offsetX/Y letto da JS */
}

.ts-hr-mode-row_right .ts-hr-image-wrap,
.ts-hr-mode-row_left  .ts-hr-image-wrap { position: absolute; }

.ts-hr-mode-row_right .ts-hr-image-wrap { right: 0; }
.ts-hr-mode-row_left  .ts-hr-image-wrap { left:  0; }

/* ─── Stato iniziale animazione (opacità + delta) ───────────────────── */
/* Cambiano SOLO le variabili di animazione. Le variabili di posizione
   (--ts-px, --ts-py) restano intatte — nessuna collisione di cascata.  */

.ts-hr-image-wrap[data-anim="fade"] {
    opacity: 0;
    /* nessun delta transform */
}

.ts-hr-image-wrap[data-anim="slide_up"] {
    opacity: 0;
    --ts-ay: 28px;
}

.ts-hr-image-wrap[data-anim="slide_down"] {
    opacity: 0;
    --ts-ay: -28px;
}

.ts-hr-image-wrap[data-anim="slide_left"] {
    opacity: 0;
    --ts-ax: 28px;
}

.ts-hr-image-wrap[data-anim="slide_right"] {
    opacity: 0;
    --ts-ax: -28px;
}

.ts-hr-image-wrap[data-anim="scale"] {
    opacity: 0;
    --ts-scale: 0.8;
}

.ts-hr-image-wrap[data-anim="clip_top"] {
    opacity: 1;
    clip-path: inset(0 0 100% 0);
}

.ts-hr-image-wrap[data-anim="clip_bottom"] {
    opacity: 1;
    clip-path: inset(100% 0 0 0);
}

/* ─── Stato visibile ────────────────────────────────────────────────── */
/* Basta azzerare i delta di animazione. Le variabili di posizione
   (--ts-px, --ts-py) non vengono toccate — l'elemento resta dove deve. */

.ts-hr-image-wrap.ts-hr-visible {
    opacity: 1;
    --ts-ax: 0px;
    --ts-ay: 0px;
    --ts-scale: 1;
}

.ts-hr-image-wrap.ts-hr-visible[data-anim="clip_top"] {
    clip-path: inset(0 0 0% 0);
}

.ts-hr-image-wrap.ts-hr-visible[data-anim="clip_bottom"] {
    clip-path: inset(0% 0 0 0);
}