/* ════════════════════════════════════════════════════════════
   PILARES BETA — substitui vídeos por SVG animados condizentes
   com cada pilar (escala / dev constante / suporte)
   ════════════════════════════════════════════════════════════ */

.pillar-card.is-beta .pillar-media-image,
.pillar-card.is-beta video { display: none !important; }

.pillar-card.is-beta .pillar-media { background: transparent; }

.pillar-svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 8px;
}

/* ═══════════ CARD 1 — ESCALA (hub + disparo em massa) ═══════════ */
.pillar-svg--scale .hub-glow {
  transform-box: fill-box;
  transform-origin: center;
  animation: pscale-hub 2.5s ease-in-out infinite;
}
@keyframes pscale-hub {
  0%, 100% { transform: scale(1);   opacity: 0.22; }
  50%      { transform: scale(1.35); opacity: 0.55; }
}

.pillar-svg--scale .scale-dot { opacity: 0; }
.pillar-svg--scale .scale-dot.d1 { animation: ps-d1 2.6s ease-in infinite; }
.pillar-svg--scale .scale-dot.d2 { animation: ps-d2 2.6s ease-in infinite; animation-delay: 0.22s; }
.pillar-svg--scale .scale-dot.d3 { animation: ps-d3 2.6s ease-in infinite; animation-delay: 0.44s; }
.pillar-svg--scale .scale-dot.d4 { animation: ps-d4 2.6s ease-in infinite; animation-delay: 0.66s; }
.pillar-svg--scale .scale-dot.d5 { animation: ps-d5 2.6s ease-in infinite; animation-delay: 0.88s; }
.pillar-svg--scale .scale-dot.d6 { animation: ps-d6 2.6s ease-in infinite; animation-delay: 1.10s; }

@keyframes ps-d1 { 0%{transform:translate(0,0);opacity:0} 10%{opacity:1} 85%{opacity:1} 100%{transform:translate(270px,-70px);opacity:0} }
@keyframes ps-d2 { 0%{transform:translate(0,0);opacity:0} 10%{opacity:1} 85%{opacity:1} 100%{transform:translate(270px,-40px);opacity:0} }
@keyframes ps-d3 { 0%{transform:translate(0,0);opacity:0} 10%{opacity:1} 85%{opacity:1} 100%{transform:translate(270px,-10px);opacity:0} }
@keyframes ps-d4 { 0%{transform:translate(0,0);opacity:0} 10%{opacity:1} 85%{opacity:1} 100%{transform:translate(270px,20px);opacity:0} }
@keyframes ps-d5 { 0%{transform:translate(0,0);opacity:0} 10%{opacity:1} 85%{opacity:1} 100%{transform:translate(270px,50px);opacity:0} }
@keyframes ps-d6 { 0%{transform:translate(0,0);opacity:0} 10%{opacity:1} 85%{opacity:1} 100%{transform:translate(270px,80px);opacity:0} }

.pillar-svg--scale .scale-recv {
  transform-box: fill-box;
  transform-origin: center;
  animation: ps-recv 2.6s ease-in-out infinite;
}
.pillar-svg--scale .scale-recv.r1 { animation-delay: 2.1s; }
.pillar-svg--scale .scale-recv.r2 { animation-delay: 2.32s; }
.pillar-svg--scale .scale-recv.r3 { animation-delay: 2.54s; }
.pillar-svg--scale .scale-recv.r4 { animation-delay: 2.76s; }
.pillar-svg--scale .scale-recv.r5 { animation-delay: 2.98s; }
.pillar-svg--scale .scale-recv.r6 { animation-delay: 3.20s; }

@keyframes ps-recv {
  0%, 90% { transform: scale(1);   opacity: 0.55; }
  95%     { transform: scale(2.1); opacity: 1; }
  100%   { transform: scale(1);   opacity: 0.55; }
}

.pillar-svg--scale .counter {
  opacity: 1;
}

/* ═══════════ CARD 2 — DEV (timeline ascendente) ═══════════ */
.pillar-svg--dev .dev-line {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: pd-draw 5.2s ease-in-out infinite;
}
@keyframes pd-draw {
  0%, 10%   { stroke-dashoffset: 400; }
  60%, 88%  { stroke-dashoffset: 0; }
  100%     { stroke-dashoffset: 400; }
}

