/**
 * Motion — Figma 13-1058 (assets/js/motion.js) and scroll indicator —
 * Figma 20-49 (assets/js/scroll-indicator.js).
 *
 * Start states only apply under html.js-motion (JavaScript running and no
 * reduced motion): without JavaScript everything is displayed directly.
 */

/* ---------- Start states (removed by .is-revealed) ---------- */

/* Top of page — CSS animations, started on the first paint: they no
   longer wait for the deferred motion scripts (which made titles appear
   ~2 s late on slow servers). "backwards" only applies the start state
   during the delay, the element's own styles take over at the end. */
@keyframes ateq-line-in {

	from {
		transform: translateY(110%);
	}

	to {
		transform: none;
	}
}

@keyframes ateq-fade-up {

	from {
		opacity: 0;
		transform: translateY(24px);
	}

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

@keyframes ateq-rise {

	from {
		opacity: 0;
		transform: translateY(48px);
	}

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

/* Heroes (Hero divisions, Page hero): eyebrow, title line by line, text,
   buttons, key figures, then the division columns rising one by one */
.js-motion [data-hero] .eyebrow[data-hero-fade] {
	animation: ateq-fade-up 0.5s var(--ease-out) 0.1s backwards;
}

.js-motion [data-hero] [data-hero-line] {
	animation: ateq-line-in 0.8s var(--ease-out) 0.25s backwards;
}

.js-motion [data-hero] :nth-child(2) > [data-hero-line] {
	animation-delay: 0.33s;
}

.js-motion [data-hero] :nth-child(3) > [data-hero-line] {
	animation-delay: 0.41s;
}

.js-motion [data-hero] :nth-child(4) > [data-hero-line] {
	animation-delay: 0.49s;
}

.js-motion [data-hero] [data-hero-fade]:not(.eyebrow),
.js-motion [data-hero] .hero-divisions__stat {
	animation: ateq-fade-up 0.5s var(--ease-out) 0.6s backwards;
}

.js-motion [data-hero] .page-hero__actions,
.js-motion [data-hero] .hero-divisions__stat:nth-child(n+2) {
	animation-delay: 0.7s;
}

.js-motion [data-hero] .hero-divisions__stat:nth-child(n+3) {
	animation-delay: 0.8s;
}

.js-motion [data-hero] [data-hero-column] {
	animation: ateq-rise 0.7s var(--ease-out) 0.65s backwards;
}

.js-motion [data-hero] [data-hero-column]:nth-child(2) {
	animation-delay: 0.73s;
}

.js-motion [data-hero] [data-hero-column]:nth-child(3) {
	animation-delay: 0.81s;
}

.js-motion [data-hero] [data-hero-column]:nth-child(4) {
	animation-delay: 0.89s;
}

/* Page titles (News, categories, search, article, World, text pages) */
.js-motion :is(.page-title__inner, .article-header, .ww-hero__content, .text-page > :nth-child(-n+2)) {
	animation: ateq-fade-up 0.7s var(--ease-out) 0.1s backwards;
}

.js-motion .ww-map {
	animation: ateq-fade-up 0.7s var(--ease-out) 0.3s backwards;
}

/* Section heading: the red rule draws from top to bottom */
.js-motion .section-heading:not(.is-revealed) .section-heading__rule {
	transform: scaleY(0);
	transform-origin: 50% 0;
}

/* Content blocks: fade-up (24px) — keep in sync with REVEAL in motion.js */
.js-motion :is(
	.section-heading,
	.about__content,
	.about__image,
	.news-card,
	.worldwide-teaser__content > *,
	.worldwide-teaser__map,
	.featured-news__inner,
	.news-empty,
	.pagination,
	.article-hero,
	.article-body,
	.post-nav,
	.related-news__title,
	.ww-region,
	.cta-band__inner,
	.split-media__row,
	.timeline__item,
	.division-card,
	.feature-card,
	.testimonial,
	.text-page > :nth-child(n+3)
):not(.is-revealed) {
	opacity: 0;
	transform: translateY(24px);
}

/* ---------- Scroll indicator — one rounded pixel per section ---------- */

.scroll-indicator {
	display: none;
}

@media (min-width: 1024px) {

	/* Centred in the right margin (gutter or space beside the container) */
	.scroll-indicator:not([hidden]) {
		--si-text: var(--text-inverse);
		--si-accent: var(--text-accent);
		--si-bright: var(--accent-bright);
		position: fixed;
		top: 50%;
		right: calc(max(var(--gutter), (100vw - var(--container)) / 2) / 2 - 17px);
		z-index: 90;
		display: flex;
		flex-direction: column;
		gap: 14px;
		align-items: center;
		width: 34px;
		padding: 16px 5px;
		border-radius: 999px; /* grey pill: readable on any background */
		background: rgb(110 110 119 / 22%);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		transform: translateY(-50%);
		font-family: var(--font-heading);
		font-size: 13px;
		font-weight: 600;
		line-height: 16px;
		font-variant-numeric: tabular-nums;
	}

	/* On a light background (Theme=Light) */
	.scroll-indicator.is-light {
		--si-text: var(--text-primary);
	}

	/* On the red background (e.g. Worldwide CTA): white instead of red */
	.scroll-indicator.is-accent {
		--si-accent: var(--text-inverse);
		--si-bright: var(--text-inverse);
	}

	.scroll-indicator__number {
		display: block;
		height: 16px;
		overflow: hidden;
	}

	.scroll-indicator__current {
		color: var(--si-accent);
		transition: color var(--duration-base) var(--ease-out);
	}

	/* Number change: slides out then in (2 × 150ms) */
	.scroll-indicator__current > span {
		display: block;
		transition:
			opacity 150ms var(--ease-out),
			transform 150ms var(--ease-out);
	}

	.scroll-indicator__current > span.is-out-up {
		opacity: 0;
		transform: translateY(-8px);
	}

	.scroll-indicator__current > span.is-out-down {
		opacity: 0;
		transform: translateY(8px);
	}

	.scroll-indicator__total {
		color: var(--si-text);
		opacity: 0.4;
		transition: color var(--duration-base) var(--ease-out);
	}

	/* One rounded pixel per section (6px, like the map dots) */
	.scroll-indicator__pixels {
		display: flex;
		flex-direction: column;
		gap: 4px;
		align-items: center;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.scroll-indicator__pixel {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 14px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}

	.scroll-indicator__pixel::before {
		content: "";
		width: 6px;
		height: 6px;
		border-radius: 1.5px;
		background: var(--si-text);
		opacity: 0.22;
		transition:
			opacity var(--duration-base) var(--ease-out),
			transform var(--duration-base) var(--ease-out),
			background-color var(--duration-base) var(--ease-out);
	}

	.scroll-indicator__pixel.is-read::before {
		opacity: 0.6;
	}

	.scroll-indicator__pixel.is-current::before {
		background: var(--si-bright);
		opacity: 1;
		transform: scale(1.5);
	}

	.scroll-indicator__pixel:hover::before {
		opacity: 1;
		transform: scale(1.5);
	}

	.scroll-indicator__pixel:focus-visible {
		outline: 2px solid var(--si-accent);
		outline-offset: 0;
		border-radius: 2px;
	}
}