/* ============================================================================================
 * Payner FX
 *  - Hero video centerpiece overlay (V3 fade, V5 wipe).
 *  - Cinematic video band section.
 *  - Scroll-lock visual state (body.pn-fx-done drives the dismiss transitions).
 *  - Optional white-nav-during-film state (body.pn-film-up). Adjust selectors to your header.
 * ========================================================================================== */

/* ============== HERO HOST scaffolding =====================================================
 * Apply CSS class `pn-hero-host` to the hero SECTION (Advanced -> CSS Classes).
 * We make the section's container the positioned ancestor + clip its rounded corners, then
 * neutralise the column (!important because Elementor users often set position:relative on
 * the column via their own Custom CSS - we have to win) so the absolute .pn-fx overlay
 * covers the WHOLE card, not just the column inside the padding. The card styling (radius,
 * shadow, padding) stays on the container as you already have it via your own Custom CSS.
 * ========================================================================================= */
.pn-hero-host { position: relative; }
.pn-hero-host > .elementor-container { position: relative; overflow: hidden; }
/* Flatten EVERY positioned ancestor between .pn-fx and the card so the absolute video
 * actually scopes to the container (the card), not a collapsed wrapper. Elementor sets
 * .elementor-widget{position:relative} by default - without this override the video ends
 * up inside a 0-height widget (only the absolute .pn-fx__mark "escapes" visually). The
 * user's own custom CSS often also sets position:relative on the column; both have to be
 * neutralised. */
.pn-hero-host > .elementor-container > .elementor-column,
.pn-hero-host > .elementor-container > .elementor-column > .elementor-widget-wrap,
.pn-hero-host .pn-fx-host,
.pn-hero-host .pn-fx-host > .elementor-widget-container {
	position: static !important;
	z-index: auto !important;
}
.pn-hero-host .pn-fx-host { margin: 0 !important; padding: 0 !important; }

/* ============== HIDE / REVEAL the hero content while the film is up ========================
 * Driven from a body class (pn-fx-init) set by the plugin's JS as soon as a .pn-fx is found,
 * so the rule applies even if the visitor's browser doesn't support :has() and is bulletproof
 * against arbitrary Elementor cascade conflicts. Every direct child of the hero column's
 * widget-wrap is hidden EXCEPT the one with class `pn-fx-host` (your video overlay).
 * ========================================================================================= */
body.pn-fx-init .pn-hero-host > .elementor-container > .elementor-column > .elementor-widget-wrap > :not(.pn-fx-host) {
	opacity: 0 !important;
	transform: translateY(26px);
	filter: blur(6px);
	pointer-events: none;
}
body.pn-fx-init.pn-fx-done .pn-hero-host > .elementor-container > .elementor-column > .elementor-widget-wrap > :not(.pn-fx-host) {
	opacity: 1 !important;
	transform: none;
	filter: blur(0);
	pointer-events: auto;
	transition: opacity 1.1s ease .2s, transform 1.2s cubic-bezier(.22,1,.36,1) .2s, filter 1s ease .2s;
}

/* ============== VIDEO OVERLAY ============================================================== */
.pn-fx { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.pn-fx__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pn-fx__scrim { position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(120% 120% at 50% 42%, rgba(14,26,46,.12) 0%, rgba(14,26,46,.55) 100%),
		linear-gradient(180deg, rgba(14,26,46,.28), rgba(14,26,46,.10));
}
.pn-fx__mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	font-family: "Bodoni Moda", "Times New Roman", serif; font-weight: 600;
	font-size: clamp(64px, 13vw, 200px); letter-spacing: .04em;
	color: #fff; text-shadow: 0 4px 40px rgba(0,0,0,.45);
}

/* V3 - fade dissolve with a gentle scale-in push */
.pn-fx--v3 { transition: opacity 1.2s ease, transform 1.3s cubic-bezier(.22,1,.36,1); }
body.pn-fx-done .pn-fx--v3 { opacity: 0; transform: scale(1.06); }

