/**
 * Sketch Reveal for Images - Stylesheet
 *
 * @package AlexandreRodrigues\SketchImageReveal
 */

:root {
	--sketch-filter-ink-base: grayscale(100%) contrast(1.2) brightness(1.1);
	--sketch-filter-ink-revealed: grayscale(0%) contrast(1) brightness(1);

	--sketch-filter-charcoal-base: grayscale(100%) contrast(1.4) brightness(0.9);
	--sketch-filter-charcoal-revealed: grayscale(0%) contrast(1) brightness(1);

	--sketch-filter-sepia-base: sepia(100%) contrast(1.1) brightness(0.95);
	--sketch-filter-sepia-revealed: sepia(0%) contrast(1) brightness(1);

	--sketch-filter-cyanotype-base: sepia(100%) hue-rotate(180deg) saturate(180%) contrast(1.2);
	--sketch-filter-cyanotype-revealed: sepia(0%) hue-rotate(0deg) saturate(100%) contrast(1);

	--sketch-transition-out: filter 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
	--sketch-transition-in: filter 2.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
}

/* Base image styling & GPU acceleration for buttery smooth transitions */
.is-style-sketch-reveal img,
.is-style-sketch-charcoal img,
.is-style-sketch-sepia img,
.is-style-sketch-cyanotype img,
.wp-block-cover.is-style-sketch-reveal .wp-block-cover__image-background,
.wp-block-cover.is-style-sketch-charcoal .wp-block-cover__image-background,
.wp-block-cover.is-style-sketch-sepia .wp-block-cover__image-background,
.wp-block-cover.is-style-sketch-cyanotype .wp-block-cover__image-background {
	backface-visibility: hidden;
	transform: translate3d(0, 0, 0);
	will-change: filter;
	cursor: pointer;
}

/* 1. Base Sketch Effect - Ink Pen (Native + Stackable) */
.is-style-sketch-reveal img,
.wp-block-image.is-style-sketch-reveal img,
.wp-block-gallery.is-style-sketch-reveal img,
.wp-block-cover.is-style-sketch-reveal img,
.wp-block-cover.is-style-sketch-reveal .wp-block-cover__image-background,
.wp-block-media-text.is-style-sketch-reveal img,
.stk-block.is-style-sketch-reveal img,
.stk-block-image.is-style-sketch-reveal img,
.stk-block.is-style-sketch-reveal .stk-img-wrapper img {
	filter: var(--sketch-filter-ink-base) !important;
	transition: var(--sketch-transition-out) !important;
}

/* 2. Base Sketch Effect - Charcoal (Native + Stackable) */
.is-style-sketch-charcoal img,
.wp-block-image.is-style-sketch-charcoal img,
.wp-block-gallery.is-style-sketch-charcoal img,
.wp-block-cover.is-style-sketch-charcoal img,
.wp-block-cover.is-style-sketch-charcoal .wp-block-cover__image-background,
.wp-block-media-text.is-style-sketch-charcoal img,
.stk-block.is-style-sketch-charcoal img,
.stk-block-image.is-style-sketch-charcoal img,
.stk-block.is-style-sketch-charcoal .stk-img-wrapper img {
	filter: var(--sketch-filter-charcoal-base) !important;
	transition: var(--sketch-transition-out) !important;
}

/* 3. Base Sketch Effect - Vintage Sepia (Native + Stackable) */
.is-style-sketch-sepia img,
.wp-block-image.is-style-sketch-sepia img,
.wp-block-gallery.is-style-sketch-sepia img,
.wp-block-cover.is-style-sketch-sepia img,
.wp-block-cover.is-style-sketch-sepia .wp-block-cover__image-background,
.wp-block-media-text.is-style-sketch-sepia img,
.stk-block.is-style-sketch-sepia img,
.stk-block-image.is-style-sketch-sepia img,
.stk-block.is-style-sketch-sepia .stk-img-wrapper img {
	filter: var(--sketch-filter-sepia-base) !important;
	transition: var(--sketch-transition-out) !important;
}

