/* Entrada del hero en CSS puro: arranca con el primer pintado, sin esperar a GSAP.
   Todo termina antes de ~1,1 s y el contenido empieza a aparecer a los 100 ms. */
@media (prefers-reduced-motion:no-preference){
  .bubble-hero{animation:q-pop .75s cubic-bezier(.3,1.5,.5,1) .1s both}
  .hero-h1 .w{display:inline-block;animation:q-word .55s cubic-bezier(.2,.9,.3,1.25) both;animation-delay:calc(.22s + var(--i) * .045s)}
  .hero-eyebrow{animation:q-fade .45s ease both}
  .hero-sub{animation:q-fade .5s ease .45s both}
  .hero-ctas{animation:q-fade .5s ease .55s both}
  .pg-inner .hero-h1{animation:q-fade .55s ease .1s both}
  .pg-inner .bubble{animation:q-pop-flat .6s cubic-bezier(.3,1.5,.5,1) .15s both}
}
@keyframes q-pop{
  0%{transform:scale(0) rotate(-16deg)}
  60%{transform:scale(1.1) rotate(-1deg)}
  80%{transform:scale(.97) rotate(-3.5deg)}
  100%{transform:scale(1) rotate(-3deg)}
}
@keyframes q-pop-flat{0%{transform:scale(0) rotate(-8deg)}65%{transform:scale(1.08) rotate(1deg)}100%{transform:scale(1) rotate(0)}}
@keyframes q-word{from{opacity:0;transform:translateY(.55em) scale(.85) rotate(-4deg)}to{opacity:1;transform:none}}
@keyframes q-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .sello-hero{animation:q-stamp .5s cubic-bezier(.3,1.6,.5,1) .05s both}
}
@keyframes q-stamp{0%{opacity:0;transform:scale(2.2) rotate(-12deg)}70%{opacity:1;transform:scale(.94) rotate(-1deg)}100%{transform:scale(1) rotate(-2deg)}}