/*
 * COMPONENTS - the shared moving parts (plan v2, chapters 7 and 8).
 *
 * EASY WORDING: here live the pieces that appear on many pages:
 *   - marquee buttons (the pill that slowly scrolls its own label)
 *   - small motion helpers (fade-up, marquee strips, edge fades)
 *   - the online dot next to the email
 *   - the floating "Let's talk" button
 *   - the first-visit loader and the wipe between pages
 *
 * Colours, sizes and speeds come from tokens.css.
 */

/* ------------------------------------------------------------------
 * 1. Marquee buttons (plan v2, chapter 7)
 *
 * A pill with no icon. The label repeats and slowly scrolls right to
 * left at a constant speed (about 35 px per second - the script
 * measures it, so every button on the site moves alike).
 * Until the script has measured, the label simply sits centred.
 * --------------------------------------------------------------- */

.aitio-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 163px;
	height: 35px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--aitio-yellow);
	color: var(--aitio-black);
	font-family: var(--aitio-font);
	font-size: var(--aitio-btn-text);
	font-weight: 400;
	line-height: 1.5;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: transform 120ms var(--ease);
}

/* the smaller version that sits in the header */
.aitio-btn--header {
	width: 110px;
	height: 24px;
	--aitio-btn-gap: 16px;
}

/* press feedback: a tiny 97% squeeze for 120 ms (plan v2) */
.aitio-btn:active {
	transform: scale(0.97);
}

/* disabled: faded and motionless */
.aitio-btn[disabled],
.aitio-btn.is-disabled {
	opacity: 0.4;
	pointer-events: none;
}

/* the button in a form while it is sending shows a still label */
.aitio-btn[disabled] .aitio-btn__track,
.aitio-btn.is-disabled .aitio-btn__track,
.aitio-btn.is-loading .aitio-btn__track {
	animation: none;
}

/* the window that hides the scrolling copies */
.aitio-btn__clip {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: inherit;
}

/* the row of label copies */
.aitio-btn__track {
	display: flex;
	align-items: center;
	gap: var(--aitio-btn-gap, 22px);
	height: 100%;
}

/* before the script runs: one still, centred label */
.aitio-btn:not(.is-ready) .aitio-btn__track {
	position: static;
	width: 100%;
	justify-content: center;
}

/* once ready: the track moves slowly, always, even on hover */
.aitio-btn.is-ready .aitio-btn__track {
	position: absolute;
	top: 0;
	left: 0;
	will-change: transform;
	animation: aitio-btn-scroll var(--aitio-btn-duration, 6s) linear infinite;
}

/* one copy of the label; the gap between copies comes from the track */
.aitio-btn__label {
	flex: none;
}

@keyframes aitio-btn-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(var(--aitio-btn-shift, 0px));
	}
}

/* movement stops on keyboard focus (accessibility) */
.aitio-btn:focus-visible .aitio-btn__track {
	animation-play-state: paused;
}

/* the focus ring stays visible on every button colour */
.aitio-btn:focus-visible {
	outline: 2px solid var(--aitio-black);
	outline-offset: 3px;
}

.aitio-btn--dark:focus-visible,
.aitio-btn--ghost-light:focus-visible {
	outline-color: var(--aitio-yellow);
}

/* ---- colour variants ---------------------------------------------- */

.aitio-btn--dark {
	background: var(--aitio-dark);
	color: var(--aitio-white);
}

.aitio-btn--light {
	background: var(--aitio-white);
	color: var(--aitio-black);
}

.aitio-btn--ghost {
	background: transparent;
	color: var(--aitio-black);
	box-shadow: inset 0 0 0 1px var(--aitio-dark);
}

.aitio-btn--ghost-light {
	background: transparent;
	color: var(--aitio-white);
	box-shadow: inset 0 0 0 1px var(--aitio-white);
}

/* on touch screens the tap area is at least 44 px high, even when
 * the pill itself looks smaller (plan v2, chapter 7) */
@media (pointer: coarse) {
	.aitio-btn::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		height: max(44px, 100%);
		transform: translateY(-50%);
	}
}

/* ------------------------------------------------------------------
 * 2. Small motion helpers (plan v2, chapter 8)
 * --------------------------------------------------------------- */

/* sections fade up 16 px as they enter, then stay put */
.aitio-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}

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

/* a marquee strip: give the track two identical groups of items.
 * The track slides exactly one group width, so the loop has no jump. */
.aitio-marquee {
	overflow: hidden;
}

.aitio-marquee__track {
	display: flex;
	width: max-content;
	animation: aitio-marquee var(--aitio-marquee-duration, 30s) linear infinite;
}

.aitio-marquee__group {
	display: flex;
	align-items: center;
	flex: none;
}

