/* ============================================================================
   FUTURISTIC LAYER — motion & finishing polish for NeoShield.
   Loaded LAST (after quantum-defense-os.css). Visual-only, additive, and built
   entirely on the existing Quantum Defense OS tokens (--accent, --accent-2,
   --ease-out). Progressive-enhancement only: browsers without scroll-driven CSS
   show everything normally, and all motion is disabled for prefers-reduced-motion.
   Revert: delete this file + its <link> in partials/meta_seo.php.
   ========================================================================== */

/* ── Scroll-reveal ──────────────────────────────────────────────────────────
   Content blocks rise + fade as they enter the viewport. Gated by @supports so
   unsupported engines never hide content. Longhand props (no `animation`
   shorthand) so the shorthand can't reset animation-timeline back to auto. ──*/
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .card, .panel, .suite-card, .threat-card, .price-row {
      animation-name: fxRise;
      animation-fill-mode: both;
      animation-timing-function: linear;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
      will-change: opacity, transform;
    }
    /* Light cascade for cards sharing a grid row. */
    .grid > .card:nth-child(2n) { animation-range: entry 4% entry 60%; }
    .grid > .card:nth-child(3n) { animation-range: entry 8% entry 66%; }
  }
}
@keyframes fxRise {
  from { opacity: 0; transform: translateY(28px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ── Scrollbar — quantum-cyan glow (upgrades the base grey thumb) ───────────*/
* { scrollbar-color: rgba(22, 217, 255, .5) transparent; }
*::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
  background-color: rgba(22, 217, 255, .5);
  box-shadow: inset 0 0 8px rgba(22, 217, 255, .45);
}
*::-webkit-scrollbar-thumb:hover { background-color: rgba(22, 217, 255, .78); }

/* ── Safety net: if motion is reduced, nothing hides or moves ──────────────*/
@media (prefers-reduced-motion: reduce) {
  .card, .panel, .suite-card, .threat-card, .price-row {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}