/* PixCraft interactions (production): tactile service cards + ecosystem dimensional flow.
   Transform/opacity only; every element has a complete static state and motion is additive.
   Loaded only where needed (front page / Interaction Lab). */

:root {
  /* Motion tokens */
  --pcs-m-micro: 180ms;       /* hover/press feedback */
  --pcs-m-ui: 320ms;          /* state changes */
  --pcs-m-scene: 700ms;       /* section-level transitions */
  --pcs-m-ambient: 2800ms;    /* entry sequence (ecosystem) */
  --pcs-m-ease: cubic-bezier(0.22, 0.61, 0.36, 1);        /* standard (ease-out, no overshoot) */
  --pcs-m-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);    /* travel along paths */
}

/* -------------------------------------------------------------- B · Tactile cards */
[data-pcs-motion="on"].pcs-motion-on .pcs-v2-cards { perspective: 1100px; }
[data-pcs-motion="on"].pcs-motion-on .e-con.pcs-v2-card,
[data-pcs-motion="on"].pcs-motion-on .e-con.pcs-v2-card:hover {
  transform: translate3d(0, var(--lift, 0px), 0) rotateX(var(--crx, 0deg)) rotateY(var(--cry, 0deg));
  transition: box-shadow var(--pcs-m-ui) var(--pcs-m-ease);
  transform-style: preserve-3d;
}
[data-pcs-motion="on"].pcs-motion-on .e-con.pcs-v2-card.is-tilting { box-shadow: 0 34px 60px -30px rgba(0, 0, 0, 0.72); }
[data-pcs-motion="on"].pcs-motion-on .pcs-v2-card__frag { transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0); }
[data-pcs-motion="on"].pcs-motion-on .e-con.pcs-v2-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(60% 60% at var(--hx, 50%) var(--hy, 30%), rgba(255, 248, 236, 0.14), rgba(255, 248, 236, 0) 70%);
  opacity: var(--hl, 0);
  transition: opacity var(--pcs-m-ui) var(--pcs-m-ease);
}
[data-pcs-motion="on"].pcs-motion-on .e-con.pcs-v2-card--ivory::after { background: radial-gradient(60% 60% at var(--hx, 50%) var(--hy, 30%), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%); }
[data-pcs-motion="on"].pcs-motion-on .pcs-v2-card.is-tilting .pcs-v2-arrow,
.pcs-v2-card:focus-within .pcs-v2-arrow { transform: translateX(3px); }
.pcs-v2-arrow { transition: transform var(--pcs-m-micro) var(--pcs-m-ease); }

/* Keyboard equivalent: focus inside a card gives the same lift + light, without pointer. */
[data-pcs-motion="on"].pcs-motion-on .e-con.pcs-v2-card:focus-within {
  --lift: -5px;
  --hl: 1;
  --hx: 30%;
  --hy: 20%;
  transition: transform var(--pcs-m-ui) var(--pcs-m-ease), box-shadow var(--pcs-m-ui) var(--pcs-m-ease);
  box-shadow: 0 34px 60px -30px rgba(0, 0, 0, 0.72);
}
/* Touch: no tilt; a small press response only. */
@media (hover: none) {
  [data-pcs-motion="on"].pcs-motion-on .e-con.pcs-v2-card { transition: transform var(--pcs-m-micro) var(--pcs-m-ease); }
  [data-pcs-motion="on"].pcs-motion-on .e-con.pcs-v2-card:active { transform: scale(0.99); }
}

