/*
 * Subtle theme motion and effects (hover, press, panel opening) - only under prefers-reduced-motion: no-preference.
 * Values (duration, lift, scale, shadow, focus ring) come from tokens.css (--pgco-motion*, --pgco-lift, --pgco-press, ...).
 * Uses the individual translate / scale / rotate properties so it never clashes with a component's own transform (e.g. the centred call button).
 * Colours and the main hover states live in tailwind/components/*.css; only 'motion' is added here.
 */

/* Call button pulse (legacy, from misc.php) */
.pgco-ping { position: relative; }
.pgco-ping::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: inherit;
	opacity: 0.75;
}

@keyframes pgco-ping {
	75%, 100% { transform: scale(1.25); opacity: 0; }
}

@keyframes pgco-pop {
	from { opacity: 0; translate: 0 8px; }
	to { opacity: 1; translate: 0 0; }
}

@keyframes pgco-fade-in {
	from { opacity: 0; translate: 0 -4px; }
	to { opacity: 1; translate: 0 0; }
}

@keyframes pgco-rise {
	from { opacity: 0; translate: 0 var(--pgco-rise); }
	to { opacity: 1; translate: 0 0; }
}

@keyframes pgco-breathe {
	from { opacity: 1; }
	to { opacity: 0.55; }
}

@keyframes pgco-spin {
	to { rotate: 360deg; }
}

@keyframes pgco-lb-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes pgco-lb-zoom {
	from { opacity: 0; scale: var(--pgco-lightbox-zoom-from); }
	to { opacity: 1; scale: 1; }
}

@keyframes pgco-lb-swap {
	from { opacity: 0; scale: var(--pgco-lightbox-swap-from); }
	to { opacity: 1; scale: 1; }
}

@keyframes pgco-lb-fade-out {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes pgco-fab-pulse {
	0% { box-shadow: var(--pgco-fab-pulse); }
	70%, 100% { box-shadow: var(--pgco-fab-pulse-end); }
}

@keyframes pgco-float {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 calc(var(--pgco-float) * -1); }
}

/* Marquee: track = two groups; right-to-left moves 50% to the right (the second group takes the first one's place), left-to-right moves 50% to the left */
@keyframes pgco-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(50%); }
}

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