/* V5 - curtain wipe up */
.pn-fx--v5 { clip-path: inset(0 0 0 0); transition: clip-path 1.25s cubic-bezier(.76,0,.24,1); }
body.pn-fx-done .pn-fx--v5 { clip-path: inset(0 0 100% 0); }
.pn-fx--v5 .pn-fx__mark { transition: opacity .6s ease, transform 1.25s cubic-bezier(.76,0,.24,1); }
body.pn-fx-done .pn-fx--v5 .pn-fx__mark { opacity: 0; transform: translateY(-40px); }

/* ============== BLUE TRACER (flowing edge light) ===========================================
 * A slow conic-gradient comet rides the hero card's edge as a quiet brand accent. Rendered
 * via the container's ::after (no extra markup needed) so it sits on top of the film during
 * the intro (z 9 > .pn-fx's 8) and keeps framing the card after reveal. Soft blue glow.
 * ========================================================================================= */
/* PERFORMANCE: this tracer is a rotating conic LAYER driven by transform, NOT an animated
 * custom-property gradient. Animating --angle inside a conic-gradient forces a full main-
 * thread repaint of the gradient + mask + drop-shadows EVERY frame, which starves the hero
 * video's decode and makes it stutter. Rotating a pre-rasterized layer via transform is
 * compositor-only (GPU) = smooth, and it never repaints. The `i` element is injected next
 * to .pn-fx by the plugin JS. The static ring mask lives on the parent (doesn't rotate);
 * the conic disc spins inside it. */
.pn-fx-tracer {
	position: absolute;
	inset: -1px;
	z-index: 9;
	border-radius: 29px;
	padding: 2.5px;
	pointer-events: none;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-composite: xor;
	        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	        mask-repeat: no-repeat;
	        mask-composite: exclude;
	filter: drop-shadow(0 0 7px rgba(74,143,216,.6)) drop-shadow(0 0 15px rgba(74,143,216,.3));
}
.pn-fx-tracer i {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2200px;
	height: 2200px;
	transform: translate(-50%, -50%) rotate(0deg);
	background: conic-gradient(from 0deg,
		rgba(74,143,216,0)   0deg,
		rgba(74,143,216,0)   226deg,
		rgba(138,180,224,.13) 276deg,
		rgba(74,143,216,.8)  338deg,
		#d9eafc              357deg,
		rgba(74,143,216,0)   360deg);
	will-change: transform;
	animation: pn-fxFlow 11s linear infinite;
}
@keyframes pn-fxFlow { to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (max-width: 768px) { .pn-fx-tracer i { width: 1200px; height: 1200px; } }
@media (prefers-reduced-motion: reduce) { .pn-fx-tracer i { animation: none; } }

/* ============== OPTIONAL: WHITE NAV WHILE THE FILM IS UP ===================================
 * These selectors target the `pn-nav` / `pn-nav-island` / `pn-nav-fan` / `pn-nav-logo` /
 * `pn-nav-cta` class names from your earlier hand-styling. Add the matching CSS classes to
 * your nav widgets (Advanced -> CSS Classes) or change the selectors below to whatever your
 * header actually uses. Safe to leave unused - rules just do nothing then.
 * ========================================================================================= */
body.pn-film-up .pn-nav .elementor-nav-menu li a,
body.pn-film-up .pn-nav-cta {
	color: #fff !important;
	transition: color .45s ease;
}
body.pn-film-up .pn-nav-island,
body.pn-film-up .pn-nav-fan,
body.pn-film-up .pn-nav-logo {
	background: transparent !important;
	border-color: rgba(255,255,255,.30) !important;
	box-shadow: none !important;
	color: #fff !important;
	transition: background .45s ease, border-color .45s ease, box-shadow .45s ease, color .45s ease;
}
body.pn-film-up .pn-nav-logo img { filter: brightness(0) invert(1); transition: filter .45s ease; }

/* ============== CINEMATIC BAND ============================================================
 * Floating video card section. Matches the panel rhythm (shell width, 28px radius, shadow).
 * Drop the [payner_cineband] shortcode in its own Elementor section between two panels.
 * ========================================================================================= */
.pn-cineband {
	position: relative;
	/* Match the panels EXACTLY: full-width section, then cap at the shell width and inset by
	 * the same rail gutter the panels use -> width = min(1640, viewport - 2*rail) at every size.
	 * (Requires the cineband's Elementor section to be Full Width with 0 horizontal padding.) */
	--pn-rail: clamp(24px, 4vw, 56px);
	width: calc(100% - 2 * var(--pn-rail));
	max-width: var(--pn-shell-max, 1640px);
	margin-left: auto;
	margin-right: auto;
	height: clamp(340px, 46vh, 600px);
	border-radius: 28px;
	overflow: hidden;
	isolation: isolate;
	background: #0E1A2E;
	box-shadow: 0 24px 60px -30px rgba(14,26,46,.18), 0 2px 6px rgba(14,26,46,.05);
}
.pn-cineband__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pn-cineband__grade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		linear-gradient(90deg, rgba(14,26,46,.86) 0%, rgba(14,26,46,.55) 36%, rgba(14,26,46,.10) 66%, rgba(14,26,46,.32) 100%),
		linear-gradient(180deg, rgba(30,58,123,.22) 0%, rgba(14,26,46,.18) 100%);
}
.pn-cineband__inner { position: absolute; inset: 0; z-index: 2;
	display: flex; flex-direction: column; justify-content: flex-end;
	padding: clamp(28px, 4vw, 60px); color: #fff; max-width: 760px;
}
/* Font-family declarations are forced (!important) + scoped under .pn-cineband so the
 * theme's content-area h2/p font rules (which outrank a single class) can't override them.
 * The Google fonts are also enqueued by the plugin PHP so they're guaranteed loaded. */
