/* Interactive image treatment for STIKes John Paul II. */
.image-motion {
    --image-shift-x: 0px;
    --image-shift-y: 0px;
    --image-light-x: 50%;
    --image-light-y: 50%;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: box-shadow .45s ease, border-color .45s ease;
}

.image-motion > img {
    transition: transform .55s cubic-bezier(.2,.72,.2,1), filter .45s ease;
    transform: translate3d(var(--image-shift-x),var(--image-shift-y),0) scale(1.025);
    will-change: transform;
}

.image-motion.is-image-active > img {
    transform: translate3d(var(--image-shift-x),var(--image-shift-y),0) scale(1.085);
    filter: saturate(1.06) contrast(1.025);
}

.image-motion-highlight {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at var(--image-light-x) var(--image-light-y),rgba(126,202,255,.34),rgba(30,144,255,.12) 20%,transparent 48%);
    mix-blend-mode: screen;
    transition: opacity .4s ease;
}

.image-motion.is-image-active .image-motion-highlight { opacity: 1; }
.image-motion.is-image-active { box-shadow: 0 28px 70px rgba(0,0,128,.17); }
.rich-section-image.image-motion { border-radius: 22px; }
.rich-html-content figure.image-motion { border-radius: 14px; }

.news-motion-image.image-motion,
.public-post-image.image-motion,
.campus-life-card.image-motion {
    background-size: 108%;
    background-position: calc(50% + var(--image-shift-x)) calc(50% + var(--image-shift-y));
    transition: background-size .55s cubic-bezier(.2,.72,.2,1),background-position .18s ease-out,box-shadow .45s ease;
}

.news-motion-image.image-motion.is-image-active,
.public-post-image.image-motion.is-image-active,
.campus-life-card.image-motion.is-image-active { background-size: 116%; }

.program-motion-card.image-motion .program-card-bg {
    transform: translate3d(var(--image-shift-x),var(--image-shift-y),0) scale(1.055);
    transition: transform .55s cubic-bezier(.2,.72,.2,1);
}

.program-motion-card.image-motion.is-image-active .program-card-bg {
    transform: translate3d(var(--image-shift-x),var(--image-shift-y),0) scale(1.13);
}

.program-motion-card.image-motion .program-card-content,
.campus-life-card.image-motion > div,
.campus-life-card.image-motion > .life-index { z-index: 2; }

.news-motion-image.image-motion > span,
.public-post-image.image-motion > span { position: relative; z-index: 2; }

.campus-slide.has-image {
    background-size: 103%;
    background-position: calc(50% + var(--slider-image-x,0px)) calc(50% + var(--slider-image-y,0px));
    transition: opacity .75s ease,visibility .75s,background-size 1.1s cubic-bezier(.2,.72,.2,1),background-position .22s ease-out;
}

.campus-slider:hover .campus-slide.has-image.is-active { background-size: 108%; }

@media (max-width: 900px), (hover: none), (pointer: coarse) {
    .image-motion > img,
    .program-motion-card.image-motion .program-card-bg { transform: none; }
    .news-motion-image.image-motion,
    .public-post-image.image-motion,
    .campus-life-card.image-motion,
    .campus-slide.has-image { background-size: cover; background-position: center; }
    .image-motion-highlight { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .image-motion,
    .image-motion > img,
    .program-motion-card.image-motion .program-card-bg,
    .campus-slide.has-image { transition: none !important; transform: none !important; }
    .image-motion-highlight { display: none; }
}