/* ChemicallyFired — "Precision Motion" layer (on top of precision.css).
 * Loaded only for the Motion variant: <html data-theme="precision-lab"
 * data-theme-variant="motion">. motion.js drives four custom properties on
 * <html>:
 *   --pl-x, --pl-y    smoothed device tilt (or pointer), -1 .. 1
 *   --pl-depth        parallax depth in px   (owner slider)
 *   --pl-tilt         3D card tilt in degrees (owner slider)
 * Transforms apply only once motion is live (.pl-motion-live), and never
 * under prefers-reduced-motion. Forms (checkout, login, contact) never move.
 */

html[data-theme="precision-lab"][data-theme-variant="motion"] {
  --pl-x: 0;
  --pl-y: 0;
  --pl-depth: 16;
  --pl-tilt: 4;
}

/* Cards: tilt like a panel held in the hand + a little drift. */
html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .product-card,
html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .project-card,
html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .shop-card,
html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .hero-visual,
html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .studio-media,
html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .lab-teaser,
html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .social-card,
html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .collab-panel,
html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .stats-band,
html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .pdp-main-media,
html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .shop-hero {
  transform:
    perspective(1100px)
    rotateX(calc(var(--pl-y) * var(--pl-tilt) * -1deg))
    rotateY(calc(var(--pl-x) * var(--pl-tilt) * 1deg))
    translate3d(calc(var(--pl-x) * var(--pl-depth) * 0.22px), calc(var(--pl-y) * var(--pl-depth) * 0.22px), 0);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

/* The photograph inside each card moves the other way (a window onto depth). */
html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .product-card .product-card-image,
html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .project-media img,
html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .project-media video,
html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .shop-card-media img,
html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .hero-visual img,
html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .hero-visual video,
html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .studio-media img,
html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .pdp-main-media img,
html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .shop-hero-figure img {
  transform:
    scale(calc(1.02 + var(--pl-depth) * 0.0035))
    translate3d(calc(var(--pl-x) * var(--pl-depth) * -1px), calc(var(--pl-y) * var(--pl-depth) * -1px), 0);
  transition: none;
}

/* Instrument overlays float above the surface (move with the tilt). */
html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .pl-element,
html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .pl-specimen-id,
html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .pl-hero-lab,
html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .floating-card,
html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .shop-card-badges,
html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .project-badge,
html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .pl-stat-head {
  transform: translate3d(calc(var(--pl-x) * var(--pl-depth) * 0.55px), calc(var(--pl-y) * var(--pl-depth) * 0.55px), 0);
}

/* Measurement marks drift against the photo. */
html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .pl-crosshair,
html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .pl-crosshair-ring,
html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .pl-coord,
html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .pl-brackets {
  transform: translate3d(calc(var(--pl-x) * var(--pl-depth) * -0.4px), calc(var(--pl-y) * var(--pl-depth) * -0.4px), 0);
}

/* The background grid sits deepest. */
html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .xp-grid {
  transform: translate3d(calc(var(--pl-x) * var(--pl-depth) * -0.3px), calc(var(--pl-y) * var(--pl-depth) * -0.3px), 0);
}

/* A soft specular sheen that slides across photo panels with the tilt. */
html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .hero-visual .pl-hero-overlay::before {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.1) 50%, transparent 62%);
  transform: translate3d(calc(var(--pl-x) * 18%), calc(var(--pl-y) * 10%), 0);
}

/* Touch devices: no live backdrop blur inside moving cards (each blurred layer
   inside a 3D-transformed card costs a lot of GPU memory on phones). */
