/* ==========================================================================
   Migala home hero — marketing headline + CTA floating over a full-bleed
   background wall of vendor proposal cards (four rows, scrolling very
   slowly in alternating directions). A left-to-right fade keeps the copy
   readable. Self-contained: its own copy of the brand tokens (source of
   truth: marketplace/assets/base.css) so the home page doesn't depend on
   the dashboard module's mgl-base.
   Animation: a one-time bubbly entrance on the copy, plus the marquee's
   continuous (but very slow, near-imperceptible) drift — everything else
   is static. Everything scoped under .mgl-hero.
   ========================================================================== */
.mgl-hero {
	--bg: #ffffff;
	--card: #ffffff;
	--border: #ebebeb;
	--border-strong: #dddddd;
	--text: #1a1a1a;
	--text-2: #4a4a52;
	--text-3: #717171;
	--accent: #ffea05;
	--dark: #222222;
	--radius-lg: 18px;
	--radius-md: 12px;
	--radius-full: 9999px;
	--pending-bg: #fdf3dd; --pending-tx: #a5680a;
	--viewed-bg: #eaf1ff; --viewed-tx: #2f5fd6;
	--accepted-bg: #e8f5ec; --accepted-tx: #1f7a34;
	position: relative;
	overflow: hidden;
	color: var(--text);
	background: var(--bg);
	font-family: inherit;
	-webkit-font-smoothing: antialiased;
	min-height: 640px;
}
.mgl-hero *, .mgl-hero *::before, .mgl-hero *::after { box-sizing: border-box; }

/* ---- full-bleed card wall ----
   .mgl-marquee-stage is the clipping viewport: position:absolute filling
   the entire hero on desktop, a fixed-height band in normal document flow
   on mobile (see the mobile breakpoint below) — everything inside it
   (the rotated/scaled card grid, the edge-blur overlays) works unchanged
   at both sizes since it's all positioned relative to the stage, not the
   hero directly.
   .mgl-marquee-bg is scaled up + rotated as one unit so the rotation
   never leaves a gap at the stage's corners; each row is its own flex
   track scrolling via translateX, content duplicated back-to-back per
   row so the loop point is invisible (see @keyframes below — 50% is
   exactly one copy's width). */
