/*
 * TOPOSEL Home – base styles.
 * Loaded ONLY on the approved test page. Every rule is scoped under .tsl-home
 * (or the tsl-template-home body class, which exists only on that page), so
 * nothing here can affect other pages or theme elements.
 *
 * Colour and size values are ESTIMATES from screenshots (Phase 1, section C)
 * and will be replaced once the brand values are confirmed. The font is Figtree,
 * bundled in assets/fonts/ and loaded by assets/css/figtree.css.
 */

body.tsl-template-home {
	margin: 0;
}

.tsl-home {
	--tsl-color-primary: #4f2fd9;
	--tsl-color-primary-soft: #5b4be0;
	--tsl-color-heading: #0b0b12;
	--tsl-color-text: #4b5563;
	--tsl-color-bg: #f1f1fa;
	--tsl-color-surface: #fff;
	--tsl-shadow-panel: 0 8px 28px rgba(17, 17, 40, 0.1);
	--tsl-header-h: 96px; /* The hero's background runs up behind the header. */
	--tsl-container: 1140px;
	--tsl-gutter: 16px;
	--tsl-font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Page background: lavender on the left fading to a hint of mint on the right (estimate). */
	background: linear-gradient(90deg, #f1effa 0%, #eef4f6 100%);
	color: var(--tsl-color-text);
	font-family: var(--tsl-font);
	line-height: 1.6;
	min-height: 100vh;
	overflow-x: clip; /* Prevents the horizontal overflow seen on the original mobile page. */
}

.tsl-home :is(input, button, select, textarea, optgroup) {
	font-family: inherit; /* Form controls do not inherit the font by default. */
}

@media (max-width: 1024px) {
	.tsl-home {
		--tsl-header-h: 88px;
	}
}

.tsl-home *,
.tsl-home *::before,
.tsl-home *::after {
	box-sizing: border-box;
}

.tsl-home .tsl-container {
	max-width: calc(var(--tsl-container) + 2 * var(--tsl-gutter));
	margin: 0 auto;
	padding: 0 var(--tsl-gutter);
}

/* Visible keyboard focus for every interactive element on the page. */
.tsl-home a:focus-visible,
.tsl-home button:focus-visible {
	outline: 2px solid var(--tsl-color-primary);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Text for screen readers only. */
.tsl-home .tsl-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* "Skip to content" link: hidden until focused with the keyboard. */
.tsl-home .tsl-skip-link {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 100;
	padding: 10px 16px;
	background: var(--tsl-color-surface);
	color: var(--tsl-color-heading);
	box-shadow: var(--tsl-shadow-panel);
	text-decoration: none;
}

.tsl-home .tsl-skip-link:focus {
	top: 16px;
}

.tsl-home .tsl-main:focus {
	outline: none;
}

/* Admin-only message shown while the page is being built. */
.tsl-home .tsl-dev-notice {
	margin: 24px 0;
	padding: 12px 16px;
	border-left: 4px solid var(--tsl-color-primary);
	background: var(--tsl-color-surface);
	color: var(--tsl-color-heading);
	font-size: 15px;
}

/* ---------- Text reveal and fade-in (see assets/js/text-reveal.js) ---------- */

/*
 * Timings are copied from the original Home page:
 * - headings: each letter rises 20px and fades in over 0.5s, 0.04s apart
 *   (the site's "Animated heading text" snippet);
 * - other blocks: Elementor "fadeInUp" (1.25s, from 100% of its own height).
 *
 * Headings with data-tsl-reveal are hidden until the script has split them
 * into letters, so the full text does not flash first. Safety net: if the
 * script never runs, they appear anyway after 3 seconds.
 */
.tsl-home.tsl-js [data-tsl-reveal]:not(.tsl-reveal-ready) {
	opacity: 0;
	animation: tsl-reveal-failsafe 0s linear 3s forwards;
}

.tsl-home .tsl-reveal-word,
.tsl-home .tsl-reveal-char {
	display: inline-block;
}

/* Letters wait hidden until the heading is told to run. */
.tsl-home .tsl-reveal-ready:not(.tsl-reveal-done) .tsl-reveal-char {
	opacity: 0;
	transform: translateY(20px);
}

.tsl-home .tsl-reveal-run .tsl-reveal-word,
.tsl-home .tsl-reveal-run .tsl-reveal-char {
	animation: tsl-fade-up 0.5s forwards;
}

.tsl-home .tsl-reveal-run .tsl-reveal-char {
	animation-delay: calc(var(--tsl-i) * 0.04s);
}

@keyframes tsl-fade-up {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes tsl-reveal-failsafe {
	to {
		opacity: 1;
	}
}

/*
 * Blocks with data-tsl-fade play Elementor's fadeInUp once when scrolled into
 * view. They are only hidden once the script has marked them "ready", so
 * without JavaScript they are simply visible.
 */
.tsl-home [data-tsl-fade].tsl-fade-ready {
	opacity: 0;
}

.tsl-home [data-tsl-fade].tsl-fade-ready.tsl-fade-in {
	opacity: 1;
	animation: tsl-fade-in-up 1.25s both;
}

@keyframes tsl-fade-in-up {
	from {
		opacity: 0;
		transform: translate3d(0, 100%, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Floating decorations (original "moving-*" snippets) ---------- */

@keyframes tsl-float-x {
	0%, 100% { translate: -20px 0; }
	50% { translate: 20px 0; }
}

@keyframes tsl-float-y-10 {
	0%, 100% { translate: 0 -10px; }
	50% { translate: 0 10px; }
}

@keyframes tsl-float-y-8 {
	0%, 100% { translate: 0 -8px; }
	50% { translate: 0 10px; }
}

@keyframes tsl-float-y-12 {
	0%, 100% { translate: 0 -10px; }
	50% { translate: 0 12px; }
}

@keyframes tsl-drift-x {
	0%, 100% { translate: 0 0; }
	50% { translate: 30px 0; }
}

@keyframes tsl-drift-y {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 30px; }
}

@media (prefers-reduced-motion: reduce) {
	.tsl-home.tsl-js [data-tsl-reveal]:not(.tsl-reveal-ready),
	.tsl-home [data-tsl-fade].tsl-fade-ready,
	.tsl-home [data-tsl-fade].tsl-fade-ready.tsl-fade-in {
		opacity: 1;
		animation: none;
	}

	.tsl-home .tsl-reveal-char,
	.tsl-home .tsl-reveal-word,
	.tsl-home .tsl-reveal-run .tsl-reveal-char,
	.tsl-home .tsl-reveal-run .tsl-reveal-word {
		opacity: 1;
		transform: none;
		animation: none;
	}
}