/**
 * AI Page Inspector — Generated B2B Page MOTION & INTERACTION layer.
 *
 * ADDITIVE companion to generated-page.css. This file adds scroll-reveal
 * entrances, richer hover/focus micro-interactions, and a few accent
 * animations to generated B2B sections WITHOUT changing any markup, class
 * names, slot tokens, or the base layout/colour rules those templates already
 * depend on. Everything here keys off classes/attributes the templates ALREADY
 * emit (data-aipi-section, data-aipi-layout, .aipi-*), plus one runtime hook
 * class (.aipi-reveal / .is-visible) toggled by generated-motion.js.
 *
 * Loaded on the SAME ungated public path as generated-page.css
 * (enqueue_public_generated_styles) so real site visitors — not just logged-in
 * editors — get the motion. It must never be gated behind an editor-only
 * capability check (see the plugin's gating-bug learning).
 *
 * ACCESSIBILITY: every entrance/looping animation is fully disabled under
 * `prefers-reduced-motion: reduce` — content is shown immediately, never
 * trapped in a hidden pre-reveal state. The reveal JS also fails open: if the
 * IntersectionObserver never runs (old browser, JS error, JS disabled), the
 * `.aipi-reveal` opacity is restored by the reduced-motion / no-JS fallbacks
 * below so content is ALWAYS visible.
 */

/* ------------------------------------------------------------------ *
 * 1. Scroll-reveal entrances
 *
 * generated-motion.js adds .aipi-reveal to top-level generated sections on
 * load (setting them to the pre-reveal state), then adds .is-visible as each
 * scrolls into view. We scope the pre-reveal (hidden) state to
 * `.aipi-motion-ready` — a class the SAME script puts on the generated root
 * only AFTER it has successfully registered the observer. That guarantees a
 * no-JS / failed-JS page never hides its content: without .aipi-motion-ready
 * the .aipi-reveal rule below simply doesn't apply.
 * ------------------------------------------------------------------ */

.aipi-motion-ready .aipi-reveal {
	opacity: 0;
	transform: translateY(24px);
	will-change: opacity, transform;
	transition:
		opacity 640ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
}

.aipi-motion-ready .aipi-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Stagger children of a revealed grid/list so cards enter in sequence rather
   than all at once. Kept subtle (short delays) so it reads as polish, not a
   slow cascade. Only applies once the parent section is visible. */
