/* ========== FEATURE ICONS (animated) ==========
   Drop-in for the .feature-emoji boxes in #features.
   Animations play on card hover / keyboard focus (desktop) and once when the card
   scrolls into view on touch devices (.is-inview, set by feature-icons.js).
   The icon fills the whole 44 px box; the tinted tile behind it is removed. */

.feature-emoji.purple,
.feature-emoji.rose,
.feature-emoji.amber,
.feature-emoji.emerald {
  background: none;
  justify-content: flex-start;
}
.feature-emoji {
  width: 44px;
  height: 44px;
}
.feature-card:not(.wide),
.feature-card.wide > div:first-child {
  grid-template-columns: 44px 1fr;
}
.feature-emoji svg {
  width: 44px;
  height: 44px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feature-emoji.purple { color: #a78bfa; }
.feature-emoji.rose { color: #fb7185; }
.feature-emoji.amber { color: #fbbf24; }
.feature-emoji.emerald { color: #34d399; }

/* ---- 1. Autonomous Recognition: a star lights up inside the message, sparks fly ---- */
.fi-recog .star {
  transform-origin: 12px 10.5px;
  fill: transparent;
  transition: fill 0.2s;
}
.fi-recog .spark {
  stroke-width: 1.2;
  opacity: 0;
}
@keyframes fi-star-pop {
  0% { transform: scale(1) rotate(0deg); }
  35% { transform: scale(0.4) rotate(-40deg); }
  70% { transform: scale(1.25) rotate(8deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes fi-spark {
  0% { opacity: 0; transform: translate(0, 0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
}

/* ---- 2. Burnout Radar: the sweep turns, a signal pings ---- */
.fi-radar .ring-inner { opacity: 0.45; }
.fi-radar .sweep { transform-origin: 12px 12px; }
.fi-radar .wedge { fill: currentColor; stroke: none; opacity: 0.22; }
.fi-radar .blip { fill: currentColor; stroke: none; opacity: 0.35; transform-origin: 17.2px 15px; }
.fi-radar .ping { stroke-width: 1; opacity: 0; transform-origin: 17.2px 15px; }
@keyframes fi-sweep {
  to { transform: rotate(360deg); }
}
@keyframes fi-blip {
  0%, 24% { opacity: 0.35; transform: scale(1); }
  33% { opacity: 1; transform: scale(1.6); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes fi-ping {
  0%, 25% { opacity: 0; transform: scale(0.5); }
  35% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(3); }
}

/* ---- 3. Culture Dashboard: the bars re-measure ---- */
.fi-dash .bar {
  /* keep the outline 2.4 px while the bar is squashed and stretched */
  vector-effect: non-scaling-stroke;
  stroke-width: 2.4px;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
@keyframes fi-bar {
  0% { transform: scaleY(1); }
  30% { transform: scaleY(0.25); }
  70% { transform: scaleY(1.18); }
  100% { transform: scaleY(1); }
}
/* the team bars in the wide card refill too */
@keyframes fi-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.feature-card.wide .pulse-fill { transform-origin: 0 50%; }

/* ---- 4. Zero Friction: one switch, and it's on ---- */
.fi-toggle .track-fill { fill: currentColor; stroke: none; opacity: 0; transition: opacity 0.3s; }
.fi-toggle .knob { fill: currentColor; stroke: none; transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.fi-toggle .tick { stroke: #0b1f18; stroke-width: 1.6; stroke-dasharray: 5; stroke-dashoffset: 5; transition: stroke-dashoffset 0.25s ease-out, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ---- Triggers ---- */
@media (hover: hover) {
  .feature-card:hover .fi-recog .star,
  .feature-card:focus-within .fi-recog .star { animation: fi-star-pop 0.7s cubic-bezier(0.34, 1.3, 0.64, 1); fill: currentColor; }
  .feature-card:hover .fi-recog .spark,
  .feature-card:focus-within .fi-recog .spark { animation: fi-spark 0.7s ease-out 0.3s; }

  .feature-card:hover .fi-radar .sweep,
  .feature-card:focus-within .fi-radar .sweep { animation: fi-sweep 1.3s cubic-bezier(0.45, 0, 0.25, 1); }
  .feature-card:hover .fi-radar .blip,
  .feature-card:focus-within .fi-radar .blip { animation: fi-blip 1.3s ease-out forwards; }
  .feature-card:hover .fi-radar .ping,
  .feature-card:focus-within .fi-radar .ping { animation: fi-ping 1.3s ease-out; }

  .feature-card:hover .fi-dash .bar,
  .feature-card:focus-within .fi-dash .bar { animation: fi-bar 0.8s cubic-bezier(0.34, 1.3, 0.64, 1) backwards; }
  .feature-card:hover .fi-dash .b2 { animation-delay: 0.08s; }
  .feature-card:hover .fi-dash .b3 { animation-delay: 0.16s; }
  .feature-card.wide:hover .pulse-fill { animation: fi-fill 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
  .feature-card.wide:hover .pulse-row:nth-child(2) .pulse-fill { animation-delay: 0.06s; }
  .feature-card.wide:hover .pulse-row:nth-child(3) .pulse-fill { animation-delay: 0.12s; }
  .feature-card.wide:hover .pulse-row:nth-child(4) .pulse-fill { animation-delay: 0.18s; }
  .feature-card.wide:hover .pulse-row:nth-child(5) .pulse-fill { animation-delay: 0.24s; }

  .feature-card:hover .fi-toggle .knob,
  .feature-card:focus-within .fi-toggle .knob,
  .feature-card:hover .fi-toggle .tick,
  .feature-card:focus-within .fi-toggle .tick { transform: translateX(8px); }
  .feature-card:hover .fi-toggle .tick,
  .feature-card:focus-within .fi-toggle .tick { stroke-dashoffset: 0; transition-delay: 0.25s, 0s; }
  .feature-card:hover .fi-toggle .track-fill,
  .feature-card:focus-within .fi-toggle .track-fill { opacity: 0.22; }
}

/* Touch screens: play once when the card scrolls into view */
@media (hover: none) {
  .feature-card.is-inview .fi-recog .star { animation: fi-star-pop 0.7s cubic-bezier(0.34, 1.3, 0.64, 1) 0.2s backwards; fill: currentColor; }
  .feature-card.is-inview .fi-recog .spark { animation: fi-spark 0.7s ease-out 0.5s; }
  .feature-card.is-inview .fi-radar .sweep { animation: fi-sweep 1.3s cubic-bezier(0.45, 0, 0.25, 1) 0.2s; }
  .feature-card.is-inview .fi-radar .blip { animation: fi-blip 1.3s ease-out 0.2s forwards; }
  .feature-card.is-inview .fi-radar .ping { animation: fi-ping 1.3s ease-out 0.2s; }
  .feature-card.is-inview .fi-dash .bar { animation: fi-bar 0.8s cubic-bezier(0.34, 1.3, 0.64, 1) 0.2s backwards; }
  .feature-card.is-inview .fi-dash .b2 { animation-delay: 0.28s; }
  .feature-card.is-inview .fi-dash .b3 { animation-delay: 0.36s; }
  .feature-card.wide.is-inview .pulse-fill { animation: fi-fill 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s backwards; }
  .feature-card.is-inview .fi-toggle .knob,
  .feature-card.is-inview .fi-toggle .tick { transform: translateX(8px); transition-delay: 0.3s; }
  .feature-card.is-inview .fi-toggle .tick { stroke-dashoffset: 0; transition-delay: 0.55s, 0.3s; }
  .feature-card.is-inview .fi-toggle .track-fill { opacity: 0.22; transition-delay: 0.3s; }
}

@media (prefers-reduced-motion: reduce) {
  .feature-emoji *,
  .feature-card .pulse-fill { animation: none !important; transition: none !important; }
}