/*
 * blarg-motion.css — 21st.dev-flavored interaction polish (spec #15)
 * Scope: non-Matrix HTMLs across blarg-suite. Drop-in via:
 *   <link rel="stylesheet" href="/assets/blarg-motion.css">
 * Respects prefers-reduced-motion. CSS-only, no JS.
 */

@media (prefers-reduced-motion: no-preference) {

  /* Smooth defaults on all interactive surfaces */
  :where(a, button, [role="button"], input, select, textarea,
         .card, .pill, .tile, [data-hover], .blarg-btn) {
    transition:
      transform     180ms cubic-bezier(.2,.7,.2,1),
      background    220ms cubic-bezier(.2,.7,.2,1),
      box-shadow    220ms cubic-bezier(.2,.7,.2,1),
      border-color  220ms cubic-bezier(.2,.7,.2,1),
      color         220ms cubic-bezier(.2,.7,.2,1),
      opacity       180ms ease-out,
      filter        220ms ease-out;
    will-change: transform;
  }

  /* Hover lift — subtle and consistent */
  :where(a:hover, button:hover, [role="button"]:hover,
         .card:hover, .pill:hover, .tile:hover, [data-hover]:hover) {
    transform: translateY(-1px);
  }

  /* Active settle */
  :where(a:active, button:active, [role="button"]:active,
         .card:active, .pill:active, .tile:active) {
    transform: translateY(0) scale(.985);
    transition-duration: 90ms;
  }

  /* Focus-visible ring fades in */
  :where(a, button, [role="button"], input, select, textarea):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    transition: outline-offset 140ms cubic-bezier(.2,.7,.2,1),
                outline-color  140ms ease-out;
  }

  /* Image / logo fade-in on load */
  :where(img, svg, picture).blarg-fade-in {
    animation: blarg-fade-in 360ms cubic-bezier(.2,.7,.2,1) both;
  }
  @keyframes blarg-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Theme-toggle glide — when body class flips, surfaces ease the swap */
  :where(body, body *):not(svg *):not(canvas *) {
    transition: background-color 240ms ease-out,
                color            240ms ease-out,
                border-color     240ms ease-out;
  }

  /* Section reveal — applied via .blarg-reveal + IntersectionObserver in future
     work; for now, the keyframes are pre-warmed so add-class is one-line. */
  .blarg-reveal {
    opacity: 0;
    transform: translateY(8px);
  }
  .blarg-reveal.is-in-view {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 420ms cubic-bezier(.2,.7,.2,1),
                transform 420ms cubic-bezier(.2,.7,.2,1);
  }

  /* Card click-to-toggle — flips on aria-expanded */
  :where([aria-expanded="true"]) {
    transition: background 220ms cubic-bezier(.2,.7,.2,1);
  }

  /* Lock badge pulse for data-locked cards from hub.html */
  :where([data-locked="1"]) {
    animation: blarg-lock-pulse 3.2s ease-in-out infinite;
  }
  @keyframes blarg-lock-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .82; }
  }
}

/* ─── ROBINHOOD-INSPIRED GLOW (directive 78133) ───────────────────────────
 * Tasteful glow on: nav/header, buttons/CTAs, accent-colored text.
 * Black body text does NOT glow. White public bg preserved.
 * Uses element's own accent color via CSS custom property cascade.
 * Respects prefers-reduced-motion (glow removed, not dimmed).
 * ─────────────────────────────────────────────────────────────────────── */

:root {
  --glow-purple:  #4C1D95;
  --glow-purple-mid: #7E5BD0;
  --glow-spread:  0 0 10px;
  --glow-spread-lg: 0 0 18px;
}

@media (prefers-reduced-motion: no-preference) {

  /* Nav / header bar glow */
  :where(nav, header, .site-header, .nav-bar, [role="banner"]) {
    box-shadow: var(--glow-spread) rgba(76,29,149,.35),
                var(--glow-spread-lg) rgba(76,29,149,.15);
    transition: box-shadow 240ms cubic-bezier(.2,.7,.2,1);
  }

  /* Buttons and CTAs — glow on idle, intensify on hover */
  :where(button, .blarg-btn, .hero-cta, [role="button"],
         a.cta, a.btn, input[type="submit"], input[type="button"]) {
    box-shadow: var(--glow-spread) rgba(76,29,149,.25);
    transition: box-shadow 220ms cubic-bezier(.2,.7,.2,1),
                transform   180ms cubic-bezier(.2,.7,.2,1);
  }
  :where(button:hover, .blarg-btn:hover, .hero-cta:hover,
         [role="button"]:hover, a.cta:hover, a.btn:hover) {
    box-shadow: var(--glow-spread) rgba(76,29,149,.55),
                var(--glow-spread-lg) rgba(126,91,208,.25);
  }

  /* Accent/purple colored text — text-shadow glow */
  :where(.text-purple, [style*="color: var(--purple)"],
         [style*="color:var(--purple)"], .brand, .accent,
         h1[class*="purple"], h2[class*="purple"],
         .act-num, .coda-label, .brand-title) {
    text-shadow: 0 0 10px rgba(76,29,149,.45),
                 0 0 20px rgba(76,29,149,.20);
  }

  /* Purple-bordered elements — border-glow */
  :where([style*="border.*var(--purple)"],
         .hero-cta, .blarg-btn, .card[data-accent="purple"]) {
    box-shadow: 0 0 8px rgba(76,29,149,.3),
                inset 0 0 6px rgba(76,29,149,.08);
  }

  /* Links that use --purple color */
  :where(a[style*="color:var(--purple)"],
         a[style*="color: var(--purple)"]) {
    text-shadow: 0 0 8px rgba(76,29,149,.35);
  }
  :where(a[style*="color:var(--purple)"]:hover,
         a[style*="color: var(--purple)"]:hover) {
    text-shadow: 0 0 12px rgba(76,29,149,.6),
                 0 0 24px rgba(126,91,208,.25);
  }

}

/* Reduced-motion: kill all animation but keep instant feedback */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}