/**
 * Nova Image Block — Frontend and Editor Styles
 */

.nvf-image-swap {
	position: relative;
	overflow: hidden;
}

.nvf-image-swap .main-image,
.nvf-image-swap .hover-image {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
	backface-visibility: hidden;
}

.nvf-image-swap .hover-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	object-position: center;
}

.nvf-image-swap:hover .main-image {
	opacity: 0;
}

.nvf-image-swap:hover .hover-image {
	opacity: 1;
}

/* Overlay */
.nvf-image-swap .hover-image-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
}

.nvf-image-swap:hover .hover-image-overlay {
	opacity: var(--overlay-opacity, 0.34);
}

/*
 * Theme-level image-hover-swap.css also targets .nvf-image-swap and may force
 * overlay opacity/background. Keep block behavior deterministic for Nova Image.
 */
.wp-block-novafolio-nova-image.nvf-image-swap .hover-image-overlay {
	background-image: none;
}

.wp-block-novafolio-nova-image.nvf-image-swap:hover .hover-image-overlay,
.wp-block-novafolio-nova-image.nvf-image-swap:focus-within .hover-image-overlay {
	opacity: var(--overlay-opacity, 0.34) !important;
}

/* Caption */
.nvf-image-swap figcaption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 24px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
	color: white;
	z-index: 2;
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	text-align: center;
}

.nvf-image-swap:hover figcaption {
	opacity: 1;
	transform: translateY(0);
}

.nvf-image-swap h3 {
	margin: 0 0 8px;
	font-size: 1.5rem;
	font-weight: 650;
	line-height: 1.2;
	letter-spacing: -0.02em;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}

.nvf-image-swap:hover h3 {
	opacity: 1;
	transform: translateY(0);
}

.nvf-image-swap h5 {
	margin: 0;
	font-size: 1rem;
	font-weight: 400;
	font-style: italic;
	line-height: 1.5;
	letter-spacing: 0.5px;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}

.nvf-image-swap:hover h5 {
	opacity: 1;
	transform: translateY(0);
}

/* Link overlay */
.nvf-image-swap a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	cursor: pointer;
	display: block;
}

/* ===== ANIMATIONS ===== */

/* Fade Up */
.nvf-animation-fade-up {
	opacity: 0;
	transform: translateY(24px);
}

.nvf-animation-fade-up.nvf-animation-active {
	animation: nvf-fade-up 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	animation-delay: var(--animation-delay, 0ms);
}

@keyframes nvf-fade-up {
	0% {
		opacity: 0;
		transform: translateY(24px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Fade Down */
.nvf-animation-fade-down {
	opacity: 0;
	transform: translateY(-24px);
}

.nvf-animation-fade-down.nvf-animation-active {
	animation: nvf-fade-down 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	animation-delay: var(--animation-delay, 0ms);
}

@keyframes nvf-fade-down {
	0% {
		opacity: 0;
		transform: translateY(-24px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Fade In */
.nvf-animation-fade-in {
	opacity: 0;
}

.nvf-animation-fade-in.nvf-animation-active {
	animation: nvf-fade-in 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	animation-delay: var(--animation-delay, 0ms);
}

@keyframes nvf-fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* Scale In */
.nvf-animation-scale-in {
	opacity: 0;
	transform: scale(0.92);
}

.nvf-animation-scale-in.nvf-animation-active {
	animation: nvf-scale-in 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	animation-delay: var(--animation-delay, 0ms);
}

@keyframes nvf-scale-in {
	0% {
		opacity: 0;
		transform: scale(0.92);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* Zoom Up */
.nvf-animation-zoom-up {
	opacity: 0;
	transform: translateY(32px) scale(0.88);
}

.nvf-animation-zoom-up.nvf-animation-active {
	animation: nvf-zoom-up 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	animation-delay: var(--animation-delay, 0ms);
}

@keyframes nvf-zoom-up {
	0% {
		opacity: 0;
		transform: translateY(32px) scale(0.88);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* ===== EDITOR STYLES ===== */

.nvf-image-swap--editor {
	position: relative;
	display: block;
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 8px;
}

.nvf-image-swap--editor .main-image {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

.nvf-image-swap--editor .hover-image,
.nvf-image-swap--editor .hover-image-overlay,
.nvf-image-swap--editor figcaption,
.nvf-image-swap--editor a {
	display: none;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {
	.nvf-image-swap figcaption {
		padding: 16px;
	}

	.nvf-image-swap h3 {
		font-size: 1.25rem;
	}

	.nvf-image-swap h5 {
		font-size: 0.9rem;
	}
}

@media (max-width: 480px) {
	.nvf-image-swap figcaption {
		padding: 12px;
	}

	.nvf-image-swap h3 {
		font-size: 1.1rem;
		margin: 0 0 4px;
	}

	.nvf-image-swap h5 {
		font-size: 0.85rem;
	}
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
	.nvf-animation-fade-up,
	.nvf-animation-fade-down,
	.nvf-animation-fade-in,
	.nvf-animation-scale-in,
	.nvf-animation-zoom-up {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}

	.nvf-animation-fade-up.nvf-animation-active,
	.nvf-animation-fade-down.nvf-animation-active,
	.nvf-animation-fade-in.nvf-animation-active,
	.nvf-animation-scale-in.nvf-animation-active,
	.nvf-animation-zoom-up.nvf-animation-active {
		animation: none !important;
	}

	.nvf-image-swap .main-image,
	.nvf-image-swap .hover-image,
	.nvf-image-swap .hover-image-overlay,
	.nvf-image-swap figcaption,
	.nvf-image-swap h3,
	.nvf-image-swap h5 {
		transition: none !important;
		animation: none !important;
	}
}