/* ═══════════════════════════════════════════════════════════
   TRADEPRESS V2.0 — company.css
   ITCSS Layer 3b: Company page components
   — Pipeline Flow banner, Contact Bubbles banner
   ═══════════════════════════════════════════════════════════ */

/* ── Banner: Operational Model ── */
.banner--operational .banner__card { animation: candleCardIn 1.5s ease-out; }
.banner--operational .candle-overlay { z-index: 2; }
.banner--operational .banner__content { z-index: 3; }
.banner--operational .banner__badge { animation: tpFadeDown 0.8s ease-out 0.8s both; }
.banner--operational .banner__title { animation: tpTitleIn 1s ease-out 1s both; }
.banner--operational .banner__text { animation: tpFadeUp 0.8s ease-out 1.2s both; }

/* ── Pipeline Flow overlay ── */
.pipeline-flow {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; overflow: hidden;
}
.pipeline-flow__track {
  display: flex; align-items: center;
  position: relative;
}
.pipeline-flow__node {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5,8,20,0.6);
  border: 2px solid rgba(81,223,245,0.2);
  font-size: .85rem;
  font-weight: 700;
  color: var(--tp-accent);
  flex-shrink: 0;
  opacity: 0;
  animation: pipelineNodeIn 0.5s ease-out forwards;
}
.pipeline-flow__node--1 { animation-delay: 0.3s; }
.pipeline-flow__node--2 { animation-delay: 0.5s; }
.pipeline-flow__node--3 { animation-delay: 0.7s; }
.pipeline-flow__node--4 { animation-delay: 0.9s; }

@keyframes pipelineNodeIn {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}

.pipeline-flow__line {
  width: 30px; height: 2px;
  background: linear-gradient(to right, rgba(81,223,245,0.08), rgba(81,223,245,0.25), rgba(81,223,245,0.08));
  flex-shrink: 0;
}

.pipeline-flow__dot {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tp-accent);
  box-shadow: 0 0 10px var(--tp-accent), 0 0 20px rgba(81,223,245,0.3);
  top: 50%;
  transform: translateY(-50%);
  left: 16px;
  opacity: 0;
  animation: pipelineDot 4s ease-in-out 1.2s infinite;
}

@keyframes pipelineDot {
  0%   { left: 16px;  opacity: 0; }
  5%   { opacity: 1; }
  25%  { left: 86px;  opacity: 1; }
  50%  { left: 156px; opacity: 1; }
  75%  { left: 226px; opacity: 1; }
  90%  { left: 226px; opacity: 1; }
  100% { left: 226px; opacity: 0; }
}

/* ── Banner: Contact & Support ── */
.banner--contact .banner__card { animation: candleCardIn 1.5s ease-out; }
.banner--contact .candle-overlay { z-index: 2; }
.banner--contact .banner__content { z-index: 3; }
.banner--contact .banner__badge { animation: tpFadeDown 0.8s ease-out 0.8s both; }
.banner--contact .banner__title { animation: tpTitleIn 1s ease-out 1s both; }
.banner--contact .banner__text { animation: tpFadeUp 0.8s ease-out 1.2s both; }

/* ── Contact Bubbles overlay ── */
.contact-bubbles {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 1.5rem;
  pointer-events: none; overflow: hidden;
}
.contact-bubbles__bubble {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px 14px 14px 4px;
  background: rgba(5,8,20,0.6);
  border: 2px solid rgba(81,223,245,0.2);
  font-size: 1.4rem;
  color: var(--tp-accent);
  opacity: 0;
  animation: bubbleIn 0.6s ease-out forwards, bubbleFloat 3s ease-in-out infinite;
}
.contact-bubbles__bubble--1 { animation-delay: 0.3s, 0.9s; }
.contact-bubbles__bubble--2 { animation-delay: 0.5s, 1.1s; }
.contact-bubbles__bubble--3 { animation-delay: 0.7s, 1.3s; }

@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(20px) scale(0.8); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes bubbleFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .pipeline-flow__node { width: 32px; height: 32px; font-size: .7rem; }
  .pipeline-flow__line { width: 20px; }
  .contact-bubbles__bubble { width: 44px; height: 44px; font-size: 1.1rem; }
}
@media (max-width: 576px) {
  .pipeline-flow, .contact-bubbles { display: none; }
}