.aipi-motion-ready .aipi-reveal.is-visible .aipi-product-grid > *,
.aipi-motion-ready .aipi-reveal.is-visible .aipi-advantages-grid > *,
.aipi-motion-ready .aipi-reveal.is-visible .aipi-trust-metrics > *,
.aipi-motion-ready .aipi-reveal.is-visible .aipi-timeline-track > *,
.aipi-motion-ready .aipi-reveal.is-visible .aipi-applications-list > *,
.aipi-motion-ready .aipi-reveal.is-visible .aipi-testimonials-grid > *,
.aipi-motion-ready .aipi-reveal.is-visible .aipi-gallery-grid > *,
.aipi-motion-ready .aipi-reveal.is-visible .aipi-logos-row > * {
	animation: aipi-rise-in 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.aipi-motion-ready .aipi-reveal.is-visible .aipi-product-grid > *:nth-child(2),
.aipi-motion-ready .aipi-reveal.is-visible .aipi-advantages-grid > *:nth-child(2),
.aipi-motion-ready .aipi-reveal.is-visible .aipi-trust-metrics > *:nth-child(2),
.aipi-motion-ready .aipi-reveal.is-visible .aipi-timeline-track > *:nth-child(2),
.aipi-motion-ready .aipi-reveal.is-visible .aipi-applications-list > *:nth-child(2),
.aipi-motion-ready .aipi-reveal.is-visible .aipi-testimonials-grid > *:nth-child(2),
.aipi-motion-ready .aipi-reveal.is-visible .aipi-gallery-grid > *:nth-child(2),
.aipi-motion-ready .aipi-reveal.is-visible .aipi-logos-row > *:nth-child(2) {
	animation-delay: 80ms;
}

.aipi-motion-ready .aipi-reveal.is-visible .aipi-product-grid > *:nth-child(3),
.aipi-motion-ready .aipi-reveal.is-visible .aipi-advantages-grid > *:nth-child(3),
.aipi-motion-ready .aipi-reveal.is-visible .aipi-trust-metrics > *:nth-child(3),
.aipi-motion-ready .aipi-reveal.is-visible .aipi-timeline-track > *:nth-child(3),
.aipi-motion-ready .aipi-reveal.is-visible .aipi-applications-list > *:nth-child(3),
.aipi-motion-ready .aipi-reveal.is-visible .aipi-testimonials-grid > *:nth-child(3),
.aipi-motion-ready .aipi-reveal.is-visible .aipi-gallery-grid > *:nth-child(3),
.aipi-motion-ready .aipi-reveal.is-visible .aipi-logos-row > *:nth-child(3) {
	animation-delay: 160ms;
}

.aipi-motion-ready .aipi-reveal.is-visible .aipi-product-grid > *:nth-child(4),
.aipi-motion-ready .aipi-reveal.is-visible .aipi-advantages-grid > *:nth-child(4),
.aipi-motion-ready .aipi-reveal.is-visible .aipi-timeline-track > *:nth-child(4),
.aipi-motion-ready .aipi-reveal.is-visible .aipi-applications-list > *:nth-child(4),
.aipi-motion-ready .aipi-reveal.is-visible .aipi-gallery-grid > *:nth-child(4),
.aipi-motion-ready .aipi-reveal.is-visible .aipi-logos-row > *:nth-child(4) {
	animation-delay: 240ms;
}

.aipi-motion-ready .aipi-reveal.is-visible .aipi-gallery-grid > *:nth-child(5),
.aipi-motion-ready .aipi-reveal.is-visible .aipi-logos-row > *:nth-child(5) {
	animation-delay: 320ms;
}

.aipi-motion-ready .aipi-reveal.is-visible .aipi-logos-row > *:nth-child(6) {
	animation-delay: 400ms;
}

/* Comparison table: rows sweep in top-to-bottom once the section reveals —
   reads as the table "building itself" rather than appearing all at once. */
.aipi-motion-ready .aipi-reveal.is-visible .aipi-comparison-table tbody tr {
	animation: aipi-row-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.aipi-motion-ready .aipi-reveal.is-visible .aipi-comparison-table tbody tr:nth-child(2) {
	animation-delay: 60ms;
}

.aipi-motion-ready .aipi-reveal.is-visible .aipi-comparison-table tbody tr:nth-child(3) {
	animation-delay: 120ms;
}

.aipi-motion-ready .aipi-reveal.is-visible .aipi-comparison-table tbody tr:nth-child(4) {
	animation-delay: 180ms;
}

.aipi-motion-ready .aipi-reveal.is-visible .aipi-comparison-table tbody tr:nth-child(5) {
	animation-delay: 240ms;
}

@keyframes aipi-row-in {
	from {
		opacity: 0;
		transform: translateX(-10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes aipi-rise-in {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------------------------------ *
 * 2. Richer hover / interaction polish
 *
 * Layered on top of the base transitions already in generated-page.css.
 * These are ordinary :hover/:focus-within states — no JS, no observer — so
 * they work regardless of motion preference EXCEPT where they animate
 * (transforms), which the reduced-motion block at the bottom neutralises.
 * ------------------------------------------------------------------ */

/* Hero image: gentle parallax-style lift + shadow bloom on hover. */
.aipi-hero-media {
	perspective: 1000px;
}

.aipi-hero-img {
	transition:
		transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 420ms ease;
}

.aipi-hero-media:hover .aipi-hero-img {
	transform: translateY(-6px) scale(1.012);
	box-shadow: 0 28px 60px rgba(10, 37, 64, 0.22);
}

/* Product cards: media zoom-in-frame on card hover (image scales inside a
   clipped frame instead of the whole card). Requires the card to clip
   overflow — set here so the base template markup needs no change. */
.aipi-product-card {
	overflow: hidden;
	position: relative;
}

.aipi-product-img,
.aipi-applications-img,
.aipi-about-img,
.aipi-imagebox-img,
.aipi-gallery-img {
	transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.aipi-product-card:hover .aipi-product-img {
	transform: scale(1.06);
}

/* A thin accent bar that wipes in along the top of a product card on hover —
   a common, credible B2B "active" affordance. Uses ::after so no markup
   change and it can't interfere with content or the Inspector's element
   selection (pointer-events disabled). */
.aipi-product-card::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--aipi-accent, #3a7bd5);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}

.aipi-product-card:hover::after {
	transform: scaleX(1);
}

/* Advantage cards (dark certification strip): subtle border-glow + lift. */
.aipi-advantage {
	transition:
		transform 240ms ease,
		box-shadow 240ms ease,
		background 240ms ease;
}

.aipi-advantage:hover {
	transform: translateY(-3px);
}

/* Trust metrics: value gets a brief emphasis pulse the first time the strip
   reveals, drawing the eye to the credibility numbers. */
.aipi-motion-ready .aipi-reveal.is-visible .aipi-metric-value {
	animation: aipi-metric-pop 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes aipi-metric-pop {
	0% {
		opacity: 0;
		transform: translateY(10px) scale(0.96);
	}
	60% {
		transform: translateY(0) scale(1.03);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

/* Timeline connector: the numbered step marker fills on hover, reinforcing
   the "process" reading of the section. */
.aipi-timeline-num {
	transition:
		background 260ms ease,
		color 260ms ease,
		transform 260ms ease;
}

.aipi-timeline-step:hover .aipi-timeline-num {
	transform: scale(1.08);
}

/* Gallery: image zoom-in-frame on card hover, same clipped-frame technique
   as product cards, so exhibition/facility photos feel touchable. */
.aipi-gallery-item {
	overflow: hidden;
}

.aipi-gallery-item:hover .aipi-gallery-img {
	transform: scale(1.08);
}

/* Testimonials: quote mark grows subtly on hover, drawing the eye without
   moving the card body (avoids layout jitter across a multi-card row). */
.aipi-testimonial-quote::before {
	display: inline-block;
	transition: transform 260ms ease;
}

.aipi-testimonial:hover .aipi-testimonial-quote::before {
	transform: scale(1.3);
}

/* Comparison table: row highlight tracks the reader's position down the
   table, and the "our standard" column gets a brief glow the first time the
   table reveals so it reads as the answer, not just another column. */
.aipi-comparison-table tbody tr {
	transition: background 160ms ease;
}

.aipi-comparison-table tbody tr:hover {
	background: var(--aipi-surface-alt, #f4f6f8);
}

.aipi-comparison-table tbody tr:hover .aipi-comparison-col-highlight {
	background: var(--aipi-accent, #3a7bd5);
	color: #fff;
}

.aipi-motion-ready .aipi-reveal.is-visible .aipi-comparison-col-highlight {
	animation: aipi-column-glow 1000ms ease-out both;
}

@keyframes aipi-column-glow {
	0% {
		box-shadow: inset 0 0 0 9999px rgba(58, 123, 213, 0.22);
	}
	100% {
		box-shadow: inset 0 0 0 9999px rgba(58, 123, 213, 0);
	}
}

/* FAQ: smooth the native <details> open with a soft answer fade. The marker
   rotation is a pure CSS affordance (no JS). */
.aipi-faq-item {
	transition: box-shadow 220ms ease, border-color 220ms ease;
}

.aipi-faq-item[open] .aipi-faq-answer {
	animation: aipi-fade-slide 300ms ease both;
}

@keyframes aipi-fade-slide {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* CTA: primary button gets a soft sheen sweep on hover — restrained, not
   flashy, and gated out under reduced motion. */
.aipi-cta-btn {
	position: relative;
	overflow: hidden;
}

.aipi-cta-btn::before {
	content: "";
	position: absolute;
	top: 0;
	left: -120%;
	width: 60%;
	height: 100%;
	background: linear-gradient(
		100deg,
		transparent 0%,
		rgba(255, 255, 255, 0.28) 50%,
		transparent 100%
	);
	transform: skewX(-18deg);
	transition: left 620ms ease;
	pointer-events: none;
}

.aipi-cta-btn:hover::before {
	left: 140%;
}

/* Focus-visible: keep keyboard users obvious across all interactive
   generated elements (buttons, links, summaries). Additive to any theme
   focus ring. */
#aipi-generated-root a:focus-visible,
#aipi-generated-root button:focus-visible,
#aipi-generated-root summary:focus-visible {
	outline: 2px solid var(--aipi-accent, #3a7bd5);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ------------------------------------------------------------------ *
 * 3. Reduced-motion + no-JS safety net
 *
 * Under reduced-motion: neutralise every entrance/looping animation and
 * force revealed content to its final, visible state. Also covers the no-JS
 * case indirectly — if JS never adds .aipi-motion-ready, the section-1 hidden
 * state never applies, so content is visible by default.
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.aipi-motion-ready .aipi-reveal,
	.aipi-motion-ready .aipi-reveal.is-visible {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.aipi-motion-ready .aipi-reveal.is-visible .aipi-product-grid > *,
	.aipi-motion-ready .aipi-reveal.is-visible .aipi-advantages-grid > *,
	.aipi-motion-ready .aipi-reveal.is-visible .aipi-trust-metrics > *,
	.aipi-motion-ready .aipi-reveal.is-visible .aipi-timeline-track > *,
	.aipi-motion-ready .aipi-reveal.is-visible .aipi-applications-list > *,
	.aipi-motion-ready .aipi-reveal.is-visible .aipi-testimonials-grid > *,
	.aipi-motion-ready .aipi-reveal.is-visible .aipi-gallery-grid > *,
	.aipi-motion-ready .aipi-reveal.is-visible .aipi-logos-row > *,
	.aipi-motion-ready .aipi-reveal.is-visible .aipi-comparison-table tbody tr,
	.aipi-motion-ready .aipi-reveal.is-visible .aipi-comparison-col-highlight,
	.aipi-motion-ready .aipi-reveal.is-visible .aipi-metric-value,
	.aipi-faq-item[open] .aipi-faq-answer {
		animation: none !important;
	}

	.aipi-hero-media:hover .aipi-hero-img,
	.aipi-product-card:hover .aipi-product-img,
	.aipi-gallery-item:hover .aipi-gallery-img,
	.aipi-testimonial:hover .aipi-testimonial-quote::before,
	.aipi-timeline-step:hover .aipi-timeline-num {
		transform: none !important;
	}

	.aipi-cta-btn::before,
	.aipi-product-card::after {
		transition: none !important;
	}

	#aipi-generated-root * {
		scroll-behavior: auto !important;
	}
}