/* Short, bounded bursts: only transform and opacity animate on particles. */
.breakout__burst { position: absolute; z-index: 6; width: 0; height: 0; pointer-events: none; }
.breakout__burst i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; animation: brick-firework .8s cubic-bezier(.15,.65,.3,1) both; }
.breakout__burst i:nth-child(3n) { width: 4px; height: 10px; border-radius: 1px; }
.breakout__burst::before { content: ''; position: absolute; width: 30px; height: 30px; left: -15px; top: -15px; border: 2px solid var(--paper); border-radius: 50%; animation: brick-firework-ring .55s ease-out both; }
@keyframes brick-firework {
  0% { opacity: 1; transform: translate(0,0) scale(.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--spark-x),var(--spark-y)) rotate(var(--spark-turn)) scale(.35); }
}
@keyframes brick-firework-ring {
  from { opacity: .8; transform: scale(.3); }
  to { opacity: 0; transform: scale(2.4); }
}
.hero--refresh .hero__line { opacity: 1; }
.hero--refresh .hero__line-track { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; opacity: .18; stroke-width: 3; }
.hero--refresh .hero__line-traveler { stroke: var(--blue); stroke-width: 5; stroke-dasharray: 3 97; animation: connection-travel 9s linear infinite; opacity: .7; }
.hero--refresh .hero__line-pulse { animation: none; stroke-dashoffset: 100; stroke: #e32238; stroke-width: 7; stroke-dasharray: 8 100; opacity: 0; }
.hero-effects-paused .hero__line-traveler { animation-play-state: paused; }
@keyframes connection-travel { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@media (max-width: 767px) {
  .hero--refresh .hero__line { display: block; left: 0; bottom: 3px; width: 100%; height: 45px; }
  .hero--refresh .hero__line svg { height: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .breakout__burst { display: none; }
  .hero--refresh .hero__line-traveler { animation: none; }
  .hero--refresh .hero__line-pulse { display: none; }
}