/* ============================================
   ANIMATIONS -- CS Help Blueprint
   ============================================ */

/* 1. Hero -- static, no animation overhead */

/* 2. Ingress source stagger -- applied by JS */
.ing-src-hidden {
  opacity: 0;
  transform: translateY(8px);
}
.ing-src-show {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* 3. Count-up fade */
.count-fade {
  opacity: 0.3;
  transition: opacity 0.5s ease;
}
.count-done {
  opacity: 1;
  transition: opacity 0.5s ease;
}

/* 4. Funnel cascade -- applied by JS */
.funnel-hidden {
  opacity: 0;
  transform: translateY(12px);
}
.funnel-show {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 5. Closing mic drop -- applied by JS */
.closing-hidden {
  opacity: 0;
  transform: translateY(20px);
}
.closing-show {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.closing-show .closing-headline {
  animation: mic-fade 0.5s ease 0.2s both;
}
.closing-show .closing-body {
  animation: mic-fade 0.5s ease 0.4s both;
}
.closing-show .closing-cta {
  animation: mic-fade 0.5s ease 0.6s both;
}
@keyframes mic-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 6. Wedge fade */
.ramp-svg {
  transition: opacity 0.8s ease;
}

/* 7. Blueprint entrance -- comet strip + row cascade */

/* Comet sweep across journey row top border */
.bp-journey {
  position: relative;
}
.bp-comet {
  position: absolute;
  top: -2px;
  left: 0;
  width: 120px;
  height: 5px;
  background: linear-gradient(90deg, transparent 0%, rgba(107,138,173,0.3) 20%, rgba(138,118,160,0.6) 50%, rgba(155,68,68,0.3) 80%, transparent 100%);
  border-radius: 3px;
  pointer-events: none;
  z-index: 10;
  will-change: transform;
}
/* Dark mode: softer, cooler comet */
.dark .bp-comet {
  background: linear-gradient(90deg, transparent 0%, rgba(107,138,173,0.2) 20%, rgba(148,163,184,0.4) 50%, rgba(155,68,68,0.2) 80%, transparent 100%);
}
/* Warm mode: warm-toned comet */
.warm .bp-comet {
  background: linear-gradient(90deg, transparent 0%, rgba(46,104,136,0.3) 20%, rgba(110,78,136,0.5) 50%, rgba(168,56,56,0.3) 80%, transparent 100%);
}

/* Column border starts hidden, reveals with stagger */
.bp-journey .bp-c.border-hidden {
  border-top-color: transparent !important;
}
.bp-journey .bp-c.border-reveal {
  transition: border-top-color 0.4s ease;
}

/* Blueprint rows below journey -- subtle entrance, never fully hidden */
.bp-row.bp-row-hidden {
  opacity: 0.4;
}
.bp-row.bp-row-show {
  opacity: 1;
  transition: opacity 0.15s ease;
}
/* Dividers */
.bp-div.bp-row-hidden {
  opacity: 0.4;
}
.bp-div.bp-row-show {
  opacity: 1;
  transition: opacity 0.15s ease;
}