.mgl-marquee-stage {
	position: absolute; inset: 0; overflow: hidden; z-index: 0;
}
.mgl-marquee-bg {
	position: absolute; inset: -10% -6%;
	display: flex; flex-direction: column; justify-content: center; gap: 18px;
	transform: rotate(-5deg) scale(1.2);
}
.marquee-row { display: flex; gap: 18px; width: max-content; will-change: transform; }
.marquee-row.dir-left { animation: mglh-scroll-left var(--mgl-marquee-duration, 180s) linear infinite; }
.marquee-row.dir-right { animation: mglh-scroll-right var(--mgl-marquee-duration-alt, 200s) linear infinite; }
@keyframes mglh-scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mglh-scroll-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* soften the hard crop at the stage's own edges — a plain color fade
   (matching .mgl-hero-fade's technique, not a blur) reads as intentional
   framing rather than cards just being cut off. */
.mgl-marquee-edge-fade { position: absolute; pointer-events: none; z-index: 1; }
.mgl-marquee-edge-fade--r {
	top: 0; right: 0; bottom: 0; width: 16%;
	background: linear-gradient(to right, rgba(247,248,250,0), var(--bg));
}
.mgl-marquee-edge-fade--b {
	left: 0; right: 0; bottom: 0; height: 20%;
	background: linear-gradient(to bottom, rgba(247,248,250,0), var(--bg));
}

.tile-card {
	width: 210px; flex: none; border-radius: var(--radius-lg); background: var(--card);
	box-shadow: 0 10px 26px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
	padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.tile-top { display: flex; align-items: flex-start; justify-content: space-between; }
.tile-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11.5px; flex: none; }
.tile-badge { border-radius: var(--radius-full); padding: 3px 9px; font-size: 9.5px; font-weight: 700; white-space: nowrap; }
.tile-badge--viewed { background: var(--viewed-bg); color: var(--viewed-tx); }
.tile-badge--accepted { background: var(--accepted-bg); color: var(--accepted-tx); }
.tile-badge--pending { background: var(--pending-bg); color: var(--pending-tx); }
.tile-eyebrow { font-size: 9.5px; color: var(--text-3); }
.tile-name { font-size: 14px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.tile-stat-label { font-size: 8.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.tile-stat-value { font-size: 12.5px; font-weight: 700; margin-top: 1px; }

/* ---- readability fade ----
   Solid near the copy, fully transparent by the time the wall is in full
   view further right. */
.mgl-hero-fade {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(to right, var(--bg) 0%, var(--bg) 34%, rgba(247,248,250,0.75) 50%, rgba(247,248,250,0) 68%);
}

/* ---- copy, floating above the wall + fade ---- */
.mgl-hero-inner {
	position: relative; z-index: 2;
	height: 100%; min-height: 640px;
	display: flex; align-items: center;
	/* Elementor-controlled via CSS variables set inline on .mgl-hero (see
	   the widget's "Layout" controls) — falls back to the original
	   defaults when unset. Left as vars rather than direct properties so
	   the mobile breakpoint below can still hard-override them without a
	   specificity fight (a media-query rule always wins over the base
	   rule regardless of what the variable resolves to). */
	max-width: var(--mgl-hero-max-width, 1240px); margin: var(--mgl-hero-margin-y, 0px) auto;
	padding: var(--mgl-hero-padding-y, 72px) var(--mgl-hero-padding-x, 48px);
}

.mgl-hero-copy { max-width: 520px; }
.mgl-hero-eyebrow {
	display: inline-flex; align-items: center; gap: 7px;
	background: #fff; border: 1px solid var(--border);
	border-radius: var(--radius-full); padding: 6px 14px 6px 10px;
	font-size: 13px; font-weight: 600; color: var(--text-2);
	margin-bottom: 22px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
	animation: mglh-pop .6s ease-out both;
}
.mgl-hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: #1f7a34; box-shadow: 0 0 0 3px rgba(31,122,52,.15); animation: mglh-ping 2.4s ease-in-out infinite; }
.mgl-hero h1 {
	font-size: clamp(2.5rem, 4.6vw, 3.5rem); font-weight: 800;
	line-height: 1.04; letter-spacing: -0.025em; margin: 0 0 20px; color: var(--text);
	animation: mglh-pop .7s ease-out both; animation-delay: .08s;
}
/* the highlight box sweeps in with a little overshoot (see mglh-sweep)
   at the same moment each LETTER of the phrase (see .mgl-hero-hl-ch,
   individually wrapped by bounce_chars_html() in the widget) starts
   hopping up in its own staggered beat — both kick off together (see
   that method's base delay, matched to ::after's below) rather than the
   bounce waiting for the sweep to finish, so the bounce reads as a wave
   passing through the phrase rather than the whole phrase moving as one
   rigid block. */
.mgl-hero-hl { position: relative; white-space: nowrap; }
.mgl-hero-hl-ch { display: inline-block; animation: mglh-bounce .5s ease-out both; }
.mgl-hero-hl::after {
	content: ""; position: absolute; left: -2px; right: -2px; bottom: 6px; height: 34%;
	background: var(--accent); z-index: -1; border-radius: 3px;
	transform: scaleX(0); transform-origin: left; animation: mglh-sweep .6s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: .9s;
}
.mgl-hero-sub {
	font-size: 1.12rem; line-height: 1.6; color: var(--text-2);
	margin: 0 0 30px; max-width: 30ch;
	animation: mglh-pop .7s ease-out both; animation-delay: .16s;
}
.mgl-hero-cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; animation: mglh-pop .7s ease-out both; animation-delay: .24s; }
.mgl-hero-cta {
	display: inline-flex; align-items: center; gap: 10px;
	background: var(--accent); color: var(--text);
	border: none; border-radius: var(--radius-full);
	padding: 15px 26px; font-size: 1rem; font-weight: 700; cursor: pointer;
	text-decoration: none;
	/* a neutral, soft elevation shadow (not a colored glow) — the same
	   dark-and-diffuse pairing used for Airbnb-style button/card lift */
	box-shadow: 0 6px 20px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08);
	transition: transform .18s ease, box-shadow .18s ease;
}
.mgl-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.16), 0 3px 8px rgba(0,0,0,.1); color: var(--text); }
.mgl-hero-cta svg { transition: transform .3s ease; }
.mgl-hero-cta:hover svg { transform: rotate(-12deg) scale(1.1); }
.mgl-hero-micro { font-size: .92rem; color: var(--text-3); margin-top: 18px; animation: mglh-pop .7s ease-out both; animation-delay: .32s; }

