/* PetHeart premium radar — brand signal system */
html body #main .alerts-cta__visual {
  display: block;
  max-width: 360px;
  min-height: 304px;
  justify-self: center;
}
html body #main .alerts-radar {
  width: 300px;
  height: 300px;
  isolation: isolate;
  filter: drop-shadow(0 20px 34px rgba(72, 3, 27, .24));
}
html body #main .alerts-radar::before {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.16) 0 2%, transparent 3%), radial-gradient(circle, rgba(255,255,255,.08), rgba(255,255,255,0) 62%);
  box-shadow: inset 0 0 34px rgba(255,255,255,.12), 0 0 48px rgba(255,120,162,.18);
  z-index: -1;
}
html body #main .alerts-radar::after {
  content: '';
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.13) 0deg 1deg, transparent 1deg 45deg);
  -webkit-mask: radial-gradient(circle, transparent 0 57%, #000 58% 59%, transparent 60%);
  mask: radial-gradient(circle, transparent 0 57%, #000 58% 59%, transparent 60%);
  opacity: .7;
}
html body #main .alerts-radar__ring { border-color: rgba(255,255,255,.28); box-shadow: 0 0 22px rgba(255,157,190,.10); }
html body #main .alerts-radar__ring--1 { width: 96px; height: 96px; background: radial-gradient(circle, rgba(255,255,255,.14), rgba(255,255,255,.035) 65%, transparent 66%); border-color: rgba(255,255,255,.4); }
html body #main .alerts-radar__ring--2 { width: 180px; height: 180px; border-style: solid; border-color: rgba(255,255,255,.22); }
html body #main .alerts-radar__ring--3 { width: 270px; height: 270px; border-color: rgba(255,255,255,.16); }
html body #main .alerts-radar__sweep {
  inset: 7%;
  background: conic-gradient(from 0deg, rgba(255,255,255,.72) 0deg, rgba(255,159,194,.36) 20deg, rgba(255,255,255,0) 78deg, transparent 360deg);
  mix-blend-mode: screen;
  filter: blur(.2px);
  animation: alerts-radar-spin 5.5s linear infinite;
}
html body #main .alerts-radar__sweep::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 50%; height: 1px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(255,255,255,.8), rgba(255,255,255,0));
  box-shadow: 0 0 12px rgba(255,255,255,.85);
}
html body #main .alerts-radar__dot { background: #FFD7E5; box-shadow: 0 0 0 4px rgba(255,255,255,.14), 0 0 18px 4px rgba(255,143,174,.65); animation: alerts-radar-dot 3.2s ease-in-out infinite; }
html body #main .alerts-radar__dot--2 { animation-delay: -1.1s; }
html body #main .alerts-radar__dot--3 { animation-delay: -2.1s; }
html body #main .alerts-radar__pin { width: 68px; height: 68px; background: rgba(255,255,255,.96); border: 5px solid rgba(255,196,215,.36); box-shadow: 0 12px 30px rgba(60,4,20,.35), 0 0 0 10px rgba(255,255,255,.08), 0 0 30px rgba(255,143,174,.34); animation: alerts-radar-float 3.8s ease-in-out infinite; }
html body #main .alerts-radar__pin .ico { width: 32px; height: 32px; }
html body #main .alerts-radar__chip { bottom: -2px; background: rgba(36,9,20,.72); border-color: rgba(255,218,228,.42); box-shadow: 0 14px 30px -12px rgba(43,24,19,.72), inset 0 1px 0 rgba(255,255,255,.15); }
html body #main .alerts-radar__pulse { background: #FF6F9E; box-shadow: 0 0 0 0 rgba(255,111,158,.75); }
@keyframes alerts-radar-dot { 0%,100% { transform: scale(.86); opacity: .72; } 50% { transform: scale(1.2); opacity: 1; } }
@keyframes alerts-radar-float { 0%,100% { transform: translate(-50%,-50%); } 50% { transform: translate(-50%,calc(-50% - 4px)); } }
@media (max-width: 860px) {
  html body #main .alerts-cta__visual { max-width: 100%; min-height: 244px; margin-top: 8px; }
  html body #main .alerts-radar { width: 230px; height: 230px; }
  html body #main .alerts-radar__ring--1 { width: 76px; height: 76px; }
  html body #main .alerts-radar__ring--2 { width: 138px; height: 138px; }
  html body #main .alerts-radar__ring--3 { width: 208px; height: 208px; }
  html body #main .alerts-radar__pin { width: 56px; height: 56px; }
  html body #main .alerts-radar__pin .ico { width: 27px; height: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  html body #main .alerts-radar__sweep,
  html body #main .alerts-radar__pulse,
  html body #main .alerts-radar__dot,
  html body #main .alerts-radar__pin { animation: none; }
}