/*
 * Faiha intro: the logo reveal video (homepage, once per browser-tab
 * session). Replaces the earlier static logo intro.
 *
 * Shown only while <html> has .faiha-intro (set before first paint by the
 * <head> check in functions.php). The page underneath renders normally;
 * the overlay only covers it.
 *
 * Failsafe without JavaScript: the overlay hides itself after 15s (the
 * video is 10s; preloader.js's own cap is 14.5s), so even if preloader.js
 * never runs nothing stays blocked. preloader.js normally closes it at the
 * end of the video and removes it.
 *
 * Background: the video's own edge colour (#060A12, a near-black Faiha
 * navy), so the letterbox bands around the contained video on portrait
 * phones are invisible.
 */

.faiha-intro .faiha-intro-overlay[hidden] {
	position: fixed;
	inset: 0;
	z-index: 100000; /* above the sticky header (Kadence) and the Chaty widget */
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #060a12;
	animation: faiha-intro-failsafe 0s linear 15s forwards;
}

.faiha-intro-overlay__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain; /* never crop the logo, whatever the viewport shape */
	background-color: #060a12;
	pointer-events: none;
}

/* Fade out at the natural end of the video (preloader.js adds the class). */
.faiha-intro-overlay.is-leaving {
	opacity: 0;
	transition: opacity 450ms var(--faiha-ease-standard, ease);
}

/* Scroll lock while the intro is open (set and cleared by preloader.js). */
html.faiha-intro-lock,
html.faiha-intro-lock body {
	overflow: hidden;
}

/*
 * Skip: subtle, but a real button (keyboard reachable, visible focus ring).
 * Scoped through the overlay so Kadence's global button / :focus / :hover
 * styles (solid brand fill) never apply to it.
 */
.faiha-intro-overlay .faiha-intro-overlay__skip {
	position: absolute;
	right: max(1.25rem, env(safe-area-inset-right));
	bottom: max(1.25rem, env(safe-area-inset-bottom));
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0.625rem 1.125rem;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--faiha-radius-button, 0.75rem);
	background-color: rgba(255, 255, 255, 0.06);
	color: #fff;
	font-family: var(--faiha-font-heading, sans-serif);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.01em;
	cursor: pointer;
	opacity: 0;
	transition:
		opacity 300ms ease,
		background-color 150ms ease,
		border-color 150ms ease;
}

.faiha-intro-overlay .faiha-intro-overlay__skip:not([hidden]) {
	opacity: 1;
}

.faiha-intro-overlay .faiha-intro-overlay__skip:hover,
.faiha-intro-overlay .faiha-intro-overlay__skip:focus {
	border-color: rgba(255, 255, 255, 0.7);
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	box-shadow: none;
}

.faiha-intro-overlay .faiha-intro-overlay__skip:focus-visible {
	outline-width: 2px;
	outline-style: solid;
	outline-color: #fff;
	outline-offset: 3px;
}

@keyframes faiha-intro-failsafe {
	to {
		visibility: hidden;
		pointer-events: none;
	}
}

/* Second guard: the <head> check already skips the intro for reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.faiha-intro .faiha-intro-overlay[hidden] {
		display: none;
	}
}