.oc-image-fx {
	--oc-image-fx-radius: 0%;
	--oc-image-fx-frame-width: 0px;
	--oc-image-fx-frame-color: transparent;
	--oc-image-fx-rotate: 0deg;
	--oc-image-fx-zoom: 1;

	display: block;
	line-height: 0;
}

.oc-image-fx__stage {
	transition: transform var(--wp--custom--tilted-frame--transitionDuration, 0.5s) var(--wp--custom--tilted-frame--hoverTiming, ease);
	transform: rotate(var(--oc-image-fx-rotate, 0deg));
	will-change: transform;
}

/* Default / Expand Zoom: Stage rotates back to 0deg and scales on hover */
.oc-image-fx:not(.oc-image-fx--zoom-crop):hover .oc-image-fx__stage,
.oc-image-fx:not(.oc-image-fx--zoom-crop):focus-within .oc-image-fx__stage {
	transform: rotate(0deg) scale(var(--oc-image-fx-zoom, 1));
}

/* Crop Zoom (.oc-image-fx--zoom-crop): Stage straightens to 0deg at scale(1) so frame stays fixed size */
.oc-image-fx.oc-image-fx--zoom-crop:hover .oc-image-fx__stage,
.oc-image-fx.oc-image-fx--zoom-crop:focus-within .oc-image-fx__stage {
	transform: rotate(0deg) scale(1);
}

.oc-image-fx__frame {
	position: relative;
	overflow: hidden;
	border-radius: var(--oc-image-fx-radius, 0%);
	border-width: var(--oc-image-fx-frame-width, 0px);
	border-color: var(--oc-image-fx-frame-color, transparent);
	border-style: solid;
	box-sizing: border-box;
	transition: border-color var(--wp--custom--ui--interaction--medium), border-radius var(--wp--custom--ui--interaction--medium), border-width var(--wp--custom--ui--interaction--medium);
}

/* Styling when frame has glass card effect (.oc-glass) */
.oc-image-fx__frame.oc-glass {
	padding: var(--wp--preset--spacing--30, 1.5rem);
	box-shadow: var(--wp--preset--shadow--elevated);
	border-radius: var(--oc-image-fx-radius, var(--wp--custom--border-radius--xl, 1rem));
	border-width: var(--oc-image-fx-frame-width, 0px);
	border-color: var(--oc-image-fx-frame-color, transparent);
	border-style: solid;
}

/* Crop zoom mode hides overflow on frame */
.oc-image-fx--zoom-crop .oc-image-fx__frame {
	overflow: hidden;
}

.oc-image-fx__frame > figure,
.oc-image-fx__frame > .wp-block-image {
	margin: 0;
	padding: 0;
	line-height: 0;
}

.oc-image-fx__frame > figure img,
.oc-image-fx__frame > .wp-block-image img,
.oc-image-fx__frame img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
	transition: transform var(--wp--custom--tilted-frame--transitionDuration, 0.5s) var(--wp--custom--tilted-frame--hoverTiming, ease);
}

.oc-image-fx__frame figcaption,
.oc-image-fx__frame .wp-element-caption {
	line-height: var(--wp--custom--typography--line-height--normal, 1.4);
	margin-top: 0.5rem;
	padding: 0.25rem 0.5rem;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	text-align: center;
	color: var(--wp--preset--color--on-surface-variant);
}

/* Crop zoom mode scales the inner image on hover */
.oc-image-fx.oc-image-fx--zoom-crop:hover .oc-image-fx__frame > figure img,
.oc-image-fx.oc-image-fx--zoom-crop:hover .oc-image-fx__frame > .wp-block-image img,
.oc-image-fx.oc-image-fx--zoom-crop:focus-within .oc-image-fx__frame > figure img,
.oc-image-fx.oc-image-fx--zoom-crop:focus-within .oc-image-fx__frame > .wp-block-image img {
	transform: scale(var(--oc-image-fx-zoom, 1));
}

/* Dark / high-contrast inversion */
[data-theme="dark"] .oc-image-fx:not(.oc-image-fx--no-invert) .oc-image-fx__frame img,
[data-theme="high-contrast"] .oc-image-fx:not(.oc-image-fx--no-invert) .oc-image-fx__frame img {
	filter: invert(1);
}

/* Semantic frame color in dark / high-contrast modes */
[data-theme="dark"] .oc-image-fx:not(.oc-image-fx--no-invert) .oc-image-fx__frame,
[data-theme="high-contrast"] .oc-image-fx:not(.oc-image-fx--no-invert) .oc-image-fx__frame {
	border-color: var(--wp--preset--color--outline);
}

/* High-contrast: stronger outline */
[data-theme="high-contrast"] .oc-image-fx:not(.oc-image-fx--no-invert) .oc-image-fx__frame {
	border-color: var(--wp--preset--color--on-surface);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.oc-image-fx__stage,
	.oc-image-fx__frame,
	.oc-image-fx__frame > figure img,
	.oc-image-fx__frame > .wp-block-image img {
		transition: none;
	}
}

/* Keyboard focus outline */
.oc-image-fx:focus-within .oc-image-fx__frame {
	outline: var(--wp--custom--focus--width, 2px) solid var(--wp--preset--color--primary);
	outline-offset: var(--wp--custom--focus--offset, 2px);
}