/* Shared keyframes + custom breakpoints for the dark "Pipeline Intelligence" marketing
   redesign (nav, footer, home, pricing, contact, and the "whole thing" partial).
   Colors/gradients/typography for these pages are literal inline `style=""` values
   ported directly from the design handoff, not Tailwind tokens — see the redesign
   plan for why. This file only holds what inline styles can't express: animations
   and the design's custom responsive breakpoints (980/900/860/760/960), targeted at
   the same `[data-*]` attributes the design files themselves use. */

@keyframes flPing {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.45); }
  70%, 100% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
}

@keyframes flSpin {
  to { transform: rotate(360deg); }
}

@keyframes navPanelIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

@keyframes tamInA {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}
@keyframes tamInB {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}

@keyframes routeA {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes routeB {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes jPing {
  0% { box-shadow: 0 0 0 0 rgba(14, 159, 110, 0.4); }
  70%, 100% { box-shadow: 0 0 0 8px rgba(14, 159, 110, 0); }
}
@keyframes jDotA {
  0%, 34% { background: #2A3050; box-shadow: none; }
  44%, 82% { background: #9B7FFC; box-shadow: 0 0 8px rgba(155, 127, 252, 0.9); }
  94%, 100% { background: #2A3050; }
}
@keyframes jDotB {
  0%, 40% { background: #2A3050; box-shadow: none; }
  50%, 84% { background: #E3CDA9; box-shadow: 0 0 9px rgba(227, 205, 169, 0.9); }
  96%, 100% { background: #2A3050; }
}

/* ===== Nav (980px collapse) ===== */
@media (max-width: 980px) {
  [data-navmain] { display: none !important; }
  [data-navcta] { display: none !important; }
  [data-navmob] { display: inline-flex !important; }
  [data-navcols] { grid-template-columns: 1fr !important; }
}

/* ===== Footer ===== */
@media (max-width: 900px) {
  [data-ethos] { grid-template-columns: 1fr !important; }
}
@media (max-width: 860px) {
  [data-ftcols] { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 760px) {
  [data-freetime] { grid-template-columns: 1fr 1fr !important; gap: 20px 0 !important; }
}

/* ===== Pipeline Intelligence (home) — 980px ===== */
@media (max-width: 980px) {
  [data-hidesm] { display: none !important; }
  [data-flakefixed] { opacity: 0.3; }
  [data-col] { max-width: 100% !important; }
  [data-exstage] { min-height: 560px !important; }
  [data-wfline], [data-wfdot] { display: none !important; }
  [data-wfrow] { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 22px; }
  [data-motions] { grid-template-columns: 1fr !important; }
  [data-roigrid] { grid-template-columns: 1fr !important; }
  [data-roirow] { grid-template-columns: 1fr !important; }
  [data-whyviz] { max-width: 400px !important; }
  [data-whygrid] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-whyhead] { grid-template-columns: 1fr !important; }
  [data-nav] { display: none !important; }
}

/* ===== Pricing — 980px ===== */
@media (max-width: 980px) {
  [data-tiers] { grid-template-columns: 1fr !important; }
  [data-progs] { grid-template-columns: 1fr !important; }
  [data-roihead] { display: none !important; }
  [data-rowtag] { display: block !important; }
  [data-split] { grid-template-columns: 1fr !important; }
}

/* ===== Contact — 760px ===== */
@media (max-width: 760px) {
  [data-pair] { grid-template-columns: 1fr !important; }
}

/* ===== Small interactive-state helper classes =====
   Base/default appearance for these pages stays inline `style=""` (see header
   comment); these classes only hold the *toggled* states that Stimulus flips
   on/off, so the transition itself lives in one place instead of being
   recomputed in JS on every click. */
.fl-nav-item {
  color: #7A7F9C;
  background: transparent;
  transition: color 200ms ease, background 200ms ease;
}
.fl-nav-item:hover,
.fl-nav-item.is-open {
  color: #F2F3FB;
}
.fl-nav-item.is-open {
  background: rgba(124, 58, 237, 0.14);
}
.fl-nav-item.is-current {
  color: #C9B7FF;
}
.fl-nav-caret {
  transition: transform 220ms ease;
  display: inline-block;
}
.fl-nav-item.is-open .fl-nav-caret {
  transform: rotate(180deg);
}

.fl-faq-item {
  border-color: #262B47;
  transition: border-color 250ms ease;
}
.fl-faq-item.is-open {
  border-color: rgba(155, 127, 252, 0.42);
}
.fl-faq-q {
  color: #C6C9DD;
  transition: color 250ms ease;
}
.fl-faq-item.is-open .fl-faq-q {
  color: #F2F3FB;
}
.fl-faq-glyph {
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-block;
}
.fl-faq-item.is-open .fl-faq-glyph {
  transform: rotate(45deg);
}
.fl-faq-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 400ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms ease;
}
.fl-faq-item.is-open .fl-faq-panel {
  max-height: 480px;
  opacity: 1;
}

.fl-nav-panel-link {
  transition: border-color 200ms ease, background 200ms ease;
}
.fl-nav-panel-link:hover {
  border-color: #262B47 !important;
  background: rgba(124, 58, 237, 0.08);
}
.fl-nav-solution-card {
  transition: border-color 220ms ease, background 220ms ease;
}
.fl-nav-solution-card:hover {
  border-color: #9B7FFC !important;
  background: rgba(124, 58, 237, 0.10);
}

.fl-footer-link {
  transition: color 200ms ease;
}
.fl-footer-link:hover {
  color: #F2F3FB !important;
}
.fl-freetime-cell {
  transition: border-left-color 260ms ease;
}
.fl-freetime-cell:hover {
  border-left-color: #2C3154 !important;
}
.fl-freetime-emoji {
  transition: filter 260ms cubic-bezier(0.16, 1, 0.3, 1), opacity 260ms cubic-bezier(0.16, 1, 0.3, 1), transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-block;
}
.fl-freetime-cell:hover .fl-freetime-emoji {
  filter: saturate(1);
  opacity: 1;
  transform: translateY(-3px);
}

.fl-why-card {
  transition: border-color 220ms ease, background 220ms ease;
}
.fl-why-card:hover {
  border-color: #9B7FFC !important;
  background: rgba(124, 58, 237, 0.10);
}

/* ===== "Whole Thing" partial — 960px ===== */
@media (max-width: 960px) {
  [data-panelgrid] { grid-template-columns: 1fr !important; }
  [data-rail] { display: none !important; }
  [data-stagewrap] { height: auto !important; }
  [data-sticky] { position: static !important; height: auto !important; overflow: visible !important; padding-top: 0 !important; }
  [data-stackwrap] { display: block !important; }
  [data-stack] { display: flex !important; flex-direction: column !important; gap: 18px !important; transform: none !important; max-width: 640px !important; }
  [data-panel] { grid-area: auto !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
}