.pillar-svg--dev .dev-dot,
.pillar-svg--dev .dev-lbl {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: pd-appear 5.2s ease-in-out infinite;
}
.pillar-svg--dev .dev-dot.v1, .pillar-svg--dev .dev-lbl.l1 { animation-delay: 0.4s; }
.pillar-svg--dev .dev-dot.v2, .pillar-svg--dev .dev-lbl.l2 { animation-delay: 0.95s; }
.pillar-svg--dev .dev-dot.v3, .pillar-svg--dev .dev-lbl.l3 { animation-delay: 1.5s; }
.pillar-svg--dev .dev-dot.v4, .pillar-svg--dev .dev-lbl.l4 { animation-delay: 2.05s; }
.pillar-svg--dev .dev-dot.v5, .pillar-svg--dev .dev-lbl.l5 { animation-delay: 2.6s; }
.pillar-svg--dev .dev-dot.v6, .pillar-svg--dev .dev-lbl.l6 { animation-delay: 3.15s; }

@keyframes pd-appear {
  0%, 5%    { opacity: 0; transform: scale(0.3); }
  14%       { opacity: 1; transform: scale(1.3); }
  22%, 85%  { opacity: 1; transform: scale(1); }
  100%     { opacity: 0; }
}

.pillar-svg--dev .dev-badge {
  opacity: 1;
}

/* ═══════════ CARD 3 — SUPORTE (chat + estrelas + resposta) ═══════════ */
.pillar-svg--support .sup-bubble {
  opacity: 0;
  transform-box: fill-box;
  animation: ps-bubble 5.5s ease-in-out infinite;
}
.pillar-svg--support .sup-bubble.b1 { transform-origin: left center; animation-delay: 0s; }
.pillar-svg--support .sup-bubble.b2 { transform-origin: right center; animation-delay: 0.85s; }

@keyframes ps-bubble {
  0%, 4%   { opacity: 0; transform: translateY(8px) scale(0.9); }
  14%      { opacity: 1; transform: translateY(0)   scale(1.03); }
  22%, 86% { opacity: 1; transform: translateY(0)   scale(1); }
  96%, 100% { opacity: 0; transform: translateY(-4px) scale(0.97); }
}

.pillar-svg--support .rating-wrap {
  opacity: 0;
  animation: ps-rating 5.5s ease-in-out infinite;
  animation-delay: 1.9s;
}
@keyframes ps-rating {
  0%, 5%    { opacity: 0; }
  18%, 86%  { opacity: 1; }
  96%, 100% { opacity: 0; }
}

.pillar-svg--support .star {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: ps-star 5.5s ease-in-out infinite;
}
.pillar-svg--support .star.s1 { animation-delay: 2.15s; }
.pillar-svg--support .star.s2 { animation-delay: 2.30s; }
.pillar-svg--support .star.s3 { animation-delay: 2.45s; }
.pillar-svg--support .star.s4 { animation-delay: 2.60s; }
.pillar-svg--support .star.s5 { animation-delay: 2.75s; }

@keyframes ps-star {
  0%, 35%   { opacity: 0; transform: scale(0.2) rotate(-30deg); }
  45%       { opacity: 1; transform: scale(1.35) rotate(0); }
  55%, 86%  { opacity: 1; transform: scale(1) rotate(0); }
  96%, 100% { opacity: 0; }
}

.pillar-svg--support .timer-wrap {
  opacity: 0;
  animation: ps-timer 5.5s ease-in-out infinite;
  animation-delay: 2.8s;
}
@keyframes ps-timer {
  0%, 5%    { opacity: 0; transform: translateY(4px); }
  18%, 86%  { opacity: 1; transform: translateY(0); }
  100%     { opacity: 0; }
}

.pillar-svg--support .timer-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: ps-blink 1.1s ease-in-out infinite;
  animation-delay: 3s;
}
@keyframes ps-blink {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.8); }
}

/* Reduzir movimento */
@media (prefers-reduced-motion: reduce) {
  .pillar-svg * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}