/* Strictly·Cash depth layer for the public pages (home and About).
   Presentation only: no layout, copy or colour-token changes.
   Everything here is under html.depth, which motion.js adds only when the visitor has not asked for reduced motion.
   Kept light on purpose: only transform and opacity animate; no blend modes, no blur animations, no permanent will-change. */

/* ---------- Scroll depth: blocks rise in from slightly behind ---------- */
html.depth [data-reveal]:not(.item) {
  transform: perspective(900px) translate3d(0, 24px, -40px) rotateX(-5deg);
  transform-origin: 50% 100%;
  transition: opacity .8s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
html.depth [data-reveal].in:not(.item) { transform: none; }

/* ---------- Kinetic type: headings split into words that rise in (motion.js) ---------- */
.kw { display: inline-block; }

/* ---------- Pointer light on the hovered card (normal blending, hovered card only) ---------- */
html.depth .depth-card { position: relative; }
html.depth .tilt-live::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .14), transparent 60%);
}

/* ---------- Tilt: the hovered card turns toward the pointer, a few degrees at most ---------- */
html.depth .tilt-live {
  transform: perspective(900px) translate3d(0, -4px, 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) !important;
  transition: transform .14s linear, box-shadow .35s var(--ease), opacity .8s var(--ease) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .05), 0 28px 64px -12px rgba(0, 0, 0, .22);
  will-change: transform;
}

/* Printing: nothing stays hidden or turned */
@media print {
  .kw { opacity: 1 !important; transform: none !important; }
  html.depth .tilt-live::after { display: none; }
  html.depth [data-reveal]:not(.item) { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.depth [data-reveal]:not(.item) { transform: none !important; }
}