/* ============================================
   Extra broker logo SVG-like styles & animations
   ============================================ */

/* Headway crown icon */
.broker-headway::before {
  content: '♕';
  font-size: 24px;
  color: #c8a24a;
  display: block;
}

/* Loading shimmer animation for images */
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton {
  background: linear-gradient(90deg, #1e2540 25%, #262d4a 50%, #1e2540 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite;
}

/* Pulse animation for badge */
@keyframes pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,166,35,0.3); }
  50% { box-shadow: 0 0 0 6px rgba(245,166,35,0); }
}

.hero-badge { animation: pulse-gold 2.5s ease-in-out infinite; }

/* Fade in up animation */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-left > * {
  animation: fadeInUp 0.5s ease forwards;
}
.hero-left > *:nth-child(1) { animation-delay: 0.05s; }
.hero-left > *:nth-child(2) { animation-delay: 0.1s; }
.hero-left > *:nth-child(3) { animation-delay: 0.15s; }
.hero-left > *:nth-child(4) { animation-delay: 0.2s; }

.hero-right {
  animation: fadeInUp 0.5s ease 0.2s forwards;
  opacity: 0;
}