.ab-hero { position: relative; max-width: 620px; margin: 0 auto; }
.ab-hero img {
  width: 100%;
  height: auto;
  display: block;
  clip-path: inset(0 100% 0 0);
  animation: ab-reveal 1.3s cubic-bezier(.6, 0, .2, 1) forwards;
}
.ab-hero .ab-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.ab-bubble {
  animation: ab-bfloat 3.4s ease-in-out 1.8s infinite alternate;
}
.ab-bubble > g {
  opacity: 0;
  animation: ab-fadein .6s ease 1.3s forwards;
}
.ab-dot { fill: #0A0A0A; opacity: 0; animation: ab-think 2.2s ease-in-out infinite; }
.ab-dot.t1 { animation-delay: 1.9s; }
.ab-dot.t2 { animation-delay: 2.2s; }
.ab-dot.t3 { animation-delay: 2.5s; }
@keyframes ab-reveal { to { clip-path: inset(0 0 0 0); } }
@keyframes ab-fadein { to { opacity: 1; } }
@keyframes ab-bfloat { from { transform: translateY(0); } to { transform: translateY(-10px); } }
@keyframes ab-think {
  0%, 15% { opacity: 0; }
  30%, 70% { opacity: 1; }
  85%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-hero img, .ab-bubble, .ab-bubble > g, .ab-dot {
    animation: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}