/* ---- keyframes ---- */
/* the entrance: a small overshoot-and-settle "pop" (scale + a light lift)
   reads as a happy, bubbly arrival without being cartoonish — it's a
   one-shot animation (no infinite iteration), so everything comes to
   rest once the page has loaded. */
@keyframes mglh-pop {
	0% { opacity: 0; transform: translateY(20px) scale(.94); }
	55% { opacity: 1; transform: translateY(-3px) scale(1.018); }
	80% { transform: translateY(1px) scale(.997); }
	100% { transform: translateY(0) scale(1); }
}
/* sweeps past full width slightly before settling back — a small bounce
   rather than a flat wipe */
@keyframes mglh-sweep {
	0% { transform: scaleX(0); }
	70% { transform: scaleX(1.06); }
	85% { transform: scaleX(.98); }
	100% { transform: scaleX(1); }
}
/* a little double-hop — up, settle, a smaller second hop, then rest —
   applied per-letter with a staggered delay (see .mgl-hero-hl-ch) so it
   plays as a bounce traveling across the phrase */
@keyframes mglh-bounce {
	0% { transform: translateY(0); }
	30% { transform: translateY(-10px); }
	55% { transform: translateY(0); }
	75% { transform: translateY(-4px); }
	100% { transform: translateY(0); }
}
@keyframes mglh-ping { 0%,100% { box-shadow: 0 0 0 3px rgba(31,122,52,.15); } 50% { box-shadow: 0 0 0 5px rgba(31,122,52,.05); } }

/* ---- animation off (Elementor toggle) + reduced motion ----
   The marquee freezes in place rather than disappearing — a static wall
   of cards is still the intended background, just without the drift. */
.mgl-hero--no-anim .marquee-row,
.mgl-hero--no-anim .mgl-hero-eyebrow .dot { animation-play-state: paused !important; }
.mgl-hero--no-anim .mgl-hero-eyebrow,
.mgl-hero--no-anim h1,
.mgl-hero--no-anim .mgl-hero-sub,
.mgl-hero--no-anim .mgl-hero-cta-row,
.mgl-hero--no-anim .mgl-hero-micro,
.mgl-hero--no-anim .mgl-hero-mobile-logo,
.mgl-hero--no-anim .mgl-hero-hl-ch { opacity: 1 !important; transform: none !important; animation: none !important; }
.mgl-hero--no-anim .mgl-hero-hl::after { transform: scaleX(1) !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
	.mgl-hero .marquee-row, .mgl-hero-eyebrow .dot { animation-play-state: paused !important; }
	.mgl-hero-eyebrow, .mgl-hero h1, .mgl-hero-sub, .mgl-hero-cta-row, .mgl-hero-micro, .mgl-hero-mobile-logo, .mgl-hero-hl-ch { opacity: 1 !important; transform: none !important; animation: none !important; }
	.mgl-hero-hl::after { transform: scaleX(1) !important; animation: none !important; }
}

