/**
 * Hero Block — Frontend + Editor Styles
 *
 * Modern trending animations:
 *   - Spring-physics entrance (overshoot + settle)
 *   - Animated drift orbs in background
 *   - Subtle dot-grid texture
 *   - Floating demo image with perspective tilt (JS-driven)
 *   - Button shimmer sweep
 *   - Animated gradient text
 *   - Counter number roll-up (via view.js)
 *   - Mouse parallax on orbs (via view.js)
 *
 * All colours from theme.json. Zero hardcoded values.
 */

/* ═══════════════════════════════════════════════════════════════
   KEYFRAMES
   ═══════════════════════════════════════════════════════════════ */

/*
 * Spring-physics entrance — element fades up with a slight overshoot
 * that settles back. More natural than a plain ease-out.
 */
@keyframes nivo-spring-up {
	0%   { opacity: 0; translate: 0 36px; }
	55%  { opacity: 1; translate: 0 -5px; }
	75%  { translate: 0  2px; }
	90%  { translate: 0 -1px; }
	100% { opacity: 1; translate: 0  0; }
}

/* Legacy fade-up — kept for mobile where spring feels too bouncy */
@keyframes nivo-hero-fade-up {
	from { opacity: 0; translate: 0 24px; }
	to   { opacity: 1; translate: 0 0; }
}

/* Scale + fade in — used for the eyebrow pill */
@keyframes nivo-scale-in {
	from { opacity: 0; scale: 0.88; }
	to   { opacity: 1; scale: 1; }
}



/* Gentle float — demo image */
@keyframes nivo-float {
	0%,  100% { transform: translateY(0px); }
	50%        { transform: translateY(-14px); }
}

/* Button shimmer sweep */
@keyframes nivo-shimmer {
	0%   { transform: translateX(-100%) skewX(-15deg); opacity: 0; }
	20%  { opacity: 1; }
	80%  { opacity: 1; }
	100% { transform: translateX(280%) skewX(-15deg); opacity: 0; }
}

/* Animated gradient text */
@keyframes nivo-gradient-pan {
	0%   { background-position: 0%   50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0%   50%; }
}

/* Subtle glow pulse on primary CTA */
@keyframes nivo-glow {
	0%, 100% { box-shadow: var( --wp--preset--shadow--brand ), 0 0 0 0 color-mix( in srgb, var( --wp--preset--color--primary-600 ) 0%,   transparent ); }
	50%       { box-shadow: var( --wp--preset--shadow--brand ), 0 0 28px 4px color-mix( in srgb, var( --wp--preset--color--primary-600 ) 28%, transparent ); }
}

/* Badge pulse (reused by eyebrow) */
@keyframes nivo-badge-pulse {
	0%, 100% { opacity: 1; transform: scale( 1 ); }
	50%       { opacity: 0.6; transform: scale( 1.3 ); }
}


/* ═══════════════════════════════════════════════════════════════
   SECTION
   ═══════════════════════════════════════════════════════════════ */

/*
 * WordPress layout rules apply max-width: content-size to all direct
 * children of is-layout-flow / is-layout-constrained containers.
 * Override here so the <section> is always full-width.
 * Content constraint is handled by .container.container--wide on
 * .nivo-hero__inner — defined in the theme's layout.css.
 */
.wp-block-nivo-saas-hero {
	max-width: none !important;
	margin-inline: 0 !important;
}

.nivo-hero {
	position: relative;
	overflow: hidden;
	/* Extra top padding clears the absolute header (announcement bar ~40px + header bar ~76px) */
	padding-block-start: calc( var( --wp--preset--spacing--10 ) + 116px );
	padding-block-end:   var( --wp--preset--spacing--16 );
}

/* ─── Dot grid texture — ::before pseudo ─────────────────────── */

.nivo-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(
		circle,
		color-mix( in srgb, var( --wp--preset--color--primary-400 ) 22%, transparent ) 1px,
		transparent 1px
	);
	background-size: 28px 28px;
	opacity: 0.35;
	pointer-events: none;
	z-index: 0;
}

/* ─── Background variants ─────────────────────────────────────── */

.nivo-hero--bg-white {
	background-color: var( --wp--preset--color--background );
}

/*
 * Gradient variant — radial glow from top-center fading to white.
 * Layered over the dot grid (::before) for depth.
 */
