/* Shared spatial design system — pairs with /shared/motion.js. Tokens match the Stackside hero. */
:root {
  --lfb-bg: #f0f3f4;
  --lfb-fg: #000;
  --lfb-accent: #00ff99;
  --lfb-surface: #fdffff;
  --lfb-hairline: rgba(0, 0, 0, 0.1);
  --lfb-hairline-strong: rgba(0, 0, 0, 0.2);
  --lfb-ink-light: #aeff00;
  --lfb-ink-mid: #00bd71;
  --lfb-ink-deep: #007548;
  --lfb-shadow-rest: 0 1px 0 rgba(0, 0, 0, 0.04), 0 10px 30px -18px rgba(0, 40, 20, 0.35);
  --lfb-shadow-lift: 0 2px 0 rgba(0, 0, 0, 0.03), 0 34px 60px -28px rgba(0, 50, 25, 0.55), 0 12px 24px -16px rgba(0, 0, 0, 0.25);
}

/* Tilt surfaces: transforms come from motion.js; light follows the pointer. */
.m-tilt {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  box-shadow: var(--lfb-shadow-rest);
  transition: box-shadow 0.35s ease;
}
.m-tilt.is-lifted { box-shadow: var(--lfb-shadow-lift); }
.m-tilt::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--lx, 50%) var(--ly, 30%), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%);
  opacity: var(--light, 0);
  mix-blend-mode: soft-light;
}
.m-tilt > * { transform: translateZ(0.01px); }
.m-depth-1 { transform: translateZ(18px); }
.m-depth-2 { transform: translateZ(36px); }

/* Separating stacks */
[data-stack-item] {
  translate: var(--sx, 0px) 0 var(--sz, 0px);
  opacity: var(--so, 1);
}
.m-stack { perspective: 1100px; transform-style: preserve-3d; }

/* Ring explorer */
.m-ring {
  position: relative;
  perspective: 1400px;
  transform-style: preserve-3d;
  touch-action: pan-y;
  cursor: grab;
  outline-offset: 6px;
}
.m-ring:active { cursor: grabbing; }
.m-ring > * { position: absolute; left: 50%; top: 50%; will-change: transform, opacity; }

/* Scroll reveals */
[data-reveal] { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal] [data-reveal-child] { opacity: 0; transform: translateY(1rem) rotateX(8deg); transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
[data-reveal].is-in [data-reveal-child] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal] [data-reveal-child] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .m-tilt, [data-stack-item] { transition: none; }
}