/*
 * Image Hover Effect widget.
 *
 * Two independent things happen at once: the picture does something, and the
 * words arrive. Each is its own data attribute so they can be chosen apart.
 */
.ekl-hover-image {
    --ekl-hover-speed: 500ms;

    @apply relative block overflow-hidden;

    img {
        @apply block h-auto w-full;

        transition: transform var(--ekl-hover-speed) ease-out, filter var(--ekl-hover-speed) ease-out;
    }
}

.ekl-hover-image__link {
    @apply block;
}

/* What the picture does. */
.ekl-hover-image[data-effect='zoom-in']:hover img { @apply scale-110; }
.ekl-hover-image[data-effect='zoom-out'] img { @apply scale-110; }
.ekl-hover-image[data-effect='zoom-out']:hover img { @apply scale-100; }
.ekl-hover-image[data-effect='pan'] img { @apply scale-125; }
.ekl-hover-image[data-effect='pan']:hover img { @apply -translate-x-[8%] scale-125; }
.ekl-hover-image[data-effect='tilt']:hover img { @apply scale-110 rotate-[4deg]; }
.ekl-hover-image[data-effect='grey'] img { @apply grayscale; }
.ekl-hover-image[data-effect='grey']:hover img { @apply grayscale-0; }
.ekl-hover-image[data-effect='blur']:hover img { @apply blur-[3px]; }

/* Where the words sit, and what they sit on. */
.ekl-hover-image__overlay {
    @apply absolute inset-0 flex flex-col items-center justify-center gap-[8px] p-[24px] text-center text-white;

    background-color: rgb(7 0 82 / 65%);
    transition: opacity var(--ekl-hover-speed) ease-out, transform var(--ekl-hover-speed) ease-out;
}

.ekl-hover-image__title {
    @apply text-[20px] font-bold leading-[1.3];
}

.ekl-hover-image__text {
    @apply text-[15px] leading-[1.5];
}

.ekl-hover-image__icon {
    @apply inline-flex leading-none;

    i,
    svg {
        @apply block text-[28px];
    }

    svg {
        @apply h-[28px] w-[28px] fill-current;
    }
}

/* How the words arrive. Focus counts as well as hover, for keyboard readers. */
.ekl-hover-image[data-overlay='fade'] .ekl-hover-image__overlay { @apply opacity-0; }
.ekl-hover-image[data-overlay='up'] .ekl-hover-image__overlay { @apply translate-y-full opacity-0; }
.ekl-hover-image[data-overlay='down'] .ekl-hover-image__overlay { @apply -translate-y-full opacity-0; }
.ekl-hover-image[data-overlay='left'] .ekl-hover-image__overlay { @apply -translate-x-full opacity-0; }
.ekl-hover-image[data-overlay='right'] .ekl-hover-image__overlay { @apply translate-x-full opacity-0; }

.ekl-hover-image[data-overlay='fade']:hover .ekl-hover-image__overlay,
.ekl-hover-image[data-overlay='fade']:focus-within .ekl-hover-image__overlay,
.ekl-hover-image[data-overlay='up']:hover .ekl-hover-image__overlay,
.ekl-hover-image[data-overlay='up']:focus-within .ekl-hover-image__overlay,
.ekl-hover-image[data-overlay='down']:hover .ekl-hover-image__overlay,
.ekl-hover-image[data-overlay='down']:focus-within .ekl-hover-image__overlay,
.ekl-hover-image[data-overlay='left']:hover .ekl-hover-image__overlay,
.ekl-hover-image[data-overlay='left']:focus-within .ekl-hover-image__overlay,
.ekl-hover-image[data-overlay='right']:hover .ekl-hover-image__overlay,
.ekl-hover-image[data-overlay='right']:focus-within .ekl-hover-image__overlay {
    @apply translate-x-0 translate-y-0 opacity-100;
}

@media (prefers-reduced-motion: reduce) {
    .ekl-hover-image img,
    .ekl-hover-image__overlay {
        @apply transition-none;
    }
}