/* =========================================================================
 * Cinematic Video Background by Dycode — frontend styles (per-section model)
 * Native scroll. Each cinematic section holds its own video background; the
 * content is hidden while the in-between plays, then revealed.
 * ========================================================================= */

.dycode-cvb-scene { position: relative; overflow: hidden; }

/* Content sits above the section's own video background. */
.dycode-cvb-scene > *:not(.dycode-cvb-bg) { position: relative; z-index: 1; }

.dycode-cvb-bg {
	position: absolute; inset: 0; overflow: hidden;
	background-size: cover; background-position: center center; background-repeat: no-repeat;
	pointer-events: none;
}
/* Black fallback only where video is actually expected to mount and play. In
 * the Divi Visual Builder editor, with prefers-reduced-motion, or when no
 * video source is configured, frontend.js never mounts a <video> at all (see
 * dycode-cvb-poster-only in init()) — forcing black there just turns every
 * scene into an opaque box the instant you add content, with no video ever
 * arriving to cover it. Let those cases fall through to whatever's naturally
 * behind (or the poster image, via its own inline background-image). */
.dycode-cvb-bg:not(.dycode-cvb-poster-only) { background-color: #000; }
.dycode-cvb-video {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: center center; display: block;
}
.dycode-cvb-bg.dycode-cvb-video-failed .dycode-cvb-video { display: none; }
.dycode-cvb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; pointer-events: none; }
.dycode-cvb-overlay, .dycode-cvb-gradient { position: absolute; inset: 0; pointer-events: none; }

/* =========================================================================
 * Content reveal: hidden while the in-between plays, then animated in.
 * ========================================================================= */
.dycode-cvb-scene.cvb-content-hidden > *:not(.dycode-cvb-bg) {
	opacity: 0 !important;
	pointer-events: none;
}

.dycode-cvb-scene.cvb-cin-fade.cvb-content-in > *:not(.dycode-cvb-bg) {
	animation: cvb-fade-in var(--cvb-tr-duration, 0.8s) ease both;
}
.dycode-cvb-scene.cvb-cin-slideup.cvb-content-in > *:not(.dycode-cvb-bg) {
	animation: cvb-slideup-in var(--cvb-tr-duration, 0.8s) cubic-bezier(0.22, 1, 0.36, 1) both;
}
.dycode-cvb-scene.cvb-cin-zoom.cvb-content-in > *:not(.dycode-cvb-bg) {
	animation: cvb-zoom-in var(--cvb-tr-duration, 0.8s) cubic-bezier(0.22, 1, 0.36, 1) both;
}
.dycode-cvb-scene.cvb-cin-none.cvb-content-in > *:not(.dycode-cvb-bg) { animation: none; }

@keyframes cvb-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cvb-slideup-in { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cvb-zoom-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }

/* =========================================================================
 * Optional sound toggle (single button, controls the active scene)
 * ========================================================================= */
.dycode-cvb-sound {
	position: fixed; right: clamp(14px, 2.5vw, 32px); bottom: clamp(14px, 2.5vw, 32px);
	width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
	border: none; border-radius: 50%; background: rgba(0,0,0,0.4); color: #fff; font-size: 18px;
	cursor: pointer; z-index: 9990; opacity: 0; visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease, background 0.2s ease;
}
.dycode-cvb-sound.is-visible { opacity: 1; visibility: visible; }
.dycode-cvb-sound:hover { background: rgba(0,0,0,0.6); }
.dycode-cvb-sound:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.dycode-cvb-sound { display: none !important; }
	.dycode-cvb-scene.cvb-content-hidden > *:not(.dycode-cvb-bg) { opacity: 1 !important; }
	.dycode-cvb-scene > *:not(.dycode-cvb-bg) { animation: none !important; }
}