/*
 * Le copertine che rispondono al mouse (dalla 0.29.0).
 *
 * Due effetti, uno per tipo di copertina, con lo stesso ritmo: si accende in
 * poco piu' di mezzo secondo e torna a riposo lentamente, in un secondo e
 * mezzo, cosi' che l'immagine sembri posarsi invece di scattare indietro.
 *
 *   articoli  la copertina con il filetto rosso a L si inclina di pochi gradi
 *             verso il mouse, come un foglio sollevato dal tavolo (l'effetto
 *             si chiama «tilt» o parallasse 3D), e si ingrandisce appena.
 *   pagine    la fascia larga e bassa resta ferma; dentro, l'immagine si
 *             ingrandisce lentamente e scivola di qualche pixel nella
 *             direzione opposta al mouse (parallasse).
 *
 * Il movimento lo calcola assets/js/copertine.js e lo passa qui in due
 * variabili, --in-cop-x e --in-cop-y, tra -1 e 1. Senza script resta il
 * leggero ingrandimento al passaggio, solo in CSS.
 *
 * Niente movimento per chi l'ha chiesto al sistema, e niente sui telefoni:
 * senza un mouse non c'e' niente da seguire.
 */

/* --------------------------------------------------------------- articoli */

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

    /* L'inclinazione sta sulla cornice e non sull'immagine: il Framework
     * anima l'ingresso dell'immagine con una trasformazione che resta
     * applicata, e una seconda trasformazione sullo stesso elemento verrebbe
     * ignorata. */
    .ief-single-hero-media {
        --in-cop-x: 0;
        --in-cop-y: 0;
        transform:
            perspective(1400px)
            rotateX(calc(var(--in-cop-y) * -2.6deg))
            rotateY(calc(var(--in-cop-x) * 3.4deg));
        /* Il ritorno: lento. */
        transition: transform 1500ms cubic-bezier(0.22, 0.61, 0.36, 1);
        will-change: transform;
    }

    .ief-single-hero-image img {
        transition: transform 1500ms cubic-bezier(0.22, 0.61, 0.36, 1), filter 420ms ease;
    }

    /* L'andata: piu' pronta, e mentre il mouse si muove segue con un filo di
     * ritardo, che e' cio' che rende il gesto morbido. */
    .ief-single-hero-media.is-sopra {
        transition-duration: 650ms;
    }

    .ief-single-hero-media.is-sopra .ief-single-hero-image img,
    .ief-single-hero-image:hover img {
        transform: scale(1.03);
        transition-duration: 650ms;
    }
}

/* ----------------------------------------------------------------- pagine */

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

    .ief-pagina-fascia-immagine {
        --in-cop-x: 0;
        --in-cop-y: 0;
    }

    .ief-pagina-fascia-immagine img {
        transform:
            translate(calc(var(--in-cop-x) * -14px), calc(var(--in-cop-y) * -8px))
            scale(1.001);
        transition: transform 1600ms cubic-bezier(0.22, 0.61, 0.36, 1);
        will-change: transform;
    }

    .ief-pagina-fascia-immagine:hover img,
    .ief-pagina-fascia-immagine.is-sopra img {
        transform:
            translate(calc(var(--in-cop-x) * -14px), calc(var(--in-cop-y) * -8px))
            scale(1.06);
        transition-duration: 900ms;
    }
}