/* 4. Base Sketch Effect - Cyanotype (Native + Stackable) */
.is-style-sketch-cyanotype img,
.wp-block-image.is-style-sketch-cyanotype img,
.wp-block-gallery.is-style-sketch-cyanotype img,
.wp-block-cover.is-style-sketch-cyanotype img,
.wp-block-cover.is-style-sketch-cyanotype .wp-block-cover__image-background,
.wp-block-media-text.is-style-sketch-cyanotype img,
.stk-block.is-style-sketch-cyanotype img,
.stk-block-image.is-style-sketch-cyanotype img,
.stk-block.is-style-sketch-cyanotype .stk-img-wrapper img {
	filter: var(--sketch-filter-cyanotype-base) !important;
	transition: var(--sketch-transition-out) !important;
}

/* 5. Revealed State - Ink Pen */
.is-style-sketch-reveal:hover img,
.is-style-sketch-reveal:focus-within img,
.is-style-sketch-reveal.is-revealed-by-scroll img,
.wp-block-image.is-style-sketch-reveal:hover img,
.wp-block-image.is-style-sketch-reveal:focus-within img,
.wp-block-image.is-style-sketch-reveal.is-revealed-by-scroll img,
.wp-block-gallery.is-style-sketch-reveal:hover img,
.wp-block-gallery.is-style-sketch-reveal:focus-within img,
.wp-block-gallery.is-style-sketch-reveal.is-revealed-by-scroll img,
.wp-block-cover.is-style-sketch-reveal:hover img,
.wp-block-cover.is-style-sketch-reveal:focus-within img,
.wp-block-cover.is-style-sketch-reveal.is-revealed-by-scroll img,
.wp-block-cover.is-style-sketch-reveal:hover .wp-block-cover__image-background,
.wp-block-cover.is-style-sketch-reveal:focus-within .wp-block-cover__image-background,
.wp-block-cover.is-style-sketch-reveal.is-revealed-by-scroll .wp-block-cover__image-background,
.wp-block-media-text.is-style-sketch-reveal:hover img,
.wp-block-media-text.is-style-sketch-reveal:focus-within img,
.wp-block-media-text.is-style-sketch-reveal.is-revealed-by-scroll img,
.stk-block.is-style-sketch-reveal:hover img,
.stk-block.is-style-sketch-reveal:focus-within img,
.stk-block.is-style-sketch-reveal.is-revealed-by-scroll img {
	filter: var(--sketch-filter-ink-revealed) !important;
	transition: var(--sketch-transition-in) !important;
}

/* 6. Revealed State - Charcoal */
.is-style-sketch-charcoal:hover img,
.is-style-sketch-charcoal:focus-within img,
.is-style-sketch-charcoal.is-revealed-by-scroll img,
.wp-block-image.is-style-sketch-charcoal:hover img,
.wp-block-image.is-style-sketch-charcoal:focus-within img,
.wp-block-image.is-style-sketch-charcoal.is-revealed-by-scroll img,
.wp-block-gallery.is-style-sketch-charcoal:hover img,
.wp-block-gallery.is-style-sketch-charcoal:focus-within img,
.wp-block-gallery.is-style-sketch-charcoal.is-revealed-by-scroll img,
.wp-block-cover.is-style-sketch-charcoal:hover img,
.wp-block-cover.is-style-sketch-charcoal:focus-within img,
.wp-block-cover.is-style-sketch-charcoal.is-revealed-by-scroll img,
.wp-block-cover.is-style-sketch-charcoal:hover .wp-block-cover__image-background,
.wp-block-cover.is-style-sketch-charcoal:focus-within .wp-block-cover__image-background,
.wp-block-cover.is-style-sketch-charcoal.is-revealed-by-scroll .wp-block-cover__image-background,
.wp-block-media-text.is-style-sketch-charcoal:hover img,
.wp-block-media-text.is-style-sketch-charcoal:focus-within img,
.wp-block-media-text.is-style-sketch-charcoal.is-revealed-by-scroll img,
.stk-block.is-style-sketch-charcoal:hover img,
.stk-block.is-style-sketch-charcoal:focus-within img,
.stk-block.is-style-sketch-charcoal.is-revealed-by-scroll img {
	filter: var(--sketch-filter-charcoal-revealed) !important;
	transition: var(--sketch-transition-in) !important;
}