/* ---- mobile-only logo ----
   Hidden by default; shown only in the sub-1025 layout below, since
   that's the one breakpoint band with no site header of its own. Height
   is Elementor-controlled via --mgl-mobile-logo-height, set inline on
   this element (see the widget's "Mobile logo" controls). */
.mgl-hero-mobile-logo { display: none; }

/* ---- responsive ----
   A single breakpoint covering both tablet and mobile. The wall stays
   visible (not hidden) but changes role: instead of a full-bleed
   background the copy floats over, it becomes its own contained band in
   normal document flow near the top — full-bleed-behind-text has nowhere
   to breathe at these widths, but a dedicated strip of scrolling cards
   still reads fine. .mgl-hero becomes a flex column; the `order` values
   below happen to match the existing DOM order (wall, then logo, then
   copy) but are kept explicit since that order is load-bearing for the
   desktop stacking too (the wall must render behind the copy there,
   which relies on it coming first in the markup). */
@media (max-width: 1024px) {
	.mgl-hero { min-height: 0; display: flex; flex-direction: column; }
	.mgl-hero-inner { order: 3; position: static; min-height: 0; padding: 8px 20px 40px; display: block; }

	/* fully centered copy block — text runs (via text-align) and the
	   block itself (via margin:auto, since .mgl-hero-copy's own max-width
	   would otherwise sit flush left in .mgl-hero-inner) */
	.mgl-hero-copy { text-align: center; margin: 0 auto; }
	.mgl-hero h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
	.mgl-hero-sub { font-size: 1rem; margin-left: auto; margin-right: auto; }
	.mgl-hero-cta-row { justify-content: center; }
	.mgl-hero-cta { width: auto; }

	/* eyebrow pill only needs its own centering since it's inline-flex,
	   not a block that text-align on the parent would center by itself.
	   display:flex (block-level) + auto margins center it as a block. */
	.mgl-hero-eyebrow { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }

	.mgl-hero-mobile-logo {
		order: 2; display: flex; justify-content: center;
		position: relative; z-index: 2;
		/* pulls it up to overlap the wall band's bottom edge sitting
		   directly above (order:1) */
		margin-top: -22px; margin-bottom: 20px;
		animation: mglh-pop .6s ease-out both;
	}
	.mgl-hero-mobile-logo img { height: var(--mgl-mobile-logo-height, 32px); width: auto; display: block; }

	/* the wall's own band: fixed height, normal flow, at the very top.
	   Only the bottom fades out here (not the right edge, unlike desktop)
	   — the band is short enough that a bottom fade alone frames it
	   cleanly, and fading the right edge too on an already-narrow band
	   just made the cards feel more cropped, not less. */
	.mgl-hero-fade { display: none; }
	.mgl-marquee-stage { order: 1; position: relative; inset: auto; height: 210px; }
	.mgl-marquee-edge-fade--r { display: none; }

	/* the cards were rendering zoomed in — the desktop scale(1.2) was
	   tuned to compensate for bleed on a ~650px-tall stage, which on this
	   ~210px band just crops each card down to a sliver. Scaling the
	   whole grid down (rather than only shrinking the cards) keeps them
	   fully visible — avatar, name, category, and price all readable —
	   instead of a close-up crop of one or two. */
	.mgl-marquee-bg { transform: rotate(-5deg) scale(.62); }
	.marquee-row { gap: 12px; }
	.tile-card { width: 176px; padding: 12px; gap: 8px; }
	.tile-avatar { width: 28px; height: 28px; font-size: 10px; }
	.tile-badge { padding: 2px 7px; font-size: 8.5px; }
	.tile-eyebrow { font-size: 8.5px; }
	.tile-name { font-size: 12.5px; }
	.tile-stat-label { font-size: 7.5px; }
	.tile-stat-value { font-size: 11px; }
}