.pn-cineband .pn-cineband__eyebrow { display: inline-flex; align-items: center; gap: 11px; margin: 0 0 14px;
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace !important;
	font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.72);
}
.pn-cineband .pn-cineband__eyebrow::before { content: ""; width: 28px; height: 1px; background: #4A8FD8; }
.pn-cineband .pn-cineband__title { font-family: "Inter", sans-serif !important; font-weight: 800;
	font-size: clamp(30px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -.025em;
	margin: 0; color: #fff; text-wrap: balance;
}
.pn-cineband .pn-cineband__title em { font-family: "Fraunces", "Times New Roman", Georgia, serif !important;
	font-style: italic; font-weight: 400; letter-spacing: -.015em; color: #BFD7F2;
}
.pn-cineband .pn-cineband__sub { font-family: "Inter", sans-serif !important; margin: 14px 0 0; max-width: 50ch; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.82); }
.pn-cineband .pn-cineband__cta { font-family: "Inter", sans-serif !important; }
.pn-cineband__cta { display: inline-flex; align-items: center; gap: 11px; align-self: flex-start; margin-top: 24px;
	padding: 12px 20px 12px 14px; border-radius: 999px;
	background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.45); color: #fff;
	font-size: 14px; font-weight: 600; text-decoration: none; backdrop-filter: blur(6px);
	transition: background .2s, border-color .2s, transform .15s;
}
.pn-cineband__cta:hover { background: rgba(255,255,255,.20); border-color: #fff; transform: translateY(-1px); }
.pn-cineband__play { display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 50%; background: #4A8FD8; color: #fff; flex: none;
}
@media (max-width: 560px) { .pn-cineband { height: clamp(300px, 64vw, 420px); } }

/* ============== REDUCED MOTION =============================================================
 * Skip the films entirely and show the hero immediately.
 * ========================================================================================= */
@media (prefers-reduced-motion: reduce) {
	.pn-fx__video, .pn-cineband__video { display: none; }
	body.pn-fx-init .pn-hero-host > .elementor-container > .elementor-column > .elementor-widget-wrap > :not(.pn-fx-host) {
		opacity: 1 !important; transform: none; filter: none; pointer-events: auto;
	}
}