/* =========================================================
   MOBILE PERFORMANCE - Product & Service pages
   ---------------------------------------------------------
   Keeps the existing look and animations, but makes them
   cheaper on phones/tablets:
   - scroll-reveal is quicker, shorter and un-staggered, so
     content is on screen by the time it scrolls into view
   - heavy GPU effects (backdrop-filter) and repaint-heavy
     infinite animations (box-shadow / background-position)
     are switched off on small screens
   - honours the OS "reduce motion" setting on every device

   Loaded after each page's inline <style>. Selectors are
   prefixed with "html" so they win over the page's own
   .reveal / .dN rules without needing !important.
   ========================================================= */

@media (max-width: 991px) {

	/* Scroll reveal: shorter distance + duration, no stagger.
	   On a single-column mobile layout the cards are stacked, so
	   a 0.1-0.6s stagger only makes each card appear later. */
	html .reveal,
	html .reveal-left,
	html .reveal-right,
	html .tl-item {
		transition-duration: 0.4s;
		transition-delay: 0s;
	}
	html .reveal       { transform: translateY(16px); }
	html .reveal-left  { transform: translateY(16px); }
	html .reveal-right { transform: translateY(16px); }
	html .d1, html .d2, html .d3,
	html .d4, html .d5, html .d6 { transition-delay: 0s; }

	/* backdrop-filter forces a blur pass over everything behind
	   the element on every frame while scrolling. */
	html .btn-hr-outline,
	html .btn-sap-outline,
	html .screenshot-badge {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	/* Repaint-heavy infinite animations (animating box-shadow or
	   background-position repaints every frame). The cheap
	   transform-only ticker is intentionally left running, and the
	   hero orbs are already display:none at this width. */
	html .hero-eyebrow,
	html .sapphire-badge,
	html .grad-amber,
	html .hero-h1 .grad-gold {
		animation: none;
	}
	html .hero-eyebrow .dot,
	html .sapphire-badge .dot { animation: none; }

	/* Know Your Labels page uses its own reveal classes. */
	html .kyl-page .kyl-reveal {
		transform: translateY(16px);
		transition-duration: 0.4s;
		transition-delay: 0s;
	}
	html .kyl-page .d1, html .kyl-page .d2,
	html .kyl-page .d3, html .kyl-page .d4 { transition-delay: 0s; }

	/* Blurred floating cards sit over the phone mock-up; the blur is
	   recomputed every frame while their float animation runs. */
	html .kyl-page .kyl-float-card {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: rgba(33, 18, 7, 0.96);
	}

	/* Skip layout/paint for sections far below the viewport. 'auto' in
	   contain-intrinsic-size makes the browser remember the real height
	   once a section has been rendered, so the scrollbar doesn't jump. */
	html .hr-section,
	html .hr-section-alt,
	html .sap-section,
	html .kyl-video-section,
	html .kyl-stats {
		content-visibility: auto;
		contain-intrinsic-size: auto 700px;
	}
}

/* Users who ask their device for less motion get none of it. */
@media (prefers-reduced-motion: reduce) {
	html .reveal,
	html .reveal-left,
	html .reveal-right,
	html .tl-item {
		opacity: 1;
		transform: none;
		transition: none;
	}
	html *,
	html *::before,
	html *::after {
		animation-duration: 0.001ms;
		animation-iteration-count: 1;
		transition-duration: 0.001ms;
		scroll-behavior: auto;
	}
}