@media (pointer: coarse) {
  html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .hero-visual *,
  html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .product-card *,
  html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .project-card *,
  html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .shop-card *,
  html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .pdp-main-media *,
  html[data-theme="precision-lab"][data-theme-variant="motion"].pl-motion-live .stats-band {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* --- On-screen controls ------------------------------------------------------ */
html[data-theme="precision-lab"][data-theme-variant="motion"] .pl-motion-ui {
  position: fixed;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
}

html[data-theme="precision-lab"][data-theme-variant="motion"] .pl-motion-btn,
html[data-theme="precision-lab"][data-theme-variant="motion"] .pl-motion-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--lab-border-strong);
  border-radius: 999px;
  background: var(--lab-popover);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: var(--lab-text);
  box-shadow: var(--lab-shadow);
  font-family: var(--lab-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: auto;
}

html[data-theme="precision-lab"][data-theme-variant="motion"] .pl-motion-btn {
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease;
}

html[data-theme="precision-lab"][data-theme-variant="motion"] .pl-motion-btn:hover {
  border-color: var(--lab-orange-line);
}

html[data-theme="precision-lab"][data-theme-variant="motion"] .pl-motion-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

html[data-theme="precision-lab"][data-theme-variant="motion"] .pl-motion-btn svg {
  color: var(--lab-orange);
}

html[data-theme="precision-lab"][data-theme-variant="motion"] .pl-motion-hint {
  order: -1; /* above the flip button, clear of the music switch */
  max-width: calc(100vw - 32px);
  white-space: normal;
  pointer-events: none;
  transition: opacity 500ms ease, transform 500ms ease;
}

html[data-theme="precision-lab"][data-theme-variant="motion"] .pl-motion-hint.is-out {
  opacity: 0;
  transform: translateY(6px);
}

/* Keep clear of the sticky add-to-cart bar on product pages. */
@media (max-width: 899px) {
  html[data-theme="precision-lab"][data-theme-variant="motion"] body:has(.pdp-sticky.enabled.is-visible) .pl-motion-ui {
    bottom: calc(92px + env(safe-area-inset-bottom));
  }
}

/* --- Grid-pillars switch (motion.js gridFall) ----------------------------------
   The layer sits behind the page content (z-index -1 inside <body>), so text
   stays visible throughout. Each pillar's faces paint currentColor (animated
   old -> new colour) with shading on the walls; scale3d(1,1,k) sets its height. */
html[data-theme="precision-lab"].pl-morphing body {
  background: transparent !important;
  transition: none !important; /* cleared at once, so the pillars show */
}

/* The page cross-fades to the new mode instead of switching. */
html[data-theme="precision-lab"].pl-morph body * {
  /* Backgrounds and borders only (cheap); off-screen text just switches. */
  transition: background-color 2.6s ease-in-out, border-color 2.6s ease-in-out !important;
}

/* Text on screen fades too, in 10 small steps: re-rasterising every glyph on
   every frame is what made the switch lag on laptop-size screens. */
html[data-theme="precision-lab"].pl-morph body .pl-morph-vis {
  transition: color 2.6s steps(10, jump-none), background-color 2.6s ease-in-out, border-color 2.6s ease-in-out !important;
}

html[data-theme="precision-lab"] .pl-pillars,
html[data-theme="precision-lab"] .pl-pillars * {
  transition: none !important;
}

html[data-theme="precision-lab"] .pl-pillars {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  perspective: 820px;
  transform-style: preserve-3d;
}

/* GPU pillars (motion.js pillarsGL): one canvas behind the content. */
html[data-theme="precision-lab"] .pl-pillars-gl {
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  display: block;
  pointer-events: none;
}

html[data-theme="precision-lab"] .pl-pillar {
  position: absolute;
  transform-style: preserve-3d;
}

html[data-theme="precision-lab"] .pl-pillar b {
  position: absolute;
  display: block;
  background-color: var(--pl-wall);
  backface-visibility: hidden; /* walls facing away are not drawn */
}

html[data-theme="precision-lab"] .pl-p-top,
html[data-theme="precision-lab"] .pl-p-top2 {
  inset: 0;
  transform: translateZ(var(--pl-h));
  box-shadow: inset 0 0 0 1px var(--pl-line);
}

html[data-theme="precision-lab"] .pl-pillar .pl-p-top {
  background-color: var(--pl-from);
}

/* The new colour, a hair above the old one, fades in (opacity only). */
html[data-theme="precision-lab"] .pl-pillar .pl-p-top2 {
  transform: translateZ(calc(var(--pl-h) + 0.5px));
  background-color: var(--pl-to);
  opacity: 0;
}

html[data-theme="precision-lab"] .pl-p-n {
  left: 0;
  top: 0;
  width: 100%;
  height: var(--pl-h);
  transform-origin: 50% 0;
  transform: rotateX(90deg);
  background-image: linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.12));
}

html[data-theme="precision-lab"] .pl-p-s {
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--pl-h);
  transform-origin: 50% 100%;
  transform: rotateX(-90deg);
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.32));
}

html[data-theme="precision-lab"] .pl-p-w {
  left: 0;
  top: 0;
  width: var(--pl-h);
  height: 100%;
  transform-origin: 0 50%;
  transform: rotateY(-90deg);
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2));
}

html[data-theme="precision-lab"] .pl-p-e {
  right: 0;
  top: 0;
  width: var(--pl-h);
  height: 100%;
  transform-origin: 100% 50%;
  transform: rotateY(90deg);
  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.26));
}

/* --- Grid-fall switch (motion.js gridFall, outside <body>) -------------------- */
html[data-theme="precision-lab"] .pl-gridfall {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: hidden;
  pointer-events: none;
  perspective: 900px;
  transform-style: preserve-3d;
}

html[data-theme="precision-lab"] .pl-gridfall i {
  position: absolute;
  display: block;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* --- The flip transition layer (built by motion.js, outside <body>) ----------- */
html[data-theme="precision-lab"] .pl-shatter {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
}

/* The frozen copy never needs live effects: strip the expensive ones. */
html[data-theme="precision-lab"] .pl-shatter * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  will-change: auto !important;
  animation: none !important;
  transition: none !important;
}

html[data-theme="precision-lab"] .pl-shard {
  position: absolute;
  inset: 0;
  overflow: hidden;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

html[data-theme="precision-lab"] .pl-shatter-page {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 78% -10%, var(--lab-glow), transparent 60%),
    linear-gradient(180deg, var(--lab-bg-2), var(--lab-bg) 420px);
  background-color: var(--lab-bg);
  color: var(--lab-text);
  font-family: var(--lab-font);
}

html[data-theme="precision-lab"] .pl-cracks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

html[data-theme="precision-lab"] .pl-cracks polyline {
  fill: none;
  stroke: var(--lab-orange);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-dasharray: 1600;
  filter: drop-shadow(0 0 6px rgba(255, 90, 31, 0.9));
}

/* Reduced motion: flips cross-fade instead. */
html[data-theme="precision-lab"].pl-mode-fade body,
html[data-theme="precision-lab"].pl-mode-fade body * {
  transition: background-color 280ms ease, color 280ms ease, border-color 280ms ease !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="precision-lab"][data-theme-variant="motion"] .pl-motion-hint {
    display: none;
  }
}

/* Payment pages: keep the pay bar clear (the spin gesture still works). */
html[data-theme="precision-lab"][data-theme-variant="motion"] body.invoice-page .pl-motion-ui,
html[data-theme="precision-lab"][data-theme-variant="motion"] body:has(main.checkout) .pl-motion-ui {
  display: none;
}