/* ------------------------------------------------------ C · Ecosystem dimensional flow */
.pcs-eco3 { position: relative; padding-top: 0.5rem; }
.pcs-eco3 .pcs-v2-flow__line { color: rgba(29, 36, 32, 0.32); }
.pcs-eco3__seg { fill: none; stroke: var(--v2-terra, #b85f3d); stroke-width: 2; stroke-linecap: round; opacity: 0; transition: opacity var(--pcs-m-ui) var(--pcs-m-ease); }
.pcs-eco3__seg.is-hot { opacity: 0.9; }
.pcs-eco3__pulse { fill: var(--v2-terra, #b85f3d); opacity: 0; }
.pcs-eco3__pulse.is-on { opacity: 1; }
.pcs-eco3__pulse-halo { fill: rgba(184, 95, 61, 0.18); opacity: 0; }
.pcs-eco3__pulse-halo.is-on { opacity: 1; }

/* Nodes: shallow 3D "coins" — a rim + contact shadow give thickness without WebGL. */
.pcs-eco3 .pcs-v2-node__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 1rem;
  outline-offset: 6px;
  cursor: default;
}
.pcs-eco3 .pcs-v2-node__btn:focus-visible { outline: 2px solid var(--v2-forest, #173326); }
.pcs-eco3 .pcs-v2-node__dot {
  position: relative;
  transform: translate3d(0, var(--nz, 0px), 0);
  transition: transform var(--pcs-m-ui) var(--pcs-m-ease), box-shadow var(--pcs-m-ui) var(--pcs-m-ease);
  box-shadow:
    0 0 0 8px var(--v2-ivory-lt, #fbf8f1),
    inset 0 -4px 0 rgba(0, 0, 0, 0.18),
    inset 0 2px 0 rgba(255, 255, 255, 0.14),
    0 calc(10px - var(--nz, 0px)) calc(18px - var(--nz, 0px)) -10px rgba(23, 51, 38, 0.55);
}
.pcs-eco3 .pcs-v2-node__label { transition: color var(--pcs-m-ui) var(--pcs-m-ease), transform var(--pcs-m-ui) var(--pcs-m-ease); }
.pcs-eco3 .pcs-v2-node.is-active { --nz: -7px; }
.pcs-eco3 .pcs-v2-node.is-active .pcs-v2-node__label { color: var(--v2-forest, #173326); transform: translateY(-2px); }
.pcs-eco3 .pcs-v2-node.is-active .pcs-v2-node__dot {
  box-shadow:
    0 0 0 8px var(--v2-ivory-lt, #fbf8f1),
    0 0 0 9px rgba(184, 95, 61, 0.35),
    inset 0 -4px 0 rgba(0, 0, 0, 0.18),
    inset 0 2px 0 rgba(255, 255, 255, 0.14),
    0 22px 26px -14px rgba(23, 51, 38, 0.5);
}
.pcs-eco3 .pcs-v2-node.is-adjacent { --nz: -2px; }
.pcs-eco3.has-active .pcs-v2-node:not(.is-active):not(.is-adjacent) .pcs-v2-node__label { color: rgba(29, 36, 32, 0.72); }
.pcs-eco3__rel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Mobile / tablet stack (<= 900px): the existing vertical list; no travel, no elevation. */
@media (max-width: 900px) {
  .pcs-eco3 .pcs-v2-node__btn { flex-direction: row; gap: 1.25rem; }
  .pcs-eco3 .pcs-v2-node.is-active,
  .pcs-eco3 .pcs-v2-node.is-adjacent { --nz: 0px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-pcs-motion="on"].pcs-motion-on .e-con.pcs-v2-card,
  [data-pcs-motion="on"].pcs-motion-on .e-con.pcs-v2-card:hover,
  [data-pcs-motion="on"].pcs-motion-on .e-con.pcs-v2-card:focus-within,
  [data-pcs-motion="on"].pcs-motion-on .pcs-v2-card__frag { transform: none !important; transition: none !important; }
  [data-pcs-motion="on"].pcs-motion-on .e-con.pcs-v2-card::after { display: none; }
  .pcs-v2-arrow, .pcs-v2-card:focus-within .pcs-v2-arrow { transform: none; transition: none; }
  .pcs-eco3 .pcs-v2-node__dot,
  .pcs-eco3 .pcs-v2-node__label,
  .pcs-eco3__seg { transition: none !important; }
  .pcs-eco3 .pcs-v2-node.is-active,
  .pcs-eco3 .pcs-v2-node.is-adjacent { --nz: 0px; }
  .pcs-eco3 .pcs-v2-node.is-active .pcs-v2-node__label { transform: none; }
  .pcs-eco3__pulse, .pcs-eco3__pulse-halo { display: none; }
}

/* ------------------------------------------------------------------ Hero cinematic depth (capable desktops; layers built after idle by interactions.js) */
.pcs-depth { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pcs-depth__stage {
  position: absolute;
  perspective: 1400px;
  opacity: 0;
  transition: opacity var(--pcs-m-micro) linear;
}
.pcs-depth.is-ready .pcs-depth__stage { opacity: 1; }
.pcs-depth__back,
.pcs-depth__light { position: absolute; display: block; will-change: transform; }
.pcs-depth__back { inset: 0; transform: translate3d(var(--bx, 0px), var(--by, 0px), 0) scale(var(--bs, 1)); }
.pcs-hs .pcs-depth .pcs-depth__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; max-width: none; }
.pcs-hs .pcs-depth .pcs-depth__edge { position: absolute; object-fit: fill; max-width: none; }
.pcs-hs .pcs-depth .pcs-depth__devices {
  will-change: transform;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transform-origin: 60% 70%;
  transform: translate3d(var(--fx, 0px), var(--fy, 0px), 0) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg));
}
.pcs-depth__light {
  inset: -12%;
  background: radial-gradient(42% 38% at 58% 34%, rgba(255, 238, 214, 0.34), rgba(255, 238, 214, 0) 70%);
  mix-blend-mode: soft-light;
  transform: translate3d(var(--lx, 0px), var(--ly, 0px), 0);
  opacity: var(--lo, 0);
}
/* When the depth stage is showing, the original image stays underneath (identical pixels). */
@media (prefers-reduced-motion: reduce) { .pcs-depth { display: none; } }