/* ============================================================
   Thinkerbell Hero widget
   Logical properties throughout so the same rules work in
   dir="rtl" (Hebrew) and dir="ltr" (English).
   ============================================================ */

.tb-hero-w {
	--tb-accent: #5B2DC1;
	--tb-ink: #0B1020;
	--tb-muted: #5b6478;
	--tb-card-bg: rgba(255, 255, 255, 0.96);
	--tb-side-pad: clamp(20px, 4vw, 64px);
	--tb-radius: 24px;

	position: relative;
	overflow: hidden;
	/* Full-bleed: break out of any boxed/padded parent container so the white
	   base + aurora reach both viewport edges (kills the left-side white wedge). */
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	color: var(--tb-ink);
	background: #ffffff;
	font-family: 'Polin', sans-serif;
	/* clears a fixed/floating nav at every breakpoint */
	padding-block: clamp(110px, 14vh, 160px) clamp(48px, 8vh, 96px);
	padding-inline: var(--tb-side-pad);
	box-sizing: border-box;
}

/* ---------- Aurora animated background ---------- */
.tb-aurora {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
.tb-aurora__layer {
	/* Matches the live site's .aurora-bg::before exactly: full-bleed blurred
	   gradient, no mask (so it covers the whole hero, not just a corner). */
	position: absolute;
	inset: -10%;
	background-image:
		repeating-linear-gradient(100deg,
			rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 8%,
			transparent 10%, transparent 14%, rgba(255, 255, 255, 1) 18%),
		repeating-linear-gradient(100deg,
			rgba(91, 45, 193, 0.28) 10%, rgba(151, 128, 237, 0.32) 15%,
			rgba(196, 181, 253, 0.28) 20%, rgba(237, 232, 251, 0.22) 25%,
			rgba(91, 45, 193, 0.28) 30%);
	background-size: 250% 200%;
	background-position: 50% 50%;
	filter: blur(22px);
	opacity: 0.75;
	will-change: background-position;
	animation: tb-aurora 60s linear infinite;
}
@keyframes tb-aurora {
	0%   { background-position: 0% 50%; }
	100% { background-position: 200% 50%; }
}

/* ---------- Layout ---------- */
.tb-hero-w__inner {
	position: relative;
	z-index: 1;
	max-width: 1400px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	align-items: center;
	gap: clamp(24px, 5vw, 72px);
}

/* ---------- Text column ---------- */
.tb-hero-w__content { min-width: 0; }
.tb-hero-w__title {
	margin: 0;
	font-weight: 800;
	line-height: 1.05;
	font-size: clamp(2.25rem, 4.5vw, 4.25rem);
	letter-spacing: -0.01em;
}
.tb-hero-w__title--accent { color: var(--tb-accent); margin-block-start: 0.1em; }
.tb-hero-w__divider {
	display: block;
	width: 64px;
	height: 4px;
	border-radius: 4px;
	background: var(--tb-accent);
	margin-block: clamp(18px, 3vw, 28px);
}
.tb-hero-w__subtitle {
	margin: 0 0 clamp(24px, 4vw, 36px);
	font-size: clamp(1rem, 1.4vw, 1.25rem);
	line-height: 1.6;
	color: var(--tb-muted);
	max-width: 46ch;
}
.tb-hero-w__btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: var(--tb-accent);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 1.05rem;
	padding: 16px 30px;
	border-radius: 9999px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tb-hero-w__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(91, 45, 193, 0.28);
}
.tb-hero-w__btn-icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
}
.tb-hero-w__btn-icon svg { width: 100%; height: 100%; }
/* arrow points toward the reading direction's end */
[dir="rtl"] .tb-hero-w__btn-icon { transform: scaleX(-1); }

/* ---------- Visual composition ---------- */
.tb-hero-w__visual {
	position: relative;
	min-height: 460px;
}

/* Tilted card */
.tb-card {
	position: relative;
	z-index: 1;
	background: var(--tb-card-bg);
	border: 1px solid rgba(11, 16, 32, 0.06);
	border-radius: var(--tb-radius);
	padding: 28px;
	box-shadow: 0 30px 70px rgba(30, 16, 70, 0.16);
	transform: perspective(1200px) rotateY(-8deg) rotateX(3deg);
	transform-origin: center;
	backdrop-filter: blur(6px);
}
.tb-card__icon {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: rgba(91, 45, 193, 0.08);
	color: var(--tb-accent);
	margin-block-end: 18px;
}
.tb-card__icon svg { width: 24px; height: 24px; }
.tb-card__label {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--tb-muted);
}

/* Count-up */
.tb-countup {
	display: flex;
	align-items: center;
	font-weight: 800;
	font-size: clamp(2.4rem, 4vw, 3.4rem);
	color: var(--tb-ink);
	margin-block: 6px 22px;
	line-height: 1;
}
.tb-countup__currency { margin-inline-end: 4px; }
.tb-countup__digits { display: inline-flex; align-items: center; }
.tb-countup .digit { height: 1em; overflow: hidden; display: inline-block; }
.tb-countup .digit-inner { display: flex; flex-direction: column; }
.tb-countup .digit-inner span { height: 1em; line-height: 1; display: block; }

