/**
 * Pretpot — Video in Text Effect
 * assets/css/video-in-text-effect.css
 */

.pretpot-vite-wrap {
	position: relative;
	width: 100%;
	height: 400px;
	overflow: hidden;
	display: block;
}

/* Hidden video — only used as a pixel source by the canvas loop */
.pretpot-vite-source-video {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
	top: 0;
	left: 0;
}

/* Canvas fills the widget and is the only visible thing in masked state */
.pretpot-vite-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	display: block;
	z-index: 1;
}

/* Full video — hidden, fades in after reveal is complete */
.pretpot-vite-fullvideo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 2;
	opacity: 0;
	pointer-events: none;
	display: block;
	transition: opacity 0.5s ease;
}
.pretpot-vite-fullvideo-iframe {
	border: none;
}
.pretpot-vite-wrap.pretpot-vite-revealed .pretpot-vite-fullvideo {
	opacity: 1;
}
.pretpot-vite-wrap.pretpot-vite-canvas-gone .pretpot-vite-canvas {
	display: none;
}

/* ---- Reveal animations on the canvas layer ---- */
/* Wipe LTR */
.pretpot-vite-wrap[data-reveal-anim="wipe_ltr"] .pretpot-vite-canvas {
	clip-path: inset(0 0 0 0);
	transition: clip-path var(--pretpot-vite-dur, 800ms) cubic-bezier(0.77,0,0.18,1);
}
.pretpot-vite-wrap[data-reveal-anim="wipe_ltr"].pretpot-vite-revealed .pretpot-vite-canvas {
	clip-path: inset(0 100% 0 0);
}

/* Wipe RTL */
.pretpot-vite-wrap[data-reveal-anim="wipe_rtl"] .pretpot-vite-canvas {
	clip-path: inset(0 0 0 0);
	transition: clip-path var(--pretpot-vite-dur, 800ms) cubic-bezier(0.77,0,0.18,1);
}
.pretpot-vite-wrap[data-reveal-anim="wipe_rtl"].pretpot-vite-revealed .pretpot-vite-canvas {
	clip-path: inset(0 0 0 100%);
}

/* Scale & Fade */
.pretpot-vite-wrap[data-reveal-anim="scale_fade"] .pretpot-vite-canvas {
	opacity: 1;
	transform: scale(1);
	transition: opacity var(--pretpot-vite-dur, 800ms) ease,
	            transform var(--pretpot-vite-dur, 800ms) cubic-bezier(0.34,1.56,0.64,1);
}
.pretpot-vite-wrap[data-reveal-anim="scale_fade"].pretpot-vite-revealed .pretpot-vite-canvas {
	opacity: 0;
	transform: scale(1.08);
}

/* Fade */
.pretpot-vite-wrap[data-reveal-anim="fade"] .pretpot-vite-canvas {
	opacity: 1;
	transition: opacity var(--pretpot-vite-dur, 800ms) ease;
}
.pretpot-vite-wrap[data-reveal-anim="fade"].pretpot-vite-revealed .pretpot-vite-canvas {
	opacity: 0;
}

/* ---- Trigger button ---- */
.pretpot-vite-trigger {
	position: absolute;
	z-index: 5;
	background: rgba(0,0,0,0.45);
	border: 2px solid rgba(255,255,255,0.6);
	border-radius: 50px;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	font-size: 1rem;
	font-family: inherit;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: background 0.2s, opacity 0.4s, transform 0.2s;
}
.pretpot-vite-trigger:hover {
	background: rgba(0,0,0,0.7);
}
.pretpot-vite-trigger:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}
.pretpot-vite-trigger i,
.pretpot-vite-trigger svg {
	font-size: 1.4em;
}
.pretpot-vite-trigger-label {
	font-weight: 600;
	letter-spacing: 0.04em;
}
.pretpot-vite-wrap.pretpot-vite-revealed .pretpot-vite-trigger {
	opacity: 0;
	pointer-events: none;
}

/* ---- Trigger positions ---- */
.pretpot-vite-pos-top-left      .pretpot-vite-trigger { top: 16px;    left: 16px; }
.pretpot-vite-pos-top-center    .pretpot-vite-trigger { top: 16px;    left: 50%; transform: translateX(-50%); }
.pretpot-vite-pos-top-right     .pretpot-vite-trigger { top: 16px;    right: 16px; }
.pretpot-vite-pos-center        .pretpot-vite-trigger { top: 50%;     left: 50%; transform: translate(-50%,-50%); }
.pretpot-vite-pos-bottom-left   .pretpot-vite-trigger { bottom: 16px; left: 16px; }
.pretpot-vite-pos-bottom-center .pretpot-vite-trigger { bottom: 16px; left: 50%; transform: translateX(-50%); }
.pretpot-vite-pos-bottom-right  .pretpot-vite-trigger { bottom: 16px; right: 16px; }

.pretpot-vite-pos-top-center    .pretpot-vite-trigger:hover { transform: translateX(-50%) scale(1.04); }
.pretpot-vite-pos-center        .pretpot-vite-trigger:hover { transform: translate(-50%,-50%) scale(1.04); }
.pretpot-vite-pos-bottom-center .pretpot-vite-trigger:hover { transform: translateX(-50%) scale(1.04); }

@media (prefers-reduced-motion: reduce) {
	.pretpot-vite-canvas,
	.pretpot-vite-fullvideo,
	.pretpot-vite-trigger { transition: none !important; }
}