/* Site-wide design elements and motion. Loaded on every page (see base.njk).
   Buttons and gradient bars are always on. Everything that moves is wrapped so it stays off for visitors
   who ask their device for reduced motion, and the matching script (js/site-motion.js) does not start for them either. */

:root { --sm-grad: linear-gradient(90deg, #F7936B 0%, #A182F4 51%, #56AFFF 100%); }

/* ---------- Buttons: icon tile + label ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 3px 20px 3px 3px;
  background: #FFFFFF; color: #0A0A12; border: 0; border-radius: 10px; font-weight: 600; font-size: 15px; line-height: 1;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn::before {
  content: ""; flex: none; width: 38px; height: 38px; border-radius: 8px;
  background: #080E1C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9h8' stroke-dasharray='1.4 2.6'/%3E%3Cpath d='M10 9h5M11.500 5.500 15 9l-3.500 3.500'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(196, 184, 160, 0.30); color: #0A0A12; }
.nav-cta { padding: 12px 18px; }
.nav-cta::before { display: none; }
.btn-outline {
  padding: 14px 20px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.09); color: #FFFFFF;
  transition: background-color 0.2s ease;
}
.btn-outline:hover { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; }

/* ---------- Progress bars use the gradient ---------- */
.ui-fill, .pf-pfill { background: var(--sm-grad); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Blocks fade up as they come into view */
  .sm-rv {
    opacity: 0; transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.2s ease, box-shadow 0.2s ease;
    transition-delay: var(--d, 0ms);
  }
  .sm-rv.is-in { opacity: 1; transform: none; }

  /* Pictures build row by row, and their bars fill left to right */
  .sm-it { opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.4s ease; transition-delay: calc(0.1s + var(--i, 0) * 60ms); }
  .sm-grp.is-in .sm-it { opacity: 1; transform: none; }
  .sm-bar { clip-path: inset(0 100% 0 0 round 3px); transition: clip-path 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s; }
  .sm-grp.is-in .sm-bar { clip-path: inset(0 0 0 0 round 3px); }

  /* Flow arrows pulse (opacity only, so they keep any rotation they have on phones) */
  .how-arrow, .pf-flowarrow, .cm-sarrow { animation: sm-pulse 2.4s ease-in-out infinite; }
  @keyframes sm-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

  /* Dashed connector lines flow */
  .pf-flow svg [stroke-dasharray] { animation: sm-dash 1.6s linear infinite; }
  @keyframes sm-dash { to { stroke-dashoffset: -18; } }

  /* Status dots breathe */
  .ui-pill i { animation: sm-dot 2s ease-in-out infinite; }
  @keyframes sm-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }

  /* The highlight that steps through a flow */
  .sm-lit {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 1px var(--accent), 0 0 24px rgba(196, 184, 160, 0.22) !important;
    transition: box-shadow 0.4s ease, border-color 0.4s ease, opacity 0.5s ease, transform 0.5s ease;
    transition-delay: 0s !important;
  }
}