@media (prefers-reduced-motion: no-preference) {
	.pgco-ping::before { animation: pgco-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }

	/* ---- base transition for every interactive element ---- */
	.pgco-v2 :is(
		.pgco-header__phone, .pgco-header__cta, .pgco-header__burger, .pgco-langs__link,
		.pgco-nav__link, .pgco-nav__toggle, .pgco-catmenu__toggle,
		.pgco-megamenu__tab, .pgco-megamenu__link, .pgco-megamenu__sub-link,
		.pgco-simple-dropdown__link, .pgco-mnav__row, .pgco-mnav__link, .pgco-mnav__toggle,
		.pgco-mobile-menu__tab, .pgco-mobile-menu__call,
		.pgco-search__input, .pgco-search__submit, .pgco-offcanvas__close, .pgco-topbar__close,
		.pgco-social__link, .pgco-footer__link, .pgco-footer__post-link, .pgco-footer__more,
		.pgco-bar__link, .pgco-call, .pgco-accordion__trigger, .pgco-tabs__tab,
		.pgco-card__link, .pgco-post-list__link, .pgco-pagination__item, .pgco-chips__link, .pgco-btn, .pgco-slider__dot,
		.pgco-breadcrumb__link, .pgco-section-head__link, .pgco-slider__btn,
		.pgco-playlist__item, .pgco-playlist__nav-btn, .pgco-playlist__play, .pgco-catbox,
		.pgco-toc__trigger, .pgco-toc__link, .pgco-labels__link, .pgco-share__copy, .pgco-share__link, .pgco-share__done,
		.pgco-blog__banner, .pgco-accordion__item, .pgco-banner, .pgco-section-head__arrow,
		.pgco-calc__field, .pgco-calc__label, .pgco-calc__unit
	) {
		transition-property: color, background-color, background-size, border-color, box-shadow, padding, translate, scale, rotate, opacity;
		transition-duration: var(--pgco-motion);
		transition-timing-function: var(--pgco-ease);
	}

	.pgco-v2 :is(.pgco-search__submit, .pgco-footer__more, .pgco-bar__img, .pgco-bar__svg, .pgco-nav__toggle, .pgco-catmenu__toggle) svg,
	.pgco-v2 :is(.pgco-bar__img, .pgco-bar__svg, .pgco-catmenu__chevron, .pgco-accordion__chevron, .pgco-toc__chevron, .pgco-section-head__arrow, .pgco-playlist__nav-btn svg) {
		transition: translate var(--pgco-motion) var(--pgco-ease), scale var(--pgco-motion) var(--pgco-ease), rotate var(--pgco-motion) var(--pgco-ease);
	}

	/* ---- buttons: lift + shadow on hover, press on click ---- */
	.pgco-v2 :is(.pgco-header__phone, .pgco-header__cta, .pgco-mobile-menu__call):hover {
		translate: 0 var(--pgco-lift);
		box-shadow: var(--pgco-shadow-lift);
	}

	.pgco-v2 :is(.pgco-header__phone, .pgco-header__cta, .pgco-mobile-menu__call, .pgco-search__submit, .pgco-call, .pgco-social__link):active {
		translate: 0 0;
		scale: var(--pgco-press);
	}

	.pgco-v2 .pgco-search__submit:hover svg { scale: var(--pgco-grow); }

	/* ---- icons: subtle grow/rotate ---- */
	.pgco-v2 :is(.pgco-header__burger, .pgco-langs__link, .pgco-topbar__close):hover { scale: var(--pgco-grow); }
	.pgco-v2 .pgco-offcanvas__close:hover { rotate: 90deg; }

	/* ---- animated underline for text links (grows from the right; the site is RTL) ---- */
	.pgco-v2 :is(.pgco-nav__link, .pgco-megamenu__link, .pgco-megamenu__sub-link, a.pgco-footer__link, .pgco-footer__post-link, .pgco-post-list__link, .pgco-toc__link, .pgco-breadcrumb__link) {
		background-image: linear-gradient(currentColor, currentColor);
		background-repeat: no-repeat;
		background-position: 100% var(--pgco-underline-y, 100%);
		background-size: 0 var(--pgco-hair-strong);
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone; /* a link that wraps gets its own underline on every line */
	}

	.pgco-v2 .pgco-nav__link { --pgco-underline-y: calc(100% - var(--pgco-space-1)); }

	.pgco-v2 :is(.pgco-nav__link, .pgco-megamenu__link, .pgco-megamenu__sub-link, a.pgco-footer__link, .pgco-footer__post-link, .pgco-post-list__link, .pgco-toc__link, .pgco-breadcrumb__link):hover {
		background-size: 100% var(--pgco-hair-strong);
	}

	/* ---- open/close arrows ---- */
	.pgco-v2 .pgco-nav__toggle[aria-expanded='true'] svg,
	.pgco-v2 .pgco-catmenu__toggle[aria-expanded='true'] .pgco-catmenu__chevron { rotate: 180deg; }

	/* ---- panels: soft appearance (fade + lift) ---- */
	.pgco-v2 :is(.pgco-nav__panel, .pgco-catmenu__panel)[data-open] {
		animation: pgco-pop var(--pgco-motion-pop) var(--pgco-ease) both;
	}

	/* accordion / mobile-menu accordion / table of contents slide their height from accordion.js; tabs and the mobile menu tab panels fade */
	.pgco-v2 :is(.pgco-mobile-menu__panel, .pgco-tabs__panel):not([hidden]) {
		animation: pgco-fade-in var(--pgco-motion-pop) var(--pgco-ease) both;
	}

	/* ---- mega menu: the tab moves slightly forward on hover (sections only fade; translate on hidden sections caused false scrolling) ---- */
	.pgco-v2 :is(.pgco-megamenu__tab:hover, .pgco-megamenu__tab[data-active]) {
		padding-inline-start: calc(var(--pgco-space-2) + var(--pgco-space-half));
	}

	/* ---- mobile menu and focus ---- */
	.pgco-v2 .pgco-mnav__row:hover { background: var(--pgco-gray-1); }

	/* ==== Phase 5: card, slider, boxes, magazine, article, playlist ==== */

	/* Card: lift + shadow, subtle image zoom; title takes the hover colour (post-card.css) */
	.pgco-v2 .pgco-card { transition: box-shadow var(--pgco-motion) var(--pgco-ease), translate var(--pgco-motion) var(--pgco-ease), scale var(--pgco-motion) var(--pgco-ease); }
	.pgco-v2 .pgco-card:hover {
		translate: 0 var(--pgco-lift);
		box-shadow: var(--pgco-shadow-lift);
	}

	.pgco-v2 .pgco-card__img { transition: scale var(--pgco-motion-slow) var(--pgco-ease); }
	.pgco-v2 .pgco-card:hover .pgco-card__img { scale: var(--pgco-zoom); }
	.pgco-v2 .pgco-card:active { translate: 0 0; scale: var(--pgco-press); }

	/* Service card: like the post card + the 'view details' overlay fades in; 'other services' links and the form submit button */
	.pgco-v2 .pgco-service-card { transition: box-shadow var(--pgco-motion) var(--pgco-ease), translate var(--pgco-motion) var(--pgco-ease), scale var(--pgco-motion) var(--pgco-ease); }
	.pgco-v2 .pgco-service-card:hover {
		translate: 0 var(--pgco-lift);
		box-shadow: var(--pgco-shadow-lift);
	}

	.pgco-v2 .pgco-service-card:active { translate: 0 0; scale: var(--pgco-press); }
	.pgco-v2 .pgco-service-card__img { transition: scale var(--pgco-motion-slow) var(--pgco-ease); }
	.pgco-v2 .pgco-service-card:hover .pgco-service-card__img { scale: var(--pgco-zoom); }
	.pgco-v2 .pgco-service-card__more { transition: opacity var(--pgco-motion) var(--pgco-ease); }
	.pgco-v2 .pgco-service-list__link,
	.pgco-v2 .pgco-form__control { transition: color var(--pgco-motion) var(--pgco-ease), border-color var(--pgco-motion) var(--pgco-ease); }
	/* Lightbox: soft entrance with a little zoom, faster exit, cross-fade between images (JS keeps the is-closing class for 180ms) */
	.pgco-v2 .pgco-lightbox[open],
	.pgco-v2 .pgco-lightbox[open]::backdrop { animation: pgco-lb-fade var(--pgco-lightbox-fade) ease both; }
	.pgco-v2 .pgco-lightbox[open] .pgco-lightbox__img { animation: pgco-lb-zoom var(--pgco-motion-slow) var(--pgco-ease) both; }
	.pgco-v2 .pgco-lightbox[open] .pgco-lightbox__img.is-swap { animation: pgco-lb-swap var(--pgco-motion) ease both; }
	.pgco-v2 .pgco-lightbox.is-closing,
	.pgco-v2 .pgco-lightbox.is-closing::backdrop { animation: pgco-lb-fade-out var(--pgco-lightbox-fade-out) ease both; }
	.pgco-v2 .pgco-lightbox__close, .pgco-v2 .pgco-lightbox__nav { transition: background-color var(--pgco-motion) var(--pgco-ease), scale var(--pgco-motion) var(--pgco-ease), rotate var(--pgco-motion) var(--pgco-ease); }
	.pgco-v2 .pgco-lightbox__nav:hover { scale: var(--pgco-zoom); }
	.pgco-v2 .pgco-lightbox__close:hover { rotate: 90deg; }
	.pgco-v2 .pgco-search__results:not([hidden]) { animation: pgco-fade-in var(--pgco-motion) var(--pgco-ease); }
	.pgco-v2 .pgco-search__result, .pgco-v2 .pgco-search__all { transition: background-color var(--pgco-motion) var(--pgco-ease), color var(--pgco-motion) var(--pgco-ease); }
	/* Floating contact button: list with fade + items rising, icons with rotation, pulse three times on the closed button */
	.pgco-v2 .pgco-fab__toggle { transition: background-color var(--pgco-motion) var(--pgco-ease), scale var(--pgco-motion) var(--pgco-ease); }
	.pgco-v2 .pgco-fab__toggle:not([aria-expanded='true']) { animation: pgco-fab-pulse var(--pgco-fab-pulse-time) infinite; }
	.pgco-v2 .pgco-fab__toggle:hover { scale: var(--pgco-zoom); }
	.pgco-v2 .pgco-fab__icon { transition: opacity var(--pgco-motion) var(--pgco-ease), scale var(--pgco-motion-slow) var(--pgco-ease), rotate var(--pgco-motion-slow) var(--pgco-ease); }
	.pgco-v2 .pgco-fab__icon--close, .pgco-v2 .pgco-fab__toggle[aria-expanded='true'] .pgco-fab__icon--open { scale: 0.4; rotate: -90deg; }
	.pgco-v2 .pgco-fab__toggle[aria-expanded='true'] .pgco-fab__icon--close { scale: 1; rotate: 0deg; }
	.pgco-v2 .pgco-fab__list { transition: visibility 0s linear var(--pgco-motion), opacity var(--pgco-motion) ease; }
	.pgco-v2 .pgco-fab.is-open .pgco-fab__list { transition-delay: 0s; }
	/* stagger: opening = bottom item first; closing = top item first (reverse) */
	.pgco-v2 .pgco-fab__item:nth-last-child(1) { transition-delay: calc(var(--pgco-fab-stagger) * 5); }
	.pgco-v2 .pgco-fab__item:nth-last-child(2) { transition-delay: calc(var(--pgco-fab-stagger) * 4); }
	.pgco-v2 .pgco-fab__item:nth-last-child(3) { transition-delay: calc(var(--pgco-fab-stagger) * 3); }
	.pgco-v2 .pgco-fab__item:nth-last-child(4) { transition-delay: calc(var(--pgco-fab-stagger) * 2); }
	.pgco-v2 .pgco-fab__item:nth-last-child(5) { transition-delay: var(--pgco-fab-stagger); }
	.pgco-v2 .pgco-fab__item:nth-last-child(6) { transition-delay: 0s; }
	.pgco-v2 .pgco-fab.is-open .pgco-fab__item:nth-last-child(1) { transition-delay: var(--pgco-fab-stagger); }
	.pgco-v2 .pgco-fab.is-open .pgco-fab__item:nth-last-child(2) { transition-delay: calc(var(--pgco-fab-stagger) * 2); }
	.pgco-v2 .pgco-fab.is-open .pgco-fab__item:nth-last-child(3) { transition-delay: calc(var(--pgco-fab-stagger) * 3); }
	.pgco-v2 .pgco-fab.is-open .pgco-fab__item:nth-last-child(4) { transition-delay: calc(var(--pgco-fab-stagger) * 4); }
	.pgco-v2 .pgco-fab.is-open .pgco-fab__item:nth-last-child(5) { transition-delay: calc(var(--pgco-fab-stagger) * 5); }
	.pgco-v2 .pgco-fab.is-open .pgco-fab__item:nth-last-child(6) { transition-delay: calc(var(--pgco-fab-stagger) * 6); }
	.pgco-v2 .pgco-fab__item { translate: 0 var(--pgco-fab-shift); scale: var(--pgco-fab-item-scale); transition: translate var(--pgco-motion) var(--pgco-ease), scale var(--pgco-motion) var(--pgco-ease); }
	.pgco-v2 .pgco-fab.is-open .pgco-fab__item { translate: none; scale: 1; }
	.pgco-v2 .pgco-fab__link { transition: scale var(--pgco-motion) var(--pgco-ease), background-color var(--pgco-motion) var(--pgco-ease); }
	.pgco-v2 .pgco-fab__link:hover { scale: var(--pgco-zoom); }
	.pgco-v2 .sr-star { transition: color var(--pgco-motion) var(--pgco-ease), scale var(--pgco-motion) var(--pgco-ease); }
	.pgco-v2 .sr-star:hover { scale: var(--pgco-zoom); }
	.pgco-v2 .sr-reaction-btn { transition: scale var(--pgco-motion) var(--pgco-ease); }
	.pgco-v2 .sr-reaction-btn:hover { scale: var(--pgco-zoom); }
	.pgco-v2 .pgco-form__status:not(:empty), .pgco-v2 .pgco-form__error { animation: pgco-fade-in var(--pgco-motion) var(--pgco-ease); }
	.pgco-v2 .pgco-form[aria-busy] .pgco-form__submit::after {
		content: '';
		width: var(--pgco-form-spinner);
		height: var(--pgco-form-spinner);
		margin-inline-start: var(--pgco-space-1);
		border: var(--pgco-hair-strong) solid currentcolor;
		border-block-start-color: transparent;
		border-radius: 50%;
		animation: pgco-spin var(--pgco-spin) linear infinite;
	}

	/* Home page and price board: cards rise; board category, filter and call button change colour smoothly */
	.pgco-v2 :is(.pgco-home-why__item, .pgco-home-quick__link, .pgco-home-cat__label, .pgco-home-expert) { transition: box-shadow var(--pgco-motion) var(--pgco-ease), translate var(--pgco-motion) var(--pgco-ease); }
	.pgco-v2 :is(.pgco-home-why__item, .pgco-home-quick__link, .pgco-home-expert):hover,
	.pgco-v2 .pgco-home-cat:hover .pgco-home-cat__label {
		translate: 0 var(--pgco-lift);
		box-shadow: var(--pgco-shadow-lift);
	}

	/* Special pages: icon cards, quote cards and gallery pictures rise; the job form panel and the tab icons stay still */
	.pgco-v2 :is(.pgco-features--card .pgco-features__item, .pgco-testi, .pgco-about__cert-item, .pgco-expo__item, .pgco-lp-gallery li) { transition: box-shadow var(--pgco-motion) var(--pgco-ease), translate var(--pgco-motion) var(--pgco-ease); }
	.pgco-v2 :is(.pgco-features--card .pgco-features__item, .pgco-testi, .pgco-about__cert-item, .pgco-expo__item, .pgco-lp-gallery li):hover {
		translate: 0 var(--pgco-lift);
		box-shadow: var(--pgco-shadow-lift);
	}

	.pgco-v2 :is(.pgco-board__cat, .pgco-board__call, .pgco-board__select) { transition: color var(--pgco-motion) var(--pgco-ease), background-color var(--pgco-motion) var(--pgco-ease), border-color var(--pgco-motion) var(--pgco-ease); }
	.pgco-v2 .pgco-board__panel:not([hidden]) { animation: pgco-fade-in var(--pgco-motion-pop) var(--pgco-ease) both; }

	/* Marquee (like ahanshahr): two identical groups side by side and the track moves exactly one group (seamless loop); right-to-left: items enter from the left.
	   Pauses on hover/focus, edges are faded. Without this block (reduced motion) only the manually scrollable row remains. */
	.pgco-v2 .pgco-marquee[class] {
		overflow: hidden;
		-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--pgco-marquee-fade), #000 calc(100% - var(--pgco-marquee-fade)), transparent);
		mask-image: linear-gradient(to right, transparent, #000 var(--pgco-marquee-fade), #000 calc(100% - var(--pgco-marquee-fade)), transparent);
	}

	.pgco-v2 .pgco-marquee .pgco-marquee__track .pgco-marquee__group--copy { display: flex; } /* more specific than marquee.css (printed later, in the body): no dependence on load order */

	.pgco-v2 .pgco-marquee__track {
		animation: pgco-marquee var(--pgco-marquee-duration, 60s) linear infinite;
		will-change: transform;
	}

	.pgco-v2 .pgco-marquee:hover .pgco-marquee__track,
	.pgco-v2 .pgco-marquee:focus-within .pgco-marquee__track { animation-play-state: paused; }

	html:not([dir='rtl']) .pgco-v2 .pgco-marquee__track { animation-name: pgco-marquee-ltr; }

	/* Gradual appearance of the 'load more' cards (load-more.js sets the class and --pgco-i) */
	.pgco-v2 .pgco-appear {
		animation: pgco-rise var(--pgco-motion-slow) var(--pgco-ease) both;
		animation-delay: calc(var(--pgco-i, 0) * var(--pgco-stagger));
	}

	/* Slider: buttons appear on hover/focus (mouse devices only), larger on hover, active dot stretched */
	@media (hover: hover) {
		.pgco-v2 .pgco-slider__btn { opacity: 0; }
		.pgco-v2 .pgco-slider:hover .pgco-slider__btn,
		.pgco-v2 .pgco-slider:focus-within .pgco-slider__btn { opacity: 1; }
		.pgco-v2 .pgco-slider:hover .pgco-slider__btn:disabled { opacity: 0.4; }
	}

	.pgco-v2 .pgco-slider__btn:hover:not(:disabled) { scale: var(--pgco-grow); }
	.pgco-v2 .pgco-slider__btn:active:not(:disabled) { scale: var(--pgco-press); }

	.pgco-v2 .pgco-slider__dot { transition-property: background-color, width, border-radius; }

	/* Buttons, chips, pagination, labels, copy link: subtle lift, press on click */
	.pgco-v2 .pgco-btn:hover { translate: 0 var(--pgco-lift-sm); }
	.pgco-v2 .pgco-btn:active { translate: 0 0; scale: var(--pgco-press); }
	.pgco-v2 :is(.pgco-chips__link, .pgco-labels__link, a.pgco-pagination__item, .pgco-share__copy):hover { translate: 0 var(--pgco-lift-sm); }
	.pgco-v2 :is(.pgco-chips__link, .pgco-labels__link, a.pgco-pagination__item, .pgco-share__copy):active { translate: 0 0; scale: var(--pgco-press); }

	/* 'Load more' breathes slowly while loading */
	.pgco-v2 .pgco-pagination[aria-busy='true'] .pgco-pagination__more { animation: pgco-breathe var(--pgco-motion-slow) var(--pgco-ease) infinite alternate; }

	/* Magazine category box, middle banners, category banner */
	.pgco-v2 .pgco-catbox:hover { translate: 0 var(--pgco-lift); }
	.pgco-v2 .pgco-catbox__img { transition: scale var(--pgco-motion) var(--pgco-ease); }
	.pgco-v2 .pgco-catbox:hover .pgco-catbox__img { scale: var(--pgco-grow); }
	.pgco-v2 .pgco-blog__banner:hover { translate: 0 var(--pgco-lift-sm); }
	.pgco-v2 .pgco-blog__banner-img,
	.pgco-v2 .pgco-banner__img { transition: filter var(--pgco-motion) var(--pgco-ease); }
	.pgco-v2 .pgco-blog__banner:hover .pgco-blog__banner-img,
	.pgco-v2 .pgco-banner:hover .pgco-banner__img { filter: brightness(1.04); }

	/* Section head: the 'view all' arrow moves toward the link (page path, table of contents, small list: animated underline at the top) */
	.pgco-v2 .pgco-section-head__link:hover .pgco-section-head__arrow { translate: calc(var(--pgco-space-half) * -1) 0; }

	/* Accordion: card gets slightly darker on hover */
	.pgco-v2 .pgco-accordion__item:hover { border-color: var(--pgco-gray-4); }

	/* Share: network buttons rise and press */
	.pgco-v2 .pgco-share__link:hover {
		translate: 0 var(--pgco-lift);
		box-shadow: var(--pgco-shadow-lift);
	}

	.pgco-v2 .pgco-share__link:active { translate: 0 0; scale: var(--pgco-press); }

	/* Playlist: larger play button + ripple ring (3 times), poster and thumbnail zoom on hover, row moves slightly forward, previous/next arrows */
	.pgco-v2 .pgco-playlist__poster:hover .pgco-playlist__play { scale: var(--pgco-grow); }
	.pgco-v2 .pgco-playlist__poster-img,
	.pgco-v2 .pgco-playlist__thumb-img { transition: scale var(--pgco-motion-slow) var(--pgco-ease); }
	.pgco-v2 .pgco-playlist__poster:hover .pgco-playlist__poster-img { scale: var(--pgco-zoom); }
	.pgco-v2 .pgco-playlist__item:hover .pgco-playlist__thumb-img { scale: var(--pgco-zoom); }
	.pgco-v2 .pgco-playlist__item:hover,
	.pgco-v2 .pgco-playlist__item[aria-current='true'] { padding-inline-start: calc(var(--pgco-space-3) + var(--pgco-space-half)); }

	.pgco-v2 .pgco-playlist__play::after {
		content: '';
		position: absolute;
		inset: 0;
		z-index: -1;
		border-radius: 50%;
		background: inherit;
		opacity: 0.6;
		animation: pgco-ping var(--pgco-motion-slow) var(--pgco-ease) 3;
	}

	.pgco-v2 .pgco-playlist__nav-btn:first-child:hover svg { translate: var(--pgco-space-half) 0; }
	.pgco-v2 .pgco-playlist__nav-btn:last-child:hover svg { translate: calc(var(--pgco-space-half) * -1) 0; }

	/* 404: elements enter gradually and the number floats gently (3 times) */
	.pgco-v2 .pgco-404 > * {
		animation: pgco-rise var(--pgco-motion-slow) var(--pgco-ease) both;
		animation-delay: calc(var(--pgco-i, 0) * var(--pgco-stagger));
	}

	.pgco-v2 .pgco-404 > :nth-child(2) { --pgco-i: 1; }
	.pgco-v2 .pgco-404 > :nth-child(3) { --pgco-i: 2; }
	.pgco-v2 .pgco-404 > :nth-child(4) { --pgco-i: 3; }
	.pgco-v2 .pgco-404 > :nth-child(5) { --pgco-i: 4; }

	.pgco-v2 .pgco-404 > .pgco-404__code { animation: pgco-rise var(--pgco-motion-slow) var(--pgco-ease) both, pgco-float calc(var(--pgco-motion-slow) * 5) var(--pgco-ease) var(--pgco-motion-slow) 3; }

	/* ---- footer and bottom bar ---- */
	.pgco-v2 .pgco-social__link:hover {
		translate: 0 var(--pgco-lift);
		box-shadow: var(--pgco-shadow-lift);
	}

	.pgco-v2 .pgco-footer__more:hover svg { translate: calc(var(--pgco-space-half) * -1) 0; }

	.pgco-v2 .pgco-bar__link:hover :is(.pgco-bar__img, .pgco-bar__svg) { translate: 0 var(--pgco-lift); }
	.pgco-v2 .pgco-bar__link:active { scale: var(--pgco-press); }

	/* ---- price page and experts (phase 5-d) ---- */
	.pgco-v2 :is(.pgco-price-chip, .pgco-price-hero__link, .pgco-price-quick__link, .pgco-expert__btn) {
		transition-property: color, background-color, border-color, box-shadow, translate, scale;
		transition-duration: var(--pgco-motion);
		transition-timing-function: var(--pgco-ease);
	}

	.pgco-v2 :is(.pgco-price-chip, .pgco-price-quick__link, .pgco-expert__btn):hover {
		translate: 0 var(--pgco-lift);
		box-shadow: var(--pgco-shadow-lift);
	}

	.pgco-v2 :is(.pgco-price-chip, .pgco-price-quick__link, .pgco-expert__btn, .pgco-btn--cta):active { translate: 0 0; scale: var(--pgco-press); }

	.pgco-v2 .pgco-price-quick__icon { transition: translate var(--pgco-motion) var(--pgco-ease); }
	.pgco-v2 .pgco-price-quick__link:hover .pgco-price-quick__icon { translate: calc(var(--pgco-space-half) * -1) 0; }

	.pgco-v2 .pgco-btn--cta:hover { translate: 0 var(--pgco-lift); }

	.pgco-v2 .pgco-expert__img { transition: scale var(--pgco-motion-slow) var(--pgco-ease); }
	.pgco-v2 .pgco-expert:hover .pgco-expert__img { scale: var(--pgco-zoom); }

	/* ---- overlays and large panels: used to live in the components file; motion only here and only when the user allows it ---- */
	.pgco-v2 .pgco-overlay { transition: opacity var(--pgco-motion-pop) var(--pgco-ease); }
	/* Off-canvas: the same time and easing both ways; the root stays visible until the closing slide has finished (visibility flips after the delay, instantly when opening) */
	.pgco-v2 .pgco-offcanvas { transition: visibility 0s linear var(--pgco-offcanvas-duration); }
	.pgco-v2 .pgco-offcanvas[data-open] { transition-delay: 0s; }
	.pgco-v2 .pgco-offcanvas__overlay { transition: opacity var(--pgco-offcanvas-duration) var(--pgco-ease); }
	.pgco-v2 .pgco-offcanvas__panel { transition: transform var(--pgco-offcanvas-duration) var(--pgco-ease); }
	.pgco-v2 .pgco-offcanvas__close { opacity: 0; transition-property: color, background-color, opacity, rotate; }
	.pgco-v2 .pgco-offcanvas[data-open] .pgco-offcanvas__close { opacity: 1; transition-duration: var(--pgco-offcanvas-duration); }
	.pgco-v2 .pgco-megamenu__section { transition: opacity var(--pgco-motion-pop) var(--pgco-ease), visibility 0s linear var(--pgco-motion-pop); }
	.pgco-v2 .pgco-megamenu__section[data-active] { transition-delay: 0s; }
}

