/* MJRTS Premium Motion Layer — added 2026-09-04, staging only.
   Reveal-on-scroll, refined hover/interaction states, sticky-header polish.
   Applies broadly to Elementor's own markup — no per-page edits needed. */

:root {
	--mjrts-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--mjrts-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
	--mjrts-gold: #C9A227;
	--mjrts-green: #0F3D22;
}

@media (prefers-reduced-motion: reduce) {
	.mjrts-reveal, .mjrts-reveal * { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; }
	.mjrts-card, .mjrts-float { transition: none !important; animation: none !important; transform: none !important; }
	body { animation: none !important; }
}

/* ---- Reveal on scroll ---- */
.mjrts-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.8s var(--mjrts-ease), transform 0.8s var(--mjrts-ease);
	will-change: opacity, transform;
}
.mjrts-reveal.mjrts-in-view {
	opacity: 1;
	transform: translateY(0);
}

/* ---- Buttons: lift + glow on hover, magnetic pointer-follow ---- */
.elementor-button,
.elementor-widget-button .elementor-button,
a.elementor-button-link {
	transition: transform 0.35s var(--mjrts-ease), box-shadow 0.35s var(--mjrts-ease), filter 0.35s var(--mjrts-ease) !important;
	position: relative;
}
.elementor-button:hover,
.elementor-widget-button .elementor-button:hover,
a.elementor-button-link:hover {
	box-shadow: 0 14px 34px -12px rgba(201, 162, 39, 0.45);
	filter: brightness(1.06);
}
.elementor-button:active {
	transition-duration: 0.12s !important;
}

/* ---- Cards / icon boxes / images: lift on hover ---- */
.elementor-widget-icon-box,
.elementor-widget-image-box,
.elementor-widget-call-to-action,
.elementor-icon-box-wrapper {
	transition: transform 0.45s var(--mjrts-ease), box-shadow 0.45s var(--mjrts-ease);
}
.elementor-widget-icon-box:hover,
.elementor-widget-image-box:hover,
.elementor-icon-box-wrapper:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 48px -18px rgba(15, 61, 34, 0.35);
}

.elementor-widget-image img,
.elementor-widget-image-box img {
	transition: transform 0.6s var(--mjrts-ease-soft);
}
.elementor-widget-image:hover img,
.elementor-widget-image-box:hover img {
	transform: scale(1.035);
}

/* ---- Icon accents: subtle continuous presence ----
   Overrides Elementor's per-widget flat solid-color icon fill (set via each
   widget's primary_color setting) with a dark glass-and-gold treatment —
   flat black/forest-green/gold circles read as literal flag colors rather
   than a premium brand mark; a dark radial fill with a thin gold rim reads
   as restrained accent instead. !important is required to beat Elementor's
   own generated per-widget CSS regardless of stylesheet load order. */
.elementor-icon.elementor-icon,
.elementor-icon-box-wrapper .elementor-icon {
	background: radial-gradient(circle at 32% 28%, rgba(15, 61, 34, 0.85), rgba(2, 6, 23, 0.95) 72%) !important;
	border: 1px solid rgba(201, 162, 39, 0.4) !important;
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0,0,0,0.2) inset !important;
	color: var(--mjrts-gold) !important;
}
/* Icon-list bullets (inline checkmarks under headings) are left untouched —
   small, already deep forest green post-color-fix, and green-for-checkmark
   is a useful convention worth keeping rather than forcing gold everywhere. */
