/* RTS main site — spatial depth, auto-detected cards (every page except the homepage,
   which already has its own hand-matched .glass-card/.hover-lift treatment in
   spatial-depth.css/js). These page templates don't share a common "card" class, so
   spatial-depth-auto.js tags real card-like elements at runtime with .rts-auto-card
   based on their actual computed style (has a border/shadow + rounded corners already),
   and this file only styles that marker class. No existing markup/classes are touched. */
:root {
  --rts-elev-1: 0 0 0 1px rgba(0,212,255,0.14), 0 16px 36px -14px rgba(0,0,0,0.75), 0 6px 22px rgba(0,212,255,0.12);
  --rts-elev-2: 0 0 0 1px rgba(0,212,255,0.28), 0 30px 56px -16px rgba(0,0,0,0.8), 0 10px 32px rgba(0,212,255,0.2);
  --rts-elev-3: 0 0 0 1.5px rgba(0,212,255,0.55), 0 44px 80px -18px rgba(0,0,0,0.85), 0 0 46px rgba(0,212,255,0.35), 0 14px 38px rgba(0,212,255,0.3);
}

.rts-auto-card {
  box-shadow: var(--rts-elev-1);
  border-color: rgba(0,212,255,0.16) !important;
  transition: transform 350ms cubic-bezier(.16,1,.3,1), box-shadow 350ms cubic-bezier(.16,1,.3,1), border-color 350ms cubic-bezier(.16,1,.3,1);
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(0) scale(1);
  will-change: transform;
}

.rts-auto-card:hover {
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(26px) translateY(-10px) scale(1.03);
  box-shadow: var(--rts-elev-3);
  border-color: rgba(0,212,255,0.6) !important;
}

.rts-auto-card.is-tilting {
  transition: transform 70ms linear, box-shadow 120ms linear, border-color 120ms linear !important;
  box-shadow: var(--rts-elev-3);
  border-color: rgba(0,212,255,0.6) !important;
}

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .rts-auto-card { box-shadow: var(--rts-elev-1); border-color: rgba(0,212,255,0.16) !important; transform: none; }
  .rts-auto-card:hover { box-shadow: var(--rts-elev-2); border-color: rgba(0,212,255,0.32) !important; }
}