/* Call card: the picture pulses gently (like the old Elementor card); the buttons fill from the stripe on hover */
@media (prefers-reduced-motion: no-preference) {
	.pgco-v2 .pgco-callcard__img {
		animation: pgco-callcard-pulse var(--pgco-callcard-pulse) ease-in-out infinite;
	}

	.pgco-v2 .pgco-callcard__btn {
		transition: color 200ms ease-in-out;
	}

	/* The stripe grows over the button (300ms, like the old Elementor card) */
	.pgco-v2 .pgco-callcard__btn::after {
		transition: width 300ms ease-in-out, border-radius 300ms ease-in-out;
	}

	@keyframes pgco-callcard-pulse {
		from,
		to {
			scale: 1;
		}

		50% {
			scale: 1.05;
		}
	}
}

/* Forms and lightbox controls: multi-select, file upload, lightbox buttons (audit 2026-10-20: these had hover states but no motion) */
@media (prefers-reduced-motion: no-preference) {
	.pgco-v2 :is(.pgco-ms__item, .pgco-ms__tag, .pgco-ms__clear, .pgco-ms__apply, .pgco-upload__btn, .pgco-upload__remove, .pgco-lightbox__close, .pgco-lightbox__nav) {
		transition-property: color, background-color, border-color, scale;
		transition-duration: var(--pgco-motion);
		transition-timing-function: var(--pgco-ease);
	}

	.pgco-v2 .pgco-ms__trigger::after {
		transition: rotate var(--pgco-motion) var(--pgco-ease), translate var(--pgco-motion) var(--pgco-ease);
	}

	.pgco-v2 .pgco-ms__panel:not([hidden]) {
		animation: pgco-fade-in var(--pgco-motion) var(--pgco-ease);
	}

	.pgco-v2 :is(.pgco-lightbox__close, .pgco-lightbox__nav):hover {
		scale: var(--pgco-zoom);
	}

	.pgco-v2 :is(.pgco-ms__clear, .pgco-ms__apply, .pgco-upload__btn):active {
		scale: var(--pgco-press);
	}
}


