/**
 * Lumina Hero — Editor Styles
 *
 * Static preview of the Noctiluca Classic animation in the block editor.
 * The canvas animation only runs on the frontend.
 *
 * @package WuppiBlocks
 */

/* ── Editor preview wrapper ─────────────────────────────────────── */
.wp-block-wuppi-lumina-hero.wuppi-lumina-hero-editor-preview {
	min-height: 60vh;
	background-color: #0d1525;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ── Noctiluca Classic static preview ───────────────────────────── */
.wp-block-wuppi-lumina-hero.wuppi-lumina-hero-editor-preview::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient( circle at 25% 30%,  rgba( 0, 255, 237, 0.92 ) 0%, rgba( 0, 255, 237, 0.40 ) 0.5%, transparent 1.2% ),
		radial-gradient( circle at 60% 22%,  rgba( 0, 200, 255, 0.88 ) 0%, rgba( 0, 200, 255, 0.30 ) 0.4%, transparent 1.0% ),
		radial-gradient( circle at 40% 60%,  rgba( 0, 255, 220, 0.80 ) 0%, rgba( 0, 255, 220, 0.22 ) 0.8%, transparent 1.8% ),
		radial-gradient( circle at 75% 45%,  rgba( 100, 220, 255, 0.92 ) 0%, transparent 0.7% ),
		radial-gradient( circle at 15% 70%,  rgba( 0, 230, 210, 0.78 ) 0%, rgba( 0, 230, 210, 0.24 ) 0.6%, transparent 1.4% ),
		radial-gradient( circle at 85% 65%,  rgba( 0, 255, 200, 0.88 ) 0%, transparent 0.6% ),
		radial-gradient( circle at 55% 38%,  rgba( 0, 200, 240, 0.82 ) 0%, rgba( 0, 200, 240, 0.20 ) 0.7%, transparent 1.6% ),
		radial-gradient( circle at 33% 82%,  rgba( 0, 255, 237, 0.75 ) 0%, transparent 0.8% ),
		radial-gradient( circle at 70% 10%,  rgba( 120, 230, 255, 0.85 ) 0%, transparent 0.5% ),
		radial-gradient( circle at 90% 38%,  rgba( 0, 240, 220, 0.80 ) 0%, transparent 0.7% ),
		radial-gradient( ellipse 18% 12% at 30% 50%, rgba( 0, 200, 240, 0.12 ) 0%, transparent 100% ),
		radial-gradient( ellipse 14% 10% at 70% 65%, rgba( 0, 220, 200, 0.10 ) 0%, transparent 100% ),
		radial-gradient( ellipse 60% 40% at 50% 50%, rgba( 0, 180, 220, 0.04 ) 0%, transparent 100% );
	filter: blur( 0.5px );
	pointer-events: none;
	z-index: 0;
}

.wp-block-wuppi-lumina-hero.wuppi-lumina-hero-editor-preview::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient( circle at 50% 15%,  rgba( 0, 255, 237, 0.88 ) 0%, rgba( 0, 255, 237, 0.28 ) 0.5%, transparent 1.1% ),
		radial-gradient( circle at 80% 28%,  rgba( 100, 230, 255, 0.92 ) 0%, transparent 0.55% ),
		radial-gradient( circle at 10% 48%,  rgba( 0, 240, 220, 0.72 ) 0%, rgba( 0, 240, 220, 0.18 ) 0.6%, transparent 1.3% ),
		radial-gradient( circle at 65% 75%,  rgba( 0, 200, 255, 0.85 ) 0%, transparent 0.65% ),
		radial-gradient( circle at 35% 85%,  rgba( 0, 255, 200, 0.68 ) 0%, rgba( 0, 255, 200, 0.18 ) 0.7%, transparent 1.7% ),
		radial-gradient( circle at 90% 80%,  rgba( 0, 255, 237, 0.88 ) 0%, transparent 0.55% ),
		radial-gradient( circle at 20% 15%,  rgba( 0, 255, 220, 0.72 ) 0%, rgba( 0, 255, 220, 0.22 ) 1.0%, transparent 2.2% ),
		radial-gradient( circle at 48% 50%,  rgba( 0, 220, 240, 0.65 ) 0%, rgba( 0, 220, 240, 0.15 ) 1.2%, transparent 2.5% ),
		radial-gradient( circle at 6%  25%,  rgba( 0, 255, 210, 0.82 ) 0%, transparent 0.6% ),
		radial-gradient( circle at 93% 55%,  rgba( 80, 230, 255, 0.80 ) 0%, transparent 0.6% );
	pointer-events: none;
	z-index: 0;
}

/* ── InnerBlocks content ────────────────────────────────────────── */
.wp-block-wuppi-lumina-hero .lumina-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var( --wp--style--global--content-size, 800px );
	padding: var( --wp--preset--spacing--50, 2rem );
	text-align: center;
}

/* Force white text in the editor preview */
.wp-block-wuppi-lumina-hero.wuppi-lumina-hero-editor-preview,
.wp-block-wuppi-lumina-hero.wuppi-lumina-hero-editor-preview h1,
.wp-block-wuppi-lumina-hero.wuppi-lumina-hero-editor-preview h2,
.wp-block-wuppi-lumina-hero.wuppi-lumina-hero-editor-preview h3,
.wp-block-wuppi-lumina-hero.wuppi-lumina-hero-editor-preview p {
	color: #ffffff;
}

/* ── Eyebrow label ──────────────────────────────────────────────── */
.wp-block-wuppi-lumina-hero .lumina-hero__content .lumina-hero__eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.70;
	margin-bottom: 0.5rem;
}

/* InnerBlocks appender area */
.wp-block-wuppi-lumina-hero .block-editor-inner-blocks > .block-editor-block-list__layout .block-list-appender,
.wp-block-wuppi-lumina-hero .block-editor-inner-blocks .block-editor-default-block-appender__content {
	color: rgba( 255, 255, 255, 0.55 );
	border-color: rgba( 255, 255, 255, 0.25 );
}