/* Animated image — i2t3 component styles
 * Effect via i2t3_imageanimation_effect:
 *  - reveal: scroll-reveal in (shared animations.css + scroll-reveal.js)
 *  - scroll-rotate / hover-3d / magnetic: driven by the own script
 *  - hover-zoom / hover-translate: pure CSS, driven by --i2t3-ia-intensity
 * --i2t3-ia-intensity (10px..40px) is set inline on the section tag.
 */

.i2t3-imageanimation__img { max-width: 100%; height: auto; display: block; }
.i2t3-imageanimation__fx .i2t3-imageanimation__img { transition: transform .25s ease; will-change: transform; }

/* hover-zoom (pure CSS) — intensity 10/20/30/40px maps to scale 1.05..1.20 */
.i2t3-imageanimation--hover-zoom .i2t3-imageanimation__media { overflow: hidden; }
.i2t3-imageanimation--hover-zoom .i2t3-imageanimation__media:hover .i2t3-imageanimation__img {
    transform: scale(calc(1 + var(--i2t3-ia-intensity, 20px) / 200));
}

/* hover-translate (pure CSS) — directional shift on hover by --i2t3-ia-intensity px
 * Faithful to Karma .anim-hover-translate-{top|bottom|left|right}-{px}:hover */
.i2t3-imageanimation--hover-translate .i2t3-imageanimation__media:hover .i2t3-imageanimation__img {
    transform: translate(var(--i2t3-ia-tx, 0), var(--i2t3-ia-ty, 0));
}
.i2t3-imageanimation--dir-top    .i2t3-imageanimation__media { --i2t3-ia-ty: calc(-1 * var(--i2t3-ia-intensity, 20px)); }
.i2t3-imageanimation--dir-bottom .i2t3-imageanimation__media { --i2t3-ia-ty: var(--i2t3-ia-intensity, 20px); }
.i2t3-imageanimation--dir-left   .i2t3-imageanimation__media { --i2t3-ia-tx: calc(-1 * var(--i2t3-ia-intensity, 20px)); }
.i2t3-imageanimation--dir-right  .i2t3-imageanimation__media { --i2t3-ia-tx: var(--i2t3-ia-intensity, 20px); }

/* hover-3d / magnetic need a stable origin */
.i2t3-imageanimation--hover-3d .i2t3-imageanimation__media,
.i2t3-imageanimation--magnetic .i2t3-imageanimation__media { perspective: 800px; }