/* ==========================================================================
   Entrance and close motion (audit 2026-10-21, ported from ahanshahr): scroll reveal, section line, first blocks, smooth anchors, panel close fades.
   Light on purpose: opacity/translate/scale only (no layout), one observer (reveal.js), nothing hidden for visitors who reduce motion.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	/* Anchors (table of contents, quick access) glide instead of jumping; the offset comes from --pgco-anchor-offset (scroll-margin-top of the targets) */
	html:has(body.pgco-v2) { scroll-behavior: smooth; }

	/* Scroll reveal: reveal.js adds .pgco-reveal only to items below the fold, then .is-in when they enter, and removes both afterwards */
	.pgco-v2 .pgco-reveal {
		opacity: 0;
		translate: 0 var(--pgco-reveal-shift);
		transition: opacity var(--pgco-reveal-time) ease, translate var(--pgco-reveal-time) var(--pgco-ease);
		transition-delay: calc(var(--pgco-i, 0) * var(--pgco-stagger));
	}

	.pgco-v2 .pgco-reveal.is-in { opacity: 1; translate: none; }

	/* The line after a section title grows from the reading start (the title itself does not fade) */
	.pgco-v2 .pgco-section-head__title.pgco-reveal { opacity: 1; translate: none; transition: none; }
	.pgco-v2 .pgco-section-head__title::after { transform-origin: right; }
	html:not([dir='rtl']) .pgco-v2 .pgco-section-head__title::after { transform-origin: left; }
	.pgco-v2 .pgco-section-head__title.pgco-reveal::after { transition: transform var(--pgco-line-time) var(--pgco-ease) 0.15s; }
	.pgco-v2 .pgco-section-head__title.pgco-reveal:not(.is-in)::after { transform: scaleX(0); }

	/* The breadcrumb and the h1 slide up a little on load (translate only: no opacity, so the h1 is never delayed as LCP) */
	@keyframes pgco-slide-up { from { translate: 0 var(--pgco-rise); } to { translate: 0 0; } }
	.pgco-v2 main.pgco-main > :nth-child(-n + 2) { animation: pgco-slide-up var(--pgco-motion-slow) var(--pgco-ease) backwards; }
	.pgco-v2 main.pgco-main > :nth-child(2) { animation-delay: var(--pgco-stagger); }

	/* Logos lift on hover (like ahanshahr) */
	.pgco-v2 .pgco-home-logo__link { transition: translate var(--pgco-motion) var(--pgco-ease), scale var(--pgco-motion) var(--pgco-ease); }
	.pgco-v2 .pgco-home-logo__link:hover,
	.pgco-v2 .pgco-home-logo__link:focus-visible { translate: 0 var(--pgco-lift); scale: var(--pgco-zoom); }

	/* Mega menu and dropdown panels fade out when they close (they used to vanish at once): they stay in the layout, hidden by visibility after the fade */
	.pgco-v2 :is(.pgco-nav__panel, .pgco-catmenu__panel) {
		display: block;
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--pgco-motion-pop) var(--pgco-ease), visibility 0s linear var(--pgco-motion-pop);
	}

	.pgco-v2 .pgco-nav__panel--simple { display: flex; }

	.pgco-v2 :is(.pgco-nav__panel, .pgco-catmenu__panel)[data-open] {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transition-delay: 0s;
	}

}

/* Reading progress bar of the article (progress.js sets --pgco-progress; the bar is hidden for 'reduce motion') */
@media (prefers-reduced-motion: reduce) {
	.pgco-v2 .pgco-progress { display: none; }
}