.nivo-hero--bg-gradient {
	background:
		radial-gradient(
			ellipse 90% 55% at 50% -5%,
			color-mix( in srgb, var( --wp--preset--color--primary-100 ) 70%, transparent ) 0%,
			transparent 65%
		),
		radial-gradient(
			ellipse 55% 40% at 80% 10%,
			color-mix( in srgb, var( --wp--preset--color--primary-200 ) 35%, transparent ) 0%,
			transparent 60%
		),
		var( --wp--preset--color--background );
}

.nivo-hero--bg-dark {
	background:  var( --wp--preset--gradient--dark-surface );
	color: var( --wp--preset--color--text-inverse );
}

/* Tint the dot grid for dark bg */
.nivo-hero--bg-dark::before {
	background-image: radial-gradient(
		circle,
		color-mix( in srgb, var( --wp--preset--color--neutral-0 ) 10%, transparent ) 1px,
		transparent 1px
	);
	opacity: 0.12;
}

/* ═══════════════════════════════════════════════════════════════
   ANIMATED BACKGROUND ORBS
   Soft blurred blobs that drift slowly — add depth without
   distracting from the copy. Pure CSS, no JS.
   ═══════════════════════════════════════════════════════════════ */

@keyframes nivo-orb-drift-1 {
	0%,  100% { transform: translate(   0px,    0px ) scale( 1.00 ); }
	33%        { transform: translate(  40px,  -30px ) scale( 1.06 ); }
	66%        { transform: translate( -20px,   18px ) scale( 0.94 ); }
}

@keyframes nivo-orb-drift-2 {
	0%,  100% { transform: translate(   0px,    0px ) scale( 1.00 ); }
	25%        { transform: translate( -35px,   20px ) scale( 1.04 ); }
	75%        { transform: translate(  25px,  -15px ) scale( 0.96 ); }
}

@keyframes nivo-orb-drift-3 {
	0%,  100% { transform: translate(   0px,   0px ) scale( 1.00 ); }
	40%        { transform: translate(  20px,  25px ) scale( 1.08 ); }
	80%        { transform: translate( -30px, -10px ) scale( 0.92 ); }
}

.nivo-hero__orb {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
	will-change: transform;
}

/* Large top-left orb — primary brand colour */
.nivo-hero__orb--1 {
	width:  600px;
	height: 600px;
	top:   -180px;
	left:  -120px;
	background: color-mix( in srgb, var( --wp--preset--color--primary-200 ) 55%, transparent );
	filter: blur( 90px );
	animation: nivo-orb-drift-1 22s ease-in-out infinite;
}

/* Medium top-right orb — lighter tint */
.nivo-hero__orb--2 {
	width:  460px;
	height: 460px;
	top:    60px;
	right: -100px;
	background: color-mix( in srgb, var( --wp--preset--color--primary-300 ) 38%, transparent );
	filter: blur( 80px );
	animation: nivo-orb-drift-2 17s ease-in-out 3s infinite;
}

/* Small bottom-centre orb — accent */
.nivo-hero__orb--3 {
	width:  340px;
	height: 340px;
	bottom: -80px;
	left:  38%;
	background: color-mix( in srgb, var( --wp--preset--color--primary-100 ) 45%, transparent );
	filter: blur( 70px );
	animation: nivo-orb-drift-3 26s ease-in-out 6s infinite;
}


/* ═══════════════════════════════════════════════════════════════
   INNER WRAPPER
   ═══════════════════════════════════════════════════════════════ */

/*
 * max-width, margin-inline, and padding-inline come from
 * the .container.container--wide utility class in the theme.
 * Only layout-specific rules live here.
 * position:relative + z-index:1 keeps content above the orb layer.
 */
.nivo-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var( --wp--preset--spacing--16 );
}


/* ═══════════════════════════════════════════════════════════════
   CENTERED LAYOUT
   ═══════════════════════════════════════════════════════════════ */

.nivo-hero--centered .nivo-hero__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var( --wp--preset--spacing--6 );
	max-inline-size: 880px;
}

.nivo-hero--centered .nivo-hero__subheading {
	text-align: center;
}


/* ═══════════════════════════════════════════════════════════════
   SPLIT LAYOUTS
   ═══════════════════════════════════════════════════════════════ */