.elementor-icon {
	transition: transform 0.35s var(--mjrts-ease), color 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.elementor-widget-icon-box:hover .elementor-icon,
.elementor-icon-box-wrapper:hover .elementor-icon {
	border-color: rgba(201, 162, 39, 0.7) !important;
	box-shadow: 0 14px 32px -12px rgba(201, 162, 39, 0.35), 0 0 0 1px rgba(0,0,0,0.2) inset !important;
	transform: scale(1.12) rotate(-4deg);
}

/* ---- Links: animated underline ---- */
.elementor-widget-text-editor a:not(.elementor-button):not(.elementor-button-link) {
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 1px;
	transition: background-size 0.4s var(--mjrts-ease);
}
.elementor-widget-text-editor a:not(.elementor-button):not(.elementor-button-link):hover {
	background-size: 100% 1px;
}

/* ---- Sticky header polish ---- */
header.elementor-location-header,
.site-header {
	transition: box-shadow 0.4s ease, backdrop-filter 0.4s ease, background-color 0.4s ease;
}
body.mjrts-scrolled header.elementor-location-header,
body.mjrts-scrolled .site-header {
	box-shadow: 0 8px 30px -12px rgba(0, 0, 0, 0.25);
	backdrop-filter: saturate(160%) blur(10px);
}

/* ---- Scroll progress bar ---- */
#mjrts-scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0%;
	background: linear-gradient(90deg, #0F3D22, #C9A227);
	z-index: 100000;
	transition: width 0.1s linear;
}

/* ---- Number counters ---- */
.mjrts-counted { font-variant-numeric: tabular-nums; }


/* =========================================================================
   PREMIUM FOREGROUND LAYER — added 2026-09-04 round 2.
   Cards that "float", respond to the cursor, and feel alive. Auto-tagged
   at runtime by motion.js (targets Elementor's dark feature-box containers
   wherever they appear — home, services, industries — not one page only).
   ========================================================================= */

/* ---- Floating glass cards (auto-detected dark feature boxes) ---- */
.mjrts-card {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(201, 162, 39, 0.18);
	border-radius: 14px;
	background:
		radial-gradient(600px circle at var(--mjrts-mx, 50%) var(--mjrts-my, 0%), rgba(201, 162, 39, 0.14), transparent 55%),
		linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 40%),
		rgb(2, 6, 23);
	box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255,255,255,0.04) inset;
	transition: transform 0.5s var(--mjrts-ease), box-shadow 0.5s var(--mjrts-ease), border-color 0.5s ease;
	transform-style: preserve-3d;
	will-change: transform;
}
.mjrts-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	box-shadow: 0 0 0 1px rgba(201, 162, 39, 0) inset;
	transition: box-shadow 0.5s ease;
}
.mjrts-card.mjrts-card-hover {
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.65), 0 0 40px -10px rgba(201, 162, 39, 0.25);
	border-color: rgba(201, 162, 39, 0.4);
	z-index: 2;
}
.mjrts-card.mjrts-card-hover::after {
	box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.3) inset;
}
.mjrts-card * { transform: translateZ(20px); }

/* Touch/no-fine-pointer devices: flat elevated presentation, no 3D tilt or
   cursor-spotlight (motion.js never attaches the listeners that drive this,
   but the card should still look intentional at rest). */
@media (hover: none), (pointer: coarse) {
	.mjrts-card {
		background:
			linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 40%),
			rgb(2, 6, 23);
	}
	.mjrts-card * { transform: none; }
}

/* ---- Idle float: small continuous life on hero/icon graphics ---- */
@keyframes mjrts-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-9px); }
}
.mjrts-float {
	animation: mjrts-float 5s var(--mjrts-ease-soft) infinite;
}
.mjrts-float:nth-of-type(2n) { animation-delay: -1.6s; }
.mjrts-float:nth-of-type(3n) { animation-delay: -3.1s; }

/* ---- Expertise / platform badge strip ---- */
.mjrts-badge-strip {
	position: relative;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 14px;
	max-width: 1100px;
	margin: 0 auto 36px;
	padding: 0;
}
.mjrts-badge-strip-label {
	width: 100%;
	text-align: center;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.55);
	margin-bottom: 6px;
}
.mjrts-badge {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
	border: 1px solid rgba(201, 162, 39, 0.22);
	backdrop-filter: blur(10px) saturate(140%);
	color: #f2ede0;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	box-shadow: 0 10px 24px -14px rgba(0,0,0,0.5);
	transition: transform 0.4s var(--mjrts-ease), box-shadow 0.4s var(--mjrts-ease), border-color 0.4s ease, background 0.4s ease;
}
.mjrts-badge svg { width: 20px; height: 20px; flex: none; }
.mjrts-badge:hover {
	transform: translateY(-5px) scale(1.03);
	border-color: rgba(201, 162, 39, 0.55);
	box-shadow: 0 18px 34px -14px rgba(201, 162, 39, 0.35);
	background: linear-gradient(180deg, rgba(201,162,39,0.14), rgba(255,255,255,0.02));
}

@media (max-width: 767px) {
	.mjrts-badge-strip { margin-top: -28px; gap: 10px; }
	.mjrts-badge { padding: 10px 14px; font-size: 13px; }
}