/* 7. Revealed State - Vintage Sepia */
.is-style-sketch-sepia:hover img,
.is-style-sketch-sepia:focus-within img,
.is-style-sketch-sepia.is-revealed-by-scroll img,
.wp-block-image.is-style-sketch-sepia:hover img,
.wp-block-image.is-style-sketch-sepia:focus-within img,
.wp-block-image.is-style-sketch-sepia.is-revealed-by-scroll img,
.wp-block-gallery.is-style-sketch-sepia:hover img,
.wp-block-gallery.is-style-sketch-sepia:focus-within img,
.wp-block-gallery.is-style-sketch-sepia.is-revealed-by-scroll img,
.wp-block-cover.is-style-sketch-sepia:hover img,
.wp-block-cover.is-style-sketch-sepia:focus-within img,
.wp-block-cover.is-style-sketch-sepia.is-revealed-by-scroll img,
.wp-block-cover.is-style-sketch-sepia:hover .wp-block-cover__image-background,
.wp-block-cover.is-style-sketch-sepia:focus-within .wp-block-cover__image-background,
.wp-block-cover.is-style-sketch-sepia.is-revealed-by-scroll .wp-block-cover__image-background,
.wp-block-media-text.is-style-sketch-sepia:hover img,
.wp-block-media-text.is-style-sketch-sepia:focus-within img,
.wp-block-media-text.is-style-sketch-sepia.is-revealed-by-scroll img,
.stk-block.is-style-sketch-sepia:hover img,
.stk-block.is-style-sketch-sepia:focus-within img,
.stk-block.is-style-sketch-sepia.is-revealed-by-scroll img {
	filter: var(--sketch-filter-sepia-revealed) !important;
	transition: var(--sketch-transition-in) !important;
}

/* 8. Revealed State - Cyanotype */
.is-style-sketch-cyanotype:hover img,
.is-style-sketch-cyanotype:focus-within img,
.is-style-sketch-cyanotype.is-revealed-by-scroll img,
.wp-block-image.is-style-sketch-cyanotype:hover img,
.wp-block-image.is-style-sketch-cyanotype:focus-within img,
.wp-block-image.is-style-sketch-cyanotype.is-revealed-by-scroll img,
.wp-block-gallery.is-style-sketch-cyanotype:hover img,
.wp-block-gallery.is-style-sketch-cyanotype:focus-within img,
.wp-block-gallery.is-style-sketch-cyanotype.is-revealed-by-scroll img,
.wp-block-cover.is-style-sketch-cyanotype:hover img,
.wp-block-cover.is-style-sketch-cyanotype:focus-within img,
.wp-block-cover.is-style-sketch-cyanotype.is-revealed-by-scroll img,
.wp-block-cover.is-style-sketch-cyanotype:hover .wp-block-cover__image-background,
.wp-block-cover.is-style-sketch-cyanotype:focus-within .wp-block-cover__image-background,
.wp-block-cover.is-style-sketch-cyanotype.is-revealed-by-scroll .wp-block-cover__image-background,
.wp-block-media-text.is-style-sketch-cyanotype:hover img,
.wp-block-media-text.is-style-sketch-cyanotype:focus-within img,
.wp-block-media-text.is-style-sketch-cyanotype.is-revealed-by-scroll img,
.stk-block.is-style-sketch-cyanotype:hover img,
.stk-block.is-style-sketch-cyanotype:focus-within img,
.stk-block.is-style-sketch-cyanotype.is-revealed-by-scroll img {
	filter: var(--sketch-filter-cyanotype-revealed) !important;
	transition: var(--sketch-transition-in) !important;
}

/* 9. Stacking Isolation Container */
.is-style-sketch-reveal,
.is-style-sketch-charcoal,
.is-style-sketch-sepia,
.is-style-sketch-cyanotype {
	position: relative;
	isolation: isolate;
}

/* 10. Accessibility - Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
	.is-style-sketch-reveal img,
	.is-style-sketch-charcoal img,
	.is-style-sketch-sepia img,
	.is-style-sketch-cyanotype img,
	.wp-block-cover.is-style-sketch-reveal .wp-block-cover__image-background,
	.wp-block-cover.is-style-sketch-charcoal .wp-block-cover__image-background,
	.wp-block-cover.is-style-sketch-sepia .wp-block-cover__image-background,
	.wp-block-cover.is-style-sketch-cyanotype .wp-block-cover__image-background {
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}
}