/*
 * TOPOSEL service pages: one shared animation system for Retention Marketing,
 * SEO and AI Optimisation, Performance Marketing & CRO and Software & Web
 * Development. Everything is scoped to .toposel-svc (the page content) and to
 * the .tsv-js flag on <html>; header, dropdown, CTA band and footer are not touched.
 *
 * Content is only hidden while html.tsv-js is set. That flag is added by a tiny
 * inline script (modules/services: print_motion_flag) only when the browser
 * supports IntersectionObserver and the visitor has not asked for reduced motion,
 * and it is removed again if services-animations.js does not start. Without
 * JavaScript, or with reduced motion, nothing is hidden and nothing moves.
 *
 * Only opacity and transform are animated, so layout never shifts.
 */

.toposel-svc,
.toposel-page--service {
	--tsv-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--tsv-reveal: 550ms;   /* scroll / entrance reveal */
	--tsv-fast: 250ms;     /* hover, focus */
	--tsv-lift: -4px;      /* card hover lift */
	--tsv-dist: 20px;      /* reveal distance */
}

/* ---------- Reveal (entrance + scroll) ---------- */

.tsv-js .tsv-r,
.tsv-js .toposel-svc > :where(section:first-of-type) :where(.intro-content, .seo-overview-content, .pm-intro-content, .overview-content) > :where(*:not(.tsv-done)),
.tsv-js .toposel-svc > :where(section:first-of-type) :where(.intro-media, .seo-illustration-box, .pm-intro-media, .overview-illustration):where(:not(.tsv-done)) {
	opacity: 0;
	transform: translate3d(0, var(--tsv-dist), 0);
}

.tsv-js .tsv-r.tsv-in {
	opacity: 1;
	transform: none;
	transition: opacity var(--tsv-reveal) var(--tsv-ease) var(--tsv-d, 0ms),
		transform var(--tsv-reveal) var(--tsv-ease) var(--tsv-d, 0ms);
}

/* ---------- Cards and feature blocks (same on all four pages) ---------- */

.toposel-svc :is(.feature-card, .seo-card, .pm-card, .service-card, .pm-stat-box) {
	transition: transform var(--tsv-fast) var(--tsv-ease), box-shadow var(--tsv-fast) var(--tsv-ease),
		border-color var(--tsv-fast) var(--tsv-ease), background-color var(--tsv-fast) var(--tsv-ease);
}

.toposel-svc :is(.feature-card, .seo-card, .pm-card, .service-card):focus-within {
	transform: translateY(var(--tsv-lift));
	box-shadow: 0 12px 30px rgba(17, 17, 40, 0.1);
}

@media (hover: hover) and (pointer: fine) {
	.toposel-svc :is(.feature-card, .seo-card, .pm-card, .service-card):hover {
		transform: translateY(var(--tsv-lift));
		box-shadow: 0 12px 30px rgba(17, 17, 40, 0.1);
	}
}

/* ---------- Buttons ---------- */

.toposel-svc :is(.btn-primary-purple, .pm-btn, .toposel-btn-primary, .toposel-btn-white) {
	transition: background-color var(--tsv-fast) var(--tsv-ease), color var(--tsv-fast) var(--tsv-ease),
		box-shadow var(--tsv-fast) var(--tsv-ease), transform var(--tsv-fast) var(--tsv-ease);
}

.toposel-svc :is(.btn-primary-purple, .pm-btn, .toposel-btn-primary, .toposel-btn-white) :is(.arrow, .pm-arrow, .btn-arrow) {
	display: inline-block;
	transition: transform var(--tsv-fast) var(--tsv-ease);
}

.toposel-svc :is(.btn-primary-purple, .pm-btn, .toposel-btn-primary, .toposel-btn-white):focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(91, 60, 226, 0.3);
	outline: 2px solid #4e2fda;
	outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
	.toposel-svc :is(.btn-primary-purple, .pm-btn, .toposel-btn-primary, .toposel-btn-white):hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 20px rgba(91, 60, 226, 0.3);
	}

	.toposel-svc :is(.btn-primary-purple, .pm-btn, .toposel-btn-primary, .toposel-btn-white):hover :is(.arrow, .pm-arrow, .btn-arrow) {
		transform: translateX(3px);
	}
}

.toposel-svc :is(.btn-primary-purple, .pm-btn, .toposel-btn-primary, .toposel-btn-white):active {
	transform: translateY(0);
	box-shadow: 0 3px 10px rgba(91, 60, 226, 0.25);
}

/* ---------- Accordions ("Why Choose Toposel?") ---------- */

.toposel-svc :is(.accordion-item, .seo-accordion-item, .pm-accordion-item) {
	transition: background-color 0.3s var(--tsv-ease), color 0.3s var(--tsv-ease), box-shadow 0.3s var(--tsv-ease);
}

.toposel-svc :is(.accordion-header, .seo-accordion-header, .pm-accordion-header):focus-visible {
	outline: 2px solid #4e2fda;
	outline-offset: -2px;
}

@keyframes tsv-open {
	from {
		opacity: 0;
		transform: translate3d(0, -6px, 0);
	}

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

.toposel-svc :is(.accordion-item, .seo-accordion-item, .pm-accordion-item).active :is(.accordion-content, .accordion-body, .seo-accordion-content, .pm-accordion-body) {
	animation: tsv-open 0.3s var(--tsv-ease) both;
}

/* A "Why Choose Toposel?" panel that is closing stays visible until services.js has finished sliding it shut. */
.toposel-svc .tsv-closing {
	display: block !important;
}

/* ---------- Mobile: lighter ---------- */

@media (max-width: 767px) {
	.toposel-svc,
	.toposel-page--service {
		--tsv-reveal: 450ms;
		--tsv-dist: 16px;
	}
}

/* ---------- Reduced motion: nothing hidden, nothing moves ---------- */

@media (prefers-reduced-motion: reduce) {
	.tsv-js .tsv-r,
	.tsv-js .toposel-svc > :where(section:first-of-type) :where(.intro-content, .seo-overview-content, .pm-intro-content, .overview-content) > :where(*:not(.tsv-done)),
	.tsv-js .toposel-svc > :where(section:first-of-type) :where(.intro-media, .seo-illustration-box, .pm-intro-media, .overview-illustration):where(:not(.tsv-done)) {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.toposel-svc *,
	.toposel-svc *::before,
	.toposel-svc *::after {
		animation: none !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}

	.toposel-svc :is(.feature-card, .seo-card, .pm-card, .service-card, .btn-primary-purple, .pm-btn, .toposel-btn-primary, .toposel-btn-white):is(:hover, :focus-within, :focus-visible) {
		transform: none;
	}
}