/* ---- Monogram avatar (replaces broken/placeholder headshot images) ---- */
.mjrts-monogram {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 25%, rgba(201,162,39,0.35), rgba(15,61,34,0.9) 70%);
	border: 1px solid rgba(201, 162, 39, 0.5);
	color: var(--mjrts-gold);
	font-weight: 600;
	letter-spacing: 0.05em;
	box-shadow: 0 0 0 6px rgba(201,162,39,0.06), 0 20px 40px -16px rgba(0,0,0,0.6);
}

/* ---- Live-feeling status dot for stat/counter areas ---- */
.mjrts-pulse-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mjrts-gold);
	box-shadow: 0 0 0 rgba(201, 162, 39, 0.6);
	animation: mjrts-pulse-ring 2.2s ease-out infinite;
	margin-right: 8px;
	vertical-align: middle;
}
@keyframes mjrts-pulse-ring {
	0% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.55); }
	70% { box-shadow: 0 0 0 10px rgba(201, 162, 39, 0); }
	100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0); }
}


/* =========================================================================
   PHASE 1 EXTENSIONS — added 2026-09-06.
   Touch parity, section pacing (dividers), a stat-band template, native
   Animated Headline hookup, and a fail-safe CSS-only page-load fade.
   Guiding constraint: clean over crowded — these are spacing/pacing tools,
   not more simultaneous motion. See Phase 1 items 1,3,4,5,6,7 in the plan.
   ========================================================================= */

/* ---- 1/3. Dense-card tilt modifier (JS reads this to use a shallower
   rotation for cards that wrap a heading + real paragraph, not just an
   icon+label) ---- */
.mjrts-card--content-dense { /* marker class only; degree read by motion.js */ }

/* ---- 4. Section divider: a deliberate pause between sections, supporting
   "give it its own section" instead of stacking content ---- */
.mjrts-divider {
	position: relative;
	height: 1px;
	margin: 0 auto;
	max-width: 640px;
	width: 60%;
	background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.5), transparent);
}
.mjrts-divider::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--mjrts-gold);
	transform: translate(-50%, -50%);
	box-shadow: 0 0 12px 2px rgba(201, 162, 39, 0.5);
}
.elementor-top-section > .mjrts-divider,
.e-con.e-parent > .mjrts-divider {
	margin-top: 48px;
	margin-bottom: 48px;
}

/* ---- 5. Stat / proof band (Home-only per plan — do not repeat sitewide) ---- */
.mjrts-stat-band {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 32px;
	padding: 64px 24px;
	text-align: center;
}
.mjrts-stat-tile .elementor-counter-number,
.mjrts-stat-tile .mjrts-stat-number {
	font-family: var(--e-global-typography-headings-font-family, "Sora"), sans-serif;
	font-weight: 700;
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	color: var(--mjrts-gold);
	line-height: 1;
}
.mjrts-stat-tile .elementor-counter-title,
.mjrts-stat-tile .mjrts-stat-label {
	margin-top: 10px;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.6);
}

/* ---- 6. Page-load fade — pure CSS keyframe, no JS dependency, so it can
   never leave the page invisible if a script fails to run. `both` fill-mode
   locks the final opacity:1 state permanently once the animation ends. ---- */
@keyframes mjrts-page-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}
body:not(.wp-admin) {
	animation: mjrts-page-fade 0.5s ease both;
}

/* ---- 7. Native Elementor Pro Animated Headline hookup, so the Pro widget
   visually matches the hand-built system's accent color ---- */
.elementor-headline-dynamic-text,
.elementor-headline-dynamic-text-wrapper {
	color: var(--mjrts-gold);
}

/* =========================================================================
   CHAT WIDGET AVATAR OVERRIDE — added 2026-09-06.
   The chat launcher (chat.mjrts.com) is a separate backend service, not
   part of this WordPress build — its source CSS/JS isn't reachable from
   here. This overrides just its launcher avatar: the widget assigns a
   random assistant name/initial per visit (confirmed: different letters
   across reloads), rendered as a plain letter-in-a-circle — the generic
   default-avatar pattern most budget chat tools use, and inconsistent
   with a single stable brand identity. Swapped for the real MJRTS logo
   instead, which reads as branded regardless of which name/letter the
   widget's own JS assigns underneath. !important guards against load-
   order uncertainty against the widget's own external stylesheet. ---- */
#mjrts-launcher-avatar,
.mjrts-avatar {
	color: transparent !important;
	font-size: 0 !important;
	background-image: url("https://mjrts.com/wp-content/uploads/2026/09/mjrts-chat-glyph.png") !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}