/* Resolved feed (vertical marquee) */
.tb-feed {
	height: 240px; /* ~3 items, matches live .scroll-wrapper */
	overflow: hidden;
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
	        mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
.tb-feed__track { animation: tb-feed-scroll var(--tb-feed-speed, 20s) linear infinite; }
.tb-feed:hover .tb-feed__track { animation-play-state: paused; }
@keyframes tb-feed-scroll {
	from { transform: translateY(0); }
	to   { transform: translateY(-50%); }
}
.tb-feed__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 4px;
	border-block-end: 1px solid rgba(11, 16, 32, 0.06);
}
.tb-feed__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tb-feed__title { font-weight: 600; font-size: 0.95rem; }
.tb-feed__time { font-size: 0.78rem; color: var(--tb-muted); }
.tb-feed__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: end; }
.tb-feed__amount { font-weight: 700; }
.tb-feed__status { font-size: 0.78rem; color: #10B981; }

/* Floating alert (rotating) */
.tb-alert {
	position: absolute;
	inset-block-start: -28px;
	inset-inline-end: -24px;
	max-width: 260px;
	width: 100%;
	z-index: 3;
}
.tb-alert__item {
	position: absolute;
	inset: 0;
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 16px;
	padding: 20px;
	box-shadow: 0 20px 45px rgba(30, 16, 70, 0.20);
	opacity: 0;
	transform: translateY(8px) scale(0.98);
	transition: opacity 0.45s ease, transform 0.45s ease;
	pointer-events: none;
}
.tb-alert__item.is-active {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
	position: relative;
}
.tb-alert__icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #fff;
	background: #10B981;
	box-shadow: 0 10px 25px rgba(196, 181, 247, 0.5);
}
.tb-alert__item--critical .tb-alert__icon { background: var(--tb-accent); }
.tb-alert__icon svg { width: 20px; height: 20px; }
.tb-alert__icon--bell { animation: tb-bell 1.2s ease-in-out infinite; transform-origin: top center; }
@keyframes tb-bell {
	0%, 100% { transform: rotate(0); }
	10%, 30% { transform: rotate(-12deg); }
	20%, 40% { transform: rotate(12deg); }
	50%      { transform: rotate(0); }
}
.tb-alert__title { font-weight: 700; color: var(--tb-accent); margin-block-end: 2px; }
.tb-alert__item--resolved .tb-alert__title { color: #10B981; }
.tb-alert__desc { font-size: 0.9rem; color: var(--tb-muted); line-height: 1.4; }

/* Video card */
.tb-video {
	position: absolute;
	inset-block-end: -34px;
	inset-inline-start: -28px;
	width: min(230px, 60%);
	aspect-ratio: 16 / 10;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 20px 45px rgba(30, 16, 70, 0.22);
	z-index: 2;
	cursor: pointer;
	background: #000;
}
.tb-video--static { cursor: default; pointer-events: none; }
.tb-video__overlay { position: absolute; inset: 0; background-size: cover; background-position: center; }
.tb-video__play {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	width: 52px;
	height: 52px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--tb-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
}
[dir="rtl"] .tb-video__play { transform: translate(50%, -50%); }
.tb-video__play svg { width: 22px; height: 22px; margin-inline-start: 2px; }
.tb-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }

/* Scroll indicator */
.tb-scroll {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-block-start: clamp(28px, 5vh, 56px);
	color: var(--tb-muted);
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.tb-scroll__mouse {
	width: 22px;
	height: 36px;
	border: 2px solid currentColor;
	border-radius: 12px;
	display: inline-flex;
	justify-content: center;
	padding-block-start: 6px;
}
.tb-scroll__dot {
	width: 4px;
	height: 6px;
	border-radius: 4px;
	background: currentColor;
	animation: tb-scroll-dot 1.6s ease-in-out infinite;
}
@keyframes tb-scroll-dot {
	0% { opacity: 0; transform: translateY(0); }
	30% { opacity: 1; }
	100% { opacity: 0; transform: translateY(10px); }
}

/* ============================================================
   MOBILE — the whole point of the rebuild.
   One column, no tilt, overlays drop into normal flow.
   ============================================================ */
@media (max-width: 1024px) {
	.tb-hero-w__inner { grid-template-columns: 1fr; gap: 28px; }
	.tb-card { transform: none; }            /* drop the tilt on mobile */
	/* normal flow, no stacking contexts fighting each other */
	.tb-card, .tb-alert, .tb-video { z-index: auto; }

	/* Clean vertical stack: alert (top) → dashboard card. No overlap / piling.
	   The absolutely-positioned desktop overlays are forced back into flow. */
	.tb-hero-w__visual {
		min-height: 0;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	.tb-alert {
		position: static !important;
		inset: auto !important;
		order: -1;            /* alert card sits above the dashboard card */
		width: 100%;
		max-width: 100%;
		min-height: 0;
	}
	.tb-alert__item { box-shadow: 0 12px 30px rgba(30, 16, 70, 0.14); }

	/* Video keeps the SAME look/size as desktop (small 16:10 rounded card) —
	   only difference on mobile is it drops into normal flow at the bottom of
	   the stack instead of floating absolutely over the dashboard card. */
	.tb-video {
		/* relative (not static) so the absolutely-positioned .tb-video__overlay
		   is contained BY the video, not by .tb-hero-w__visual. With static the
		   overlay escaped and filled the whole visual, covering the card. */
		position: relative !important;
		inset: auto !important;
		order: 1;                 /* last = bottom of the stack */
		width: 100%;              /* match the dashboard card width */
		max-width: 100%;
		height: auto;
		aspect-ratio: 16 / 10;    /* same ratio as desktop */
		align-self: stretch;
		pointer-events: auto;
		cursor: pointer;
	}
	.tb-video--static { pointer-events: none; }

	/* feed + alert keep animating on mobile (Modest: "frozen on the same 3") */
	.tb-feed__track { animation-play-state: running; }
}

@media (max-width: 600px) {
	.tb-feed { height: 200px; }
	.tb-scroll__mouse { display: none; }
}

/* Respect reduce-motion: keep content, drop the loops */
@media (prefers-reduced-motion: reduce) {
	.tb-aurora__layer::after,
	.tb-feed__track,
	.tb-alert__icon--bell,
	.tb-scroll__dot { animation: none !important; }
	.tb-alert__item { transition: none; }
}