@keyframes aitio-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* soft fade at the left and right edges of a marquee or logo row.
 * Put this on the element that holds the content, not on the colour
 * strip behind it. 48 px on desktop, 24 px on small screens. */
.aitio-mask-x {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}

@media (max-width: 768px) {
	.aitio-mask-x {
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
		mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
	}
}

/* ------------------------------------------------------------------
 * 3. The online dot (header + footer)
 * Yellow dot, softly fading, with a faint ring growing outward.
 * 2 second cycle, smooth - never a blink.
 * --------------------------------------------------------------- */

.aitio-online {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.aitio-online__dot {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--aitio-yellow);
	animation: aitio-online-dot 2s ease-in-out infinite;
}

.aitio-online__dot::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 50%;
	border: 1px solid var(--aitio-yellow);
	animation: aitio-online-ring 2s var(--ease) infinite;
}

@keyframes aitio-online-dot {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.4; }
}

@keyframes aitio-online-ring {
	0%   { transform: scale(1);   opacity: 0.9; }
	70%  { transform: scale(2.6); opacity: 0; }
	100% { transform: scale(2.6); opacity: 0; }
}

/* ------------------------------------------------------------------
 * 4. The floating "Let's talk" button (bottom right corner)
 * In batch 1 it points at the contact form (later: the chatbot).
 * --------------------------------------------------------------- */

.aitio-floating {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: var(--aitio-yellow);
	color: var(--aitio-black);
	font-size: 11px;
	line-height: 1.25;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: center;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
	transition: transform var(--fast) var(--ease);
}

.aitio-floating:hover {
	transform: scale(1.05);
}

/* ------------------------------------------------------------------
 * 5. The first-visit loader (plan v2, chapter 8)
 * A black cover with the Aitio mark, at most 1.2 s, then it wipes
 * away like a page change. Shown once per session only; never with
 * reduce motion. The page loads underneath, so nothing is delayed.
 * --------------------------------------------------------------- */

.aitio-loader {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--aitio-black);
	color: var(--aitio-white);
	clip-path: inset(0 0 0 0);
}

.aitio-loader__mark {
	font-family: var(--aitio-font-display);
	font-size: 30px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* the script adds this class when the page is ready to show */
.aitio-loader.is-done {
	animation: aitio-wipe-away 450ms var(--ease) forwards;
	pointer-events: none;
}

@keyframes aitio-wipe-away {
	from { clip-path: inset(0 0 0 0); }
	to   { clip-path: inset(100% 0 0 0); }
}

/* the small safety script in the head adds this class after 1.2 s,
 * so the loader can never get stuck when the main script is slow */
html.aitio-loader-timeout .aitio-loader:not(.is-done) {
	animation: aitio-wipe-away 450ms var(--ease) forwards;
	pointer-events: none;
}

/* hide the loader when there is no JavaScript, or when this session
 * has already seen it (the inline script sets .aitio-seen early) */
html:not(.js) .aitio-loader,
.aitio-seen .aitio-loader {
	display: none !important;
}

/* ------------------------------------------------------------------
 * 6. The wipe between pages (cross-document View Transitions)
 * Old page wipes away (top to bottom) 300 ms, 80 ms pause, then the
 * new page draws in from the top in 450 ms (plan v2, chapter 8).
 * --------------------------------------------------------------- */

@view-transition {
	navigation: auto;
}

/* the colour seen during the 80 ms pause; a page can set its own
 * hero colour by putting --aitio-page-colour on the <html> element */
::view-transition {
	background: var(--aitio-page-colour, var(--aitio-black));
}

::view-transition-old(root) {
	animation: aitio-page-out 300ms var(--ease) both;
}

::view-transition-new(root) {
	animation: aitio-page-in 450ms var(--ease) 380ms both;
}

@keyframes aitio-page-out {
	from { clip-path: inset(0 0 0 0); }
	to   { clip-path: inset(100% 0 0 0); }
}

@keyframes aitio-page-in {
	from { clip-path: inset(0 0 100% 0); }
	to   { clip-path: inset(0 0 0 0); }
}

/* ------------------------------------------------------------------
 * 7. Reduce motion: everything calm and still (plan v2, chapter 8)
 * --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.aitio-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.aitio-marquee__track,
	.aitio-online__dot,
	.aitio-online__dot::after {
		animation: none;
	}

	/* buttons show one still, centred label */
	.aitio-btn .aitio-btn__track {
		position: static;
		width: 100%;
		justify-content: center;
		animation: none;
	}

	.aitio-btn .aitio-btn__label ~ .aitio-btn__label {
		display: none;
	}

	/* no first-visit loader, no page wipe */
	.aitio-loader {
		display: none !important;
	}

	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none;
	}
}