/*
 * Styles for the public marketing welcome page only: the extra keyframes the
 * hero and ticker use, the scroll-reveal helpers and the hover states the
 * inline layout cannot express. Everything animated is switched off under a
 * reduced-motion preference at the bottom of the file.
 */

@keyframes tjHeroFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-9px); }
}

@keyframes tjTrace {
	to { stroke-dashoffset: -56; }
}

@keyframes tjCtaPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(224, 84, 38, .35); }
	70% { box-shadow: 0 0 0 16px rgba(224, 84, 38, 0); }
}

.tj-wl-float { animation: tjHeroFloat 7s ease-in-out infinite; }
.tj-wl-trace { animation: tjTrace 1.1s linear infinite; }
.tj-wl-cta { animation: tjCtaPulse 2.6s ease-out infinite; }
/* The strip is scrolled by welcome.js, which recycles each item to the
   end as it leaves, so it loops at any width. will-change keeps the wide
   row on its own compositor layer. */
.tj-wl-ticker { will-change: transform; }

/* The full-bleed hero: the illustrated match moments span the entire
   window and crossfade behind the message, which rests on a scrim that
   blends the artwork into the page background on the text side and along
   the bottom edge. */
/* No overflow clip here: the artwork contains itself through its own
   clip-path, and the floating court must overhang the hero's bottom edge
   without getting sliced flat. */
.tj-wl-heroart {
	position: relative;
	margin-inline: calc(50% - 50vw);
	display: flex;
	align-items: center;
	min-height: clamp(500px, 58vh, 680px);
}

/* The artwork carries the diagonal cut — top edge dropping away to the
   left, bottom edge lifting away to the right — and fades itself out
   toward the text side through a mask. Fading the art's own alpha rather
   than painting a background-coloured scrim over it keeps the cut edge
   invisible where the art has died out, in either theme. */
.tj-wl-heroart-media {
	position: absolute;
	inset: 0;
	clip-path: polygon(0 8%, 100% 0, 100% 84%, 0 100%);
	-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 3%,
		rgba(0, 0, 0, .18) 32%, rgba(0, 0, 0, 1) 58%);
	mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 3%,
		rgba(0, 0, 0, .18) 32%, rgba(0, 0, 0, 1) 58%);
}

.tj-wl-heroart-img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 22%;
	opacity: 0;
	transition: opacity 1.8s ease;
}

.tj-wl-heroart-img.tj-on {
	opacity: 1;
}

/* While a slide is on stage it glides gently to the southwest and leans in;
   the overscale keeps its edges outside the frame for the whole journey.
   The drift class survives the fade-out — the script only resets it while
   the layer is hidden — so an outgoing slide never snaps back mid-fade. */
.tj-wl-heroart-img.tj-drift {
	animation: tjHeroDrift 11s linear both;
}

@keyframes tjHeroDrift {
	from { transform: scale(1.06) translate(1.3%, -1.3%); }
	to { transform: scale(1.13) translate(-1.3%, 1.3%); }
}

:root[data-theme='dark'] .tj-wl-heroart-img {
	filter: brightness(.85) saturate(1.05);
}


.tj-wl-heroart-content {
	position: relative;
	width: min(1080px, 100% - 48px);
	margin-inline: auto;
	padding: 44px 0;
}

@media (max-width: 860px) {
	.tj-wl-heroart-media {
		-webkit-mask-image: linear-gradient(rgba(0, 0, 0, .28), rgba(0, 0, 0, .28));
		mask-image: linear-gradient(rgba(0, 0, 0, .28), rgba(0, 0, 0, .28));
	}
}

/* A background-coloured halo lifts the hero copy off the artwork in
   either theme. */
.tj-wl-heroart-content .tj-wl-h1 {
	text-shadow: 0 2px 6px var(--bg), 0 0 26px var(--bg), 0 0 44px var(--bg);
}

.tj-wl-heroart-content p {
	/* Full ink instead of the muted gray: the artwork behind asks for more
	   contrast than a plain page would. */
	color: var(--ink);
	text-shadow: 0 1px 3px var(--bg), 0 0 16px var(--bg), 0 0 28px var(--bg);
}

/* Full-bleed marquee band: break out of the centered, padded page column
   so the ticker spans the whole browser window edge to edge. */
.tj-wl-band {
	margin: 26px 0 0;
	margin-inline: calc(50% - 50vw);
	padding: 13px 0;
	background: var(--surface);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	overflow: hidden;
}

/* welcome.css only loads on this page, whose template has no sticky
   sidebar, so clipping the horizontal overflow the full-bleed band and
   the decorative hero circles introduce is safe here. */
.tj-shell { overflow-x: hidden; }

.tj-wl-signin {
	color: var(--muted);
	font-weight: 600;
	transition: color .2s;
}

.tj-wl-signin:hover { color: var(--accent); }

.tj-wl-feature {
	transition: transform .2s, box-shadow .2s;
}

.tj-wl-feature:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow);
}

.tj-wl-shot { transition: transform .25s; }
.tj-wl-shot:hover { transform: rotate(0deg) translateY(-6px) scale(1.04) !important; }

/* The dark theme flips the "why" band to a light panel, where the lime
   eyebrow washes out; the light theme's olive ink keeps it readable. */
:root[data-theme='dark'] .tj-wl-why-eyebrow {
	color: #5c6d0d !important;
}

.tj-wl-primary { transition: transform .15s; }
.tj-wl-primary:hover { transform: translateY(-2px); }

.tj-wl-ghost { transition: border-color .2s; }
.tj-wl-ghost:hover { border-color: var(--accent); }

/* ---- Scroll reveal ---- */

.tj-reveal {
	opacity: 0;
	transform: translateY(38px);
	transition: opacity .75s ease, transform .75s cubic-bezier(.2, .7, .2, 1);
}

.tj-reveal.tj-in {
	opacity: 1;
	transform: none;
}

/* ---- Responsive collapse ---- */

@media (max-width: 860px) {
	.tj-wl-hero { grid-template-columns: 1fr !important; }
	.tj-wl-why { grid-template-columns: 1fr !important; }
	.tj-wl-h1 { font-size: 56px !important; }
}

@media (prefers-reduced-motion: reduce) {
	.tj-wl-float, .tj-wl-trace, .tj-wl-cta {
		animation: none !important;
	}

	/* The hero artwork stops crossfading and drifting; welcome.js keeps
	   one image put. */
	.tj-wl-heroart-img {
		transition: none !important;
		animation: none !important;
	}

	.tj-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}