/* ==========================================================================
   Twist button per i blocchi Gutenberg
   - Nessun colore, dimensione o stile del testo viene ridefinito: tutto
     viene ereditato dal pulsante (preset, classi has-*-background-color, ecc.)
   - Si attiva solo sui link con .has-twist (aggiunta dal filtro PHP)
   ========================================================================== */

/* Impostazioni (specificità 0: si sovrascrivono facilmente dal tema) */
:where(.wp-block-button .wp-block-button__link, .wp-block-read-more).has-twist {
    --twist-duration: 500ms;
    --twist-ease: cubic-bezier(0.97, 0, 0.395, 0.995);
    --twist-stagger: 0.1s;      /* ritardo tra una colonna e l'altra */
    --twist-total: calc(var(--twist-duration) + var(--twist-stagger) * 3);  /* fine animazione */
    --twist-light: 1.25;        /* luminosità della faccia mentre entra (1 = nessuna) */
    --twist-dark: 0.8;          /* luminosità della faccia mentre esce (1 = nessuna) */
    --twist-overflow: clip;     /* clip = rispetta border-radius senza alterare il layout; visible = come nel pen originale */
}

:is(.wp-block-button .wp-block-button__link, .wp-block-read-more).has-twist {
    /* Posizioni 3D del pen originale. Lo spostamento verticale non è più in px:
       è nella proprietà `translate` (100% dell'altezza), quindi funziona con
       qualsiasi altezza di pulsante. */
    --tw-up:   matrix3d(1, 0, 0, 0,  0, 0, -1, -0.003,  0, 1, 0, 0,  0, 0, 0, 1);
    --tw-in:   matrix3d(1, 0, 0, 0,  0, 1, 0, 0,  0, 0, 1, 0.003,  0, 0, 0, 1);
    --tw-rest: matrix3d(1, 0, 0, 0,  0, 1, 0, 0,  0, 0, 1, -0.003,  0, 0, 0, 1);
    --tw-out:  matrix3d(1, 0, 0, 0,  0, 0, -1, 0.003,  0, 1, 0, 0,  0, 0, 0, 1);

    position: relative;
    isolation: isolate;
    overflow: var(--twist-overflow);

    /* A riposo il link dipinge il proprio sfondo (allineato al pixel, come un
       pulsante normale): sotto le facce non può apparire nessuna cucitura.
       Quando l'hover parte passa a `text` (= sfondo non dipinto, nessun glifo
       da riempire) e lo sfondo lo fanno le facce, che lo leggono con `inherit`.
       Al ritorno, il passaggio avviene solo a fine animazione (delay). */
    transition-property: background-clip;
    transition-duration: 0s;
    transition-delay: var(--twist-total);
}

:is(.wp-block-button .wp-block-button__link, .wp-block-read-more).has-twist:is(:hover, :focus-visible) {
    -webkit-background-clip: text;
            background-clip: text;
    transition-delay: 0s;
}

/* Testo reale: nel flusso (dà dimensione al pulsante, leggibile da screen reader).
   A riposo è quello che si vede (pulsante identico all'originale, pixel per pixel);
   durante l'hover lo sostituiscono i due strati animati. */
.has-twist .twist-label {
    transition-property: color;
    transition-duration: 0s;
    transition-delay: var(--twist-total);
}

.has-twist:is(:hover, :focus-visible) .twist-label {
    color: transparent;
    transition-delay: 0s;
}

/* --- Strati di testo animati (ereditano font, colore, padding, allineamento) --- */
.has-twist .twist-text {
    position: absolute;
    left: 0;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: inherit;
    pointer-events: none;
    visibility: hidden;         /* a riposo li nasconde; in hover compaiono subito, al ritorno spariscono a fine animazione */
    transition-property: transform, translate, visibility;
    transition-duration: var(--twist-duration), var(--twist-duration), 0s;
    transition-timing-function: var(--twist-ease);
    transition-delay: 0s, 0s, var(--twist-total);
}

.has-twist .twist-text--hover {
    bottom: 100%;
    transform-origin: center bottom 0;
    transform: var(--tw-up);
}

.has-twist .twist-text--rest {
    top: 100%;
    transform-origin: center top 0;
    translate: 0 -100%;
    transform: var(--tw-rest);
}

/* --- Le 4 colonne che si "torcono" ----------------------------------------- */
.has-twist .twist-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s var(--twist-total);
}

.has-twist:is(:hover, :focus-visible) .twist-wrap {
    visibility: visible;
    transition-delay: 0s;
}

/* Anello di ereditarietà del colore: wrap e colonne non dipingono nulla */
.has-twist .twist-wrap,
.has-twist .twist {
    background-color: inherit;
    -webkit-background-clip: text;
            background-clip: text;
}

.has-twist .twist {
    position: relative;
    display: block;
    flex: 1 1 0;
    height: 100%;
}

.has-twist .twist::before,
.has-twist .twist::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: inherit;    /* = colore del pulsante */
    transition-property: transform, translate, filter;
    transition-duration: var(--twist-duration);
    transition-timing-function: var(--twist-ease);
}

.has-twist .twist::before {
    bottom: 100%;
    transform-origin: center bottom 0;
    transform: var(--tw-up);
    filter: brightness(var(--twist-light));
}

.has-twist .twist::after {
    top: 100%;
    transform-origin: center top 0;
    translate: 0 -100%;
    transform: var(--tw-rest);
    filter: brightness(1);
}

/* Overlap di 1px con la colonna precedente (i bordi esterni restano esatti) */
.has-twist .twist:not(:first-child)::before,
.has-twist .twist:not(:first-child)::after {
    left: -1px;
    width: calc(100% + 1px);
}

/* Ritardo a cascata */
.has-twist .twist:nth-child(2)::before, .has-twist .twist:nth-child(2)::after { transition-delay: calc(var(--twist-stagger) * 1); }
.has-twist .twist:nth-child(3)::before, .has-twist .twist:nth-child(3)::after { transition-delay: calc(var(--twist-stagger) * 2); }
.has-twist .twist:nth-child(4)::before, .has-twist .twist:nth-child(4)::after { transition-delay: calc(var(--twist-stagger) * 3); }

/* --- Hover / focus da tastiera ---------------------------------------------- */
.has-twist:is(:hover, :focus-visible) .twist::before {
    translate: 0 100%;
    transform: var(--tw-in);
    filter: brightness(1);
}

.has-twist:is(:hover, :focus-visible) .twist::after {
    translate: none;
    transform: var(--tw-out);
    filter: brightness(var(--twist-dark));
}

.has-twist:is(:hover, :focus-visible) .twist-text {
    visibility: visible;
    transition-delay: 0s;
}

.has-twist:is(:hover, :focus-visible) .twist-text--hover {
    translate: 0 100%;
    transform: var(--tw-in);
}

.has-twist:is(:hover, :focus-visible) .twist-text--rest {
    translate: none;
    transform: var(--tw-out);
}

/* --- Accessibilità: niente animazione se richiesto dal sistema --------------- */
@media (prefers-reduced-motion: reduce) {
    :where(.wp-block-button .wp-block-button__link, .wp-block-read-more).has-twist {
        --twist-duration: 0s;
        --twist-stagger: 0s;
    }
}