.nivo-hero--split-left .nivo-hero__inner,
.nivo-hero--split-right .nivo-hero__inner {
	flex-direction: row;
	align-items: center;
	gap: var( --wp--preset--spacing--20 );
}

.nivo-hero--split-right .nivo-hero__inner {
	flex-direction: row-reverse;
}

.nivo-hero--split-left .nivo-hero__content,
.nivo-hero--split-right .nivo-hero__content {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--6 );
	flex: 1;
}

.nivo-hero__media {
	flex: 1;
}

.nivo-hero__image {
	width: 100%;
	height: auto;
	border-radius: var( --wp--custom--border-radius--2xl );
	box-shadow: var( --wp--preset--shadow--2xl );
	display: block;
}


/* ═══════════════════════════════════════════════════════════════
   ANNOUNCEMENT BADGE
   Shown when showBadge is enabled. Appears above the eyebrow as
   a clickable news pill — "New  NivoSearch 2.0 is here →"
   ═══════════════════════════════════════════════════════════════ */

.nivo-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px 5px 5px;
	background-color: var( --wp--preset--color--surface-primary );
	border: 1px solid var( --wp--preset--color--primary-200 );
	border-radius: var( --wp--custom--border-radius--full );
	text-decoration: none;
	color: var( --wp--preset--color--text-primary );
	font-size: var( --wp--preset--font-size--xs );
	font-weight: 500;
	box-shadow: var( --wp--preset--shadow--sm );
	transition:
		box-shadow      var( --wp--custom--transition--fast ),
		border-color    var( --wp--custom--transition--fast ),
		transform       var( --wp--custom--transition--fast );
	align-self: center;
}

.nivo-hero__badge:hover {
	border-color: var( --wp--preset--color--primary-400 );
	box-shadow: var( --wp--preset--shadow--md ), 0 0 0 3px color-mix( in srgb, var( --wp--preset--color--primary-500 ) 12%, transparent );
	transform: translateY( -1px );
	color: var( --wp--preset--color--text-primary );
	text-decoration: none;
}

.nivo-hero__badge-tag {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	background: var( --wp--preset--color--primary-600 );
	color: var( --wp--preset--color--neutral-0 );
	border-radius: var( --wp--custom--border-radius--full );
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1.5;
	flex-shrink: 0;
}

.nivo-hero__badge-label {
	color: var( --wp--preset--color--text-secondary );
	font-weight: 500;
}

.nivo-hero__badge-arrow {
	font-size: 0.75em;
	color: var( --wp--preset--color--primary-500 );
	transition: transform var( --wp--custom--transition--fast );
	flex-shrink: 0;
}

.nivo-hero__badge:hover .nivo-hero__badge-arrow {
	transform: translateX( 3px );
}

.nivo-hero--split-left .nivo-hero__badge,
.nivo-hero--split-right .nivo-hero__badge {
	align-self: flex-start;
}


/* ═══════════════════════════════════════════════════════════════
   EYEBROW — badge pill style
   ═══════════════════════════════════════════════════════════════ */

.nivo-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-block-end: 2rem !important;
	background-color: var( --wp--preset--color--primary-50 );
	border: 1px solid var( --wp--preset--color--primary-200 );
	border-radius: var( --wp--custom--border-radius--full );
	padding: 5px 14px 5px 10px;
	font-size: var( --wp--preset--font-size--xs );
	font-weight: 600;
	color: var( --wp--preset--color--primary-700 );
	letter-spacing: 0.01em;
	align-self: center;
	margin: 0;
	transition:
		border-color var( --wp--custom--transition--fast ),
		box-shadow   var( --wp--custom--transition--fast );
}

.nivo-hero--split-left .nivo-hero__eyebrow,
.nivo-hero--split-right .nivo-hero__eyebrow {
	align-self: flex-start;
}

.nivo-hero__eyebrow-pulse {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: var( --wp--custom--border-radius--full );
	background-color: var( --wp--preset--color--primary-500 );
	animation: nivo-badge-pulse 2s ease-in-out infinite;
	flex-shrink: 0;
}

.nivo-hero__eyebrow-text {
	line-height: 1.3;
}

@media ( prefers-reduced-motion: reduce ) {
	.nivo-hero__eyebrow-pulse {
		animation: none;
	}
}


/* ═══════════════════════════════════════════════════════════════
   HEADING
   ═══════════════════════════════════════════════════════════════ */

