/* ═══════════════════════════════════════════════════
   animations.css — Rules entrance & hover micro-interactions
   Companion to js/animations/rulesAnimations.js
   ═══════════════════════════════════════════════════ */

/* ── Initial hidden state for the storybook entrance ─── */
#view-rules .page-header .page-icon,
#view-rules .page-header h2,
#view-rules .page-header p {
  opacity: 0;
}

/* ── Hover glow (JS toggles .is-hovered via anime.js) ── */
.rule-card.is-hovered {
  box-shadow:
    0 8px 30px rgba(255, 158, 200, .14),
    0 0 16px  rgba(162, 155, 254, .08);
  border-color: rgba(255, 158, 200, .18);
}

/* ── Subtle pulsing shimmer on the top gradient bar ──── */
@keyframes barShimmer {
  0%, 100% { opacity: .7; }
  50%      { opacity: 1; }
}
.rule-card.is-hovered::before {
  animation: barShimmer 1.6s ease-in-out infinite;
}


/* ════════════════════════════════════════════════════
   Safety net: show content after 2s even if JS fails
   ════════════════════════════════════════════════════ */
@keyframes safetyReveal {
  to { opacity: 1; transform: none; }
}
#view-rules .page-header .page-icon,
#view-rules .page-header h2,
#view-rules .page-header p {
  animation: safetyReveal 0s 2s both;
}

/* ════════════════════════════════════════════════════
   Reduced-motion fallback
   ════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

  /* Show everything immediately — no JS entrance needed */
  #view-rules .page-header .page-icon,
  #view-rules .page-header h2,
  #view-rules .page-header p,
  .rule-card,
  .rules-footer {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  /* Restore a simple CSS-only hover for accessibility */
  .rule-card {
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  }
  .rule-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .15);
  }

  /* Disable bar shimmer */
  .rule-card.is-hovered::before {
    animation: none;
  }
}