@import "tailwindcss";

@layer components{
    html { scroll-behavior: smooth; }

     body {
    background: radial-gradient(circle at 10% 20%, rgba(255,228,230,1) 0%, rgba(255,250,245,1) 80%),
                url('https://www.transparenttextures.com/patterns/bubbles.png');
    background-size: cover;
  }
    @keyframes pulseHighlight {
        0% { box-shadow: 0 0 0 rgba(236, 72, 153, 0); }
        50% { box-shadow: 0 0 25px rgba(236, 72, 153, 0.4); }
        100% { box-shadow: 0 0 0 rgba(236, 72, 153, 0); }
    }
    .highlight-next {
        animation: pulseHighlight 1s ease-out;
    }
}