/**
 * Cinematic hero globe: styles for the canvas/fallback swap, the
 * scroll-story card states, and the ambient play/pause control. Loaded
 * only on the homepage (see functions.php).
 *
 * State classes (.is-globe-ready, .is-card-in, .is-status-review,
 * .is-quote-ready, .is-handoff) are added by hero-globe.js /
 * scroll-story.js to the outer <section class="plura-hero"> element
 * (see template-parts/hero.php, [data-plura-globe-wrapper]) - every
 * selector below is scoped from there down.
 *
 * Default (no .is-globe-ready ancestor - reduced-motion, no-JS, no
 * WebGL, or the Customizer globe toggle off): the card shows its
 * finished "Quote Ready" state immediately, exactly like the site's
 * previous always-visible mock. Nothing here is required to see any
 * information - only the choreography is motion-gated.
 */

.plura-hero-globe-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 28px;
	overflow: hidden;
	background: radial-gradient( circle at 32% 28%, #2a2f38, #05070a 70% );
}

@media ( min-width: 900px ) {
	.plura-hero-globe-stage {
		aspect-ratio: 1 / 1;
	}
}

.plura-hero-globe-fallback,
.plura-hero-globe-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.plura-hero-globe-canvas {
	opacity: 0;
}

.plura-hero.is-globe-ready .plura-hero-globe-canvas {
	opacity: 1;
}
.plura-hero.is-globe-ready .plura-hero-globe-fallback {
	opacity: 0;
}
.plura-hero.is-handoff .plura-hero-globe-canvas {
	opacity: 0.35;
	transform: scale( 1.03 );
}

/* Ambient play/pause control - only shown once the scene is actually
   running (nothing to pause otherwise); always a real, labelled,
   keyboard-reachable button, never icon-only. */
.plura-hero-ambient-toggle {
	display: none;
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 3;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid rgba( 244, 246, 248, 0.28 );
	background: rgba( 5, 7, 10, 0.55 );
	color: #f4f6f8;
	font-size: 0.8rem;
	line-height: 1;
	cursor: pointer;
	backdrop-filter: blur( 6px );
}
.plura-hero.is-globe-ready .plura-hero-ambient-toggle {
	display: inline-flex;
}
.plura-hero-ambient-toggle:focus-visible {
	outline: 2px solid #b92f42;
	outline-offset: 2px;
}

/* --- Story card badges ---
   Same three semantic states/colours the plugin's own dashboard already
   uses (see components.css .plura-status-*): Submitted/Under Review are
   neutral, Quote Ready is the same green as an accepted quote. */
.plura-hero-quote-card-badge {
	display: none;
}
.plura-hero-quote-card-badge.plura-badge-ready {
	display: inline-flex;
}
.plura-badge-submitted,
.plura-badge-review {
	background: var( --plura-review-bg );
	color: var( --plura-review-text );
}
.plura-badge-ready {
	background: var( --plura-success-bg );
	color: var( --plura-success );
}

.plura-hero.is-globe-ready [data-plura-story-card] .plura-badge-ready {
	display: none;
}
.plura-hero.is-globe-ready [data-plura-story-card] .plura-badge-submitted {
	display: inline-flex;
}
.plura-hero.is-status-review [data-plura-story-card] .plura-badge-submitted {
	display: none;
}
.plura-hero.is-status-review [data-plura-story-card] .plura-badge-review {
	display: inline-flex;
}
.plura-hero.is-quote-ready [data-plura-story-card] .plura-badge-review {
	display: none;
}
.plura-hero.is-quote-ready [data-plura-story-card] .plura-badge-ready {
	display: inline-flex;
	animation: plura-badge-pulse 0.5s ease;
}

/* --- Story card entrance ---
   Positioned as a floating overlay in the lower half of the stage so it
   never collides with the top-left notification toast or the two
   corner stat badges (top-right/bottom-left). */
.plura-hero-globe-stage .plura-hero-float-card {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8%;
	z-index: 2;
	width: min(320px, 84%);
	margin: 0 auto;
	/* left/right + auto-margin (not transform) centers this so it never
	   fights the plura-float keyframe animation's own transform:
	   translateY(), which is also set on this element (see home.css). */
}

[data-plura-story-card] {
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.plura-hero.is-globe-ready [data-plura-story-card] {
	opacity: 0;
	transform: translateY( 14px );
}
.plura-hero.is-card-in [data-plura-story-card] {
	opacity: 1;
	transform: translateY( 0 );
}

/* --- Quote-ready notification toast --- */
.plura-hero-notification {
	position: absolute;
	left: 16px;
	top: 16px;
	z-index: 3;
	display: none;
	align-items: center;
	gap: 10px;
	background: var(--plura-white);
	color: var(--plura-text);
	border-radius: 999px;
	padding: 10px 16px 10px 10px;
	box-shadow: var(--plura-shadow-lg);
	font-family: var(--plura-font-heading);
	font-weight: 700;
	font-size: 13px;
	white-space: nowrap;
	opacity: 0;
	transform: translateY( -10px );
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.plura-hero-notification-icon {
	display: inline-flex;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--plura-success-bg);
	color: var(--plura-success);
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.plura-hero-notification-icon svg {
	width: 15px;
	height: 15px;
}
.plura-hero.is-quote-ready .plura-hero-notification {
	display: flex;
	opacity: 1;
	transform: translateY( 0 );
}

@keyframes plura-badge-pulse {
	0% {
		transform: scale( 0.9 );
	}
	60% {
		transform: scale( 1.05 );
	}
	100% {
		transform: scale( 1 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.plura-hero-globe-canvas,
	.plura-hero-globe-fallback,
	[data-plura-story-card],
	.plura-hero-notification {
		transition: none !important;
		animation: none !important;
	}
}