/* ============================================================================
   Cult Shield · Polish layer (v5)
   Additive depth + motion refinements. Loads AFTER base.css so its rules win
   ties. No palette, type, or structure changes. Safe to delete wholesale.
   ============================================================================ */

/* ----- Nav: gain elevation once the page scrolls --------------------------- */

.cs-nav {
  transition: box-shadow var(--cs-base) var(--cs-ease),
              border-color var(--cs-base) var(--cs-ease),
              background var(--cs-base) var(--cs-ease);
}
.cs-nav.is-scrolled {
  background: rgba(255, 255, 255, 0.97);
  border-bottom-color: var(--cs-border);
  box-shadow: var(--cs-shadow-sm);
}

/* ----- Cards: deeper, springier hover --------------------------------------- */

.cs-card:hover {
  box-shadow: var(--cs-shadow-lg);
  transform: translateY(-3px);
}

.cs-card .icon {
  transition: transform var(--cs-base) var(--cs-ease),
              background var(--cs-base) var(--cs-ease);
}
.cs-card:hover .icon {
  transform: scale(1.07) translateY(-1px);
  background: rgba(13, 148, 136, 0.14);
}

.cs-card .link svg { transition: transform var(--cs-fast) var(--cs-ease); }
.cs-card .link:hover svg { transform: translateX(3px); }

/* ----- Buttons: press feedback for every variant ---------------------------- */

.cs-btn:active { transform: translateY(1px); }
.cs-btn-primary:active { transform: translateY(0); }

/* ----- Keyboard focus ring, brand colored ----------------------------------- */

.cs-btn:focus-visible,
.cs-nav-link:focus-visible,
.cs-nav-brand:focus-visible,
.cs-card .link:focus-visible {
  outline: 2px solid var(--cs-teal);
  outline-offset: 3px;
  border-radius: var(--cs-r-md);
}

/* ----- Hero mockup: GPU hint while the scroll/tilt compositor drives it ---- */

.cs-hero-mockup.is-plx { will-change: transform; }

/* ----- Reduced motion: kill everything above -------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cs-card:hover,
  .cs-card:hover .icon,
  .cs-card .link:hover svg,
  .cs-btn:active { transform: none; }
}