/**
 * Scout Demo — Supplemental Styles
 *
 * Most styling comes from:
 *   - css/tailwind.css        (Tailwind utilities)
 *   - css/scout.css           (design tokens, prose, animations)
 *   - css/scout-easy-read.css (easy-read / light-mode overrides — copied from app-web v4)
 *
 * This file adds ONLY what those files don't cover.
 */

/* ============================================
   Message entrance animation
   ============================================ */

@keyframes demo-slide-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-in {
  animation: demo-slide-in 0.3s ease-out;
}

/* ============================================
   Respect reduced motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .animate-slide-in,
  .animate-slide-up {
    animation: none;
  }
}

.h-dvh { height: 100dvh; }

/* ============================================
   Wordmark visibility toggle
   
   Dark mode (default): show wordmark-light.svg
   Easy Read (light mode): show wordmark-dark.svg
   ============================================ */

.wordmark-dark-mode {
  display: block;
}

.wordmark-light-mode {
  display: none;
}

body.easy-read-mode .wordmark-dark-mode {
  display: none !important;
}

body.easy-read-mode .wordmark-light-mode {
  display: block !important;
}