/* ---- Attention touches: shimmer, sparkle, pulse, NEW badge ---- */

/* Shimmer on headline text */
.shimmer-text{
  display:inline-block;
  background: linear-gradient(90deg,#fff 0%,#fff 30%,#e8f3ff 45%,#fff 60%,#fff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size: 200% 100%;
  animation: shimmer 2.8s linear infinite;
}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* Subtle pulse on CTA */
.btn-pulse{ position:relative; overflow:visible; }
.btn-pulse:after{
  content:""; position:absolute; inset:-6px; border-radius:8px;
  box-shadow:0 0 0 0 rgba(0,123,255,.38);
  animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(0,123,255,.38) }
  70%{ box-shadow:0 0 0 18px rgba(0,123,255,0) }
  100%{ box-shadow:0 0 0 0 rgba(0,123,255,0) }
}

/* Sparkles around the image */
.sparkle-wrap{ position:relative; display:block; }
.sparkle-wrap .sp{
  position:absolute; font-size:18px; color:#fff; text-shadow:0 0 8px rgba(255,255,255,.85);
  opacity:0; transform:scale(.6) rotate(0deg);
  animation: twinkle 2.2s ease-in-out infinite;
}
.sparkle-wrap .s1{ top:10%; left:8%;  animation-delay:.2s }
.sparkle-wrap .s2{ top:22%; right:12%; animation-delay:1.1s }
.sparkle-wrap .s3{ bottom:14%; left:18%; animation-delay:1.7s }
.sparkle-wrap .s4{ bottom:8%; right:10%; animation-delay:.6s }
@keyframes twinkle{
  0%,100%{ opacity:0; transform:scale(.6) rotate(0deg) }
  30%{    opacity:1; transform:scale(1) rotate(20deg) }
  70%{    opacity:.35; transform:scale(.8) rotate(10deg) }
}

/* NEW badge with glint */
.badge-new{
  position:relative; display:inline-block; margin-left:8px;
  padding:2px 8px; font-size:12px; letter-spacing:.5px;
  background:#ff4757; color:#fff; border-radius:9999px; font-weight:700;
  text-transform:uppercase;
}
.badge-new:after{
  content:""; position:absolute; top:-30%; left:-30%; width:40%; height:160%;
  transform:rotate(20deg); background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.8) 50%,transparent 100%);
  animation: glint 2.8s ease-in-out infinite;
}
@keyframes glint{ 0%{left:-40%} 100%{left:140%} }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .shimmer-text, .btn-pulse:after, .sparkle-wrap .sp, .badge-new:after { animation:none !important }
}