.nivo-hero__heading {
	font-family: var( --wp--preset--font-family--inter-display );
	font-size: 60px;
	font-weight: 800;
	line-height: 1.0;
	letter-spacing: -0.04em;
	color: var( --wp--preset--color--text-primary );
	margin: 0;
}

/*
 * Animated gradient word highlight.
 * Apply via <span class="has-gradient"> in rich-text content.
 */
.nivo-hero__heading .has-gradient {
	background: linear-gradient(
		135deg,
		var( --wp--preset--color--primary-600 ) 0%,
		var( --wp--preset--color--primary-400 ) 30%,
		var( --wp--preset--color--primary-700 ) 60%,
		var( --wp--preset--color--primary-500 ) 100%
	);
	background-size: 300% 300%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: nivo-gradient-pan 5s ease infinite;
}


/* ═══════════════════════════════════════════════════════════════
   SUBHEADING
   ═══════════════════════════════════════════════════════════════ */

.nivo-hero__subheading {
	font-size: var( --wp--preset--font-size--lg );
	color: var( --wp--preset--color--text-secondary );
	line-height: 1.65;
	margin: 0;
}


/* ═══════════════════════════════════════════════════════════════
   CTA ACTIONS
   ═══════════════════════════════════════════════════════════════ */

.nivo-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --wp--preset--spacing--4 );
	margin-block-start: var( --wp--preset--spacing--2 );
}

.nivo-hero--centered .nivo-hero__actions {
	justify-content: center;
}

/* Primary button */
.nivo-btn--fill {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: var( --wp--preset--spacing--2 );
	background-color: var( --wp--preset--color--primary-600 );
	color: var( --wp--preset--color--neutral-0 ) !important;
	text-decoration: none !important;
	border: 2px solid transparent;
	border-radius: var( --wp--custom--border-radius--full );
	font-size: var( --wp--preset--font-size--base );
	font-weight: 600;
	text-decoration: none;
	transition:
		background-color var( --wp--custom--transition--fast ),
		box-shadow       var( --wp--custom--transition--fast ),
		transform        var( --wp--custom--transition--fast ),
		gap              var( --wp--custom--transition--fast );
	box-shadow: var( --wp--preset--shadow--brand );
	animation: nivo-glow 4s ease-in-out 2s infinite;
}

/* Shimmer sweep — plays once on reveal, then on hover */
.nivo-btn--fill::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 45%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent,
		color-mix( in srgb, var( --wp--preset--color--neutral-0 ) 35%, transparent ),
		transparent
	);
	animation: nivo-shimmer 3.5s ease-in-out 1.2s infinite;
	pointer-events: none;
}

.nivo-btn--lg {
	padding: var( --wp--preset--spacing--4 ) var( --wp--preset--spacing--8 );
}

.nivo-btn--fill:hover,
.nivo-btn--fill:focus-visible {
	background-color: var( --wp--preset--color--primary-700 );
	color: var( --wp--preset--color--neutral-0 ) !important;
	box-shadow: var( --wp--preset--shadow--brand-lg );
	transform: translateY( -2px );
	gap: var( --wp--preset--spacing--3 );
	animation: none;
	text-decoration: none;
}

.nivo-btn--fill:active {
	transform: translateY( 0 );
}

/* Secondary button */
.nivo-btn--outline {
	display: inline-flex;
	align-items: center;
	gap: var( --wp--preset--spacing--2 );
	background-color: var( --wp--preset--color--surface-primary );
	color: var( --wp--preset--color--text-primary );
	border: 2px solid var( --wp--preset--color--border );
	border-radius: var( --wp--custom--border-radius--full );
	font-size: var( --wp--preset--font-size--base );
	font-weight: 600;
	text-decoration: none;
	transition:
		border-color     var( --wp--custom--transition--fast ),
		background-color var( --wp--custom--transition--fast ),
		box-shadow       var( --wp--custom--transition--fast ),
		transform        var( --wp--custom--transition--fast );
}

.nivo-btn--outline:hover {
	border-color:     var( --wp--preset--color--neutral-300 );
	background-color: var( --wp--preset--color--surface );
	box-shadow: var( --wp--preset--shadow--sm );
	transform: translateY( -1px );
}

.nivo-btn__arrow {
	font-size: 0.9em;
	transition: transform var( --wp--custom--transition--fast );
}

.nivo-btn--fill:hover .nivo-btn__arrow {
	transform: translateX( 3px );
}

