/* PrettyWellFit Elements — Reveal Scroll Video
   Structure:
   .pwf-reveal            widget root (finale API attaches here)
   .pwf-reveal__stage     viewport-sized frame inside its slide
     .pwf-reveal__video   full-bleed cover video, scrubbed by donated scroll
     .pwf-reveal__window  invisible measuring element (the resting window)
     .pwf-reveal__mask    SVG surround with an expanding rounded-rect hole
     .pwf-reveal__content kicker / headline / bullets / CTA, fades out first
*/

.pwf-reveal {
	--pwf-rev-surround: #FBFFE5;
	--pwf-rev-content: 1;
	position: relative;
	width: 100%;
}

.pwf-reveal__stage {
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
}

.pwf-reveal__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.pwf-reveal__window {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	visibility: hidden;
	pointer-events: none;
}

.pwf-reveal__mask {
	position: absolute;
	left: -200px;
	top: -200px;
	width: calc(100% + 400px);
	height: calc(100% + 400px);
	pointer-events: none;
}

.pwf-reveal.is-full .pwf-reveal__mask {
	display: none;
}

.pwf-reveal__mask-path {
	fill: var(--pwf-rev-surround);
}

/* ---------- content layer ---------- */

.pwf-reveal__content {
	position: absolute;
	inset: 0;
	opacity: var(--pwf-rev-content);
	pointer-events: auto;
}

.pwf-reveal.is-departing .pwf-reveal__content {
	pointer-events: none;
}

.pwf-reveal__kicker {
	position: absolute;
	top: 12vh;
	left: 5vw;
	font-size: 0.75rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.pwf-reveal__headline {
	position: absolute;
	top: 24vh;
	left: 5vw;
	margin: 0;
	width: min(34vw, 30rem);
	font-size: 2.6rem;
	line-height: 1.2;
	font-weight: 400;
}

.pwf-reveal__bullets {
	position: absolute;
	top: 38vh;
	right: 5vw;
	width: min(24vw, 22rem);
	font-size: 0.95rem;
	line-height: 1.5;
}

.pwf-reveal__bullets ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pwf-reveal__bullets li {
	position: relative;
	padding-left: 1.1em;
	margin-bottom: 1.1em;
}

.pwf-reveal__bullets li::before {
	content: '\2022';
	position: absolute;
	left: 0;
	top: 0;
}

.pwf-reveal__cta {
	position: absolute;
	right: 5vw;
	bottom: 12vh;
	display: inline-block;
	padding: 0.9em 2.2em;
	border: 1px solid currentColor;
	border-radius: 999px;
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.pwf-reveal__cta:hover {
	opacity: 0.7;
}

/* ---------- end frame (full bleed) ---------- */

.pwf-reveal__end {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.pwf-reveal.is-end-revealed .pwf-reveal__end {
	pointer-events: auto;
}

.pwf-reveal__er {
	opacity: 0;
	translate: 0 24px;
	transition-property: opacity, translate;
	transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.pwf-reveal__er.pwf-anim--fade-in {
	translate: 0 0;
}

.pwf-reveal__er.pwf-anim--instant {
	transition-duration: 0ms !important;
	transition-delay: 0ms !important;
}

.pwf-reveal.is-end-revealed .pwf-reveal__er {
	opacity: 1;
	translate: 0 0;
}

/* Blur-aware end reveal: with a Background Blur container inside, the
   wrapper hides with visibility instead of opacity so the blur samples
   the video from the first visible pixel; the rise still plays. */
.pwf-reveal__er.pwf-bgblur,
.pwf-reveal__er:has(.pwf-bgblur) {
	opacity: 1;
	visibility: hidden;
}

.pwf-reveal.is-end-revealed .pwf-reveal__er.pwf-bgblur,
.pwf-reveal.is-end-revealed .pwf-reveal__er:has(.pwf-bgblur) {
	visibility: visible;
}

.pwf-reveal.is-end-unrevealing .pwf-reveal__er {
	transition-duration: 300ms !important;
	transition-delay: 0ms !important;
}

/* The nested end-frame container fills the layer, whatever Elementor
   generation produced it. */
.pwf-reveal__end > * {
	height: 100%;
	max-width: none;
}

/* Composed Frame 1 (Frames item 2): a nested container replacing the
   built-in kicker, headline, bullets, and CTA. Fills the content layer;
   its elements use PrettyWellFit Entrance natively (viewport trigger). */
.pwf-reveal__content--composed > * {
	height: 100%;
	max-width: none;
}

/* ---------- small screens ---------- */

@media (max-width: 767px) {
	.pwf-reveal__kicker {
		top: 6vh;
		left: 6vw;
	}
	.pwf-reveal__headline {
		top: 10vh;
		left: 6vw;
		width: 88vw;
		font-size: 1.6rem;
	}
	.pwf-reveal__bullets {
		top: auto;
		bottom: 16vh;
		left: 6vw;
		right: 6vw;
		width: auto;
		font-size: 0.85rem;
	}
	.pwf-reveal__bullets li {
		margin-bottom: 0.7em;
	}
	.pwf-reveal__cta {
		right: auto;
		left: 6vw;
		bottom: 5vh;
	}
}



/* ---------- Elementor editor: composed state ---------- */

.elementor-editor-active .pwf-reveal {
	--pwf-rev-content: 1;
}

/* The editor shows the true composed state: the video, window, and mask
   pin to a viewport-height region, Frame 1 overlays it exactly as it
   renders live, and the End Frame flows beneath as its own labeled
   editing block. (Children are stored end-first; position handles the
   visual order.) */
.elementor-editor-active .pwf-reveal__stage {
	height: auto;
	min-height: 100vh;
}

.elementor-editor-active .pwf-reveal__mask {
	top: 0;
	bottom: auto;
	height: 100vh;
}

/* The video is a viewport-height sticky layer at the widget root,
   showing its final frame: correct cover scale through the window above
   and behind the End Frame block below, exactly the state the widget
   finishes on live. */
.elementor-editor-active .pwf-reveal {
	overflow: visible;
}

.elementor-editor-active .pwf-reveal > .pwf-reveal__video {
	position: sticky;
	top: 0;
	bottom: auto;
	height: 100vh;
	width: 100%;
	display: block;
	margin-bottom: -100vh;
}

/* The window is a control-sized measurement proxy: width and height stay
   the controls' so those previews are live. Only its anchor moves —
   centered within the top viewport-height band. */
.elementor-editor-active .pwf-reveal__window {
	top: 50vh;
	bottom: auto;
	transform: translate(-50%, -50%);
}

.elementor-editor-active .pwf-reveal .pwf-reveal__end {
	position: static;
	display: block;
	opacity: 1;
	visibility: visible;
	translate: none;
	transition: none;
	will-change: auto;
	padding-top: 100vh;
	pointer-events: auto;
}

/* Frame 1: overlaid on the masked video, edited in place. */
.elementor-editor-active .pwf-reveal .pwf-reveal__end > :nth-last-child(1 of .e-con) {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100vh;
	overflow: hidden;
}

/* End Frame: labeled block in flow below the stage. */
.elementor-editor-active .pwf-reveal .pwf-reveal__end::before {
	content: 'END FRAME';
	display: block;
	padding: 10px 10px 6px;
	font-size: 10px;
	letter-spacing: 0.2em;
	opacity: 0.5;
}

.elementor-editor-active .pwf-reveal .pwf-reveal__end > :nth-child(1 of .e-con) {
	min-height: 30vh;
	outline: 1px dashed rgba(0, 0, 0, 0.25);
	outline-offset: -1px;
}