.nivo-btn__play {
	font-size: 0.65em;
	color: var( --wp--preset--color--primary-500 );
}


/* ═══════════════════════════════════════════════════════════════
   TRUST BAR
   ═══════════════════════════════════════════════════════════════ */

.nivo-hero__trust {
	display: flex;
	align-items: center;
	gap: var( --wp--preset--spacing--3 );
	flex-wrap: wrap;
}

.nivo-hero--centered .nivo-hero__trust {
	justify-content: center;
}

.nivo-hero__trust-stars {
	display: flex;
	align-items: center;
	color: var( --wp--preset--color--warning );
	font-size: 0.9rem;
	letter-spacing: 1px;
}

.nivo-hero__trust-text {
	font-size: var( --wp--preset--font-size--sm );
	color: var( --wp--preset--color--text-secondary );
	margin: 0;
	line-height: 1.4;
}

/* Counter values get a class from view.js during roll-up */
.nivo-hero__trust-text [data-counter] {
	display: inline-block;
	min-width: 2ch;
	transition: opacity 0.2s;
}

.nivo-hero__trust-sep {
	margin-inline: var( --wp--preset--spacing--2 );
	opacity: 0.4;
}


/* ═══════════════════════════════════════════════════════════════
   PLATFORM COMPATIBILITY STRIP
   "Works with  🌐 WordPress  |  📦 WooCommerce"
   Subtle — supports the trust bar, doesn't compete with CTAs.
   ═══════════════════════════════════════════════════════════════ */

.nivo-hero__platforms {
	display: flex;
	align-items: center;
	gap: var( --wp--preset--spacing--3 );
	flex-wrap: wrap;
}

.nivo-hero--centered .nivo-hero__platforms {
	justify-content: center;
}

.nivo-hero__platform-label {
	font-size: var( --wp--preset--font-size--xs );
	color: var( --wp--preset--color--text-muted );
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.nivo-hero__platform-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	background-color: color-mix( in srgb, var( --wp--preset--color--neutral-100 ) 80%, transparent );
	border: 1px solid var( --wp--preset--color--border );
	border-radius: var( --wp--custom--border-radius--full );
	font-size: var( --wp--preset--font-size--xs );
	font-weight: 600;
	color: var( --wp--preset--color--text-secondary );
	transition:
		border-color     var( --wp--custom--transition--fast ),
		background-color var( --wp--custom--transition--fast );
}

.nivo-hero__platform-chip:hover {
	border-color:     var( --wp--preset--color--primary-300 );
	background-color: var( --wp--preset--color--primary-50 );
	color:            var( --wp--preset--color--primary-700 );
}

.nivo-hero__platform-icon {
	flex-shrink: 0;
	opacity: 0.7;
}

.nivo-hero__platform-divider {
	display: inline-block;
	width: 1px;
	height: 14px;
	background-color: var( --wp--preset--color--border );
	flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════
   DEMO IMAGE — below hero copy, centered, glossy border
   ═══════════════════════════════════════════════════════════════ */

/*
 * Glossy border — 12px padding + gradient background.
 * The gradient simulates a glass ring:
 *   top-left bright white  → light source hitting the glass
 *   mid transparent        → glass transmission (see-through feel)
 *   bottom-right soft white→ secondary reflection
 * Two inset shadows add the inner highlight line that makes glass
 * look genuinely glossy.
 */
.nivo-hero__demo {
	width: 100%;
	max-width: 900px;
	margin-inline: auto;
	border-radius: 26px;
	padding: 12px;
	background: linear-gradient(
		145deg,
		rgba( 255, 255, 255, 0.95 )  0%,
		rgba( 255, 255, 255, 0.60 ) 20%,
		rgba( 255, 255, 255, 0.06 ) 45%,
		rgba( 255, 255, 255, 0.04 ) 55%,
		rgba( 255, 255, 255, 0.45 ) 78%,
		rgba( 255, 255, 255, 0.82 ) 100%
	);
	box-shadow:
		inset 0  2px 0 rgba( 255, 255, 255, 1.00 ),
		inset 0 -1px 0 rgba( 255, 255, 255, 0.35 ),
		inset 2px 0 0  rgba( 255, 255, 255, 0.50 ),
		inset -2px 0 0 rgba( 255, 255, 255, 0.20 );
}

.nivo-hero__demo-img {
	width: 100%;
	height: auto;
	border-radius: 16px;
	display: block;
}

/* ═══════════════════════════════════════════════════════════════
   ENTRANCE ANIMATION STATES — PROGRESSIVE ENHANCEMENT
   ═══════════════════════════════════════════════════════════════ */

/*
 * PATTERN: elements are VISIBLE by default.
 * view.js adds .nivo-hero--js the moment it initialises.
 * Only then do elements go invisible, ready for the stagger reveal.
 *
 * Benefit: if view.js fails to load for any reason (blocked, error,
 * slow network) the hero content is always readable — no blank section.
 *
 * Sequence:
 *   1. Page loads   → elements visible (no .nivo-hero--js yet)
 *   2. view.js runs → adds .nivo-hero--js  → elements hidden
 *   3. double-rAF   → adds .nivo-hero--revealed → stagger fires
 *   Steps 2–3 happen within ~2 animation frames (~33 ms) so there is
 *   no perceptible flash of content before the animation.
 */

/* ── Hidden state (only when JS has initialised) ────────────────
   Slide-up elements: heading, subheading, actions, trust, platforms */
.nivo-hero--animate.nivo-hero--js [data-hero-anim]:not( [data-hero-anim="media"] ):not( [data-hero-anim="badge"] ):not( [data-hero-anim="eyebrow"] ) {
	opacity: 0;
	translate: 0 28px;
}

/* Scale-in elements: badge, eyebrow */
.nivo-hero--animate.nivo-hero--js [data-hero-anim="badge"],
.nivo-hero--animate.nivo-hero--js [data-hero-anim="eyebrow"] {
	opacity: 0;
	translate: 0 0;
	scale: 0.88;
}

/* ── Stagger reveal (fired when view.js adds .nivo-hero--revealed) */

.nivo-hero--animate.nivo-hero--js.nivo-hero--revealed [data-hero-anim="badge"] {
	animation: nivo-scale-in 0.50s cubic-bezier( 0.34, 1.56, 0.64, 1 ) 0ms forwards;
}

.nivo-hero--animate.nivo-hero--js.nivo-hero--revealed [data-hero-anim="eyebrow"] {
	animation: nivo-scale-in 0.55s cubic-bezier( 0.34, 1.56, 0.64, 1 ) 80ms forwards;
}

.nivo-hero--animate.nivo-hero--js.nivo-hero--revealed [data-hero-anim="heading"] {
	animation: nivo-spring-up 0.8s cubic-bezier( 0.22, 1, 0.36, 1 ) 160ms forwards;
}

.nivo-hero--animate.nivo-hero--js.nivo-hero--revealed [data-hero-anim="subheading"] {
	animation: nivo-spring-up 0.7s cubic-bezier( 0.22, 1, 0.36, 1 ) 280ms forwards;
}

.nivo-hero--animate.nivo-hero--js.nivo-hero--revealed [data-hero-anim="actions"] {
	animation: nivo-spring-up 0.65s cubic-bezier( 0.22, 1, 0.36, 1 ) 400ms forwards;
}

.nivo-hero--animate.nivo-hero--js.nivo-hero--revealed [data-hero-anim="trust"] {
	animation: nivo-hero-fade-up 0.55s cubic-bezier( 0.22, 1, 0.36, 1 ) 500ms forwards;
}

.nivo-hero--animate.nivo-hero--js.nivo-hero--revealed [data-hero-anim="platforms"] {
	animation: nivo-hero-fade-up 0.50s cubic-bezier( 0.22, 1, 0.36, 1 ) 600ms forwards;
}

/* ═══════════════════════════════════════════════════════════════
   DEMO IMAGE — SCROLL-TRIGGERED REVEAL
   ═══════════════════════════════════════════════════════════════ */

/*
 * The demo image has its own IntersectionObserver (view.js).
 * It starts hidden and fires independently when it enters
 * the viewport during scroll — not tied to the hero stagger.
 *
 * Reveal: scale up from 0.90 + fade + blur-clear + spring overshoot.
 * After 1.1 s the float loop begins, creating a seamless handoff.
 */
@keyframes nivo-demo-reveal {
	0%   { opacity: 0; translate: 0 70px; scale: 0.90; filter: blur( 6px ); }
	55%  { opacity: 1; filter: blur( 0 ); }
	68%  { translate: 0 -8px; scale: 1.015; }
	82%  { translate: 0  3px; scale: 0.996; }
	92%  { translate: 0 -2px; }
	100% { opacity: 1; translate: 0 0; scale: 1; filter: blur( 0 ); }
}

/* Hidden state — only when animation is active */
.nivo-hero--animate .nivo-hero__demo {
	opacity: 0;
	translate: 0 70px;
	scale: 0.90;
}

/*
 * view.js adds .nivo-demo--visible when the element enters the viewport.
 * Reveal + float chain: reveal runs once, float loops after 1.1 s delay.
 */
.nivo-hero--animate .nivo-hero__demo.nivo-demo--visible {
	animation:
		nivo-demo-reveal  1.1s cubic-bezier( 0.22, 1, 0.36, 1 ) both,
		nivo-float        7s  ease-in-out 1.1s infinite;
}

/* Respect reduced motion */
@media ( prefers-reduced-motion: reduce ) {
	.nivo-hero--animate.nivo-hero--js [data-hero-anim] {
		opacity: 1 !important;
		translate: 0 0 !important;
		scale: 1 !important;
		animation: none !important;
	}

	.nivo-hero__demo-img {
		animation: none !important;
	}

	.nivo-btn--fill::after,
	.nivo-hero__eyebrow-pulse {
		animation: none !important;
	}

	.nivo-hero__heading .has-gradient {
		animation: none !important;
		background-position: 0% 50%;
	}

	.nivo-btn--fill {
		animation: none !important;
	}

	/* Orbs — stop drifting, remain visible as static tints */
	.nivo-hero__orb--1,
	.nivo-hero__orb--2,
	.nivo-hero__orb--3 {
		animation: none !important;
	}

	/* Show demo immediately — skip scroll reveal */
	.nivo-hero--animate .nivo-hero__demo {
		opacity: 1 !important;
		translate: 0 0 !important;
		scale: 1 !important;
	}

	.nivo-hero--animate .nivo-hero__demo.nivo-demo--visible {
		animation: none !important;
	}
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media ( max-width: 767px ) {
	.nivo-hero {
		/* Clear floating header (65px) + breathing room above eyebrow */
		padding-block-start: calc( var( --wp--custom--header--height, 65px ) + var( --wp--preset--spacing--8 ) );
		padding-block-end:   var( --wp--preset--spacing--12 );
	}

	.nivo-hero__heading {
		font-size: clamp( 2.5rem, 9vw, 3.25rem );
	}

	.nivo-hero__subheading {
		font-size: var( --wp--preset--font-size--base );
	}

	.nivo-hero--split-left .nivo-hero__inner,
	.nivo-hero--split-right .nivo-hero__inner {
		flex-direction: column;
	}

	.nivo-hero__trust {
		flex-direction: column;
		align-items: center;
		gap: var( --wp--preset--spacing--2 );
		text-align: center;
	}

	.nivo-hero__platforms {
		justify-content: center;
	}

	/* Orbs reduced on mobile — smaller + less blur = better performance */
	.nivo-hero__orb--1 { width: 320px; height: 320px; filter: blur( 60px ); }
	.nivo-hero__orb--2 { width: 240px; height: 240px; filter: blur( 50px ); }
	.nivo-hero__orb--3 { display: none; }

	/* Disable tilt + float on touch devices */
	.nivo-hero__demo-img {
		animation: none !important;
	}
}

/* ═══════════════════════════════════════════════════════════════
   GSAP WORD-BLUR ANIMATION OVERRIDES
   When text-animations.js is active, body gains .nivo-text-anim-ready.
   The heading container must be visible (GSAP animates the words inside).
   ═══════════════════════════════════════════════════════════════ */

/*
 * 1. Neutralise the CSS heading animation so it doesn't conflict with GSAP.
 *    The heading element stays visible; GSAP owns the word spans inside.
 */
.nivo-text-anim-ready .nivo-hero--animate.nivo-hero--js [data-hero-anim="heading"] {
	animation: none !important;
	opacity: 1 !important;
	translate: 0 0 !important;
}

/*
 * 2. Word spans inserted by text-animations.js start invisible.
 *    GSAP will tween them in — no Flash Of Unstyled Content.
 */
.nivo-text-anim-ready .nivo-hero__heading .nivo-anim-word {
	opacity: 0;
}